From 9ddb7799783492360d619474250dbb580c7ee0ec Mon Sep 17 00:00:00 2001 From: Christoph Wersal Date: Sat, 31 Oct 2020 15:21:12 +0100 Subject: [PATCH 1/8] fix: third suggestion for expanded infobox with expandable grey box at the top and blue teaser to link to most important page --- .../official/components/CovMapFeatureInfo.tsx | 59 +++++++------- .../risk-levels-page/RiskLevelsPage.tsx | 77 ------------------- .../RiskRecommendation.tsx | 46 ++++------- apps/official/index.ts | 8 -- apps/official/static/texts/RiskTexts.ts | 5 -- 5 files changed, 46 insertions(+), 149 deletions(-) delete mode 100644 apps/official/components/risk-levels-page/RiskLevelsPage.tsx delete mode 100644 apps/official/static/texts/RiskTexts.ts diff --git a/apps/official/components/CovMapFeatureInfo.tsx b/apps/official/components/CovMapFeatureInfo.tsx index 299e2a3d..ddf08a2c 100644 --- a/apps/official/components/CovMapFeatureInfo.tsx +++ b/apps/official/components/CovMapFeatureInfo.tsx @@ -54,10 +54,14 @@ const useStyles = makeStyles((theme) => ({ paddingBottom: theme.spacing(4, 2), // make the cards symmetric by removing the huge padding bottom }, }, - + teaser: { + backgroundColor: "#2979ff", + color: "white", + padding: theme.spacing(2), + }, drawerPaper: { width: (props) => (props.fullScreen ? "100%" : "450px"), - maxHeight: "100%", + maxHeight: "calc(100% - 100px)", overflow: "hidden", }, drawerRoot: { @@ -73,17 +77,6 @@ const useStyles = makeStyles((theme) => ({ width: "100%", overflow: "auto", }, - recommendationsLink: { - "textAlign": "center", - "& p": { - fontWeight: "bold", - margin: theme.spacing(1, 0), - }, - "& a": { - padding: theme.spacing(1.4, 8), - borderRadius: theme.shape.borderRadius * 2, - }, - }, centerIcon: { margin: "0 auto", display: "block", @@ -99,7 +92,7 @@ const useStyles = makeStyles((theme) => ({ }, })); -const titleByRiskScore = { +export const titleByRiskScore = { [RiskScore.Low]: "Normales Risiko", [RiskScore.Medium]: "Mittleres Risiko", [RiskScore.High]: "Hohes Risiko", @@ -109,7 +102,6 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => { const theme = useTheme(); const fullScreen = useMediaQuery(theme.breakpoints.down("sm")); const { - recommendationsLink, action, card, container, @@ -122,6 +114,7 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => { centerIcon, chipTop, center, + teaser, } = useStyles({ fullScreen, }); @@ -193,11 +186,27 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => { ); + const link = `/recommendations?IdDistrict=${IdDistrict}`; + const HowShouldIBehave = (): JSX.Element => ( + + + + + Wie kann ich mich verhalten? + + + + + + + + ); + const SymptomLoadCategory = (): JSX.Element => ( - - + + Symptomlast der Bevölkerung @@ -239,16 +248,14 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => { ); }; - const link = `/recommendations?IdDistrict=${IdDistrict}`; const cardContent = ( - {/* TODO: Comment this back in once the risk descriptions are updated */} - {/**/} - {/* {riskDescription}*/} - {/**/} - + + + + @@ -259,12 +266,6 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => { - - Wie kann ich mich verhalten? - - ); diff --git a/apps/official/components/risk-levels-page/RiskLevelsPage.tsx b/apps/official/components/risk-levels-page/RiskLevelsPage.tsx deleted file mode 100644 index d46193af..00000000 --- a/apps/official/components/risk-levels-page/RiskLevelsPage.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import React from "react"; -import { makeStyles } from "@material-ui/core/styles"; -import { Grid, Typography } from "@material-ui/core"; -import { RiskTexts } from "../../static/texts/RiskTexts"; -import RiskScoreNormalIcon from "../../static/images/risk-score-1.svg"; -import RiskScoreMediumIcon from "../../static/images/risk-score-2.svg"; -import RiskScoreHighIcon from "../../static/images/risk-score-3.svg"; -import { NavigationTitle } from "app-config/components/NavigationTitle"; -import ContactsMediumBackgroundIcon from "../../static/images/contacts-medium-background.svg"; - -const useStyles = makeStyles({ - leftText: { - textAlign: "left", - }, -}); - -export const RiskLevelsPage = () => { - const classes = useStyles(); - - return ( - <> -
-
- -
- -
- - - - Normales Risiko - - - - - - - - {RiskTexts.NORMAL} - -
- -
- - - - Mittleres Risiko - - - - - - - - {RiskTexts.MEDIUM} - -
- -
- - - - Hohes Risiko - - - - - - - - {RiskTexts.HIGH} - -
-
- - ); -}; diff --git a/apps/official/components/risk-recommendation/RiskRecommendation.tsx b/apps/official/components/risk-recommendation/RiskRecommendation.tsx index e4ae9396..5956da19 100644 --- a/apps/official/components/risk-recommendation/RiskRecommendation.tsx +++ b/apps/official/components/risk-recommendation/RiskRecommendation.tsx @@ -1,12 +1,12 @@ import React from "react"; import { makeStyles } from "@material-ui/core/styles"; -import { Card, Grid } from "@material-ui/core"; -import ArrowForwardIosIcon from "@material-ui/icons/ArrowForwardIos"; +import { Accordion, AccordionDetails, AccordionSummary } from "@material-ui/core"; import Typography from "@material-ui/core/Typography"; -import { Link } from "react-router-dom"; -import { ContactScore } from "../../models"; +import { ContactScore, RiskScore } from "../../models"; +import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; +import { titleByRiskScore } from "app-config/components/CovMapFeatureInfo"; function riscExplanation(contactScore: number, incidence: number): string { if (incidence < 20 && contactScore <= 0) { @@ -38,40 +38,26 @@ function riscExplanation(contactScore: number, incidence: number): string { const useStyles = makeStyles((theme) => ({ teaser: { - "border": 0, - "background": "#2979ff", - "color": "white", - "textTransform": "none", - "padding": theme.spacing(4, 2), - "&:last-child": { - paddingBottom: theme.spacing(4, 2), // make the cards symmetric by removing the huge padding bottom - }, - }, - - centerIcon: { - margin: "0 auto", - display: "block", + background: "#F2F2F2", + padding: theme.spacing(1), }, })); -export const RiskRecommendation: React.FC<{ contactScore: ContactScore; incidence: number }> = ({ +export const RiskRecommendation: React.FC<{ contactScore: ContactScore; incidence: number; riskScore: RiskScore }> = ({ contactScore, incidence, + riskScore, }): JSX.Element => { const classes = useStyles(); return ( - - - - - {riscExplanation(contactScore, incidence)} - - - - - - - + + }> + Was bedeutet {titleByRiskScore[riskScore]}? + + + {riscExplanation(contactScore, incidence)} + + ); }; diff --git a/apps/official/index.ts b/apps/official/index.ts index c745a1f7..31b80bba 100644 --- a/apps/official/index.ts +++ b/apps/official/index.ts @@ -12,7 +12,6 @@ import ContactBehavior from "./components/pages/ContactBehavior"; import SymptomLevel from "./components/pages/SymptomLevel"; import { BasicRecommendations } from "./components/basic-recommendations/BasicRecommendations"; import { CovMapFeatureInfo } from "./components/CovMapFeatureInfo"; -import { RiskLevelsPage } from "./components/risk-levels-page/RiskLevelsPage"; // TODO: Integrate CovQuestions // import { Questions } from './components/pages/Questions' @@ -93,13 +92,6 @@ export const config: AppConfig = { Component: BasicRecommendations, hidden: true, // dont show this page in the navbar }, - { - id: "risk-levels-page", - title: "Risikostufen", - route: "/risk-levels", - Component: RiskLevelsPage, - hidden: true, - }, { id: "rki-page", title: "RKI", diff --git a/apps/official/static/texts/RiskTexts.ts b/apps/official/static/texts/RiskTexts.ts deleted file mode 100644 index fdaacd23..00000000 --- a/apps/official/static/texts/RiskTexts.ts +++ /dev/null @@ -1,5 +0,0 @@ -export enum RiskTexts { - NORMAL = "Die Zahl der Neuinfektionen ist niedrig, das Kontaktverhalten ist ausreichend reduziert und die Symptomlast ist normal. Ein normales Risiko bedeutet allerdings nicht, dass gar keine Infektionen in der Region möglich sind", - MEDIUM = "Die Zahl der Neuinfektionen oder das Kontaktverhalten bzw. die Symptomlast der Bevölkerung ist erhöht, so dass die Zahl der Neuinfektionen demnächst weiter ansteigen könnte. Wir rufen dazu auf, die Anzahl der Kontakte freiwillig zu reduzieren.", - HIGH = "Die Zahl der Neuinfektionen ist stark erhöht. Wir rufen dazu auf, die Anzahl der Kontakte freiwillig weitestgehend zu reduzieren.", -} From 08ecfaa77d090b4252b3ff42aa6252896c1fd5e5 Mon Sep 17 00:00:00 2001 From: Christoph Wersal Date: Sat, 31 Oct 2020 15:44:47 +0100 Subject: [PATCH 2/8] fix: small restyling --- apps/official/components/CovMapFeatureInfo.tsx | 6 +++--- .../risk-recommendation/RiskRecommendation.tsx | 16 +++++++++++++--- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/apps/official/components/CovMapFeatureInfo.tsx b/apps/official/components/CovMapFeatureInfo.tsx index ddf08a2c..e8dc94b0 100644 --- a/apps/official/components/CovMapFeatureInfo.tsx +++ b/apps/official/components/CovMapFeatureInfo.tsx @@ -2,7 +2,6 @@ import React from "react"; import { FeatureInfoProps } from "../../../src/app-config.types"; import { Link as RouterLink, useLocation } from "react-router-dom"; import { - Button, Card, CardContent, CardHeader, @@ -10,6 +9,7 @@ import { Drawer, Grid, IconButton, + Paper, Theme, Typography, useTheme, @@ -189,7 +189,7 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => { const link = `/recommendations?IdDistrict=${IdDistrict}`; const HowShouldIBehave = (): JSX.Element => ( - + Wie kann ich mich verhalten? @@ -198,7 +198,7 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => { - + ); diff --git a/apps/official/components/risk-recommendation/RiskRecommendation.tsx b/apps/official/components/risk-recommendation/RiskRecommendation.tsx index 5956da19..f42d1894 100644 --- a/apps/official/components/risk-recommendation/RiskRecommendation.tsx +++ b/apps/official/components/risk-recommendation/RiskRecommendation.tsx @@ -37,10 +37,17 @@ function riscExplanation(contactScore: number, incidence: number): string { } const useStyles = makeStyles((theme) => ({ - teaser: { + accordion: { background: "#F2F2F2", padding: theme.spacing(1), }, + summary: { + padding: theme.spacing(1), + }, + expandIcon: { + margin: "0 auto", + display: "block", + }, })); export const RiskRecommendation: React.FC<{ contactScore: ContactScore; incidence: number; riskScore: RiskScore }> = ({ @@ -51,8 +58,11 @@ export const RiskRecommendation: React.FC<{ contactScore: ContactScore; incidenc const classes = useStyles(); return ( - - }> + + } + > Was bedeutet {titleByRiskScore[riskScore]}? From 9226613d0492b242797495816d8e9bc93d6efce7 Mon Sep 17 00:00:00 2001 From: Christoph Wersal Date: Sat, 31 Oct 2020 15:47:23 +0100 Subject: [PATCH 3/8] fix: another small restyling --- apps/official/components/CovMapFeatureInfo.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/apps/official/components/CovMapFeatureInfo.tsx b/apps/official/components/CovMapFeatureInfo.tsx index e8dc94b0..3c3aa93c 100644 --- a/apps/official/components/CovMapFeatureInfo.tsx +++ b/apps/official/components/CovMapFeatureInfo.tsx @@ -48,16 +48,13 @@ const useStyles = makeStyles((theme) => ({ // TODO: Extract into theme "backgroundColor": "#FCFCFC", "position": "relative", - "padding": theme.spacing(4, 2), + "padding": theme.spacing(2, 2), "overflow": "visible", - "&:last-child": { - paddingBottom: theme.spacing(4, 2), // make the cards symmetric by removing the huge padding bottom - }, }, teaser: { backgroundColor: "#2979ff", color: "white", - padding: theme.spacing(2), + padding: theme.spacing(4, 2), }, drawerPaper: { width: (props) => (props.fullScreen ? "100%" : "450px"), From 5aaa97bd4f937349ea40fd214a6e262c09526886 Mon Sep 17 00:00:00 2001 From: "restyled-io[bot]" <32688539+restyled-io[bot]@users.noreply.github.com> Date: Sat, 31 Oct 2020 15:48:17 +0100 Subject: [PATCH 4/8] Restyled by prettier (#313) Co-authored-by: Restyled.io --- apps/official/components/CovMapFeatureInfo.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/official/components/CovMapFeatureInfo.tsx b/apps/official/components/CovMapFeatureInfo.tsx index 3c3aa93c..f596aa10 100644 --- a/apps/official/components/CovMapFeatureInfo.tsx +++ b/apps/official/components/CovMapFeatureInfo.tsx @@ -46,10 +46,10 @@ const useStyles = makeStyles((theme) => ({ }, card: { // TODO: Extract into theme - "backgroundColor": "#FCFCFC", - "position": "relative", - "padding": theme.spacing(2, 2), - "overflow": "visible", + backgroundColor: "#FCFCFC", + position: "relative", + padding: theme.spacing(2, 2), + overflow: "visible", }, teaser: { backgroundColor: "#2979ff", From e78c47c8b22f623ad6ba8310331f468ff0f305a0 Mon Sep 17 00:00:00 2001 From: Christoph Wersal Date: Sat, 31 Oct 2020 16:57:58 +0100 Subject: [PATCH 5/8] fix: remove "normal" text on not yet available feature --- apps/official/components/CovMapFeatureInfo.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/official/components/CovMapFeatureInfo.tsx b/apps/official/components/CovMapFeatureInfo.tsx index f596aa10..5c636c8d 100644 --- a/apps/official/components/CovMapFeatureInfo.tsx +++ b/apps/official/components/CovMapFeatureInfo.tsx @@ -210,7 +210,6 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => {
- normal
From dca1524ab8efad18cf20786fc822fdd0a3f1f404 Mon Sep 17 00:00:00 2001 From: Christoph Wersal Date: Sat, 31 Oct 2020 17:31:44 +0100 Subject: [PATCH 6/8] fix: replace accordion with fixed text --- .../official/components/CovMapFeatureInfo.tsx | 10 +++--- .../RiskRecommendation.tsx | 36 +++++-------------- 2 files changed, 13 insertions(+), 33 deletions(-) diff --git a/apps/official/components/CovMapFeatureInfo.tsx b/apps/official/components/CovMapFeatureInfo.tsx index 5c636c8d..74ae24c5 100644 --- a/apps/official/components/CovMapFeatureInfo.tsx +++ b/apps/official/components/CovMapFeatureInfo.tsx @@ -51,10 +51,10 @@ const useStyles = makeStyles((theme) => ({ padding: theme.spacing(2, 2), overflow: "visible", }, - teaser: { + bluePaper: { backgroundColor: "#2979ff", color: "white", - padding: theme.spacing(4, 2), + padding: theme.spacing(2), }, drawerPaper: { width: (props) => (props.fullScreen ? "100%" : "450px"), @@ -111,7 +111,7 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => { centerIcon, chipTop, center, - teaser, + bluePaper, } = useStyles({ fullScreen, }); @@ -186,7 +186,7 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => { const link = `/recommendations?IdDistrict=${IdDistrict}`; const HowShouldIBehave = (): JSX.Element => ( - + Wie kann ich mich verhalten? @@ -248,7 +248,7 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => { - + diff --git a/apps/official/components/risk-recommendation/RiskRecommendation.tsx b/apps/official/components/risk-recommendation/RiskRecommendation.tsx index f42d1894..1ffb2820 100644 --- a/apps/official/components/risk-recommendation/RiskRecommendation.tsx +++ b/apps/official/components/risk-recommendation/RiskRecommendation.tsx @@ -1,12 +1,8 @@ import React from "react"; import { makeStyles } from "@material-ui/core/styles"; -import { Accordion, AccordionDetails, AccordionSummary } from "@material-ui/core"; - +import { Paper } from "@material-ui/core"; import Typography from "@material-ui/core/Typography"; - -import { ContactScore, RiskScore } from "../../models"; -import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; -import { titleByRiskScore } from "app-config/components/CovMapFeatureInfo"; +import { ContactScore } from "../../models"; function riscExplanation(contactScore: number, incidence: number): string { if (incidence < 20 && contactScore <= 0) { @@ -37,37 +33,21 @@ function riscExplanation(contactScore: number, incidence: number): string { } const useStyles = makeStyles((theme) => ({ - accordion: { + paper: { background: "#F2F2F2", - padding: theme.spacing(1), - }, - summary: { - padding: theme.spacing(1), - }, - expandIcon: { - margin: "0 auto", - display: "block", + padding: theme.spacing(2), }, })); -export const RiskRecommendation: React.FC<{ contactScore: ContactScore; incidence: number; riskScore: RiskScore }> = ({ +export const RiskRecommendation: React.FC<{ contactScore: ContactScore; incidence: number }> = ({ contactScore, incidence, - riskScore, }): JSX.Element => { const classes = useStyles(); return ( - - } - > - Was bedeutet {titleByRiskScore[riskScore]}? - - - {riscExplanation(contactScore, incidence)} - - + + {riscExplanation(contactScore, incidence)} + ); }; From 48669d5fa4b8673f48079e49ef8bc5a22c86711e Mon Sep 17 00:00:00 2001 From: Christoph Wersal Date: Sat, 31 Oct 2020 20:11:25 +0100 Subject: [PATCH 7/8] fix: remove elevation of non-clickable element, show whole text on chips, use typography for risk badge --- apps/official/components/CovMapFeatureInfo.tsx | 8 ++++++-- apps/official/components/RiskBadge.tsx | 7 ++++++- .../components/risk-recommendation/RiskRecommendation.tsx | 2 +- 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/apps/official/components/CovMapFeatureInfo.tsx b/apps/official/components/CovMapFeatureInfo.tsx index 74ae24c5..5c5ee017 100644 --- a/apps/official/components/CovMapFeatureInfo.tsx +++ b/apps/official/components/CovMapFeatureInfo.tsx @@ -87,6 +87,9 @@ const useStyles = makeStyles((theme) => ({ position: "absolute", top: -12, // half height of the badge }, + chipLabel: { + overflow: "visible", + }, })); export const titleByRiskScore = { @@ -110,6 +113,7 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => { drawerScrollContainer, centerIcon, chipTop, + chipLabel, center, bluePaper, } = useStyles({ @@ -167,7 +171,7 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => { const ContactBehaviorCategory = (): JSX.Element => ( - + Kontaktverhalten der Bevölkerung @@ -202,7 +206,7 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => { const SymptomLoadCategory = (): JSX.Element => ( - + Symptomlast der Bevölkerung diff --git a/apps/official/components/RiskBadge.tsx b/apps/official/components/RiskBadge.tsx index 649f4453..6cbea8a7 100644 --- a/apps/official/components/RiskBadge.tsx +++ b/apps/official/components/RiskBadge.tsx @@ -1,6 +1,7 @@ import { makeStyles, Theme } from "@material-ui/core/styles"; import React, { FunctionComponent } from "react"; import { RiskScore } from "app-config/models"; +import { Typography } from "@material-ui/core"; const boxColorsByRiskScore = (theme: Theme) => ({ [RiskScore.Low]: theme.palette.lowRisk.main, @@ -37,5 +38,9 @@ export interface Props { export const RiskBadge: FunctionComponent = ({ riskScore }) => { const { box, medium } = useStyles({ riskScore }); - return
{riskNumberByRiskScore[riskScore]}
; + return ( +
+ {riskNumberByRiskScore[riskScore]} +
+ ); }; diff --git a/apps/official/components/risk-recommendation/RiskRecommendation.tsx b/apps/official/components/risk-recommendation/RiskRecommendation.tsx index 1ffb2820..0681178f 100644 --- a/apps/official/components/risk-recommendation/RiskRecommendation.tsx +++ b/apps/official/components/risk-recommendation/RiskRecommendation.tsx @@ -46,7 +46,7 @@ export const RiskRecommendation: React.FC<{ contactScore: ContactScore; incidenc const classes = useStyles(); return ( - + {riscExplanation(contactScore, incidence)} ); From c4a859ae9f9d3d7095ba0bafabf0ef116cb6d77c Mon Sep 17 00:00:00 2001 From: Christoph Wersal Date: Sat, 31 Oct 2020 20:19:15 +0100 Subject: [PATCH 8/8] fix: use proper typography variant for risk badge --- apps/official/components/RiskBadge.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/apps/official/components/RiskBadge.tsx b/apps/official/components/RiskBadge.tsx index 6cbea8a7..b900892e 100644 --- a/apps/official/components/RiskBadge.tsx +++ b/apps/official/components/RiskBadge.tsx @@ -21,8 +21,6 @@ const useStyles = makeStyles((theme) => { borderRadius: "2px", height: "46px", width: "27px", - fontSize: "17px", - lineHeight: "20px", display: "flex", alignItems: "center", justifyContent: "center", @@ -37,10 +35,10 @@ export interface Props { } export const RiskBadge: FunctionComponent = ({ riskScore }) => { - const { box, medium } = useStyles({ riskScore }); + const classes = useStyles({ riskScore }); return ( -
- {riskNumberByRiskScore[riskScore]} +
+ {riskNumberByRiskScore[riskScore]}
); };