-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: hassu 990 suunnitelmakortit (#359)
* scriptit uudelle macille * Desktop-näkymän projektikortin muotoilu. * Mobiilinäkymä kuntoon * Aseta käännös otsikolle * Lisää escape siltä varalta että projektityyppi on null
- Loading branch information
1 parent
0ec08a4
commit 3c61b36
Showing
7 changed files
with
199 additions
and
37 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| version: "3.8" | ||
| services: | ||
| localstack: | ||
| image: localstack/localstack:0.14.1 | ||
| ports: | ||
| - "4566-4584:4566-4584" | ||
| - "${PORT_WEB_UI-8080}:${PORT_WEB_UI-8080}" | ||
| environment: | ||
| - SERVICES=dynamodb,sts,cloudformation,ssm,s3,iam,kms,events,lambda | ||
| - DEFAULT_REGION=eu-west-1 | ||
| - DEBUG=1 | ||
| - DATA_DIR=${DATA_DIR- } | ||
| - PORT_WEB_UI=${PORT_WEB_UI- } | ||
| - DOCKER_HOST="unix:///var/run/docker.sock" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,72 @@ | ||
| import { ProjektiHakutulosJulkinen } from "@services/api"; | ||
| import { experimental_sx as sx, styled } from "@mui/material"; | ||
| import { ProjektiHakutulosJulkinen, Status } from "@services/api"; | ||
| import { ProjektinTila, Suunnitelmatyyppi, OtsikkoLinkki, OtsikkoLinkkiMobiili, HakutulosListaItem, HakutulosLista, ProjektinTilaMobiili, Kuvaus } from "./TyylitellytKomponentit"; | ||
| import useTranslation from "next-translate/useTranslation"; | ||
| import { formatDate } from "../../util/dateUtils"; | ||
| import { useTheme } from '@mui/material/styles'; | ||
| import useMediaQuery from '@mui/material/useMediaQuery'; | ||
|
|
||
| type Props = { | ||
| hakutulos: ProjektiHakutulosJulkinen | undefined; | ||
| ladataan: boolean | undefined | null; | ||
| }; | ||
|
|
||
|
|
||
|
|
||
| function getSivuTilanPerusteella(tila: Status | null | undefined) { | ||
| if (!tila) { | ||
| return ""; | ||
| } | ||
| switch (tila) { | ||
| case Status.ALOITUSKUULUTUS: | ||
| return "aloituskuulutus"; | ||
| case Status.SUUNNITTELU: | ||
| return "suunnitteluvaihe"; | ||
| case Status.NAHTAVILLAOLO: | ||
| return "nahtavillaolo"; | ||
| case Status.HYVAKSYMISMENETTELYSSA: | ||
| return "hyvaksymismenettelyssa"; | ||
| case Status.HYVAKSYTTY: | ||
| return "hyvaksymispaatos"; | ||
| default: | ||
| return ""; | ||
| } | ||
| } | ||
|
|
||
| export default function Hakutulokset({ hakutulos, ladataan }: Props) { | ||
| const theme = useTheme(); | ||
| const desktop = useMediaQuery(theme.breakpoints.up('lg')); | ||
| const { t } = useTranslation(); | ||
|
|
||
| if (!hakutulos && ladataan) { | ||
| return <>Ladataan...</>; | ||
| } | ||
|
|
||
| return ( | ||
| <HakutulosLista className="Hakutulokset"> | ||
| {hakutulos?.tulokset?.map((tulos) => ( | ||
| <HakutulosListaItem key={tulos.oid}>{tulos.oid}</HakutulosListaItem> | ||
| ))} | ||
| {hakutulos?.tulokset?.map((tulos) => { | ||
|
|
||
| if (desktop) { | ||
| return ( | ||
| <HakutulosListaItem key={tulos.oid}> | ||
| <OtsikkoLinkki href={`suunnitelma/${tulos.oid}/${getSivuTilanPerusteella(tulos.vaihe)}`}>{tulos.nimi}</OtsikkoLinkki> | ||
| <Suunnitelmatyyppi>{t(`projekti:projekti-tyyppi.${tulos.projektiTyyppi}`)}</Suunnitelmatyyppi> | ||
| <ProjektinTila>{t(`projekti:projekti-status.${tulos.vaihe}`)}</ProjektinTila> | ||
| <Kuvaus>{tulos.hankkeenKuvaus}</Kuvaus> | ||
| {t("projekti:ui-otsikot.paivitetty")}{" "}{formatDate(tulos.paivitetty)} | ||
| </HakutulosListaItem> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <HakutulosListaItem key={tulos.oid}> | ||
| <OtsikkoLinkkiMobiili href={`suunnitelma/${tulos.oid}/${getSivuTilanPerusteella(tulos.vaihe)}`}>{tulos.nimi}</OtsikkoLinkkiMobiili> | ||
| <ProjektinTilaMobiili>{t(`projekti:projekti-status.${tulos.vaihe}`)}</ProjektinTilaMobiili> | ||
| {t("projekti:ui-otsikot.paivitetty")}{" "}{formatDate(tulos.paivitetty)} | ||
| </HakutulosListaItem> | ||
| ); | ||
| })} | ||
| </HakutulosLista> | ||
| ); | ||
| } | ||
|
|
||
| const HakutulosLista = styled("ol")( | ||
| sx({ | ||
| width: "100%", | ||
| marginLeft: 0, | ||
| listStyle: "none", | ||
| borderRight: "1px solid #F7F7F7", | ||
| }) | ||
| ); | ||
|
|
||
| const HakutulosListaItem = styled("li")(() => | ||
| sx({ | ||
| "&:nth-of-type(odd)": { | ||
| backgroundColor: "#F7F7F7", | ||
| }, | ||
| "&:nth-of-type(even)": { | ||
| backgroundColor: "white", | ||
| }, | ||
| borderBottom: "solid 2px #49c2f1", | ||
| padding: 7, | ||
| }) | ||
| ); | ||
|
|
98 changes: 98 additions & 0 deletions
98
src/components/kansalaisenEtusivu/TyylitellytKomponentit.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| import { experimental_sx as sx, styled } from "@mui/material"; | ||
| import Link from "@components/HassuLink"; | ||
|
|
||
| const Tagi = styled('div')( | ||
| sx({ | ||
| backgroundColor: "white", | ||
| color: "#0063AF", | ||
| border: "1px solid #0063AF", | ||
| textAlign: "center", | ||
| display: "inline-block", | ||
| padding: "5 5 10 10", | ||
| marginTop: "1em", | ||
| marginRight: "1em" | ||
| }) | ||
| ) | ||
|
|
||
| export const Suunnitelmatyyppi = styled(Tagi)( | ||
| sx({ | ||
| width: "150px" | ||
| }) | ||
| ) | ||
|
|
||
| export const ProjektinTila = styled(Tagi)( | ||
| sx({ | ||
| width: "200px" | ||
| }) | ||
| ) | ||
|
|
||
| export const ProjektinTilaMobiili = styled('div')( | ||
| sx({ | ||
| fontWeight: "bold", | ||
| marginTop: "1em", | ||
| paddingBottom: "1em" | ||
| }) | ||
| ) | ||
|
|
||
| export const VuorovaikutusTilaisuus = styled(Tagi)( | ||
| sx({ | ||
| width: "200px" | ||
| }) | ||
| ) | ||
|
|
||
| export const OtsikkoLinkki = styled(Link)( | ||
| sx({ | ||
| color: "#0063AF", | ||
| fontWeight: "bold", | ||
| fontSize: 24, | ||
| overflow: "hidden", | ||
| textOverflow: "ellipsis", | ||
| whiteSpace: "nowrap", | ||
| position: "relative", | ||
| display: "block" | ||
| }) | ||
| ) | ||
|
|
||
| export const OtsikkoLinkkiMobiili = styled(Link)( | ||
| sx({ | ||
| color: "#0063AF", | ||
| fontWeight: "bold", | ||
| fontSize: 24, | ||
| position: "relative", | ||
| display: "block" | ||
| }) | ||
| ) | ||
|
|
||
| export const HakutulosLista = styled("ol")( | ||
| sx({ | ||
| width: "100%", | ||
| marginLeft: 0, | ||
| listStyle: "none", | ||
| borderRight: "1px solid #F7F7F7", | ||
| }) | ||
| ); | ||
|
|
||
| export const HakutulosListaItem = styled("li")(() => | ||
| sx({ | ||
| "&:nth-of-type(odd)": { | ||
| backgroundColor: "#F7F7F7", | ||
| }, | ||
| "&:nth-of-type(even)": { | ||
| backgroundColor: "white", | ||
| }, | ||
| borderBottom: "solid 2px #49c2f1", | ||
| padding: 7, | ||
| }) | ||
| ); | ||
|
|
||
| export const Kuvaus = styled("div")( | ||
| sx({ | ||
| marginTop: "1em", | ||
| marginBottom: "1em", | ||
| overflow: 'hidden', | ||
| textOverflow: 'ellipsis', | ||
| display: '-webkit-box', | ||
| WebkitLineClamp: '2', | ||
| WebkitBoxOrient: 'vertical', | ||
| }) | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters