From 9971eb470b41474bacffda07c976813c21af2d39 Mon Sep 17 00:00:00 2001 From: Tobias Date: Mon, 14 Mar 2022 15:31:05 +0100 Subject: [PATCH 01/22] ZES: Refactor config - extract menu, routes as names export - rename default route to `.landing`. --- src/config/eichwalde/index.ts | 34 ++++--------------------------- src/config/eichwalde/menu.ts | 37 ++++++++++++++++++++++++++++++++++ src/config/eichwalde/routes.ts | 6 ++++++ src/pages/Home/index.tsx | 2 +- src/routes.tsx | 4 ++-- 5 files changed, 50 insertions(+), 33 deletions(-) create mode 100644 src/config/eichwalde/menu.ts create mode 100644 src/config/eichwalde/routes.ts diff --git a/src/config/eichwalde/index.ts b/src/config/eichwalde/index.ts index 617eb60b7..b261a4ef5 100644 --- a/src/config/eichwalde/index.ts +++ b/src/config/eichwalde/index.ts @@ -1,39 +1,13 @@ import { RegionConfig } from '~/types'; - -import defaultRoutes from '../default/routes'; +import { menu } from './menu'; +import { routes } from './routes'; const eichwaldeConfig: RegionConfig = { siteTitle: 'ZESplus', titleFont: 'Roboto Slab', baseFont: 'Roboto', - routes: { - signup: defaultRoutes.signup, - login: defaultRoutes.login, - forgotPassword: defaultRoutes.forgotPassword, - resetPassword: defaultRoutes.resetPassword, - emailVerification: defaultRoutes.emailVerification, - profile: defaultRoutes.profile, - userVerify: defaultRoutes.userVerify, - zesplusResearch: '/forschungsprojekt', - }, - menu: { - profileLabel: 'Zum Profil', - loginLabel: 'Login', - logo: false, - twitter: false, - items: [], - size: 325, - footeritems: [ - { - label: 'Impressum', - link: '/impressum', - }, - { - label: 'Datenschutz', - link: '/datenschutz', - }, - ], - }, + routes, + menu, newsletter: { embedUrl: 'https://app.mailjet.com/widget/iframe/2YIa/EuZ', }, diff --git a/src/config/eichwalde/menu.ts b/src/config/eichwalde/menu.ts new file mode 100644 index 000000000..6ca4262a0 --- /dev/null +++ b/src/config/eichwalde/menu.ts @@ -0,0 +1,37 @@ +import PlanningIcon from '~/images/planning-icons/planung.svg'; +import AboutIcon from '~/images/info.svg'; +import { routes } from './routes'; + +export const menu = { + size: 325, + profileLabel: 'Zum Profil', + loginLabel: 'Login', + logo: false, + twitter: false, + items: [ + { + type: 'link', + label: 'Start', + icon: AboutIcon, + link: routes.landing, + border: true, + }, + { + type: 'link', + label: 'Radnetzentwicklung', + icon: PlanningIcon, + link: routes.cycleNetworkDevelopment, + border: true, + }, + ], + footeritems: [ + { + label: 'Impressum', + link: '/impressum', + }, + { + label: 'Datenschutz', + link: '/datenschutz', + }, + ], +}; diff --git a/src/config/eichwalde/routes.ts b/src/config/eichwalde/routes.ts new file mode 100644 index 000000000..3c30089f3 --- /dev/null +++ b/src/config/eichwalde/routes.ts @@ -0,0 +1,6 @@ +import defaultRoutes from '../default/routes'; + +export const routes = { + ...defaultRoutes, + landing: '/forschungsprojekt', +}; diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index ba59feb68..883f03a63 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -47,7 +47,7 @@ if (config.region === 'berlin') { } else if (config.region === 'aachen') { content = ; } else if (config.region === 'eichwalde') { - content = ; + content = ; } else { content = ( <> diff --git a/src/routes.tsx b/src/routes.tsx index 6d03c92da..c801121d2 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -180,8 +180,8 @@ const Routes = ({ token }) => ( ) && } {/* ZES-Plus research page */} - {config.routes.zesplusResearch && ( - + {config.routes.landing && ( + )} } /> From 53f3fe9d374332d76545828b574113b5a923b46f Mon Sep 17 00:00:00 2001 From: Tobias Date: Mon, 14 Mar 2022 15:31:36 +0100 Subject: [PATCH 02/22] ZES: Move `/sections` to `/forschungsprojekt` --- .../01_introduction.tsx | 7 ++---- .../02_data.tsx | 8 ++----- .../03_network.tsx} | 6 +----- .../04_concept_maps.tsx | 6 +----- .../05_next_steps.tsx | 10 +++------ .../06_contribute.tsx | 8 ++----- .../07_about.tsx | 11 ++++------ .../images/research-2.jpg | Bin .../images/research-2@2x.jpg | Bin .../images/research-2@3x.jpg | Bin .../images/simra.jpg | Bin .../images/simra@2x.jpg | Bin .../images/simra@3x.jpg | Bin .../images/speed.jpg | Bin .../images/speed@2x.jpg | Bin .../images/speed@3x.jpg | Bin .../images/wating-times.jpg | Bin .../images/wating-times@2x.jpg | Bin .../images/wating-times@3x.jpg | Bin .../images/zesmobil.png | Bin .../forschungsprojekt/index.ts | 7 ++++++ src/pages/ZESPlus-Research/index.tsx | 20 ++++++++++-------- 22 files changed, 33 insertions(+), 50 deletions(-) rename src/pages/ZESPlus-Research/{sections => forschungsprojekt}/01_introduction.tsx (95%) rename src/pages/ZESPlus-Research/{sections => forschungsprojekt}/02_data.tsx (97%) rename src/pages/ZESPlus-Research/{sections/03_topical_maps.tsx => forschungsprojekt/03_network.tsx} (98%) rename src/pages/ZESPlus-Research/{sections => forschungsprojekt}/04_concept_maps.tsx (96%) rename src/pages/ZESPlus-Research/{sections => forschungsprojekt}/05_next_steps.tsx (98%) rename src/pages/ZESPlus-Research/{sections => forschungsprojekt}/06_contribute.tsx (94%) rename src/pages/ZESPlus-Research/{sections => forschungsprojekt}/07_about.tsx (99%) rename src/pages/ZESPlus-Research/{sections => forschungsprojekt}/images/research-2.jpg (100%) rename src/pages/ZESPlus-Research/{sections => forschungsprojekt}/images/research-2@2x.jpg (100%) rename src/pages/ZESPlus-Research/{sections => forschungsprojekt}/images/research-2@3x.jpg (100%) rename src/pages/ZESPlus-Research/{sections => forschungsprojekt}/images/simra.jpg (100%) rename src/pages/ZESPlus-Research/{sections => forschungsprojekt}/images/simra@2x.jpg (100%) rename src/pages/ZESPlus-Research/{sections => forschungsprojekt}/images/simra@3x.jpg (100%) rename src/pages/ZESPlus-Research/{sections => forschungsprojekt}/images/speed.jpg (100%) rename src/pages/ZESPlus-Research/{sections => forschungsprojekt}/images/speed@2x.jpg (100%) rename src/pages/ZESPlus-Research/{sections => forschungsprojekt}/images/speed@3x.jpg (100%) rename src/pages/ZESPlus-Research/{sections => forschungsprojekt}/images/wating-times.jpg (100%) rename src/pages/ZESPlus-Research/{sections => forschungsprojekt}/images/wating-times@2x.jpg (100%) rename src/pages/ZESPlus-Research/{sections => forschungsprojekt}/images/wating-times@3x.jpg (100%) rename src/pages/ZESPlus-Research/{sections => forschungsprojekt}/images/zesmobil.png (100%) create mode 100644 src/pages/ZESPlus-Research/forschungsprojekt/index.ts diff --git a/src/pages/ZESPlus-Research/sections/01_introduction.tsx b/src/pages/ZESPlus-Research/forschungsprojekt/01_introduction.tsx similarity index 95% rename from src/pages/ZESPlus-Research/sections/01_introduction.tsx rename to src/pages/ZESPlus-Research/forschungsprojekt/01_introduction.tsx index 20d50d536..52da076ee 100644 --- a/src/pages/ZESPlus-Research/sections/01_introduction.tsx +++ b/src/pages/ZESPlus-Research/forschungsprojekt/01_introduction.tsx @@ -1,9 +1,8 @@ import React from 'react'; - -import { Paragraph, Heading, SectionProps } from '~/components2/Article'; +import { Heading, Paragraph, SectionProps } from '~/components2/Article'; import { Link } from '~/components2/Link'; -const SectionIntroduction = (props: SectionProps) => ( +export const SectionIntroduction = (props: SectionProps) => ( <> Innovative Instrumente der Radverkehrsförderung @@ -72,5 +71,3 @@ const SectionIntroduction = (props: SectionProps) => ( ); - -export default SectionIntroduction; diff --git a/src/pages/ZESPlus-Research/sections/02_data.tsx b/src/pages/ZESPlus-Research/forschungsprojekt/02_data.tsx similarity index 97% rename from src/pages/ZESPlus-Research/sections/02_data.tsx rename to src/pages/ZESPlus-Research/forschungsprojekt/02_data.tsx index 74e47699e..9849cdee7 100644 --- a/src/pages/ZESPlus-Research/sections/02_data.tsx +++ b/src/pages/ZESPlus-Research/forschungsprojekt/02_data.tsx @@ -1,17 +1,15 @@ import React from 'react'; import styled from 'styled-components'; - -import { Paragraph, List, Heading, SectionProps } from '~/components2/Article'; +import { Heading, List, Paragraph, SectionProps } from '~/components2/Article'; import { AnchorButton } from '~/components2/Button'; import { Link } from '~/components2/Link'; - import ButtonWrapper from '../components/ButtonWrapper'; const StyledList = styled(List)` list-style-type: lower-alpha; `; -const SectionData = (props: SectionProps) => ( +export const SectionData = (props: SectionProps) => ( <> Datengrundlagen @@ -113,5 +111,3 @@ const SectionData = (props: SectionProps) => ( ); - -export default SectionData; diff --git a/src/pages/ZESPlus-Research/sections/03_topical_maps.tsx b/src/pages/ZESPlus-Research/forschungsprojekt/03_network.tsx similarity index 98% rename from src/pages/ZESPlus-Research/sections/03_topical_maps.tsx rename to src/pages/ZESPlus-Research/forschungsprojekt/03_network.tsx index bf449a516..47ee871a1 100644 --- a/src/pages/ZESPlus-Research/sections/03_topical_maps.tsx +++ b/src/pages/ZESPlus-Research/forschungsprojekt/03_network.tsx @@ -1,9 +1,7 @@ import React from 'react'; import styled from 'styled-components'; - import { Heading, Paragraph, SectionProps } from '~/components2/Article'; import { Link } from '~/components2/Link'; - import MapPlaceholder from '../components/MapPlaceholder'; import MapQuality from '../components/MapQuality'; import MapSafety from '../components/MapSafety'; @@ -22,7 +20,7 @@ const SectionH3 = ({ children }) => ( ); -const SectionNetwork = (props: SectionProps) => ( +export const SectionNetwork = (props: SectionProps) => ( <> Die Themenkarten @@ -98,5 +96,3 @@ const SectionNetwork = (props: SectionProps) => ( ); - -export default SectionNetwork; diff --git a/src/pages/ZESPlus-Research/sections/04_concept_maps.tsx b/src/pages/ZESPlus-Research/forschungsprojekt/04_concept_maps.tsx similarity index 96% rename from src/pages/ZESPlus-Research/sections/04_concept_maps.tsx rename to src/pages/ZESPlus-Research/forschungsprojekt/04_concept_maps.tsx index 7cd5d5717..73379223e 100644 --- a/src/pages/ZESPlus-Research/sections/04_concept_maps.tsx +++ b/src/pages/ZESPlus-Research/forschungsprojekt/04_concept_maps.tsx @@ -1,13 +1,11 @@ import React from 'react'; - import { Heading, Paragraph, SectionProps } from '~/components2/Article'; import { AnchorButton } from '~/components2/Button'; import { Link } from '~/components2/Link'; - import ButtonWrapper from '../components/ButtonWrapper'; import MapNetworks from '../components/MapNetworks'; -const SectionConceptMaps = (props: SectionProps) => ( +export const SectionConceptMaps = (props: SectionProps) => ( <> Das ZESplus-Konzept @@ -56,5 +54,3 @@ const SectionConceptMaps = (props: SectionProps) => ( ); - -export default SectionConceptMaps; diff --git a/src/pages/ZESPlus-Research/sections/05_next_steps.tsx b/src/pages/ZESPlus-Research/forschungsprojekt/05_next_steps.tsx similarity index 98% rename from src/pages/ZESPlus-Research/sections/05_next_steps.tsx rename to src/pages/ZESPlus-Research/forschungsprojekt/05_next_steps.tsx index a9359eb59..a3995f93d 100644 --- a/src/pages/ZESPlus-Research/sections/05_next_steps.tsx +++ b/src/pages/ZESPlus-Research/forschungsprojekt/05_next_steps.tsx @@ -1,16 +1,14 @@ import React from 'react'; - import { - Paragraph, Heading, - SectionProps, ImageFull, + Paragraph, + SectionProps, } from '~/components2/Article'; import { Link } from '~/components2/Link'; - import ZESMobil from './images/zesmobil.png'; -const SectionNextSteps = (props: SectionProps) => ( +export const SectionNextSteps = (props: SectionProps) => ( <> Wie geht es weiter? @@ -102,5 +100,3 @@ const SectionNextSteps = (props: SectionProps) => ( ); - -export default SectionNextSteps; diff --git a/src/pages/ZESPlus-Research/sections/06_contribute.tsx b/src/pages/ZESPlus-Research/forschungsprojekt/06_contribute.tsx similarity index 94% rename from src/pages/ZESPlus-Research/sections/06_contribute.tsx rename to src/pages/ZESPlus-Research/forschungsprojekt/06_contribute.tsx index 66326805b..f2de2a064 100644 --- a/src/pages/ZESPlus-Research/sections/06_contribute.tsx +++ b/src/pages/ZESPlus-Research/forschungsprojekt/06_contribute.tsx @@ -1,12 +1,10 @@ import React from 'react'; import styled from 'styled-components'; - -import { Paragraph, Image, Heading, SectionProps } from '~/components2/Article'; +import { Heading, Image, Paragraph, SectionProps } from '~/components2/Article'; import { AnchorButton } from '~/components2/Button'; import { Link } from '~/components2/Link'; import { NewsletterWidget } from '~/components2/NewsletterWidget'; import { media } from '~/styles/utils'; - import SimraSrc from './images/simra.jpg'; const DownloadWrapper = styled(Paragraph)` @@ -25,7 +23,7 @@ const DownloadWrapper = styled(Paragraph)` } `; -const SectionContribute = (props: SectionProps) => ( +export const SectionContribute = (props: SectionProps) => ( <> Mitmachen — SimRa-App & Newsletter @@ -87,5 +85,3 @@ const SectionContribute = (props: SectionProps) => ( */} ); - -export default SectionContribute; diff --git a/src/pages/ZESPlus-Research/sections/07_about.tsx b/src/pages/ZESPlus-Research/forschungsprojekt/07_about.tsx similarity index 99% rename from src/pages/ZESPlus-Research/sections/07_about.tsx rename to src/pages/ZESPlus-Research/forschungsprojekt/07_about.tsx index 43eef1b4a..fe82d73fe 100644 --- a/src/pages/ZESPlus-Research/sections/07_about.tsx +++ b/src/pages/ZESPlus-Research/forschungsprojekt/07_about.tsx @@ -1,15 +1,14 @@ import React from 'react'; - import { - Paragraph, Heading, - SectionProps, - Quote, List, + Paragraph, + Quote, + SectionProps, } from '~/components2/Article'; import { Link } from '~/components2/Link'; -const SectionAbout = (props: SectionProps) => ( +export const SectionAbout = (props: SectionProps) => ( <> Hintergrundinformationen zum Projekt @@ -182,5 +181,3 @@ const SectionAbout = (props: SectionProps) => ( ); - -export default SectionAbout; diff --git a/src/pages/ZESPlus-Research/sections/images/research-2.jpg b/src/pages/ZESPlus-Research/forschungsprojekt/images/research-2.jpg similarity index 100% rename from src/pages/ZESPlus-Research/sections/images/research-2.jpg rename to src/pages/ZESPlus-Research/forschungsprojekt/images/research-2.jpg diff --git a/src/pages/ZESPlus-Research/sections/images/research-2@2x.jpg b/src/pages/ZESPlus-Research/forschungsprojekt/images/research-2@2x.jpg similarity index 100% rename from src/pages/ZESPlus-Research/sections/images/research-2@2x.jpg rename to src/pages/ZESPlus-Research/forschungsprojekt/images/research-2@2x.jpg diff --git a/src/pages/ZESPlus-Research/sections/images/research-2@3x.jpg b/src/pages/ZESPlus-Research/forschungsprojekt/images/research-2@3x.jpg similarity index 100% rename from src/pages/ZESPlus-Research/sections/images/research-2@3x.jpg rename to src/pages/ZESPlus-Research/forschungsprojekt/images/research-2@3x.jpg diff --git a/src/pages/ZESPlus-Research/sections/images/simra.jpg b/src/pages/ZESPlus-Research/forschungsprojekt/images/simra.jpg similarity index 100% rename from src/pages/ZESPlus-Research/sections/images/simra.jpg rename to src/pages/ZESPlus-Research/forschungsprojekt/images/simra.jpg diff --git a/src/pages/ZESPlus-Research/sections/images/simra@2x.jpg b/src/pages/ZESPlus-Research/forschungsprojekt/images/simra@2x.jpg similarity index 100% rename from src/pages/ZESPlus-Research/sections/images/simra@2x.jpg rename to src/pages/ZESPlus-Research/forschungsprojekt/images/simra@2x.jpg diff --git a/src/pages/ZESPlus-Research/sections/images/simra@3x.jpg b/src/pages/ZESPlus-Research/forschungsprojekt/images/simra@3x.jpg similarity index 100% rename from src/pages/ZESPlus-Research/sections/images/simra@3x.jpg rename to src/pages/ZESPlus-Research/forschungsprojekt/images/simra@3x.jpg diff --git a/src/pages/ZESPlus-Research/sections/images/speed.jpg b/src/pages/ZESPlus-Research/forschungsprojekt/images/speed.jpg similarity index 100% rename from src/pages/ZESPlus-Research/sections/images/speed.jpg rename to src/pages/ZESPlus-Research/forschungsprojekt/images/speed.jpg diff --git a/src/pages/ZESPlus-Research/sections/images/speed@2x.jpg b/src/pages/ZESPlus-Research/forschungsprojekt/images/speed@2x.jpg similarity index 100% rename from src/pages/ZESPlus-Research/sections/images/speed@2x.jpg rename to src/pages/ZESPlus-Research/forschungsprojekt/images/speed@2x.jpg diff --git a/src/pages/ZESPlus-Research/sections/images/speed@3x.jpg b/src/pages/ZESPlus-Research/forschungsprojekt/images/speed@3x.jpg similarity index 100% rename from src/pages/ZESPlus-Research/sections/images/speed@3x.jpg rename to src/pages/ZESPlus-Research/forschungsprojekt/images/speed@3x.jpg diff --git a/src/pages/ZESPlus-Research/sections/images/wating-times.jpg b/src/pages/ZESPlus-Research/forschungsprojekt/images/wating-times.jpg similarity index 100% rename from src/pages/ZESPlus-Research/sections/images/wating-times.jpg rename to src/pages/ZESPlus-Research/forschungsprojekt/images/wating-times.jpg diff --git a/src/pages/ZESPlus-Research/sections/images/wating-times@2x.jpg b/src/pages/ZESPlus-Research/forschungsprojekt/images/wating-times@2x.jpg similarity index 100% rename from src/pages/ZESPlus-Research/sections/images/wating-times@2x.jpg rename to src/pages/ZESPlus-Research/forschungsprojekt/images/wating-times@2x.jpg diff --git a/src/pages/ZESPlus-Research/sections/images/wating-times@3x.jpg b/src/pages/ZESPlus-Research/forschungsprojekt/images/wating-times@3x.jpg similarity index 100% rename from src/pages/ZESPlus-Research/sections/images/wating-times@3x.jpg rename to src/pages/ZESPlus-Research/forschungsprojekt/images/wating-times@3x.jpg diff --git a/src/pages/ZESPlus-Research/sections/images/zesmobil.png b/src/pages/ZESPlus-Research/forschungsprojekt/images/zesmobil.png similarity index 100% rename from src/pages/ZESPlus-Research/sections/images/zesmobil.png rename to src/pages/ZESPlus-Research/forschungsprojekt/images/zesmobil.png diff --git a/src/pages/ZESPlus-Research/forschungsprojekt/index.ts b/src/pages/ZESPlus-Research/forschungsprojekt/index.ts new file mode 100644 index 000000000..34bf031db --- /dev/null +++ b/src/pages/ZESPlus-Research/forschungsprojekt/index.ts @@ -0,0 +1,7 @@ +export * from './01_introduction'; +export * from './02_data'; +export * from './03_network'; +export * from './04_concept_maps'; +export * from './05_next_steps'; +export * from './06_contribute'; +export * from './07_about'; diff --git a/src/pages/ZESPlus-Research/index.tsx b/src/pages/ZESPlus-Research/index.tsx index 7bea79d6c..d114d3fa1 100644 --- a/src/pages/ZESPlus-Research/index.tsx +++ b/src/pages/ZESPlus-Research/index.tsx @@ -10,14 +10,16 @@ import LogoZES from './components/Logos/assets/logo-zes.png'; import LogoZES2 from './components/Logos/assets/logo-zes@2x.png'; import LogoZES3 from './components/Logos/assets/logo-zes@3x.png'; import Logos from './components/Logos/Logos'; -import SectionIntroduction from './sections/01_introduction'; -import SectionData from './sections/02_data'; -import SectionTopicalMaps from './sections/03_topical_maps'; -import SectionConceptMaps from './sections/04_concept_maps'; -import SectionNextSteps from './sections/05_next_steps'; -import SectionContribute from './sections/06_contribute'; -import SectionAbout from './sections/07_about'; -import Image2 from './sections/images/research-2.jpg'; +import { + SectionAbout, + SectionConceptMaps, + SectionContribute, + SectionData, + SectionIntroduction, + SectionNetwork, + SectionNextSteps, +} from './forschungsprojekt'; +import Image2 from './forschungsprojekt/images/research-2.jpg'; const Wrapper = styled(ArticleWrapper)` background: none; @@ -76,7 +78,7 @@ const ZESPlusResearch = () => ( - + From ac87354c3e1d38403a57e8283aa44354f8944e10 Mon Sep 17 00:00:00 2001 From: Tobias Date: Mon, 14 Mar 2022 16:43:52 +0100 Subject: [PATCH 03/22] Components Article: Introduce `
--- .../Article/Typography/Details.tsx | 22 +++++++++++++++++++ src/components2/Article/Typography/index.ts | 1 + src/components2/Article/index.ts | 5 +---- 3 files changed, 24 insertions(+), 4 deletions(-) create mode 100644 src/components2/Article/Typography/Details.tsx diff --git a/src/components2/Article/Typography/Details.tsx b/src/components2/Article/Typography/Details.tsx new file mode 100644 index 000000000..521d978b5 --- /dev/null +++ b/src/components2/Article/Typography/Details.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import styled from 'styled-components'; +import { Paragraph } from './Paragraph'; + +type Props = { summary: string }; + +const StyledSummary = styled.summary` + cursor: pointer; +`; + +export const Details: React.FC = ({ summary, children }) => { + return ( + +
+ + {summary} + + {children} +
+ + ); +}; diff --git a/src/components2/Article/Typography/index.ts b/src/components2/Article/Typography/index.ts index 8b0f595b8..591b416cd 100644 --- a/src/components2/Article/Typography/index.ts +++ b/src/components2/Article/Typography/index.ts @@ -1,3 +1,4 @@ +export * from './Details'; export * from './Heading'; export * from './Intro'; export * from './List'; diff --git a/src/components2/Article/index.ts b/src/components2/Article/index.ts index 7752886dc..b5fbc3200 100644 --- a/src/components2/Article/index.ts +++ b/src/components2/Article/index.ts @@ -2,9 +2,6 @@ export * from './ArticleHeader/ArticleHeader'; export * from './ArticleWrapper'; export * from './Image'; export * from './Map'; -export * from './Typography/Heading'; -export * from './Typography/Intro'; -export * from './Typography/List'; -export * from './Typography/Paragraph'; +export * from './Typography'; export * from './Quote/Quote'; export * from './types'; From 6b9391bf0f7809b995358263294f06d229280089 Mon Sep 17 00:00:00 2001 From: Tobias Date: Mon, 14 Mar 2022 16:46:20 +0100 Subject: [PATCH 04/22] ZES: Introduce CycleNetworkDevelopmentPage - Add first set of content with dummy maps and images for CycleNetworkDevelopmentPage - Rename ZesPlusResearchPage to follow the *Page pattern --- src/config/eichwalde/routes.ts | 1 + .../CycleNetworkDevelopmentPage.tsx | 70 ++++++++++++ .../ZESPlus-Research.integration.test.tsx | 4 +- .../{index.tsx => ZesPlusResearchPage.tsx} | 47 ++------ src/pages/ZESPlus-Research/index.ts | 2 + .../01_SectionAreaOfInteres.tsx | 25 +++++ .../radnetzentwicklung/02_SectionBasics.tsx | 67 ++++++++++++ .../03_SectionUsageRequirements.tsx | 79 ++++++++++++++ .../radnetzentwicklung/04_SectionCurrent.tsx | 57 ++++++++++ .../radnetzentwicklung/05_SectionNetwork.tsx | 31 ++++++ .../06_SectionPlanningMap.tsx | 36 ++++++ .../07_SectionNextSteps.tsx | 11 ++ .../radnetzentwicklung/index.ts | 7 ++ .../radnetzentwicklung/maps/MapNetworks.tsx | 103 ++++++++++++++++++ .../maps/icons/berliner-verbaende.svg | 9 ++ .../radnetzentwicklung/maps/icons/heatmap.svg | 11 ++ .../maps/icons/konzept-dahme-spree.svg | 9 ++ .../maps/icons/konzept-schoenefeld.svg | 9 ++ .../maps/icons/radschnellverbindungen.svg | 9 ++ .../maps/icons/touristische.svg | 9 ++ .../maps/icons/varianten-rsv.svg | 9 ++ .../radnetzentwicklung/maps/icons/zes.svg | 12 ++ .../radnetzentwicklung/maps/index.ts | 1 + src/pages/ZESPlus-Research/styles.ts | 28 +++++ src/routes.tsx | 17 ++- 25 files changed, 616 insertions(+), 47 deletions(-) create mode 100644 src/pages/ZESPlus-Research/CycleNetworkDevelopmentPage.tsx rename src/pages/ZESPlus-Research/{index.tsx => ZesPlusResearchPage.tsx} (77%) create mode 100644 src/pages/ZESPlus-Research/index.ts create mode 100644 src/pages/ZESPlus-Research/radnetzentwicklung/01_SectionAreaOfInteres.tsx create mode 100644 src/pages/ZESPlus-Research/radnetzentwicklung/02_SectionBasics.tsx create mode 100644 src/pages/ZESPlus-Research/radnetzentwicklung/03_SectionUsageRequirements.tsx create mode 100644 src/pages/ZESPlus-Research/radnetzentwicklung/04_SectionCurrent.tsx create mode 100644 src/pages/ZESPlus-Research/radnetzentwicklung/05_SectionNetwork.tsx create mode 100644 src/pages/ZESPlus-Research/radnetzentwicklung/06_SectionPlanningMap.tsx create mode 100644 src/pages/ZESPlus-Research/radnetzentwicklung/07_SectionNextSteps.tsx create mode 100644 src/pages/ZESPlus-Research/radnetzentwicklung/index.ts create mode 100644 src/pages/ZESPlus-Research/radnetzentwicklung/maps/MapNetworks.tsx create mode 100644 src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/berliner-verbaende.svg create mode 100644 src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/heatmap.svg create mode 100644 src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/konzept-dahme-spree.svg create mode 100644 src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/konzept-schoenefeld.svg create mode 100644 src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/radschnellverbindungen.svg create mode 100644 src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/touristische.svg create mode 100644 src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/varianten-rsv.svg create mode 100644 src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/zes.svg create mode 100644 src/pages/ZESPlus-Research/radnetzentwicklung/maps/index.ts create mode 100644 src/pages/ZESPlus-Research/styles.ts diff --git a/src/config/eichwalde/routes.ts b/src/config/eichwalde/routes.ts index 3c30089f3..6b57d9924 100644 --- a/src/config/eichwalde/routes.ts +++ b/src/config/eichwalde/routes.ts @@ -3,4 +3,5 @@ import defaultRoutes from '../default/routes'; export const routes = { ...defaultRoutes, landing: '/forschungsprojekt', + cycleNetworkDevelopment: '/radnetzentwicklung', }; diff --git a/src/pages/ZESPlus-Research/CycleNetworkDevelopmentPage.tsx b/src/pages/ZESPlus-Research/CycleNetworkDevelopmentPage.tsx new file mode 100644 index 000000000..d43b868d6 --- /dev/null +++ b/src/pages/ZESPlus-Research/CycleNetworkDevelopmentPage.tsx @@ -0,0 +1,70 @@ +import React from 'react'; +import { ArticleHeader, Intro, Paragraph } from '~/components2/Article'; +import LogoZES from './components/Logos/assets/logo-zes.png'; +import LogoZES2 from './components/Logos/assets/logo-zes@2x.png'; +import LogoZES3 from './components/Logos/assets/logo-zes@3x.png'; +import Logos from './components/Logos/Logos'; +import { + SectionAreaOfInteres, + SectionBasics, + SectionCurrent, + SectionNetwork, + SectionNextSteps, + SectionPlanningMap, + SectionUsageRequirements, +} from './radnetzentwicklung'; +import { Logo, Wrapper } from './styles'; + +export const CycleNetworkDevelopmentPage = () => ( + + } + > + + Radnetzplanung basierend auf OSM-Daten + + + Dieser Artikel beschreibt, wie mit Hilfe von OSM-Daten die Grundlagen für + eine Radnetzplanung im kleinstädtischen bzw. ländlichen Raum erstellt + wurden. Dabei wurde der Planungsprozess so einfach wie möglich gehalten, + mit dem Ziel eine für die hier betrachteten Siedlungsräume adäquate + Netzplanung zu erstellen und gleichzeitig einen so weit wie möglich + automatisierten und leicht übertragbaren Prozess der Datenanalyse zu + entwickeln. Der dargestellte Ablauf kann mit der entwickelten Methodik und + den dahinterliegenden Datenverarbeitungsschritten in vergleichbaren + Kommunen mit verhältnismäßig geringem finanziellen Aufwand übertragen + werden.{' '} + + + Aufbauend auf den manuell in QGIS erstellten Themenkarten in der + abgeschlossenen Phase I des NUDAFA-Projektes, wurde diese um weitere + Karten ergänzt und der ursprüngliche Betrachtungsraum (Eichwalde, Zeuthen, + Schulzendorf) um die Nachbargemeinden Königs Wusterhausen, Schönefeld und + Wildau erweitert. Für alle Karten wurden die Datenextraktions- und + Datenanalyse-Schritte weitestgehend automatisiert. In iterativen + Wiederholungen der Datenverarbeitungsschritte wurden Lücken in den + genutzten OSM-Daten identifiziert, um diese dann gezielt gemeinsam mit den + Bürger:innen vor Ort zu schließen. + + + + + + + + + + +); diff --git a/src/pages/ZESPlus-Research/ZESPlus-Research.integration.test.tsx b/src/pages/ZESPlus-Research/ZESPlus-Research.integration.test.tsx index 2e6f5fef1..4d9b43c10 100644 --- a/src/pages/ZESPlus-Research/ZESPlus-Research.integration.test.tsx +++ b/src/pages/ZESPlus-Research/ZESPlus-Research.integration.test.tsx @@ -1,11 +1,11 @@ import { screen } from '@testing-library/dom'; import React from 'react'; import { render } from '~/utils/test-utils'; -import ZESPlusResearch from '.'; +import { ZesPlusResearchPage } from './ZesPlusResearchPage'; describe('ZESplus research page', () => { it('renders', () => { - render(); + render(); expect( screen.getByRole('button', { name: 'Menü öffnen' }) ).toBeInTheDocument(); diff --git a/src/pages/ZESPlus-Research/index.tsx b/src/pages/ZESPlus-Research/ZesPlusResearchPage.tsx similarity index 77% rename from src/pages/ZESPlus-Research/index.tsx rename to src/pages/ZESPlus-Research/ZesPlusResearchPage.tsx index d114d3fa1..b4231775b 100644 --- a/src/pages/ZESPlus-Research/index.tsx +++ b/src/pages/ZESPlus-Research/ZesPlusResearchPage.tsx @@ -1,15 +1,5 @@ import React from 'react'; -import styled from 'styled-components'; -import { - ArticleHeader, - ArticleWrapper, - ImageFull, - Intro, -} from '~/components2/Article'; -import LogoZES from './components/Logos/assets/logo-zes.png'; -import LogoZES2 from './components/Logos/assets/logo-zes@2x.png'; -import LogoZES3 from './components/Logos/assets/logo-zes@3x.png'; -import Logos from './components/Logos/Logos'; +import { ArticleHeader, ImageFull, Intro } from '~/components2/Article'; import { SectionAbout, SectionConceptMaps, @@ -19,35 +9,14 @@ import { SectionNetwork, SectionNextSteps, } from './forschungsprojekt'; +import Logos from './components/Logos/Logos'; +import LogoZES from './components/Logos/assets/logo-zes.png'; +import LogoZES2 from './components/Logos/assets/logo-zes@2x.png'; +import LogoZES3 from './components/Logos/assets/logo-zes@3x.png'; import Image2 from './forschungsprojekt/images/research-2.jpg'; +import { Wrapper, Logo } from './styles'; -const Wrapper = styled(ArticleWrapper)` - background: none; - h2 { - text-transform: none; - } - - .contentWrapper { - box-shadow: none; - } - - .fmc-article-tocentry { - margin-bottom: 0.75em; - font-family: 'Roboto Slab'; - font-weight: 100; - } - - .fmc-article-tocentry-active { - font-weight: 700; - } -`; - -const Logo = styled.img` - width: 105px; - height: 42px; -`; - -const ZESPlusResearch = () => ( +export const ZesPlusResearchPage = () => ( ( ); - -export default ZESPlusResearch; diff --git a/src/pages/ZESPlus-Research/index.ts b/src/pages/ZESPlus-Research/index.ts new file mode 100644 index 000000000..bcfece07a --- /dev/null +++ b/src/pages/ZESPlus-Research/index.ts @@ -0,0 +1,2 @@ +export * from './ZesPlusResearchPage'; +export * from './CycleNetworkDevelopmentPage'; diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/01_SectionAreaOfInteres.tsx b/src/pages/ZESPlus-Research/radnetzentwicklung/01_SectionAreaOfInteres.tsx new file mode 100644 index 000000000..2604698a9 --- /dev/null +++ b/src/pages/ZESPlus-Research/radnetzentwicklung/01_SectionAreaOfInteres.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { Heading, Image, Paragraph, SectionProps } from '~/components2/Article'; +import ImagePlaceholder from '../forschungsprojekt/images/research-2.jpg'; + +export const SectionAreaOfInteres = (props: SectionProps) => ( + <> + + Betrachtungsgebiet + + + Zur Identifikation des Betrachtungsgebietes, wurde um die Zentren der + sechs Gemeinden ein 10 km Radius gezogen, welcher den entsprechenden + Planungsraum darstellt. Die sechs Planungsräume wurden anschließend zu + einem gemeinsamen Betrachtungsgebiet verschnitten. Die Annahme dahinter + basiert auf der ungefähren Reichweite von E-Bike-Fahrten und entsprechend + der Planung eines Wegeangebots für zukünftig zu erwartenden Radverkehr. + Ziel ist die Erhöhung des Modal-Split-Anteils im Radverkehr in den + Gemeinden. Als zusätzlicher wichtiger Zielpunkt wurde die im Bau + befindliche Tesla-Fabrik aufgenommen, das zu diesem Ziel viele + Pendlerverkehre entstehen werden die mit Multimodalen Reisewegen möglichst + auf Rad und ÖPNV geleitet werden sollen. + + Karte des Betrachtungsgebietes + +); diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/02_SectionBasics.tsx b/src/pages/ZESPlus-Research/radnetzentwicklung/02_SectionBasics.tsx new file mode 100644 index 000000000..8eee28440 --- /dev/null +++ b/src/pages/ZESPlus-Research/radnetzentwicklung/02_SectionBasics.tsx @@ -0,0 +1,67 @@ +import React from 'react'; +import { Heading, List, Paragraph, SectionProps } from '~/components2/Article'; +import MapPlaceholder from '../components/MapPlaceholder'; +import { MapNetworks } from './maps'; + +export const SectionBasics = (props: SectionProps) => ( + <> + + Grundlagen (Raumanalyse) + + + Zur Ermittlung von Quell- und Zielpunkten wurden folgende Daten aus OSM + extrahiert: + + + Quellorte: + + + Wohngebiete (als Flächen) + + Siedlungszentren als Mittelpunkte mit Anzahl Einwohner:innen (als + Punkte) + + + + Zielorte: (als Punkte, bzw. Heatmap) + + + Bildungseinrichtungen + Einkaufszentren / -möglichkeiten + Besorgungen + Arbeitsplatz konzentrationen + Freizeit + + + + Hindernisse & natürliche Grenzen + + Neben den natürlichen Barrieren, wie Gewässern, stellen infrastrukturelle + Barrieren der gebauten Umwelt (Eisenbahntrassen und Autobahnen) eine + Unterbrechung des Wege- und Wahrnehmungsfluss dar. Zur Identifizierung + dieser Barrieren wurden Eisenbahnstrecken, Autobahnen und Gewässer aus OSM + extrahiert und auf der Karte dargestellt. + + + + Anschlusspunkte übergeordnete Radnetze und ÖPNV + + Als wichtige Anschlusspunkte für ein zu planendes Radnetz wurden + vorhandene Radnetze und Radnetzplanungen (Datenquellen sind unter der + Themankarte 4 aufgeführt) mit den Gemeindegrenzen verschnitten und als + Punkte dargestellt. Ebenso wurden S-Bahn und Regionalbahnstationen aus OSM + extrahiert und dargestellt. + + + + + Themenkarte 1: Ziele + Barrieren + Anschlusspunkte + + + In der Zusammenführung der oben genannten Daten wurde die Themenkarte 1 – + Grundlagen mit Quell- und Zielpunkten, wichtigen Anschlusspunkten und + räumlichen Barrieren erstellt. + + + +); diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/03_SectionUsageRequirements.tsx b/src/pages/ZESPlus-Research/radnetzentwicklung/03_SectionUsageRequirements.tsx new file mode 100644 index 000000000..51a127fd0 --- /dev/null +++ b/src/pages/ZESPlus-Research/radnetzentwicklung/03_SectionUsageRequirements.tsx @@ -0,0 +1,79 @@ +import React from 'react'; +import { + Details, + Heading, + Paragraph, + SectionProps, +} from '~/components2/Article'; +import MapPlaceholder from '../components/MapPlaceholder'; + +export const SectionUsageRequirements = (props: SectionProps) => ( + <> + + Nutzungsanforderungen im Wegenetz ermitteln + + + Für die Erstellung des Radnetzes sollen zunächst die vorhandenen + Nutzungsanforderungen des Wegenetzes bestimmt werden. Dazu wurde eine + Karte mit Straßentypen, abgeleitet aus OSM-Daten, erstellt. Die vier hier + klassifizierten Typen entsprechen typischen Nutzungsansprüchen in dieser + oder vergleichbaren Siedlungsräumen. Es wird unterschieden nach: + +
+ Wohnstraßen stellen die Verbindung zum Zuhause dar. Sie sind vorwiegend + verkehrsberuhigt und man erkennt sie an der Vielzahl parkender Autos. + Außerdem findet man hier Wohnhäuser und Grünanlagen. +
+ +
+ Haupt- und Sammelstraßen dienen der Durchfahrung und Erschließung von + Kommunen. Sie sind eher nicht verkehrsberuhigt und meistens befinden sich + hier wichtige Einrichtungen sowie vereinzelt Geschäfte. +
+ +
+ Haupt- und Landstraßen stellen die Verknüpfung von Kommunen untereinander + her. Gerade außerorts sind höhere Geschwindigkeiten möglich. Oft haben sie + keine Bebauung, die an die Straße grenzt (außer sie führen durch einen + Ort) und man erkennt sie außerdem auch gut an ihrer Bezeichnung (z.B. + L245). +
+ +
+ Die frei geführten Wege sind auch bekannt als “Schleichwege”. Sie sind + vorwiegend von Befahrung mit dem Pkw ausgeschlossen. Außerdem zeichnen sie + sich durch eine tendenziell schlechtere Infrastruktur und Qualität aus. + Gerade innerhalb der Kommunen sind sie aber essenziell, um auf kürzesten + Weg mit dem Fahrrad oder zu Fuß unterwegs zu sein. +
+ + + Als weiteres Unterscheidungsmerkmal wurden Ansammlungen von Geschäften und + weiteren Zielorten (z.B. Bildungseinrichtungen) die höheres + Fußverkehrsaufkommen oder Lieferverkehr bedingen extrahiert und visuell + überlagert, so können z.B. “Geschäftsstraßen” erkannt und gesondert + betrachtet werden. + + + + Die Unterscheidung der Typen wurde in der Abwägung von vorhandenen Daten + und Auswertungsmöglichkeiten in OSM sowie ausreichender Differenzierung + für die Netzplanung getroffen. Detailliertere Unterscheidungen der + Straßentypen sind denkbar, wären aber mit einem hohen Detailgrad beim + Erfassen der OSM-Daten verbunden. Der hier gewählte Ansatz erscheint + zunächst den besten Kompromiss zwischen den Anforderung der Netzkonzeption + im betrachteten Siedlungsraum und Höhe des Aufwands beim Kartieren in OSM + darzustellen. Eine ausführliche Beschreibung der Straßentypen und ihrer + Genese findet sich hier + + {/* TODO LINK --^ */} + + Die Skripte zur Analyse der Straßentypen sind OpenSource auf GitHub + veröffentlicht. + + {/* TODO LINK --^ */} + + Themenkarte 2: Straßentypen + + +); diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/04_SectionCurrent.tsx b/src/pages/ZESPlus-Research/radnetzentwicklung/04_SectionCurrent.tsx new file mode 100644 index 000000000..f5f824485 --- /dev/null +++ b/src/pages/ZESPlus-Research/radnetzentwicklung/04_SectionCurrent.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { + Details, + Heading, + Paragraph, + SectionProps, + Image, +} from '~/components2/Article'; +import MapPlaceholder from '../components/MapPlaceholder'; +import ImagePlaceholder from '../forschungsprojekt/images/research-2.jpg'; + +export const SectionCurrent = (props: SectionProps) => ( + <> + + Ist-Zustand Radinfrastruktur + + + Um bei der Netzplanung vorhandene Radinfrastruktur zu berücksichtigen und + Ausbaupotentiale zu ermitteln, wurden in OSM erfasste Radinfrastrukturen + extrahiert und auf der Karte dargestellt. Es wird dafür alle + Radinfrastruktur (inkl. gemeinsame Führung mit dem Fußverkehr, exkl. + Führung im Kfz-Mischverkehr), berücksichtigt. In der Karte werden diese, + soweit in OSM erfasst, beidseitig dargestellt. Die Führungsformen werden + in drei Gruppen unterschieden: + +
+ ausschließlich durch Radfahrende zu nutzende Wege, z.B. getrennter Radweg + im Seitenraum, Radfahrstreifen... +
+
+ Nutzung gemeinsam mit dem Fußverkehr, z.B. Gehweg – Radfahrende frei +
+
+ z.B. Spielstraßen +
+ + + Ist-Zustand Oberflächen + + Im nächsten Schritt wurden alle in OSM vorhandenen Oberflächen extrahiert + und ausgewertet. Zur Übersetzung der OSM Tags in die fünf Werte: + Sehr gut, gut, mittel, schlecht und sehr schlecht wurde + folgende Tabelle verwendet. Da der OSM Tag für Oberflächen noch nicht sehr + verbreitet genutzt wird, wurden hier gezielt in Zusammenarbeit mit + Bürger:innen vor Ort die OSM-Daten zu diesem Tag ergänzt. Für die + Netzplanung sind vor allem die Straßen mit schlechter oder sehr schlechter + Oberfläche interessant, weshalb zur anschließenden Verwendung ein Layer + ausschließlich mit diesen Werten erstellt wurde. So können + Kopfsteinpflaster-Straßen gut erkannt werden, die für eine spätere + Umsetzung besonderen Anforderungen unterliegen. + + Karte des Betrachtungsgebietes + + Themenkarte 3 Ist-Zustand Infrastruktur + + +); diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/05_SectionNetwork.tsx b/src/pages/ZESPlus-Research/radnetzentwicklung/05_SectionNetwork.tsx new file mode 100644 index 000000000..5680a7a93 --- /dev/null +++ b/src/pages/ZESPlus-Research/radnetzentwicklung/05_SectionNetwork.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { Heading, Paragraph, SectionProps } from '~/components2/Article'; +import MapPlaceholder from '../components/MapPlaceholder'; + +export const SectionNetwork = (props: SectionProps) => ( + <> + + Vorhandene Netzkonzepte + Ziele + Anschlußpunkte + + + Es gibt in dem Betrachtungsraum bereits eine Vielzahl an vorhandenen + Radrouten und Netzkonzepten. Dazu gehören Routen auf Landkreisebene, + Touristische Routen, Netze der Nachbargemeinden und Vorschläge aus dem + zivilgesellschaftlichen Fahrradnetzwerk der Gemeinden ZES. Um diese + Konzepte für die Netzplanung gut nutzbar zu machen, wurden sie gemeinsam + mit Quell- und Zielpunkten übersichtlich in einer Karte dargestellt. + + + Themenkarte 4: Vorhandene Netze und Vorschläge: + + {/* Konzept LK Dahme-Spree (Quelle: IGS, Oktober 2020) +*Touristische Radrouten(Quelle: OSM Juni 2020 ) +*Konzept ZES (Prio: hoch) (Quelle: Radgruppe ZES+ Juli 2020) +a) Hauptachsen +b)Achsen ZES +*RSV BER-KW Varianten (Quelle: Radgruppe ZES+ Juli 2020 +*Radkonzept Schönefeld (Quelle: Radgruppe ZES+ Juli 2020 +*Berliner Radverkehrsnetz: Entwurf der Verkehrs- und Umweltverbände Quelle: ADFC, Dezember 2019 +*Radschnellverbindung Y-Trasse, Quelle InfraVelo GmbH April 2019 */} + +); diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/06_SectionPlanningMap.tsx b/src/pages/ZESPlus-Research/radnetzentwicklung/06_SectionPlanningMap.tsx new file mode 100644 index 000000000..5b731c7b5 --- /dev/null +++ b/src/pages/ZESPlus-Research/radnetzentwicklung/06_SectionPlanningMap.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { Heading, Paragraph, SectionProps } from '~/components2/Article'; +import MapPlaceholder from '../components/MapPlaceholder'; + +export const SectionPlanningMap = (props: SectionProps) => ( + <> + + Zusammengeführte Netzplanungskarte + + + Damit die zuvor erläuterten Karten ideal für die Netzplanung betrachtet + werden können, wurde eine integrierte interaktive Karte erstellt. Diese + enthält die wesentlichen Daten für die Netzplanung, bei der sich die + unterschiedlichen Ebenen ein- und ausschalten lassen. In einem Workshop + wird auf dieser Grundlage das finale Netzkonzept erstellt. + + + Themenkarte 5: Interaktive Karte für Netzplanung: + + Barrieren + Anschlußpunkte + Ziele + Straßentypen + Radinfra + surface bad + + vorhandene Netzkonzept + + + + + Ergänzend: Anforderungen Verkehrssicherheit + + Als ergänzende Karte – insbesondere, um Maßnahmen ergänzen und + priorisieren zu können – wurde eine Sicherheitskarte erstellt. Für diese + Karte wurden Unfalldaten ausgewertet und besondere Erfordernisse von + Schüler:innen erfasst. + + Themenkarte 6: Sicherheit (Gefahrenanalyse): + + +); diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/07_SectionNextSteps.tsx b/src/pages/ZESPlus-Research/radnetzentwicklung/07_SectionNextSteps.tsx new file mode 100644 index 000000000..15050167b --- /dev/null +++ b/src/pages/ZESPlus-Research/radnetzentwicklung/07_SectionNextSteps.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { Heading, Paragraph, SectionProps } from '~/components2/Article'; + +export const SectionNextSteps = (props: SectionProps) => ( + <> + + Wie geht es weiter + + - Workshop - Netzplanung - Maßnahmen + +); diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/index.ts b/src/pages/ZESPlus-Research/radnetzentwicklung/index.ts new file mode 100644 index 000000000..f511f0eba --- /dev/null +++ b/src/pages/ZESPlus-Research/radnetzentwicklung/index.ts @@ -0,0 +1,7 @@ +export * from './01_SectionAreaOfInteres'; +export * from './03_SectionUsageRequirements'; +export * from './05_SectionNetwork'; +export * from './07_SectionNextSteps'; +export * from './02_SectionBasics'; +export * from './04_SectionCurrent'; +export * from './06_SectionPlanningMap'; diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/maps/MapNetworks.tsx b/src/pages/ZESPlus-Research/radnetzentwicklung/maps/MapNetworks.tsx new file mode 100644 index 000000000..85e8d167e --- /dev/null +++ b/src/pages/ZESPlus-Research/radnetzentwicklung/maps/MapNetworks.tsx @@ -0,0 +1,103 @@ +import React from 'react'; +import { Map } from '~/components2/Article'; +import { BOUNDS_ZES, ZES_CENTER, ZES_ZOOM } from '../../mapboxOptions.const'; +import { + IconWrapper, + Legend, + LegendCol, + LegendHeader, + LegendItem, + LegendItems, + LegendSources, +} from '~/components2/Article/Map/MapLegendStyledComponents'; +import IconBV from './icons/berliner-verbaende.svg'; +import IconHeatmap from './icons/heatmap.svg'; +import IconKDS from './icons/konzept-dahme-spree.svg'; +import IconKS from './icons/konzept-schoenefeld.svg'; +import IconRSV from './icons/radschnellverbindungen.svg'; +import IconT from './icons/touristische.svg'; +import IconV from './icons/varianten-rsv.svg'; +import IconZES from './icons/zes.svg'; + +const MAP_STYLE_QUALITY: mapboxgl.MapboxOptions['style'] = + 'mapbox://styles/hejco/ckhufbloj0gmz19pk0m6bd4d2'; + +export const MapNetworks = () => ( + <> + + + + TEST MAP + + + + + {' '} + Touristische Radrouten¹ + + + + + {' '} + Radschnellverbindung Berlin Y-Trasse² + + + + + {' '} + Berliner Verbände Radnetz³ + + + + + Netze im Kreis Dahme-Spree + + + + + {' '} + Konzept LK Dahme-Spree⁴ + + + + + {' '} + Radkonzept Schönefeld⁵ + + + + + {' '} + Varianten Radschnellverb. BER-KW⁶ + + + + + {' '} + Konzept ZES⁷ + + + + + Quellen und Ziele + + + + + {' '} + Quellen und Ziele (Heatmap)⁸ + + + + + Quellen: ¹ OSM 2020, ² InfraVelo GmbH 2019, ³ ADFC 2019, ⁴IGS 2020, ⁵ ⁶ + ⁷ Radgruppe ZES+ 2020, ⁸ OSM und Radgruppe ZES+ 2020 + + + +); diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/berliner-verbaende.svg b/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/berliner-verbaende.svg new file mode 100644 index 000000000..208e8ee8a --- /dev/null +++ b/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/berliner-verbaende.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/heatmap.svg b/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/heatmap.svg new file mode 100644 index 000000000..2ed320378 --- /dev/null +++ b/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/heatmap.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/konzept-dahme-spree.svg b/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/konzept-dahme-spree.svg new file mode 100644 index 000000000..55ad5585b --- /dev/null +++ b/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/konzept-dahme-spree.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/konzept-schoenefeld.svg b/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/konzept-schoenefeld.svg new file mode 100644 index 000000000..247adedd1 --- /dev/null +++ b/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/konzept-schoenefeld.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/radschnellverbindungen.svg b/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/radschnellverbindungen.svg new file mode 100644 index 000000000..ff5c6ce4e --- /dev/null +++ b/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/radschnellverbindungen.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/touristische.svg b/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/touristische.svg new file mode 100644 index 000000000..b21269b6b --- /dev/null +++ b/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/touristische.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/varianten-rsv.svg b/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/varianten-rsv.svg new file mode 100644 index 000000000..455ff1348 --- /dev/null +++ b/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/varianten-rsv.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/zes.svg b/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/zes.svg new file mode 100644 index 000000000..ff5e52850 --- /dev/null +++ b/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/zes.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/maps/index.ts b/src/pages/ZESPlus-Research/radnetzentwicklung/maps/index.ts new file mode 100644 index 000000000..b837a648d --- /dev/null +++ b/src/pages/ZESPlus-Research/radnetzentwicklung/maps/index.ts @@ -0,0 +1 @@ +export * from './MapNetworks'; diff --git a/src/pages/ZESPlus-Research/styles.ts b/src/pages/ZESPlus-Research/styles.ts new file mode 100644 index 000000000..e646cc411 --- /dev/null +++ b/src/pages/ZESPlus-Research/styles.ts @@ -0,0 +1,28 @@ +import styled from 'styled-components'; +import { ArticleWrapper } from '~/components2/Article'; + +export const Wrapper = styled(ArticleWrapper)` + background: none; + h2 { + text-transform: none; + } + + .contentWrapper { + box-shadow: none; + } + + .fmc-article-tocentry { + margin-bottom: 0.75em; + font-family: 'Roboto Slab'; + font-weight: 100; + } + + .fmc-article-tocentry-active { + font-weight: 700; + } +`; + +export const Logo = styled.img` + width: 105px; + height: 42px; +`; diff --git a/src/routes.tsx b/src/routes.tsx index c801121d2..00267cd2f 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { connect } from 'react-redux'; -import { Route, Switch, Redirect } from 'react-router-dom'; - +import { Redirect, Route, Switch } from 'react-router-dom'; import Analysis from '~/apps/Analysis'; import Gastro from '~/apps/Gastro'; import MapView from '~/apps/Map'; @@ -19,10 +18,12 @@ import Profile from '~/pages/User/pages/Profile'; import ResetPassword from '~/pages/User/pages/ResetPassword'; import Signup from '~/pages/User/pages/Signup'; import UserVerify from '~/pages/User/pages/Verify'; -import ZESPlusResearch from '~/pages/ZESPlus-Research'; +import { + CycleNetworkDevelopmentPage, + ZesPlusResearchPage, +} from '~/pages/ZESPlus-Research'; import ParkingLane from './pages/ParkingLane'; import XhainWayToSchool from './pages/XhainWayToSchool'; - import { RootState } from './store'; const apps = { @@ -181,7 +182,13 @@ const Routes = ({ token }) => ( {/* ZES-Plus research page */} {config.routes.landing && ( - + + )} + {config.routes.cycleNetworkDevelopment && ( + )} } /> From ac25e6fe681d0578c1f009ff99b2830bab64fbfa Mon Sep 17 00:00:00 2001 From: Tobias Date: Mon, 14 Mar 2022 16:58:58 +0100 Subject: [PATCH 05/22] ZES: Refactor existing content - use named exports - move maps from components to page-content-folder - add types in a more standard way --- .../CycleNetworkDevelopmentPage.tsx | 2 +- .../ZESPlus-Research/ZesPlusResearchPage.tsx | 2 +- .../components/ButtonWrapper.tsx | 5 +- .../components/Logos/Logos.tsx | 6 +- .../components/Logos/index.ts | 3 - .../components/MapNetworks/index.ts | 3 - .../MapPlaceholder/MapPlaceholder.tsx | 44 ++++---- .../components/MapPlaceholder/index.ts | 3 - .../components/MapQuality/MapQuality.tsx | 100 ----------------- .../components/MapQuality/index.ts | 3 - .../components/MapSafety/MapSafety.tsx | 106 ------------------ .../components/MapSafety/index.ts | 3 - .../forschungsprojekt/02_data.tsx | 2 +- .../forschungsprojekt/03_network.tsx | 5 +- .../forschungsprojekt/04_concept_maps.tsx | 4 +- .../Maps}/MapNetworks.tsx | 4 +- .../forschungsprojekt/Maps/MapQuality.tsx | 98 ++++++++++++++++ .../forschungsprojekt/Maps/MapSafety.tsx | 106 ++++++++++++++++++ .../Maps}/icons/berliner-verbaende.svg | 0 .../Maps}/icons/f-fb.svg | 0 .../Maps}/icons/f-gw.svg | 0 .../Maps}/icons/f-sr.svg | 0 .../Maps}/icons/heatmap.svg | 0 .../Maps}/icons/konzept-dahme-spree.svg | 0 .../Maps}/icons/konzept-schoenefeld.svg | 0 .../Maps}/icons/q1.svg | 0 .../Maps}/icons/q2.svg | 0 .../Maps}/icons/q3.svg | 0 .../Maps}/icons/q4.svg | 0 .../Maps}/icons/q5.svg | 0 .../Maps}/icons/radschnellverbindungen.svg | 0 .../Maps}/icons/s0.svg | 0 .../Maps}/icons/s1.svg | 0 .../Maps}/icons/s2.svg | 0 .../Maps}/icons/s3.svg | 0 .../Maps}/icons/s4.svg | 0 .../Maps}/icons/school.svg | 0 .../Maps}/icons/schulwege-unsicher.svg | 0 .../Maps}/icons/schulwege.svg | 0 .../Maps}/icons/touristische.svg | 0 .../Maps}/icons/varianten-rsv.svg | 0 .../Maps}/icons/zes.svg | 0 .../forschungsprojekt/Maps/index.ts | 3 + .../radnetzentwicklung/02_SectionBasics.tsx | 2 +- .../03_SectionUsageRequirements.tsx | 2 +- .../radnetzentwicklung/04_SectionCurrent.tsx | 2 +- .../radnetzentwicklung/05_SectionNetwork.tsx | 2 +- .../06_SectionPlanningMap.tsx | 2 +- 48 files changed, 243 insertions(+), 269 deletions(-) delete mode 100644 src/pages/ZESPlus-Research/components/Logos/index.ts delete mode 100644 src/pages/ZESPlus-Research/components/MapNetworks/index.ts delete mode 100644 src/pages/ZESPlus-Research/components/MapPlaceholder/index.ts delete mode 100644 src/pages/ZESPlus-Research/components/MapQuality/MapQuality.tsx delete mode 100644 src/pages/ZESPlus-Research/components/MapQuality/index.ts delete mode 100644 src/pages/ZESPlus-Research/components/MapSafety/MapSafety.tsx delete mode 100644 src/pages/ZESPlus-Research/components/MapSafety/index.ts rename src/pages/ZESPlus-Research/{components/MapNetworks => forschungsprojekt/Maps}/MapNetworks.tsx (98%) create mode 100644 src/pages/ZESPlus-Research/forschungsprojekt/Maps/MapQuality.tsx create mode 100644 src/pages/ZESPlus-Research/forschungsprojekt/Maps/MapSafety.tsx rename src/pages/ZESPlus-Research/{components/MapNetworks => forschungsprojekt/Maps}/icons/berliner-verbaende.svg (100%) rename src/pages/ZESPlus-Research/{components/MapQuality => forschungsprojekt/Maps}/icons/f-fb.svg (100%) rename src/pages/ZESPlus-Research/{components/MapQuality => forschungsprojekt/Maps}/icons/f-gw.svg (100%) rename src/pages/ZESPlus-Research/{components/MapQuality => forschungsprojekt/Maps}/icons/f-sr.svg (100%) rename src/pages/ZESPlus-Research/{components/MapNetworks => forschungsprojekt/Maps}/icons/heatmap.svg (100%) rename src/pages/ZESPlus-Research/{components/MapNetworks => forschungsprojekt/Maps}/icons/konzept-dahme-spree.svg (100%) rename src/pages/ZESPlus-Research/{components/MapNetworks => forschungsprojekt/Maps}/icons/konzept-schoenefeld.svg (100%) rename src/pages/ZESPlus-Research/{components/MapQuality => forschungsprojekt/Maps}/icons/q1.svg (100%) rename src/pages/ZESPlus-Research/{components/MapQuality => forschungsprojekt/Maps}/icons/q2.svg (100%) rename src/pages/ZESPlus-Research/{components/MapQuality => forschungsprojekt/Maps}/icons/q3.svg (100%) rename src/pages/ZESPlus-Research/{components/MapQuality => forschungsprojekt/Maps}/icons/q4.svg (100%) rename src/pages/ZESPlus-Research/{components/MapQuality => forschungsprojekt/Maps}/icons/q5.svg (100%) rename src/pages/ZESPlus-Research/{components/MapNetworks => forschungsprojekt/Maps}/icons/radschnellverbindungen.svg (100%) rename src/pages/ZESPlus-Research/{components/MapSafety => forschungsprojekt/Maps}/icons/s0.svg (100%) rename src/pages/ZESPlus-Research/{components/MapSafety => forschungsprojekt/Maps}/icons/s1.svg (100%) rename src/pages/ZESPlus-Research/{components/MapSafety => forschungsprojekt/Maps}/icons/s2.svg (100%) rename src/pages/ZESPlus-Research/{components/MapSafety => forschungsprojekt/Maps}/icons/s3.svg (100%) rename src/pages/ZESPlus-Research/{components/MapSafety => forschungsprojekt/Maps}/icons/s4.svg (100%) rename src/pages/ZESPlus-Research/{components/MapSafety => forschungsprojekt/Maps}/icons/school.svg (100%) rename src/pages/ZESPlus-Research/{components/MapSafety => forschungsprojekt/Maps}/icons/schulwege-unsicher.svg (100%) rename src/pages/ZESPlus-Research/{components/MapSafety => forschungsprojekt/Maps}/icons/schulwege.svg (100%) rename src/pages/ZESPlus-Research/{components/MapNetworks => forschungsprojekt/Maps}/icons/touristische.svg (100%) rename src/pages/ZESPlus-Research/{components/MapNetworks => forschungsprojekt/Maps}/icons/varianten-rsv.svg (100%) rename src/pages/ZESPlus-Research/{components/MapNetworks => forschungsprojekt/Maps}/icons/zes.svg (100%) create mode 100644 src/pages/ZESPlus-Research/forschungsprojekt/Maps/index.ts diff --git a/src/pages/ZESPlus-Research/CycleNetworkDevelopmentPage.tsx b/src/pages/ZESPlus-Research/CycleNetworkDevelopmentPage.tsx index d43b868d6..8c2cd2364 100644 --- a/src/pages/ZESPlus-Research/CycleNetworkDevelopmentPage.tsx +++ b/src/pages/ZESPlus-Research/CycleNetworkDevelopmentPage.tsx @@ -3,7 +3,7 @@ import { ArticleHeader, Intro, Paragraph } from '~/components2/Article'; import LogoZES from './components/Logos/assets/logo-zes.png'; import LogoZES2 from './components/Logos/assets/logo-zes@2x.png'; import LogoZES3 from './components/Logos/assets/logo-zes@3x.png'; -import Logos from './components/Logos/Logos'; +import { Logos } from './components/Logos/Logos'; import { SectionAreaOfInteres, SectionBasics, diff --git a/src/pages/ZESPlus-Research/ZesPlusResearchPage.tsx b/src/pages/ZESPlus-Research/ZesPlusResearchPage.tsx index b4231775b..107a445c3 100644 --- a/src/pages/ZESPlus-Research/ZesPlusResearchPage.tsx +++ b/src/pages/ZESPlus-Research/ZesPlusResearchPage.tsx @@ -9,7 +9,7 @@ import { SectionNetwork, SectionNextSteps, } from './forschungsprojekt'; -import Logos from './components/Logos/Logos'; +import { Logos } from './components/Logos/Logos'; import LogoZES from './components/Logos/assets/logo-zes.png'; import LogoZES2 from './components/Logos/assets/logo-zes@2x.png'; import LogoZES3 from './components/Logos/assets/logo-zes@3x.png'; diff --git a/src/pages/ZESPlus-Research/components/ButtonWrapper.tsx b/src/pages/ZESPlus-Research/components/ButtonWrapper.tsx index d28a7040d..d700ade18 100644 --- a/src/pages/ZESPlus-Research/components/ButtonWrapper.tsx +++ b/src/pages/ZESPlus-Research/components/ButtonWrapper.tsx @@ -1,8 +1,7 @@ import styled from 'styled-components'; - import { media } from '~/styles/utils'; -const ButtonWrapper = styled.div` +export const ButtonWrapper = styled.div` margin: 1em auto; width: 100%; display: flex; @@ -17,5 +16,3 @@ const ButtonWrapper = styled.div` margin: 2em auto 4em; `} `; - -export default ButtonWrapper; diff --git a/src/pages/ZESPlus-Research/components/Logos/Logos.tsx b/src/pages/ZESPlus-Research/components/Logos/Logos.tsx index ddb48c5af..40503750e 100644 --- a/src/pages/ZESPlus-Research/components/Logos/Logos.tsx +++ b/src/pages/ZESPlus-Research/components/Logos/Logos.tsx @@ -1,10 +1,8 @@ import React from 'react'; import styled from 'styled-components'; - import { Paragraph } from '~/components2/Article'; import config from '~/config'; import { media } from '~/styles/utils'; - import LogoBMBF from './assets/logo-bmbf.png'; import LogoBMBF2 from './assets/logo-bmbf@2x.png'; import LogoBMBF3 from './assets/logo-bmbf@3x.png'; @@ -89,7 +87,7 @@ const StyledLogoFONA = styled(LogoFONA)` `} `; -const Logos = () => ( +export const Logos: React.VFC = () => (
(
); - -export default Logos; diff --git a/src/pages/ZESPlus-Research/components/Logos/index.ts b/src/pages/ZESPlus-Research/components/Logos/index.ts deleted file mode 100644 index c4fb440f7..000000000 --- a/src/pages/ZESPlus-Research/components/Logos/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import Logos from './Logos'; - -export default Logos; diff --git a/src/pages/ZESPlus-Research/components/MapNetworks/index.ts b/src/pages/ZESPlus-Research/components/MapNetworks/index.ts deleted file mode 100644 index c3e2ccd63..000000000 --- a/src/pages/ZESPlus-Research/components/MapNetworks/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import MapNetworks from './MapNetworks'; - -export default MapNetworks; diff --git a/src/pages/ZESPlus-Research/components/MapPlaceholder/MapPlaceholder.tsx b/src/pages/ZESPlus-Research/components/MapPlaceholder/MapPlaceholder.tsx index 8f1b437cc..a3ca4eeba 100644 --- a/src/pages/ZESPlus-Research/components/MapPlaceholder/MapPlaceholder.tsx +++ b/src/pages/ZESPlus-Research/components/MapPlaceholder/MapPlaceholder.tsx @@ -1,9 +1,7 @@ import React from 'react'; import styled from 'styled-components'; - import { ImageFull } from '~/components2/Article'; import { media } from '~/styles/utils'; - import PlaceholderImage from './images/default.jpg'; import PlaceholderImageMobile from './images/mobile.jpg'; @@ -31,26 +29,26 @@ const Desktop = styled(ImageFull)` `} `; -const defaultAlt = 'Platzhalter für ein fehlendes Bild'; - -interface Props { +type Props = { alt?: string; className?: string; -} - -const MapPlaceholder = ({ alt, className }: Props) => ( - <> - - - -); - -export default MapPlaceholder; +}; + +export const MapPlaceholder: React.VFC = ({ alt, className }) => { + const defaultAlt = 'Platzhalter für ein fehlendes Bild'; + + return ( + <> + + + + ); +}; diff --git a/src/pages/ZESPlus-Research/components/MapPlaceholder/index.ts b/src/pages/ZESPlus-Research/components/MapPlaceholder/index.ts deleted file mode 100644 index e7b73a4f1..000000000 --- a/src/pages/ZESPlus-Research/components/MapPlaceholder/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import MapPlaceholder from './MapPlaceholder'; - -export default MapPlaceholder; diff --git a/src/pages/ZESPlus-Research/components/MapQuality/MapQuality.tsx b/src/pages/ZESPlus-Research/components/MapQuality/MapQuality.tsx deleted file mode 100644 index a095a0be8..000000000 --- a/src/pages/ZESPlus-Research/components/MapQuality/MapQuality.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import React from 'react'; - -import { Map as ArticleMap } from '~/components2/Article'; - -import { BOUNDS_ZES, ZES_CENTER, ZES_ZOOM } from '../../mapboxOptions.const'; -import { - IconWrapper, - Legend, - LegendCol, - LegendHeader, - LegendItem, - LegendItems, - LegendSources, -} from '~/components2/Article/Map/MapLegendStyledComponents'; -import IconPathFB from './icons/f-fb.svg'; -import IconPathGW from './icons/f-gw.svg'; -import IconPathSR from './icons/f-sr.svg'; -import IconQ1 from './icons/q1.svg'; -import IconQ2 from './icons/q2.svg'; -import IconQ3 from './icons/q3.svg'; -import IconQ4 from './icons/q4.svg'; -import IconQ5 from './icons/q5.svg'; - -const MAP_STYLE_QUALITY = 'mapbox://styles/hejco/ckhurerfv3wgv1aog7t7ek3gs'; - -const MapQuality = () => ( - <> - - - - Oberflächenbewertung¹ - - - - - {' '} - Sehr gut - - - - - {' '} - Gut - - - - - {' '} - Mittelmäßig - - - - - {' '} - Schlecht - - - - - {' '} - Sehr schlecht - - - - - Radinfrastruktur (vorhandene)² - - - - - {' '} - Radweg im Seitenraum (neben Gehweg) - - - - - {' '} - Führung auf der Fahrbahn - - - - - {' '} - Gehweg Radfahrer frei - - - - - Quellen: ¹ SimRa - TU Berlin 2020, ² OSM 2020 - - - -); - -export default MapQuality; diff --git a/src/pages/ZESPlus-Research/components/MapQuality/index.ts b/src/pages/ZESPlus-Research/components/MapQuality/index.ts deleted file mode 100644 index dfb1d59ba..000000000 --- a/src/pages/ZESPlus-Research/components/MapQuality/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import MapQuality from './MapQuality'; - -export default MapQuality; diff --git a/src/pages/ZESPlus-Research/components/MapSafety/MapSafety.tsx b/src/pages/ZESPlus-Research/components/MapSafety/MapSafety.tsx deleted file mode 100644 index a830d97b8..000000000 --- a/src/pages/ZESPlus-Research/components/MapSafety/MapSafety.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import React from 'react'; - -import { Map as ArticleMap } from '~/components2/Article'; - -import { BOUNDS_ZES, ZES_CENTER, ZES_ZOOM } from '../../mapboxOptions.const'; -import { - IconWrapper, - Legend, - LegendCol, - LegendHeader, - LegendItem, - LegendItems, - LegendSources, -} from '~/components2/Article/Map/MapLegendStyledComponents'; -import Icons0 from './icons/s0.svg'; -import Icons1 from './icons/s1.svg'; -import Icons2 from './icons/s2.svg'; -import Icons3 from './icons/s3.svg'; -import Icons4 from './icons/s4.svg'; -import IconSchool from './icons/school.svg'; -import IconToSchoolUnsafe from './icons/schulwege-unsicher.svg'; -import IconToSchool from './icons/schulwege.svg'; - -const MAP_STYLE_SAFETY = 'mapbox://styles/hejco/ckguzkrtq06em19l9477wwzc2'; - -const MapSafety = () => ( - <> - - - - Schulwegsicherheit - - - - - - Schulwege¹ - - - - - - Unsichere Abschnitte auf Schulwegen² - - - - - - Bildungseinrichtungen³ - - - - - Unfälle mit Radfahrbeteiligung (2016-2020)⁴ - - - - - {' '} - mit Getöteten - - - - - {' '} - mit Schwerverletzten - - - - - {' '} - mit Leichtverletzten - - - - - {' '} - mit Sachschaden - - - - - Gefahrenstellen - - - - - {' '} - Beinaheunfälle⁵ - - - - - Quellen: ¹ ² Gemeinde Eichwalde 2020, ³ OSM 2020, ⁴ Polizeipräsidium - Brandenburg 2020, ⁵ SimRa - TU Berlin 2020 - - - -); - -export default MapSafety; diff --git a/src/pages/ZESPlus-Research/components/MapSafety/index.ts b/src/pages/ZESPlus-Research/components/MapSafety/index.ts deleted file mode 100644 index a84028cdc..000000000 --- a/src/pages/ZESPlus-Research/components/MapSafety/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import MapSafety from './MapSafety'; - -export default MapSafety; diff --git a/src/pages/ZESPlus-Research/forschungsprojekt/02_data.tsx b/src/pages/ZESPlus-Research/forschungsprojekt/02_data.tsx index 9849cdee7..7b811bb44 100644 --- a/src/pages/ZESPlus-Research/forschungsprojekt/02_data.tsx +++ b/src/pages/ZESPlus-Research/forschungsprojekt/02_data.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; import { Heading, List, Paragraph, SectionProps } from '~/components2/Article'; import { AnchorButton } from '~/components2/Button'; import { Link } from '~/components2/Link'; -import ButtonWrapper from '../components/ButtonWrapper'; +import { ButtonWrapper } from '../components/ButtonWrapper'; const StyledList = styled(List)` list-style-type: lower-alpha; diff --git a/src/pages/ZESPlus-Research/forschungsprojekt/03_network.tsx b/src/pages/ZESPlus-Research/forschungsprojekt/03_network.tsx index 47ee871a1..41122c02f 100644 --- a/src/pages/ZESPlus-Research/forschungsprojekt/03_network.tsx +++ b/src/pages/ZESPlus-Research/forschungsprojekt/03_network.tsx @@ -2,9 +2,8 @@ import React from 'react'; import styled from 'styled-components'; import { Heading, Paragraph, SectionProps } from '~/components2/Article'; import { Link } from '~/components2/Link'; -import MapPlaceholder from '../components/MapPlaceholder'; -import MapQuality from '../components/MapQuality'; -import MapSafety from '../components/MapSafety'; +import { MapPlaceholder } from '../components/MapPlaceholder/MapPlaceholder'; +import { MapQuality, MapSafety } from './Maps'; const SectionHeadingWrapper = styled.div` & h3 { diff --git a/src/pages/ZESPlus-Research/forschungsprojekt/04_concept_maps.tsx b/src/pages/ZESPlus-Research/forschungsprojekt/04_concept_maps.tsx index 73379223e..59227b5e0 100644 --- a/src/pages/ZESPlus-Research/forschungsprojekt/04_concept_maps.tsx +++ b/src/pages/ZESPlus-Research/forschungsprojekt/04_concept_maps.tsx @@ -2,8 +2,8 @@ import React from 'react'; import { Heading, Paragraph, SectionProps } from '~/components2/Article'; import { AnchorButton } from '~/components2/Button'; import { Link } from '~/components2/Link'; -import ButtonWrapper from '../components/ButtonWrapper'; -import MapNetworks from '../components/MapNetworks'; +import { ButtonWrapper } from '../components/ButtonWrapper'; +import { MapNetworks } from './Maps'; export const SectionConceptMaps = (props: SectionProps) => ( <> diff --git a/src/pages/ZESPlus-Research/components/MapNetworks/MapNetworks.tsx b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/MapNetworks.tsx similarity index 98% rename from src/pages/ZESPlus-Research/components/MapNetworks/MapNetworks.tsx rename to src/pages/ZESPlus-Research/forschungsprojekt/Maps/MapNetworks.tsx index 51263e340..d76d0f779 100644 --- a/src/pages/ZESPlus-Research/components/MapNetworks/MapNetworks.tsx +++ b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/MapNetworks.tsx @@ -22,7 +22,7 @@ import IconZES from './icons/zes.svg'; const MAP_STYLE_QUALITY: mapboxgl.MapboxOptions['style'] = 'mapbox://styles/hejco/ckhufbloj0gmz19pk0m6bd4d2'; -const MapNetworks = () => ( +export const MapNetworks = () => ( <> ( ); - -export default MapNetworks; diff --git a/src/pages/ZESPlus-Research/forschungsprojekt/Maps/MapQuality.tsx b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/MapQuality.tsx new file mode 100644 index 000000000..a2640892f --- /dev/null +++ b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/MapQuality.tsx @@ -0,0 +1,98 @@ +import React from 'react'; +import { Map as ArticleMap } from '~/components2/Article'; +import { + IconWrapper, + Legend, + LegendCol, + LegendHeader, + LegendItem, + LegendItems, + LegendSources, +} from '~/components2/Article/Map/MapLegendStyledComponents'; +import { BOUNDS_ZES, ZES_CENTER, ZES_ZOOM } from '../../mapboxOptions.const'; +import IconPathFB from './icons/f-fb.svg'; +import IconPathGW from './icons/f-gw.svg'; +import IconPathSR from './icons/f-sr.svg'; +import IconQ1 from './icons/q1.svg'; +import IconQ2 from './icons/q2.svg'; +import IconQ3 from './icons/q3.svg'; +import IconQ4 from './icons/q4.svg'; +import IconQ5 from './icons/q5.svg'; + +const MAP_STYLE_QUALITY = 'mapbox://styles/hejco/ckhurerfv3wgv1aog7t7ek3gs'; + +export const MapQuality = () => { + return ( + <> + + + + Oberflächenbewertung¹ + + + + + {' '} + Sehr gut + + + + + {' '} + Gut + + + + + {' '} + Mittelmäßig + + + + + {' '} + Schlecht + + + + + {' '} + Sehr schlecht + + + + + Radinfrastruktur (vorhandene)² + + + + + {' '} + Radweg im Seitenraum (neben Gehweg) + + + + + {' '} + Führung auf der Fahrbahn + + + + + {' '} + Gehweg Radfahrer frei + + + + + Quellen: ¹ SimRa - TU Berlin 2020, ² OSM 2020 + + + + ); +}; diff --git a/src/pages/ZESPlus-Research/forschungsprojekt/Maps/MapSafety.tsx b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/MapSafety.tsx new file mode 100644 index 000000000..84a984038 --- /dev/null +++ b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/MapSafety.tsx @@ -0,0 +1,106 @@ +import React from 'react'; +import { Map as ArticleMap } from '~/components2/Article'; +import { + IconWrapper, + Legend, + LegendCol, + LegendHeader, + LegendItem, + LegendItems, + LegendSources, +} from '~/components2/Article/Map/MapLegendStyledComponents'; +import { BOUNDS_ZES, ZES_CENTER, ZES_ZOOM } from '../../mapboxOptions.const'; +import Icons0 from './icons/s0.svg'; +import Icons1 from './icons/s1.svg'; +import Icons2 from './icons/s2.svg'; +import Icons3 from './icons/s3.svg'; +import Icons4 from './icons/s4.svg'; +import IconSchool from './icons/school.svg'; +import IconToSchoolUnsafe from './icons/schulwege-unsicher.svg'; +import IconToSchool from './icons/schulwege.svg'; + +const MAP_STYLE_SAFETY = 'mapbox://styles/hejco/ckguzkrtq06em19l9477wwzc2'; + +export const MapSafety = () => { + return ( + <> + + + + Schulwegsicherheit + + + + + + Schulwege¹ + + + + + + Unsichere Abschnitte auf Schulwegen² + + + + + + Bildungseinrichtungen³ + + + + + + Unfälle mit Radfahrbeteiligung (2016-2020)⁴ + + + + + + {' '} + mit Getöteten + + + + + {' '} + mit Schwerverletzten + + + + + {' '} + mit Leichtverletzten + + + + + {' '} + mit Sachschaden + + + + + Gefahrenstellen + + + + + {' '} + Beinaheunfälle⁵ + + + + + Quellen: ¹ ² Gemeinde Eichwalde 2020, ³ OSM 2020, ⁴ Polizeipräsidium + Brandenburg 2020, ⁵ SimRa - TU Berlin 2020 + + + + ); +}; diff --git a/src/pages/ZESPlus-Research/components/MapNetworks/icons/berliner-verbaende.svg b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/berliner-verbaende.svg similarity index 100% rename from src/pages/ZESPlus-Research/components/MapNetworks/icons/berliner-verbaende.svg rename to src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/berliner-verbaende.svg diff --git a/src/pages/ZESPlus-Research/components/MapQuality/icons/f-fb.svg b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/f-fb.svg similarity index 100% rename from src/pages/ZESPlus-Research/components/MapQuality/icons/f-fb.svg rename to src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/f-fb.svg diff --git a/src/pages/ZESPlus-Research/components/MapQuality/icons/f-gw.svg b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/f-gw.svg similarity index 100% rename from src/pages/ZESPlus-Research/components/MapQuality/icons/f-gw.svg rename to src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/f-gw.svg diff --git a/src/pages/ZESPlus-Research/components/MapQuality/icons/f-sr.svg b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/f-sr.svg similarity index 100% rename from src/pages/ZESPlus-Research/components/MapQuality/icons/f-sr.svg rename to src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/f-sr.svg diff --git a/src/pages/ZESPlus-Research/components/MapNetworks/icons/heatmap.svg b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/heatmap.svg similarity index 100% rename from src/pages/ZESPlus-Research/components/MapNetworks/icons/heatmap.svg rename to src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/heatmap.svg diff --git a/src/pages/ZESPlus-Research/components/MapNetworks/icons/konzept-dahme-spree.svg b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/konzept-dahme-spree.svg similarity index 100% rename from src/pages/ZESPlus-Research/components/MapNetworks/icons/konzept-dahme-spree.svg rename to src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/konzept-dahme-spree.svg diff --git a/src/pages/ZESPlus-Research/components/MapNetworks/icons/konzept-schoenefeld.svg b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/konzept-schoenefeld.svg similarity index 100% rename from src/pages/ZESPlus-Research/components/MapNetworks/icons/konzept-schoenefeld.svg rename to src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/konzept-schoenefeld.svg diff --git a/src/pages/ZESPlus-Research/components/MapQuality/icons/q1.svg b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/q1.svg similarity index 100% rename from src/pages/ZESPlus-Research/components/MapQuality/icons/q1.svg rename to src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/q1.svg diff --git a/src/pages/ZESPlus-Research/components/MapQuality/icons/q2.svg b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/q2.svg similarity index 100% rename from src/pages/ZESPlus-Research/components/MapQuality/icons/q2.svg rename to src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/q2.svg diff --git a/src/pages/ZESPlus-Research/components/MapQuality/icons/q3.svg b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/q3.svg similarity index 100% rename from src/pages/ZESPlus-Research/components/MapQuality/icons/q3.svg rename to src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/q3.svg diff --git a/src/pages/ZESPlus-Research/components/MapQuality/icons/q4.svg b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/q4.svg similarity index 100% rename from src/pages/ZESPlus-Research/components/MapQuality/icons/q4.svg rename to src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/q4.svg diff --git a/src/pages/ZESPlus-Research/components/MapQuality/icons/q5.svg b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/q5.svg similarity index 100% rename from src/pages/ZESPlus-Research/components/MapQuality/icons/q5.svg rename to src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/q5.svg diff --git a/src/pages/ZESPlus-Research/components/MapNetworks/icons/radschnellverbindungen.svg b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/radschnellverbindungen.svg similarity index 100% rename from src/pages/ZESPlus-Research/components/MapNetworks/icons/radschnellverbindungen.svg rename to src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/radschnellverbindungen.svg diff --git a/src/pages/ZESPlus-Research/components/MapSafety/icons/s0.svg b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/s0.svg similarity index 100% rename from src/pages/ZESPlus-Research/components/MapSafety/icons/s0.svg rename to src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/s0.svg diff --git a/src/pages/ZESPlus-Research/components/MapSafety/icons/s1.svg b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/s1.svg similarity index 100% rename from src/pages/ZESPlus-Research/components/MapSafety/icons/s1.svg rename to src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/s1.svg diff --git a/src/pages/ZESPlus-Research/components/MapSafety/icons/s2.svg b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/s2.svg similarity index 100% rename from src/pages/ZESPlus-Research/components/MapSafety/icons/s2.svg rename to src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/s2.svg diff --git a/src/pages/ZESPlus-Research/components/MapSafety/icons/s3.svg b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/s3.svg similarity index 100% rename from src/pages/ZESPlus-Research/components/MapSafety/icons/s3.svg rename to src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/s3.svg diff --git a/src/pages/ZESPlus-Research/components/MapSafety/icons/s4.svg b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/s4.svg similarity index 100% rename from src/pages/ZESPlus-Research/components/MapSafety/icons/s4.svg rename to src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/s4.svg diff --git a/src/pages/ZESPlus-Research/components/MapSafety/icons/school.svg b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/school.svg similarity index 100% rename from src/pages/ZESPlus-Research/components/MapSafety/icons/school.svg rename to src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/school.svg diff --git a/src/pages/ZESPlus-Research/components/MapSafety/icons/schulwege-unsicher.svg b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/schulwege-unsicher.svg similarity index 100% rename from src/pages/ZESPlus-Research/components/MapSafety/icons/schulwege-unsicher.svg rename to src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/schulwege-unsicher.svg diff --git a/src/pages/ZESPlus-Research/components/MapSafety/icons/schulwege.svg b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/schulwege.svg similarity index 100% rename from src/pages/ZESPlus-Research/components/MapSafety/icons/schulwege.svg rename to src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/schulwege.svg diff --git a/src/pages/ZESPlus-Research/components/MapNetworks/icons/touristische.svg b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/touristische.svg similarity index 100% rename from src/pages/ZESPlus-Research/components/MapNetworks/icons/touristische.svg rename to src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/touristische.svg diff --git a/src/pages/ZESPlus-Research/components/MapNetworks/icons/varianten-rsv.svg b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/varianten-rsv.svg similarity index 100% rename from src/pages/ZESPlus-Research/components/MapNetworks/icons/varianten-rsv.svg rename to src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/varianten-rsv.svg diff --git a/src/pages/ZESPlus-Research/components/MapNetworks/icons/zes.svg b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/zes.svg similarity index 100% rename from src/pages/ZESPlus-Research/components/MapNetworks/icons/zes.svg rename to src/pages/ZESPlus-Research/forschungsprojekt/Maps/icons/zes.svg diff --git a/src/pages/ZESPlus-Research/forschungsprojekt/Maps/index.ts b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/index.ts new file mode 100644 index 000000000..b9d28ab3b --- /dev/null +++ b/src/pages/ZESPlus-Research/forschungsprojekt/Maps/index.ts @@ -0,0 +1,3 @@ +export * from './MapNetworks'; +export * from './MapQuality'; +export * from './MapSafety'; diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/02_SectionBasics.tsx b/src/pages/ZESPlus-Research/radnetzentwicklung/02_SectionBasics.tsx index 8eee28440..9b2cac636 100644 --- a/src/pages/ZESPlus-Research/radnetzentwicklung/02_SectionBasics.tsx +++ b/src/pages/ZESPlus-Research/radnetzentwicklung/02_SectionBasics.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Heading, List, Paragraph, SectionProps } from '~/components2/Article'; -import MapPlaceholder from '../components/MapPlaceholder'; +import { MapPlaceholder } from '../components/MapPlaceholder/MapPlaceholder'; import { MapNetworks } from './maps'; export const SectionBasics = (props: SectionProps) => ( diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/03_SectionUsageRequirements.tsx b/src/pages/ZESPlus-Research/radnetzentwicklung/03_SectionUsageRequirements.tsx index 51a127fd0..960f84aab 100644 --- a/src/pages/ZESPlus-Research/radnetzentwicklung/03_SectionUsageRequirements.tsx +++ b/src/pages/ZESPlus-Research/radnetzentwicklung/03_SectionUsageRequirements.tsx @@ -5,7 +5,7 @@ import { Paragraph, SectionProps, } from '~/components2/Article'; -import MapPlaceholder from '../components/MapPlaceholder'; +import { MapPlaceholder } from '../components/MapPlaceholder/MapPlaceholder'; export const SectionUsageRequirements = (props: SectionProps) => ( <> diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/04_SectionCurrent.tsx b/src/pages/ZESPlus-Research/radnetzentwicklung/04_SectionCurrent.tsx index f5f824485..32679feb5 100644 --- a/src/pages/ZESPlus-Research/radnetzentwicklung/04_SectionCurrent.tsx +++ b/src/pages/ZESPlus-Research/radnetzentwicklung/04_SectionCurrent.tsx @@ -6,7 +6,7 @@ import { SectionProps, Image, } from '~/components2/Article'; -import MapPlaceholder from '../components/MapPlaceholder'; +import { MapPlaceholder } from '../components/MapPlaceholder/MapPlaceholder'; import ImagePlaceholder from '../forschungsprojekt/images/research-2.jpg'; export const SectionCurrent = (props: SectionProps) => ( diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/05_SectionNetwork.tsx b/src/pages/ZESPlus-Research/radnetzentwicklung/05_SectionNetwork.tsx index 5680a7a93..52da23afc 100644 --- a/src/pages/ZESPlus-Research/radnetzentwicklung/05_SectionNetwork.tsx +++ b/src/pages/ZESPlus-Research/radnetzentwicklung/05_SectionNetwork.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Heading, Paragraph, SectionProps } from '~/components2/Article'; -import MapPlaceholder from '../components/MapPlaceholder'; +import { MapPlaceholder } from '../components/MapPlaceholder/MapPlaceholder'; export const SectionNetwork = (props: SectionProps) => ( <> diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/06_SectionPlanningMap.tsx b/src/pages/ZESPlus-Research/radnetzentwicklung/06_SectionPlanningMap.tsx index 5b731c7b5..138cf939c 100644 --- a/src/pages/ZESPlus-Research/radnetzentwicklung/06_SectionPlanningMap.tsx +++ b/src/pages/ZESPlus-Research/radnetzentwicklung/06_SectionPlanningMap.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Heading, Paragraph, SectionProps } from '~/components2/Article'; -import MapPlaceholder from '../components/MapPlaceholder'; +import { MapPlaceholder } from '../components/MapPlaceholder/MapPlaceholder'; export const SectionPlanningMap = (props: SectionProps) => ( <> From 42b2337de2d73650f4ef0fdb8c3afbe391667d0b Mon Sep 17 00:00:00 2001 From: Tobias Date: Mon, 14 Mar 2022 17:44:07 +0100 Subject: [PATCH 06/22] Refactor icon filename "smartphone-finger-icon" --- src/components2/Article/Map/Map.tsx | 2 +- .../smartphone-finger-icon.svg} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename src/components2/Article/Map/{smartphone-finger.svg => assets/smartphone-finger-icon.svg} (100%) diff --git a/src/components2/Article/Map/Map.tsx b/src/components2/Article/Map/Map.tsx index f47144af6..561e7c36f 100644 --- a/src/components2/Article/Map/Map.tsx +++ b/src/components2/Article/Map/Map.tsx @@ -2,7 +2,7 @@ import MapboxGL from 'mapbox-gl'; import React, { useEffect, useState } from 'react'; import { BaseMap } from '~/components2/BaseMap'; import { MAPBOX_INTERACTION_HANDLERS } from './MapInteractionHandler.const'; -import IconActivate from './smartphone-finger.svg'; +import IconActivate from './assets/smartphone-finger-icon.svg'; import { ActivateButton, ButtonArea, MapWrapper, Wrapper } from './styles'; type Props = { diff --git a/src/components2/Article/Map/smartphone-finger.svg b/src/components2/Article/Map/assets/smartphone-finger-icon.svg similarity index 100% rename from src/components2/Article/Map/smartphone-finger.svg rename to src/components2/Article/Map/assets/smartphone-finger-icon.svg From ce96530cd937870b10cfde18504d99b7c8077492 Mon Sep 17 00:00:00 2001 From: Tobias Date: Mon, 14 Mar 2022 17:44:25 +0100 Subject: [PATCH 07/22] Refactor icon filename "close-icon" --- src/components2/ModalCloseIcon/ModalCloseIcon.tsx | 2 +- src/components2/ModalCloseIcon/{close.svg => close-icon.svg} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename src/components2/ModalCloseIcon/{close.svg => close-icon.svg} (100%) diff --git a/src/components2/ModalCloseIcon/ModalCloseIcon.tsx b/src/components2/ModalCloseIcon/ModalCloseIcon.tsx index 04c9ab760..ac47bd2db 100644 --- a/src/components2/ModalCloseIcon/ModalCloseIcon.tsx +++ b/src/components2/ModalCloseIcon/ModalCloseIcon.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled from 'styled-components'; import config from '~/config'; -import CloseIcon from './close.svg'; +import CloseIcon from './close-icon.svg'; const StyledCloseIcon = styled(CloseIcon)` color: ${config.colors.lightgrey}; diff --git a/src/components2/ModalCloseIcon/close.svg b/src/components2/ModalCloseIcon/close-icon.svg similarity index 100% rename from src/components2/ModalCloseIcon/close.svg rename to src/components2/ModalCloseIcon/close-icon.svg From d9eb1152ddbe768d05fbf845ea61d4bd03c3d13d Mon Sep 17 00:00:00 2001 From: Tobias Date: Mon, 14 Mar 2022 17:44:46 +0100 Subject: [PATCH 08/22] Refactor import name "PlaceholderImageDesktop" --- .../components/MapPlaceholder/MapPlaceholder.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/ZESPlus-Research/components/MapPlaceholder/MapPlaceholder.tsx b/src/pages/ZESPlus-Research/components/MapPlaceholder/MapPlaceholder.tsx index a3ca4eeba..401bbf994 100644 --- a/src/pages/ZESPlus-Research/components/MapPlaceholder/MapPlaceholder.tsx +++ b/src/pages/ZESPlus-Research/components/MapPlaceholder/MapPlaceholder.tsx @@ -2,7 +2,7 @@ import React from 'react'; import styled from 'styled-components'; import { ImageFull } from '~/components2/Article'; import { media } from '~/styles/utils'; -import PlaceholderImage from './images/default.jpg'; +import PlaceholderImageDesktop from './images/default.jpg'; import PlaceholderImageMobile from './images/mobile.jpg'; const Mobile = styled(ImageFull)` @@ -45,7 +45,7 @@ export const MapPlaceholder: React.VFC = ({ alt, className }) => { className={className} /> From 7ea7dd0cbdd866a9388f4e4320bc992719f555c1 Mon Sep 17 00:00:00 2001 From: Tobias Date: Mon, 14 Mar 2022 17:49:09 +0100 Subject: [PATCH 09/22] Component: Add FlyingLegend, Refactor Planning-Legend - Extract flying legend to component - Standardize import/export of planning legend --- .../MapLegend/CadastreLegendGrid.tsx | 11 +- .../MapLegend/IncidentLegendGrid.tsx | 1 - src/components/MapLegend/Legend.tsx | 105 +++--------------- src/components/MapLegend/index.ts | 12 -- src/components2/MapLegend/FlyingLegend.tsx | 104 +++++++++++++++++ src/components2/MapLegend/Legend.tsx | 0 src/components2/MapLegend/index.ts | 1 + 7 files changed, 125 insertions(+), 109 deletions(-) create mode 100644 src/components2/MapLegend/FlyingLegend.tsx delete mode 100644 src/components2/MapLegend/Legend.tsx create mode 100644 src/components2/MapLegend/index.ts diff --git a/src/components/MapLegend/CadastreLegendGrid.tsx b/src/components/MapLegend/CadastreLegendGrid.tsx index 84051fa7e..4555a8f21 100644 --- a/src/components/MapLegend/CadastreLegendGrid.tsx +++ b/src/components/MapLegend/CadastreLegendGrid.tsx @@ -1,19 +1,18 @@ import React from 'react'; - +import ConstructionLegendImage from './assets/construction.png'; +import DividersLegendImage from './assets/dividers.png'; +import FootwaysLegendImage from './assets/footways.png'; +import GuardrailLegendImage from './assets/guardrail-legend.png'; import { CadastreLegendItemColor, CadastreLegendItemImage, + CadastreLegendItemLine, CadastreLegendItemPoint, CadastreLegendItemPointSmall, - CadastreLegendItemLine, Header, LegendCol, LegendItem, LegendWrapper, - ConstructionLegendImage, - DividersLegendImage, - FootwaysLegendImage, - GuardrailLegendImage, } from './index'; export const CadastreLegendGrid = () => ( diff --git a/src/components/MapLegend/IncidentLegendGrid.tsx b/src/components/MapLegend/IncidentLegendGrid.tsx index 6738cc341..60955f7a1 100644 --- a/src/components/MapLegend/IncidentLegendGrid.tsx +++ b/src/components/MapLegend/IncidentLegendGrid.tsx @@ -1,5 +1,4 @@ import React from 'react'; - import { CadastreLegendItemPoint, HeaderCol, diff --git a/src/components/MapLegend/Legend.tsx b/src/components/MapLegend/Legend.tsx index 94d91b903..b6c168131 100644 --- a/src/components/MapLegend/Legend.tsx +++ b/src/components/MapLegend/Legend.tsx @@ -1,57 +1,10 @@ import React from 'react'; import styled from 'styled-components'; import { AnchorLink } from '~/components2/Link'; +import { FlyingLegend } from '~/components2/MapLegend'; import config from '~/config'; -import { media } from '~/styles/utils'; -import { ModalCloseIcon } from '~/components2/ModalCloseIcon'; import { CadastreLegendGrid, IncidentLegendGrid } from './index'; -const BaseWrapper = styled.section` - background-color: ${config.colors.lightbg}; - color: ${config.colors.darkbg}; - display: flex; - width: 100%; - line-height: 1.4; - border: solid 1px #cccccc; - border-radius: 1px; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); - bottom: 0; - position: absolute; - - ${media.s` - padding: 0; - `} - - ${media.m` - position: static; - min-width: 400px; - `} - - ${media.m` - bottom: initial; - position: absolute; - left: 15px; - top: 85px; - width: 40vw; - max-width: 24em; - font-size: 1.5625vw; - `} - - ${media.l` - font-size: 16px; - `} - - ${media.xl` - left: 15px; - `} -`; - -const Wrapper = styled(BaseWrapper)` - display: flex; - flex-direction: column; - z-index: 400; -`; - const Header = styled.h1` font-size: 1.2em; font-weight: 400; @@ -63,59 +16,31 @@ const Header = styled.h1` border-bottom: solid 1px #e0e0e0; `; -const LegendListWrapper = styled.div` - overflow-y: auto; - padding: 0.625rem 1.2rem 1.2rem 1.2rem; - height: calc(100vh - 100px); - min-width: 100vw; - - ${media.m` - min-width: 100%; - height: calc(100vh - 230px); - `} -`; - export const MutedText = styled.div` color: ${config.colors.midgrey}; font-size: 0.9rem; margin: 0.5rem 0 1.5rem 0; `; -const IconWrapper = styled.div` - ${media.m` - display: none; - `} -`; - const FooterWrapper = styled.div` margin-top: 1rem; `; const Legend = ({ closeLegend }) => ( - - - closeLegend()} - controlsId="Legend" - label="Legende schließen" - positionRight="25px" - /> - - -
Legende Katasterdaten
- - Quellen: Fis-Broker Berlin 2014 - -
Legende Unfälle
- - - - - Erläuterungen der Unfallkategorien - - - - + +
Legende Katasterdaten
+ + Quellen: Fis-Broker Berlin 2014 + +
Legende Unfälle
+ + + + + Erläuterungen der Unfallkategorien + + + ); export default Legend; diff --git a/src/components/MapLegend/index.ts b/src/components/MapLegend/index.ts index 66e5ab586..00cb120fd 100644 --- a/src/components/MapLegend/index.ts +++ b/src/components/MapLegend/index.ts @@ -1,16 +1,4 @@ -import ConstructionLegendImage from './assets/construction.png'; -import DividersLegendImage from './assets/dividers.png'; -import FootwaysLegendImage from './assets/footways.png'; -import GuardrailLegendImage from './assets/guardrail-legend.png'; - export * from './Legend'; export * from './IncidentLegendGrid'; export * from './CadastreLegendGrid'; export * from './LegendStyles'; - -export { - ConstructionLegendImage, - DividersLegendImage, - FootwaysLegendImage, - GuardrailLegendImage, -}; diff --git a/src/components2/MapLegend/FlyingLegend.tsx b/src/components2/MapLegend/FlyingLegend.tsx new file mode 100644 index 000000000..8277f7e25 --- /dev/null +++ b/src/components2/MapLegend/FlyingLegend.tsx @@ -0,0 +1,104 @@ +import React from 'react'; +import styled from 'styled-components'; +import { ModalCloseIcon } from '~/components2/ModalCloseIcon'; +import config from '~/config'; +import { media } from '~/styles/utils'; + +const BaseWrapper = styled.section` + background-color: ${config.colors.lightbg}; + color: ${config.colors.darkbg}; + display: flex; + width: 100%; + line-height: 1.4; + border: solid 1px #cccccc; + border-radius: 1px; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); + bottom: 0; + position: absolute; + + ${media.s` + padding: 0; + `} + + ${media.m` + position: static; + min-width: 400px; + `} + + ${media.m` + bottom: initial; + position: absolute; + left: 15px; + top: 85px; + width: 40vw; + max-width: 24em; + font-size: 1.5625vw; + `} + + ${media.l` + font-size: 16px; + `} + + ${media.xl` + left: 15px; + `} +`; + +const Wrapper = styled(BaseWrapper)` + display: flex; + flex-direction: column; + z-index: 400; +`; + +const Header = styled.h1` + font-size: 1.2em; + font-weight: 400; + margin-top: 1rem; + margin-right: 0; + margin-bottom: 0; + margin-left: 0; + padding-bottom: 0.5em; + border-bottom: solid 1px #e0e0e0; +`; + +const LegendListWrapper = styled.div` + overflow-y: auto; + padding: 0.625rem 1.2rem 1.2rem 1.2rem; + height: calc(100vh - 100px); + min-width: 100vw; + + ${media.m` + min-width: 100%; + height: calc(100vh - 230px); + `} +`; + +export const MutedText = styled.div` + color: ${config.colors.midgrey}; + font-size: 0.9rem; + margin: 0.5rem 0 1.5rem 0; +`; + +const IconWrapper = styled.div` + ${media.m` + display: none; + `} +`; + +type Props = { + closeLegend: () => void; +}; + +export const FlyingLegend: React.FC = ({ closeLegend, children }) => ( + + + closeLegend()} + controlsId="Legend" + label="Legende schließen" + positionRight="25px" + /> + + {children} + +); diff --git a/src/components2/MapLegend/Legend.tsx b/src/components2/MapLegend/Legend.tsx deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/components2/MapLegend/index.ts b/src/components2/MapLegend/index.ts new file mode 100644 index 000000000..ddab93d56 --- /dev/null +++ b/src/components2/MapLegend/index.ts @@ -0,0 +1 @@ +export * from './FlyingLegend'; From af9acc89d498990e0e6101e36bd7491e4e295cc1 Mon Sep 17 00:00:00 2001 From: Tobias Date: Tue, 15 Mar 2022 15:52:45 +0100 Subject: [PATCH 10/22] Fix .vscode Extension for styled components The linked extension was not available anymore. This one looks more official. --- .vscode/extensions.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 229459412..adb923904 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -5,6 +5,6 @@ "editorconfig.editorconfig", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode", - "jpoissonnier.vscode-styled-components", + "styled-components.vscode-styled-components" ] } From 67ae43e83bdc20e398261b0c82259b69c536f84e Mon Sep 17 00:00:00 2001 From: Tobias Date: Tue, 15 Mar 2022 15:55:28 +0100 Subject: [PATCH 11/22] Refactor Component ErrorMessages to tsx - Message as children - Make TS - Move to components2 --- src/apps/Map/index.tsx | 4 +- src/components/ErrorMessage.js | 51 ------------------- src/components2/ErrorMessage/ErrorMessage.tsx | 46 +++++++++++++++++ src/components2/ErrorMessage/index.ts | 1 + src/pages/Reports/pages/OverviewMap/index.js | 9 ++-- .../components/LocateMeMap/index.js | 9 ++-- .../SubmitReport/pages/AdditionalDataForm.js | 9 ++-- .../SubmitReport/pages/LocateModeChooser.js | 7 +-- .../pages/ReportSubmitted/index.js | 6 ++- 9 files changed, 69 insertions(+), 73 deletions(-) delete mode 100644 src/components/ErrorMessage.js create mode 100644 src/components2/ErrorMessage/ErrorMessage.tsx create mode 100644 src/components2/ErrorMessage/index.ts diff --git a/src/apps/Map/index.tsx b/src/apps/Map/index.tsx index 79ab4b0a0..688b1c3ae 100644 --- a/src/apps/Map/index.tsx +++ b/src/apps/Map/index.tsx @@ -7,7 +7,7 @@ import { withRouter, } from 'react-router-dom'; import styled from 'styled-components'; -import ErrorMessage from '~/components/ErrorMessage'; +import { ErrorMessage } from '~/components2/ErrorMessage'; import { Logo as FMBLogo } from '~/components2/Logo'; import Legend from '~/components/MapLegend/Legend'; import config from '~/config'; @@ -145,7 +145,7 @@ const MapView = ({ return ( {error != null && ( - + {error} )} diff --git a/src/components/ErrorMessage.js b/src/components/ErrorMessage.js deleted file mode 100644 index 43c9b13c8..000000000 --- a/src/components/ErrorMessage.js +++ /dev/null @@ -1,51 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import styled from 'styled-components'; - -import Button from '~/components/Button'; -import config from '~/config'; -import logger from '~/utils/logger'; - -const Div = styled.div` - position: fixed; - bottom: 0; - width: 100%; - background-color: ${config.colors.darkbg}; - z-index: 99999999999999; - padding: 8px 12px; - color: ${config.colors.white}; -`; - -const Heading = styled.h2` - color: ${config.colors.error}; -`; - -const StyledDismissButton = styled(Button)` - float: right; -`; - -const ErrorMessage = ({ title, message, onDismiss, dismissMessage }) => ( -
- {title} -

{message}

- - {dismissMessage} - -
-); - -ErrorMessage.propTypes = { - title: PropTypes.string, - message: PropTypes.string, - onDismiss: PropTypes.func, - dismissMessage: PropTypes.string, -}; - -ErrorMessage.defaultProps = { - title: 'Fehler', - message: 'Ein Fehler ist aufgetreten', - onDismiss: () => logger('onDismiss says implement me'), - dismissMessage: 'OK', -}; - -export default ErrorMessage; diff --git a/src/components2/ErrorMessage/ErrorMessage.tsx b/src/components2/ErrorMessage/ErrorMessage.tsx new file mode 100644 index 000000000..2766c3437 --- /dev/null +++ b/src/components2/ErrorMessage/ErrorMessage.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import styled from 'styled-components'; +import Button from '~/components/Button'; +import config from '~/config'; + +const FloatingWrapper = styled.div` + position: fixed; + bottom: 0; + left: 0; + width: 100%; + background-color: ${config.colors.darkbg}; + z-index: 99999999999999; + padding: 8px 12px; + color: ${config.colors.white}; +`; + +const Heading = styled.h2` + color: ${config.colors.error}; +`; + +const StyledDismissButton = styled(Button)` + float: right; +`; + +type Props = { + title?: string; + dismissMessage?: string; + onDismiss?: () => void; +}; + +export const ErrorMessage: React.FC = ({ + title = 'Fehler', + dismissMessage = 'OK', + onDismiss, + children, +}) => ( + + {title} + {typeof children === 'string' ?

{children}

: children} + {onDismiss && ( + + {dismissMessage} + + )} + +); diff --git a/src/components2/ErrorMessage/index.ts b/src/components2/ErrorMessage/index.ts new file mode 100644 index 000000000..3dee9621e --- /dev/null +++ b/src/components2/ErrorMessage/index.ts @@ -0,0 +1 @@ +export * from './ErrorMessage'; diff --git a/src/pages/Reports/pages/OverviewMap/index.js b/src/pages/Reports/pages/OverviewMap/index.js index a503430ca..53a93bcde 100644 --- a/src/pages/Reports/pages/OverviewMap/index.js +++ b/src/pages/Reports/pages/OverviewMap/index.js @@ -9,7 +9,7 @@ import { Route, withRouter } from 'react-router-dom'; import styled from 'styled-components'; import LocatorControl from '~/apps/Map/components/LocatorControl'; -import ErrorMessage from '~/components/ErrorMessage'; +import { ErrorMessage } from '~/components2/ErrorMessage'; import config from '~/pages/Reports/config'; import { actions as errorStateActions } from '~/pages/Reports/state/ErrorState'; import { actions as overviewMapStateActions } from '~/pages/Reports/state/OverviewMapState'; @@ -208,10 +208,9 @@ class OverviewMap extends Component { return ( {errorMessage && ( - + + {this.props.errorMessage} + )} diff --git a/src/pages/Reports/pages/SubmitReport/components/LocateMeMap/index.js b/src/pages/Reports/pages/SubmitReport/components/LocateMeMap/index.js index eee5bb9f8..fe441691f 100644 --- a/src/pages/Reports/pages/SubmitReport/components/LocateMeMap/index.js +++ b/src/pages/Reports/pages/SubmitReport/components/LocateMeMap/index.js @@ -13,7 +13,7 @@ import styled from 'styled-components'; import FMBCredits from '~/apps/Map/components/FMBCredits'; import LocatorControl from '~/apps/Map/components/LocatorControl'; import AutocompleteGeocoder from '~/components/AutocompleteGeocoder'; -import ErrorMessage from '~/components/ErrorMessage'; +import { ErrorMessage } from '~/components2/ErrorMessage'; import config from '~/pages/Reports/config'; import { actions as errorStateActions } from '~/pages/Reports/state/ErrorState'; import { @@ -213,10 +213,9 @@ class LocateMeMap extends Component { return ( {this.props.error.message && ( - + + {this.props.error.message} + )} {!this.state.isLoading && ( diff --git a/src/pages/Reports/pages/SubmitReport/pages/AdditionalDataForm.js b/src/pages/Reports/pages/SubmitReport/pages/AdditionalDataForm.js index aa308ff3f..52a7a78fc 100644 --- a/src/pages/Reports/pages/SubmitReport/pages/AdditionalDataForm.js +++ b/src/pages/Reports/pages/SubmitReport/pages/AdditionalDataForm.js @@ -4,7 +4,7 @@ import TextareaAutosize from 'react-autosize-textarea'; import { connect } from 'react-redux'; import styled from 'styled-components'; -import ErrorMessage from '~/components/ErrorMessage'; +import { ErrorMessage } from '~/components2/ErrorMessage'; import config from '~/pages/Reports/config'; import DialogStepWrapper from '~/pages/Reports/pages/SubmitReport/components/DialogStepWrapper'; import Heading from '~/pages/Reports/pages/SubmitReport/components/Heading'; @@ -197,10 +197,9 @@ class AdditionalDataForm extends PureComponent { )} {this.props.error.message && ( - + + {this.props.error.message} + )} ); diff --git a/src/pages/Reports/pages/SubmitReport/pages/LocateModeChooser.js b/src/pages/Reports/pages/SubmitReport/pages/LocateModeChooser.js index b62afad15..3047081d4 100644 --- a/src/pages/Reports/pages/SubmitReport/pages/LocateModeChooser.js +++ b/src/pages/Reports/pages/SubmitReport/pages/LocateModeChooser.js @@ -6,7 +6,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import styled from 'styled-components'; -import ErrorMessage from '~/components/ErrorMessage'; +import { ErrorMessage } from '~/components2/ErrorMessage'; import CloseIcon from '~/images/close.svg'; import LocateIcon from '~/images/reports/location-button.svg'; import MapIcon from '~/images/reports/noun-map-1909219.svg'; @@ -111,12 +111,13 @@ const LocateModeChooser = ({ {error.message && ( { removeError(); onUseGeocoding(); }} - /> + > + {error.message} + )} ); diff --git a/src/pages/Reports/pages/SubmitReport/pages/ReportSubmitted/index.js b/src/pages/Reports/pages/SubmitReport/pages/ReportSubmitted/index.js index bf5d63553..9a9bea4a7 100644 --- a/src/pages/Reports/pages/SubmitReport/pages/ReportSubmitted/index.js +++ b/src/pages/Reports/pages/SubmitReport/pages/ReportSubmitted/index.js @@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'; import { withRouter } from 'react-router-dom'; import Button from '~/components/Button'; -import ErrorMessage from '~/components/ErrorMessage'; +import { ErrorMessage } from '~/components2/ErrorMessage'; import history from '~/history'; import thanksImageAachen from '~/images/aachen/danke-aachen-02@2x.png'; import thanksImageFMB from '~/images/reports/reports-thanks.png'; @@ -66,7 +66,9 @@ class ReportSubmitted extends PureComponent { if (error.message) { return ( - + + {error.message} + ); } From 12850e162028881b23693e906b1b7e42569d6800 Mon Sep 17 00:00:00 2001 From: Tobias Date: Wed, 16 Mar 2022 17:23:49 +0100 Subject: [PATCH 12/22] Refactor Legend, Extract Components, Update to TS - Move icons to component folders - Cleanup SVGs by removing filter and duplicate circle - Refactor LocatorControl to TS into components2 - Extract LocatorButton from LocatorControl and use that inside the Planung/HBI map, so all Button have the same behavior - Refactor Styling of MapButtons so they all look the same; and less duplicated styles. Also some hover styles and such. - Refactor the layer show/hide feature to be used in the fullscreen map; remove it from the previous test page since the interface is now different - Add a test map on the ZES+ page to test the fullscreen map - This includes a debug panel that allows to show/hide all layers of the current style. HOWEVER, there is something out of sync here (likely due to async data processing internally in mapbox) so the visibility state is only correct after the next click). --- .../Map/assets/map-legend-icon-activated.svg | 16 +++ src/apps/Map/assets/minus-circle-icon.svg | 9 ++ src/apps/Map/assets/plus-circle-icon.svg | 9 ++ src/apps/Map/components/MapControl.js | 59 -------- src/apps/Map/index.tsx | 89 ++++-------- src/components/MapLegend/Legend.tsx | 37 ++--- .../Article/FullscreenMap/CloseMapIcon.tsx | 48 +++++++ .../Article/FullscreenMap/FullscreenMap.tsx | 129 ++++++++++++++++++ .../FullscreenMap/LayerToggleTester.tsx | 68 +++++++++ .../FullscreenMap/icons/close-icon.svg | 13 ++ .../Article/Map/MapLegendStyledComponents.tsx | 4 + .../Article/Typography/Details.tsx | 16 +-- src/components2/Article/index.ts | 1 + .../FloatingLegend.tsx} | 71 +++++----- .../FloatingLegend/FloatingLegendIcon.tsx | 21 +++ .../FloatingLegend/assets/map-legend-icon.svg | 16 +++ src/components2/FloatingLegend/index.ts | 2 + src/components2/MapLegend/index.ts | 1 - .../MapsControls/LocatorButton.tsx} | 97 ++++++------- .../MapsControls/LocatorMapControl.tsx | 22 +++ src/components2/MapsControls/MapControl.tsx | 74 ++++++++++ .../MapsControls/StyledMapButton.ts | 42 ++++++ .../MapsControls/assets/location-icon.svg | 9 ++ src/components2/MapsControls/index.ts | 4 + .../ModalCloseIcon/ModalCloseIcon.tsx | 4 +- src/images/location.svg | 26 ---- src/images/map-legend-icon-activated.svg | 1 - src/images/map-legend-icon.svg | 1 - src/images/minus-circle-icon.svg | 26 ---- src/images/plus-circle-icon.svg | 26 ---- src/pages/Reports/pages/OverviewMap/index.js | 6 +- .../components/LocateMeMap/index.js | 4 +- .../LegendItemsNetworkSchoolways.tsx | 4 +- .../Section01Network/Map01Network.tsx | 40 +----- .../radnetzentwicklung/02_SectionBasics.tsx | 2 +- .../{maps => components}/MapNetworks.tsx | 66 ++++----- .../icons/berliner-verbaende.svg | 0 .../{maps => components}/icons/heatmap.svg | 0 .../icons/konzept-dahme-spree.svg | 0 .../icons/konzept-schoenefeld.svg | 0 .../icons/radschnellverbindungen.svg | 0 .../icons/touristische.svg | 0 .../icons/varianten-rsv.svg | 0 .../{maps => components}/icons/zes.svg | 0 .../{maps => components}/index.ts | 0 45 files changed, 659 insertions(+), 404 deletions(-) create mode 100644 src/apps/Map/assets/map-legend-icon-activated.svg create mode 100644 src/apps/Map/assets/minus-circle-icon.svg create mode 100644 src/apps/Map/assets/plus-circle-icon.svg delete mode 100644 src/apps/Map/components/MapControl.js create mode 100644 src/components2/Article/FullscreenMap/CloseMapIcon.tsx create mode 100644 src/components2/Article/FullscreenMap/FullscreenMap.tsx create mode 100644 src/components2/Article/FullscreenMap/LayerToggleTester.tsx create mode 100644 src/components2/Article/FullscreenMap/icons/close-icon.svg rename src/components2/{MapLegend/FlyingLegend.tsx => FloatingLegend/FloatingLegend.tsx} (59%) create mode 100644 src/components2/FloatingLegend/FloatingLegendIcon.tsx create mode 100644 src/components2/FloatingLegend/assets/map-legend-icon.svg create mode 100644 src/components2/FloatingLegend/index.ts delete mode 100644 src/components2/MapLegend/index.ts rename src/{apps/Map/components/LocatorControl.js => components2/MapsControls/LocatorButton.tsx} (50%) create mode 100644 src/components2/MapsControls/LocatorMapControl.tsx create mode 100644 src/components2/MapsControls/MapControl.tsx create mode 100644 src/components2/MapsControls/StyledMapButton.ts create mode 100644 src/components2/MapsControls/assets/location-icon.svg create mode 100644 src/components2/MapsControls/index.ts delete mode 100644 src/images/location.svg delete mode 100644 src/images/map-legend-icon-activated.svg delete mode 100644 src/images/map-legend-icon.svg delete mode 100644 src/images/minus-circle-icon.svg delete mode 100644 src/images/plus-circle-icon.svg rename src/pages/ZESPlus-Research/radnetzentwicklung/{maps => components}/MapNetworks.tsx (66%) rename src/pages/ZESPlus-Research/radnetzentwicklung/{maps => components}/icons/berliner-verbaende.svg (100%) rename src/pages/ZESPlus-Research/radnetzentwicklung/{maps => components}/icons/heatmap.svg (100%) rename src/pages/ZESPlus-Research/radnetzentwicklung/{maps => components}/icons/konzept-dahme-spree.svg (100%) rename src/pages/ZESPlus-Research/radnetzentwicklung/{maps => components}/icons/konzept-schoenefeld.svg (100%) rename src/pages/ZESPlus-Research/radnetzentwicklung/{maps => components}/icons/radschnellverbindungen.svg (100%) rename src/pages/ZESPlus-Research/radnetzentwicklung/{maps => components}/icons/touristische.svg (100%) rename src/pages/ZESPlus-Research/radnetzentwicklung/{maps => components}/icons/varianten-rsv.svg (100%) rename src/pages/ZESPlus-Research/radnetzentwicklung/{maps => components}/icons/zes.svg (100%) rename src/pages/ZESPlus-Research/radnetzentwicklung/{maps => components}/index.ts (100%) diff --git a/src/apps/Map/assets/map-legend-icon-activated.svg b/src/apps/Map/assets/map-legend-icon-activated.svg new file mode 100644 index 000000000..f5432ec62 --- /dev/null +++ b/src/apps/Map/assets/map-legend-icon-activated.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/apps/Map/assets/minus-circle-icon.svg b/src/apps/Map/assets/minus-circle-icon.svg new file mode 100644 index 000000000..cb1bdf941 --- /dev/null +++ b/src/apps/Map/assets/minus-circle-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/apps/Map/assets/plus-circle-icon.svg b/src/apps/Map/assets/plus-circle-icon.svg new file mode 100644 index 000000000..d1974b884 --- /dev/null +++ b/src/apps/Map/assets/plus-circle-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/apps/Map/components/MapControl.js b/src/apps/Map/components/MapControl.js deleted file mode 100644 index b581f8fc7..000000000 --- a/src/apps/Map/components/MapControl.js +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; - -const margin = '16px'; - -const MapControl = styled.div` - position: absolute; - top: ${(props) => props.margins.top}; - right: ${(props) => props.margins.right}; - bottom: ${(props) => props.margins.bottom}; - left: ${(props) => props.margins.left}; - z-index: 200; -`; - -const getMargins = (props) => { - if (props.customPosition) { - return props.customPosition; - } - - switch (props.position) { - case 'top-right': - return { - top: margin, - right: margin, - bottom: 'auto', - left: 'auto', - }; - case 'bottom-right': - return { - top: 'auto', - right: margin, - bottom: margin, - left: 'auto', - }; - case 'bottom-left': - return { - top: 'auto', - right: 'auto', - bottom: margin, - left: margin, - }; - default: - return { - top: margin, - right: 'auto', - bottom: 'auto', - left: margin, - }; - } -}; - -export default (props) => ( - -); diff --git a/src/apps/Map/index.tsx b/src/apps/Map/index.tsx index 688b1c3ae..aa176999a 100644 --- a/src/apps/Map/index.tsx +++ b/src/apps/Map/index.tsx @@ -7,28 +7,29 @@ import { withRouter, } from 'react-router-dom'; import styled from 'styled-components'; +import { Legend } from '~/components/MapLegend/Legend'; import { ErrorMessage } from '~/components2/ErrorMessage'; +import { FloatingLegendIcon } from '~/components2/FloatingLegend'; import { Logo as FMBLogo } from '~/components2/Logo'; -import Legend from '~/components/MapLegend/Legend'; +import { + LocatorButton, + MapControl, + StyledMapButton, +} from '~/components2/MapsControls'; import config from '~/config'; -import MapLegendButtonIcon from '~/images/map-legend-icon.svg'; -import MapLegendButtonActivatedIcon from '~/images/map-legend-icon-activated.svg'; -import ZoomInButtonIcon from '~/images/plus-circle-icon.svg'; -import ZoomOutButtonIcon from '~/images/minus-circle-icon.svg'; import Store, { RootState } from '~/store'; -import { matchMediaSize, breakpoints, media } from '~/styles/utils'; - -import * as MapActions from './MapState'; +import { breakpoints, matchMediaSize, media } from '~/styles/utils'; +import ZoomOutButtonIcon from './assets/minus-circle-icon.svg'; +import ZoomInButtonIcon from './assets/plus-circle-icon.svg'; import { DetailPanel } from './components/DetailView'; import ProjectDetail from './components/DetailView/ProjectDetail'; import { SectionDetail } from './components/DetailView/SectionDetail'; import FMBCredits from './components/FMBCredits'; -import LocatorControl from './components/LocatorControl'; import MapContent from './components/MapContent'; -import MapControl from './components/MapControl'; import { MapPopup } from './components/MapPopup'; import SearchBar from './components/SearchBar'; import { WebglMap } from './components/WebglMap'; +import * as MapActions from './MapState'; const Wrapper = styled.div` height: 100%; @@ -54,26 +55,6 @@ const StyledFMBLogo = styled(FMBLogo)` `} `; -const StyledMapLegendButton = styled(MapLegendButtonIcon)` - cursor: pointer; -`; - -const StyledMapLegendButtonActivated = styled(MapLegendButtonActivatedIcon)` - cursor: pointer; -`; - -const StyledZoomInButton = styled(ZoomInButtonIcon)` - cursor: pointer; -`; - -const StyledZoomOutButton = styled(ZoomOutButtonIcon)` - cursor: pointer; -`; - -const StyledMapControl = styled(MapControl)` - margin-bottom: 45px; -`; - const connector = connect( ({ MapState, UserState }: RootState) => ({ activeLayer: MapState.activeView, @@ -150,45 +131,33 @@ const MapView = ({ - {showLegend && setShowLegend(false)} />} + setShowLegend(false)} /> - {!displayPopup && ( - - )} - -
-
- changeZoom(1)} /> -
-
- changeZoom(-1)} /> -
-
- {!showLegend && ( - setShowLegend(!showLegend)} - /> - )} - {showLegend && ( - setShowLegend(!showLegend)} - /> - )} -
-
- {!isEmbedMode && ( )} + + + changeZoom(1)} + /> + changeZoom(-1)} + /> + + {!displayPopup && } + + {isEmbedMode && } diff --git a/src/components/MapLegend/Legend.tsx b/src/components/MapLegend/Legend.tsx index b6c168131..18979bd9a 100644 --- a/src/components/MapLegend/Legend.tsx +++ b/src/components/MapLegend/Legend.tsx @@ -1,7 +1,10 @@ import React from 'react'; import styled from 'styled-components'; import { AnchorLink } from '~/components2/Link'; -import { FlyingLegend } from '~/components2/MapLegend'; +import { + FloatingLegend, + FloatingLegendProps, +} from '~/components2/FloatingLegend'; import config from '~/config'; import { CadastreLegendGrid, IncidentLegendGrid } from './index'; @@ -26,21 +29,23 @@ const FooterWrapper = styled.div` margin-top: 1rem; `; -const Legend = ({ closeLegend }) => ( - -
Legende Katasterdaten
- - Quellen: Fis-Broker Berlin 2014 +type Props = Pick; -
Legende Unfälle
- +export const Legend: React.VFC = ({ visible, closeLegend }) => { + return ( + +
Legende Katasterdaten
+ + Quellen: Fis-Broker Berlin 2014 - - - Erläuterungen der Unfallkategorien - - - -); +
Legende Unfälle
+ -export default Legend; + + + Erläuterungen der Unfallkategorien + + + + ); +}; diff --git a/src/components2/Article/FullscreenMap/CloseMapIcon.tsx b/src/components2/Article/FullscreenMap/CloseMapIcon.tsx new file mode 100644 index 000000000..a77ee9ed2 --- /dev/null +++ b/src/components2/Article/FullscreenMap/CloseMapIcon.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import styled from 'styled-components'; +import config from '~/config'; +import CloseIcon from './icons/close-icon.svg'; + +const StyledCloseIcon = styled(CloseIcon)` + color: ${config.colors.lightgrey}; + cursor: pointer; + position: fixed; + right: 20px; + top: 20px; + z-index: 20; + overflow: visible; + width: 41px; + height: 41px; + + &:focus { + outline: none; + & .close-icon-background { + fill: ${config.colors.midgrey}; + } + } +`; + +type Props = { + onClick: () => void; + controlsId?: string; + label?: string; +}; + +/** + * @param {controlsId} string Space seperated list of one or more ID values referencing the elements being controlled by the current element + * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls + */ +export const CloseMapIcon: React.VFC = ({ + onClick, + controlsId = undefined, + label = 'Schließen', +}) => { + return ( + onClick()} + aria-label={label} + aria-controls={controlsId} + role="button" + /> + ); +}; diff --git a/src/components2/Article/FullscreenMap/FullscreenMap.tsx b/src/components2/Article/FullscreenMap/FullscreenMap.tsx new file mode 100644 index 000000000..6d33beeb5 --- /dev/null +++ b/src/components2/Article/FullscreenMap/FullscreenMap.tsx @@ -0,0 +1,129 @@ +import MapboxGL from 'mapbox-gl'; +import React, { useEffect, useState } from 'react'; +import styled from 'styled-components'; +import { BaseMap } from '~/components2/BaseMap'; +import { + FloatingLegend, + FloatingLegendIcon, +} from '~/components2/FloatingLegend'; +import { MapControl } from '~/components2/MapsControls'; +import { MAPBOX_INTERACTION_HANDLERS } from '../Map/MapInteractionHandler.const'; +import { ActivateButton, ButtonArea, MapWrapper, Wrapper } from '../Map/styles'; +import { CloseMapIcon } from './CloseMapIcon'; +import { LayerToggleTester } from './LayerToggleTester'; + +const FullscreenWrapper = styled.div` + position: fixed; + inset: 0; + z-index: 10; +`; + +export type FullscreenMapProps = { + defaultActive?: boolean; + mapboxStyle: mapboxgl.MapboxOptions['style']; + toggleLayers?: string[]; + setToggleLayers?: (toggleLayers: string[]) => void; +} & Partial; + +/** + * Map component for use in an article. + * + * Let's users enable interactivity with an animated button overlay. + * + * Extends mapboxgl.Map component props + * + * @param defaultActive set true to hide `activate` button + * @param toggleLayers an array of map layers to show / hide + */ +export const FullscreenMap: React.FC = ({ + defaultActive = false, + toggleLayers, + setToggleLayers, + children, + ...mapProps +}) => { + const [map, setMap] = useState(null); + const [isFullscreen, setFullscreen] = useState(defaultActive); + const [showLegend, setShowLegend] = useState(true); + + // Activate interaction handlers when activate button is clicked + useEffect(() => { + if (map === null) return; + + MAPBOX_INTERACTION_HANDLERS.forEach((handler) => + isFullscreen ? map[handler].enable() : map[handler].disable() + ); + }, [map, isFullscreen]); + + // Toggle layer visibility + useEffect(() => { + if (map === null) return; + + toggleLayers.forEach((layer) => { + const visibility = + map.getLayoutProperty(layer, 'visibility') === 'visible' + ? 'none' + : 'visible'; + map.setLayoutProperty(layer, 'visibility', visibility); + }); + }, [map, toggleLayers]); + + if (isFullscreen) { + return ( + + setFullscreen(false)} + controlsId="FullscreenMap" + /> + + + + + + + setFullscreen(false)} + positionTop="70px" + > + <> + {children} + + + + + ); + } + + return ( + + + + + + setFullscreen(true)} + mapActive={isFullscreen} + > + + + + Karte aktivieren + + + + ); +}; diff --git a/src/components2/Article/FullscreenMap/LayerToggleTester.tsx b/src/components2/Article/FullscreenMap/LayerToggleTester.tsx new file mode 100644 index 000000000..2e7dff41b --- /dev/null +++ b/src/components2/Article/FullscreenMap/LayerToggleTester.tsx @@ -0,0 +1,68 @@ +import React, { useEffect, useState } from 'react'; +import { Details } from '../Typography'; +import { FullscreenMapProps } from './FullscreenMap'; + +type Props = { + mapLayer: any | undefined; // TS: mapboxgl.AnyLayer would be better but no idea how to fix the layer.layout below. + setToggleLayers: FullscreenMapProps['setToggleLayers']; +}; + +export const LayerToggleTester: React.VFC = ({ + mapLayer, + setToggleLayers, +}) => { + type LayerProp = [string, string]; + const [layerList, setLayerlist] = useState(null); + + useEffect(() => { + const layers = mapLayer.map((layer) => { + return [layer.id, layer?.layout?.visibility || 'unknown'] as LayerProp; + }); + setLayerlist(layers); + }, [mapLayer]); + + // useEffect(() => console.table(layerList), [layerList]); + + if ( + process.env.NODE_ENV === 'production' && + process.env.CONTEXT === 'production' + ) { + return null; + } + + return ( +
+ + + + + + + + + + {layerList && + layerList.map(([layerId, visibility]) => ( + + + + + + ))} + +
Layer IDVisibility (TODO: Hängt eins hinterher)Action
+ {layerId} + {visibility === 'none' ? 'hidden' : visibility} + +
+
+ ); +}; diff --git a/src/components2/Article/FullscreenMap/icons/close-icon.svg b/src/components2/Article/FullscreenMap/icons/close-icon.svg new file mode 100644 index 000000000..c4fafc4ac --- /dev/null +++ b/src/components2/Article/FullscreenMap/icons/close-icon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + diff --git a/src/components2/Article/Map/MapLegendStyledComponents.tsx b/src/components2/Article/Map/MapLegendStyledComponents.tsx index c0259cae9..b27e1d97e 100644 --- a/src/components2/Article/Map/MapLegendStyledComponents.tsx +++ b/src/components2/Article/Map/MapLegendStyledComponents.tsx @@ -73,6 +73,8 @@ export const LegendHeader = styled.h3` margin: 1em 0 0.5em; font-weight: bold; + ${({ onClick }) => onClick && `cursor: pointer;`} + ${media.s` font-size: 1em; margin: 1.5em 0 1em; @@ -86,6 +88,8 @@ export const LegendItem = styled.div` flex-direction: row; line-height: 1.16; + ${({ onClick }) => onClick && `cursor: pointer;`} + ${media.m` & + & { margin-top: .5em; diff --git a/src/components2/Article/Typography/Details.tsx b/src/components2/Article/Typography/Details.tsx index 521d978b5..0d99def96 100644 --- a/src/components2/Article/Typography/Details.tsx +++ b/src/components2/Article/Typography/Details.tsx @@ -2,21 +2,19 @@ import React from 'react'; import styled from 'styled-components'; import { Paragraph } from './Paragraph'; -type Props = { summary: string }; +type Props = { summary: string; style?: React.CSSProperties }; const StyledSummary = styled.summary` cursor: pointer; `; -export const Details: React.FC = ({ summary, children }) => { +export const Details: React.FC = ({ summary, style, children }) => { return ( - -
- - {summary} - - {children} -
+ + + {summary} + + {children} ); }; diff --git a/src/components2/Article/index.ts b/src/components2/Article/index.ts index b5fbc3200..5bb8d5c2a 100644 --- a/src/components2/Article/index.ts +++ b/src/components2/Article/index.ts @@ -1,6 +1,7 @@ export * from './ArticleHeader/ArticleHeader'; export * from './ArticleWrapper'; export * from './Image'; +export * from './FullscreenMap/FullscreenMap'; export * from './Map'; export * from './Typography'; export * from './Quote/Quote'; diff --git a/src/components2/MapLegend/FlyingLegend.tsx b/src/components2/FloatingLegend/FloatingLegend.tsx similarity index 59% rename from src/components2/MapLegend/FlyingLegend.tsx rename to src/components2/FloatingLegend/FloatingLegend.tsx index 8277f7e25..e29a08166 100644 --- a/src/components2/MapLegend/FlyingLegend.tsx +++ b/src/components2/FloatingLegend/FloatingLegend.tsx @@ -4,10 +4,11 @@ import { ModalCloseIcon } from '~/components2/ModalCloseIcon'; import config from '~/config'; import { media } from '~/styles/utils'; -const BaseWrapper = styled.section` +const FloatingWrapper = styled.section` background-color: ${config.colors.lightbg}; color: ${config.colors.darkbg}; display: flex; + flex-direction: column; width: 100%; line-height: 1.4; border: solid 1px #cccccc; @@ -15,6 +16,7 @@ const BaseWrapper = styled.section` box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); bottom: 0; position: absolute; + z-index: 400; ${media.s` padding: 0; @@ -29,7 +31,10 @@ const BaseWrapper = styled.section` bottom: initial; position: absolute; left: 15px; - top: 85px; + top: ${ + ({ style: { top } }: any) => + top || '85px' /* did not find the proper TS types… */ + }; width: 40vw; max-width: 24em; font-size: 1.5625vw; @@ -44,23 +49,6 @@ const BaseWrapper = styled.section` `} `; -const Wrapper = styled(BaseWrapper)` - display: flex; - flex-direction: column; - z-index: 400; -`; - -const Header = styled.h1` - font-size: 1.2em; - font-weight: 400; - margin-top: 1rem; - margin-right: 0; - margin-bottom: 0; - margin-left: 0; - padding-bottom: 0.5em; - border-bottom: solid 1px #e0e0e0; -`; - const LegendListWrapper = styled.div` overflow-y: auto; padding: 0.625rem 1.2rem 1.2rem 1.2rem; @@ -73,32 +61,37 @@ const LegendListWrapper = styled.div` `} `; -export const MutedText = styled.div` - color: ${config.colors.midgrey}; - font-size: 0.9rem; - margin: 0.5rem 0 1.5rem 0; -`; - const IconWrapper = styled.div` ${media.m` display: none; `} `; -type Props = { +export type FloatingLegendProps = { + visible: boolean; closeLegend: () => void; + positionTop?: string; }; -export const FlyingLegend: React.FC = ({ closeLegend, children }) => ( - - - closeLegend()} - controlsId="Legend" - label="Legende schließen" - positionRight="25px" - /> - - {children} - -); +export const FloatingLegend: React.FC = ({ + visible, + closeLegend, + positionTop, + children, +}) => { + if (!visible) return null; + + return ( + + + closeLegend()} + controlsId="Legend" + label="Legende schließen" + positionRight="25px" + /> + + {children} + + ); +}; diff --git a/src/components2/FloatingLegend/FloatingLegendIcon.tsx b/src/components2/FloatingLegend/FloatingLegendIcon.tsx new file mode 100644 index 000000000..f09b5c83e --- /dev/null +++ b/src/components2/FloatingLegend/FloatingLegendIcon.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { StyledMapButton } from '../MapsControls'; +import MapLegendIcon from './assets/map-legend-icon.svg'; + +type Props = { + showLegend: boolean; + setShowLegend: (showLegend: boolean) => void; +}; + +export const FloatingLegendIcon: React.VFC = ({ + showLegend, + setShowLegend, +}) => { + return ( + setShowLegend(!showLegend)} + /> + ); +}; diff --git a/src/components2/FloatingLegend/assets/map-legend-icon.svg b/src/components2/FloatingLegend/assets/map-legend-icon.svg new file mode 100644 index 000000000..24d68e969 --- /dev/null +++ b/src/components2/FloatingLegend/assets/map-legend-icon.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/components2/FloatingLegend/index.ts b/src/components2/FloatingLegend/index.ts new file mode 100644 index 000000000..011544a8f --- /dev/null +++ b/src/components2/FloatingLegend/index.ts @@ -0,0 +1,2 @@ +export * from './FloatingLegend'; +export * from './FloatingLegendIcon'; diff --git a/src/components2/MapLegend/index.ts b/src/components2/MapLegend/index.ts deleted file mode 100644 index ddab93d56..000000000 --- a/src/components2/MapLegend/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './FlyingLegend'; diff --git a/src/apps/Map/components/LocatorControl.js b/src/components2/MapsControls/LocatorButton.tsx similarity index 50% rename from src/apps/Map/components/LocatorControl.js rename to src/components2/MapsControls/LocatorButton.tsx index 27dd42bdf..4bf7c5f9c 100644 --- a/src/apps/Map/components/LocatorControl.js +++ b/src/components2/MapsControls/LocatorButton.tsx @@ -1,22 +1,35 @@ import debug from 'debug'; -import PropTypes from 'prop-types'; +import { ErrorMessage } from '~/components2/ErrorMessage'; import React, { useState } from 'react'; import styled from 'styled-components'; - -import MapControl from '~/apps/Map/components/MapControl'; import { getGeoLocation } from '~/apps/Map/map-utils'; -import ErrorMessage from '~/components/ErrorMessage'; import Loader from '~/components/Loader'; -import LocatorIcon from '~/images/location.svg'; +import LocatorIcon from './assets/location-icon.svg'; import { isNumeric } from '~/utils/utils'; +import { StyledMapButton } from './StyledMapButton'; + +const logger = debug('fmc:map:locatorButton'); + +const LoaderWrapper = styled.div` + background-color: #fff; + border-radius: 100%; + position: absolute; + top: 2px; + left: 2px; + height: 35px; + width: 35px; + display: flex; + align-items: center; + justify-content: center; +`; -const logger = debug('fmc:map:locator'); - -const LocatorButton = styled.button` +const StyledLocatorButton = styled.button` background-color: transparent; border: none; cursor: pointer; padding: 0; + overflow: visible; + position: relative; &[disabled] { pointer-events: none; @@ -30,18 +43,12 @@ const locateErrors = { TIMEOUT: 3, }; -const userFeedback = - 'Wenn Sie sich orten lassen wollen, müssen Sie einer Ortung zustimmen.' + - 'Sie können die Entscheidung, Ihren Standort zu teilen, in den Einstellungen' + - 'des Browsers rückgängig machen.'; +export type LocatorButtonProps = { + onChange: (userLocation: mapboxgl.LngLatLike) => void; + // showError: () => void; +}; -const LocatorControl = ({ - position, - customPosition, - onChange, - onStart, - className, -}) => { +export const LocatorButton: React.VFC = ({ onChange }) => { const [isLoading, setIsLoading] = useState(false); const [isError, setIsError] = useState(false); @@ -65,56 +72,34 @@ const LocatorControl = ({ const locate = () => { setIsLoading(true); - onStart(); getGeoLocation().then(onLocateSuccess).catch(onLocateError); setIsLoading(false); }; - const Icon = isLoading ? : ; - return ( <> {isError && ( setIsError(false)} - /> + > +

+ Wenn Sie sich orten lassen wollen, müssen Sie einer Ortung + zustimmen. Sie können die Entscheidung, Ihren Standort zu teilen, in + den Einstellungen des Browsers rückgängig machen. +

+ )} - - - {Icon} - - + + {isLoading && ( + + + + )} + + ); }; - -LocatorControl.propTypes = { - position: PropTypes.string, - customPosition: PropTypes.shape({ - top: PropTypes.string, - bottom: PropTypes.string, - left: PropTypes.string, - right: PropTypes.string, - }), - onChange: PropTypes.func, - onStart: PropTypes.func, - className: PropTypes.string, -}; - -LocatorControl.defaultProps = { - position: 'top-left', - onChange: () => {}, - onStart: () => {}, - customPosition: undefined, - className: null, -}; - -export default LocatorControl; diff --git a/src/components2/MapsControls/LocatorMapControl.tsx b/src/components2/MapsControls/LocatorMapControl.tsx new file mode 100644 index 000000000..4cdc9d849 --- /dev/null +++ b/src/components2/MapsControls/LocatorMapControl.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { LocatorButton, LocatorButtonProps } from './LocatorButton'; +import { MapcControlProps, MapControl } from './MapControl'; + +type Props = MapcControlProps & LocatorButtonProps; + +export const LocatorMapControl: React.VFC = ({ + position = 'top-left', + customPosition, + className, + onChange, +}) => { + return ( + + + + ); +}; diff --git a/src/components2/MapsControls/MapControl.tsx b/src/components2/MapsControls/MapControl.tsx new file mode 100644 index 000000000..03324135d --- /dev/null +++ b/src/components2/MapsControls/MapControl.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import styled from 'styled-components'; + +export type MapControlPositionProp = + | 'top-left' + | 'top-right' + | 'bottom-right' + | 'bottom-left'; + +const StyledMapControl = styled.div` + position: absolute; + z-index: 600; + top: ${(props: CustonPosition) => props?.top}; + right: ${(props: CustonPosition) => props?.right}; + bottom: ${(props: CustonPosition) => props?.bottom}; + left: ${(props: CustonPosition) => props?.left}; +`; + +type CustonPosition = { + top?: string; + bottom?: string; + left?: string; + right?: string; +}; + +export type MapcControlProps = { + position?: MapControlPositionProp; + className?: string; + customPosition?: CustonPosition; +}; + +export const MapControl: React.FC = ({ + position = 'top-left', + className, + customPosition, + children, +}) => { + const positionCss = (pos) => { + switch (pos) { + case 'top-left': + return { + top: '16px', + left: '16px', + }; + case 'top-right': + return { + top: '16px', + right: '16px', + }; + case 'bottom-right': + return { + right: '16px', + bottom: '16px', + }; + case 'bottom-left': + return { + bottom: '16px', + left: '16px', + }; + default: + return {}; + } + }; + + return ( + + {children} + + ); +}; diff --git a/src/components2/MapsControls/StyledMapButton.ts b/src/components2/MapsControls/StyledMapButton.ts new file mode 100644 index 000000000..23ff01b01 --- /dev/null +++ b/src/components2/MapsControls/StyledMapButton.ts @@ -0,0 +1,42 @@ +import styled from 'styled-components'; +import config from '~/config'; + +type Props = { + $active: boolean; +}; + +// Use `$active` to invert the button and disable the hover/… styles. +// `$active` needs to be prefixed with a `$` which makes it a special styled component prop +// that does not get passed down to the underlying DOM element. +// Learn more at https://styled-components.com/docs/api#typescript and https://styled-components.com/docs/api#transient-props +export const StyledMapButton = styled.svg` + cursor: pointer; + display: block; + margin-bottom: 5px; + overflow: visible; + circle { + filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) + drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)); + } + ${({ $active }) => + $active && + ` + circle { + fill: ${config.colors.darkgrey}; + stroke: #EEE; + } + g { + stroke: #EEE; + } + `} + ${({ $active }) => + !$active && + ` + &:hover circle { + fill: ${config.colors.lightbg}; + } + &:active circle, + &:focus circle { + fill: ${config.colors.lightgrey}; + }`} +`; diff --git a/src/components2/MapsControls/assets/location-icon.svg b/src/components2/MapsControls/assets/location-icon.svg new file mode 100644 index 000000000..2654ec7ab --- /dev/null +++ b/src/components2/MapsControls/assets/location-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components2/MapsControls/index.ts b/src/components2/MapsControls/index.ts new file mode 100644 index 000000000..99edeac59 --- /dev/null +++ b/src/components2/MapsControls/index.ts @@ -0,0 +1,4 @@ +export * from './LocatorMapControl'; +export * from './LocatorButton'; +export * from './MapControl'; +export * from './StyledMapButton'; diff --git a/src/components2/ModalCloseIcon/ModalCloseIcon.tsx b/src/components2/ModalCloseIcon/ModalCloseIcon.tsx index ac47bd2db..052ec9334 100644 --- a/src/components2/ModalCloseIcon/ModalCloseIcon.tsx +++ b/src/components2/ModalCloseIcon/ModalCloseIcon.tsx @@ -7,7 +7,7 @@ const StyledCloseIcon = styled(CloseIcon)` color: ${config.colors.lightgrey}; cursor: pointer; position: absolute; - right: ${(props) => (props.positionRight ? props.positionRight : '10px')}; + right: ${({ styles: { right } }) => right || '10px'}; top: -18px; z-index: 500; overflow: visible; @@ -45,7 +45,7 @@ export const ModalCloseIcon: React.FC = ({ aria-label={label} aria-controls={controlsId} role="button" - positionRight={positionRight} + styles={{ right: positionRight }} /> ); }; diff --git a/src/images/location.svg b/src/images/location.svg deleted file mode 100644 index 158fa6c2d..000000000 --- a/src/images/location.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - C3B8C111-49CF-44D5-911A-4B8C777F670B - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/images/map-legend-icon-activated.svg b/src/images/map-legend-icon-activated.svg deleted file mode 100644 index ea38c0532..000000000 --- a/src/images/map-legend-icon-activated.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/images/map-legend-icon.svg b/src/images/map-legend-icon.svg deleted file mode 100644 index cc351f536..000000000 --- a/src/images/map-legend-icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/images/minus-circle-icon.svg b/src/images/minus-circle-icon.svg deleted file mode 100644 index 2f333e348..000000000 --- a/src/images/minus-circle-icon.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - 75407486-1F02-49C9-89CF-34AA8C7E2F6A - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/images/plus-circle-icon.svg b/src/images/plus-circle-icon.svg deleted file mode 100644 index cd9d8670f..000000000 --- a/src/images/plus-circle-icon.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - 6405F659-2F42-4400-B84A-CE292C6CFE15 - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/pages/Reports/pages/OverviewMap/index.js b/src/pages/Reports/pages/OverviewMap/index.js index 53a93bcde..82c01b1df 100644 --- a/src/pages/Reports/pages/OverviewMap/index.js +++ b/src/pages/Reports/pages/OverviewMap/index.js @@ -8,7 +8,7 @@ import { connect } from 'react-redux'; import { Route, withRouter } from 'react-router-dom'; import styled from 'styled-components'; -import LocatorControl from '~/apps/Map/components/LocatorControl'; +import { LocatorMapControl } from '~/components2/MapsControls'; import { ErrorMessage } from '~/components2/ErrorMessage'; import config from '~/pages/Reports/config'; import { actions as errorStateActions } from '~/pages/Reports/state/ErrorState'; @@ -41,7 +41,7 @@ const MapWrapper = styled.div` flex-direction: column; `; -const StyledLocatorControl = styled(LocatorControl)` +const StyledLocatorMapControl = styled(LocatorMapControl)` top: 16px; right: 16px; bottom: auto; @@ -64,7 +64,7 @@ const MapControls = ({ }) => { return ( <> - diff --git a/src/pages/Reports/pages/SubmitReport/components/LocateMeMap/index.js b/src/pages/Reports/pages/SubmitReport/components/LocateMeMap/index.js index fe441691f..bce7b1e01 100644 --- a/src/pages/Reports/pages/SubmitReport/components/LocateMeMap/index.js +++ b/src/pages/Reports/pages/SubmitReport/components/LocateMeMap/index.js @@ -11,7 +11,7 @@ import { connect } from 'react-redux'; import styled from 'styled-components'; import FMBCredits from '~/apps/Map/components/FMBCredits'; -import LocatorControl from '~/apps/Map/components/LocatorControl'; +import { LocatorMapControl } from '~/components2/MapsControls'; import AutocompleteGeocoder from '~/components/AutocompleteGeocoder'; import { ErrorMessage } from '~/components2/ErrorMessage'; import config from '~/pages/Reports/config'; @@ -288,7 +288,7 @@ class LocateMeMap extends Component { !this.state.autocompleteHasFocus && this.props.isLocationModeGeocoding && !this.state.locationPinned && ( - void }; export const LegendItemsNetworkSchoolways: React.FC = ({ onClick }) => { return ( <> - - Schulwege-Häufigkeit - + Schulwege-Häufigkeit diff --git a/src/pages/XhainWayToSchool/sections/Section01Network/Map01Network.tsx b/src/pages/XhainWayToSchool/sections/Section01Network/Map01Network.tsx index 1c97abf18..fd4258f2b 100644 --- a/src/pages/XhainWayToSchool/sections/Section01Network/Map01Network.tsx +++ b/src/pages/XhainWayToSchool/sections/Section01Network/Map01Network.tsx @@ -1,5 +1,4 @@ -import React, { useState } from 'react'; - +import React from 'react'; import { Map } from '~/components2/Article'; import { IconWrapper, @@ -14,32 +13,10 @@ import { AnchorLink } from '~/components2/Link'; import IconPlayground from '../assets/playground.svg'; import IconSchoolAreas from '../assets/school-areas.svg'; import IconSchoolPinBlue from '../assets/school-pin-blue.svg'; -import { - ALL_LAYERS, - BOUNDS, - CENTER, - MAP_STYLE, - ZOOM, -} from '../mapboxOptions.const'; +import { BOUNDS, CENTER, MAP_STYLE, ZOOM } from '../mapboxOptions.const'; import { LegendItemsNetworkSchoolways } from './LegendItemsNetworkSchoolways'; export const Map01Network = () => { - const allVisibleLayers = [ - 'network-schoolways', - 'network-schoolways-labels', - 'elementary-schools-allblue', - 'schools-einzugsbereich', - ]; - const [visibleLayers, setVisibleLayers] = useState(allVisibleLayers); - - const handleVisibilityToggle = (layer) => { - const filteredLayers = allVisibleLayers.filter((l) => l !== layer); - - setVisibleLayers( - visibleLayers.includes(layer) ? filteredLayers : allVisibleLayers - ); - }; - return ( <> { maxBounds={BOUNDS} center={CENTER} zoom={ZOOM} - allLayers={ALL_LAYERS} - visibleLayers={visibleLayers} /> - handleVisibilityToggle('network-schoolways')} - /> + Karten-Elemente - - handleVisibilityToggle('elementary-schools-allblue') - } - style={{ cursor: 'pointer' }} - > + diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/02_SectionBasics.tsx b/src/pages/ZESPlus-Research/radnetzentwicklung/02_SectionBasics.tsx index 9b2cac636..a5bd03be5 100644 --- a/src/pages/ZESPlus-Research/radnetzentwicklung/02_SectionBasics.tsx +++ b/src/pages/ZESPlus-Research/radnetzentwicklung/02_SectionBasics.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Heading, List, Paragraph, SectionProps } from '~/components2/Article'; import { MapPlaceholder } from '../components/MapPlaceholder/MapPlaceholder'; -import { MapNetworks } from './maps'; +import { MapNetworks } from './components'; export const SectionBasics = (props: SectionProps) => ( <> diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/maps/MapNetworks.tsx b/src/pages/ZESPlus-Research/radnetzentwicklung/components/MapNetworks.tsx similarity index 66% rename from src/pages/ZESPlus-Research/radnetzentwicklung/maps/MapNetworks.tsx rename to src/pages/ZESPlus-Research/radnetzentwicklung/components/MapNetworks.tsx index 85e8d167e..2b0fd2cfd 100644 --- a/src/pages/ZESPlus-Research/radnetzentwicklung/maps/MapNetworks.tsx +++ b/src/pages/ZESPlus-Research/radnetzentwicklung/components/MapNetworks.tsx @@ -1,55 +1,59 @@ -import React from 'react'; -import { Map } from '~/components2/Article'; -import { BOUNDS_ZES, ZES_CENTER, ZES_ZOOM } from '../../mapboxOptions.const'; +import React, { useState } from 'react'; +import { FullscreenMap } from '~/components2/Article'; import { IconWrapper, - Legend, LegendCol, LegendHeader, LegendItem, LegendItems, LegendSources, } from '~/components2/Article/Map/MapLegendStyledComponents'; +import { BOUNDS_ZES, ZES_CENTER, ZES_ZOOM } from '../../mapboxOptions.const'; import IconBV from './icons/berliner-verbaende.svg'; import IconHeatmap from './icons/heatmap.svg'; import IconKDS from './icons/konzept-dahme-spree.svg'; import IconKS from './icons/konzept-schoenefeld.svg'; import IconRSV from './icons/radschnellverbindungen.svg'; import IconT from './icons/touristische.svg'; -import IconV from './icons/varianten-rsv.svg'; -import IconZES from './icons/zes.svg'; -const MAP_STYLE_QUALITY: mapboxgl.MapboxOptions['style'] = - 'mapbox://styles/hejco/ckhufbloj0gmz19pk0m6bd4d2'; +const MAP_STYLE: mapboxgl.MapboxOptions['style'] = + 'mapbox://styles/hejco/cl0rzb1ff000615rz609xmppp'; + +export const MapNetworks = () => { + const [toggleLayers, setToggleLayers] = useState([]); -export const MapNetworks = () => ( - <> - - + toggleLayers={toggleLayers} + setToggleLayers={setToggleLayers} + > TEST MAP - + + setToggleLayers(['settlement-major-label', 'stations']) + } + > - {' '} - Touristische Radrouten¹ + + CLICK - {' '} + Radschnellverbindung Berlin Y-Trasse² - {' '} + Berliner Verbände Radnetz³ @@ -60,27 +64,15 @@ export const MapNetworks = () => ( - {' '} + Konzept LK Dahme-Spree⁴ - {' '} + Radkonzept Schönefeld⁵ - - - - {' '} - Varianten Radschnellverb. BER-KW⁶ - - - - - {' '} - Konzept ZES⁷ - @@ -89,7 +81,7 @@ export const MapNetworks = () => ( - {' '} + Quellen und Ziele (Heatmap)⁸ @@ -98,6 +90,6 @@ export const MapNetworks = () => ( Quellen: ¹ OSM 2020, ² InfraVelo GmbH 2019, ³ ADFC 2019, ⁴IGS 2020, ⁵ ⁶ ⁷ Radgruppe ZES+ 2020, ⁸ OSM und Radgruppe ZES+ 2020 - - -); + + ); +}; diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/berliner-verbaende.svg b/src/pages/ZESPlus-Research/radnetzentwicklung/components/icons/berliner-verbaende.svg similarity index 100% rename from src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/berliner-verbaende.svg rename to src/pages/ZESPlus-Research/radnetzentwicklung/components/icons/berliner-verbaende.svg diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/heatmap.svg b/src/pages/ZESPlus-Research/radnetzentwicklung/components/icons/heatmap.svg similarity index 100% rename from src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/heatmap.svg rename to src/pages/ZESPlus-Research/radnetzentwicklung/components/icons/heatmap.svg diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/konzept-dahme-spree.svg b/src/pages/ZESPlus-Research/radnetzentwicklung/components/icons/konzept-dahme-spree.svg similarity index 100% rename from src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/konzept-dahme-spree.svg rename to src/pages/ZESPlus-Research/radnetzentwicklung/components/icons/konzept-dahme-spree.svg diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/konzept-schoenefeld.svg b/src/pages/ZESPlus-Research/radnetzentwicklung/components/icons/konzept-schoenefeld.svg similarity index 100% rename from src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/konzept-schoenefeld.svg rename to src/pages/ZESPlus-Research/radnetzentwicklung/components/icons/konzept-schoenefeld.svg diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/radschnellverbindungen.svg b/src/pages/ZESPlus-Research/radnetzentwicklung/components/icons/radschnellverbindungen.svg similarity index 100% rename from src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/radschnellverbindungen.svg rename to src/pages/ZESPlus-Research/radnetzentwicklung/components/icons/radschnellverbindungen.svg diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/touristische.svg b/src/pages/ZESPlus-Research/radnetzentwicklung/components/icons/touristische.svg similarity index 100% rename from src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/touristische.svg rename to src/pages/ZESPlus-Research/radnetzentwicklung/components/icons/touristische.svg diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/varianten-rsv.svg b/src/pages/ZESPlus-Research/radnetzentwicklung/components/icons/varianten-rsv.svg similarity index 100% rename from src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/varianten-rsv.svg rename to src/pages/ZESPlus-Research/radnetzentwicklung/components/icons/varianten-rsv.svg diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/zes.svg b/src/pages/ZESPlus-Research/radnetzentwicklung/components/icons/zes.svg similarity index 100% rename from src/pages/ZESPlus-Research/radnetzentwicklung/maps/icons/zes.svg rename to src/pages/ZESPlus-Research/radnetzentwicklung/components/icons/zes.svg diff --git a/src/pages/ZESPlus-Research/radnetzentwicklung/maps/index.ts b/src/pages/ZESPlus-Research/radnetzentwicklung/components/index.ts similarity index 100% rename from src/pages/ZESPlus-Research/radnetzentwicklung/maps/index.ts rename to src/pages/ZESPlus-Research/radnetzentwicklung/components/index.ts From 9d84ea000445c7a395215d6d1dc7744810db2ee0 Mon Sep 17 00:00:00 2001 From: Tobias Date: Thu, 17 Mar 2022 12:04:59 +0100 Subject: [PATCH 13/22] Refactoring: Move MapLegend into Map-Scope This whole folder was only used by the Map-"Product" (HBI/Planungen) (by now), so we should move it in the component folder over there. Also import styles directly from the styles file and rename that so it's easier to understand the imports. --- .../components/MapLegend/CadastreLegendGrid.tsx | 2 +- .../components/MapLegend/IncidentLegendGrid.tsx | 2 +- src/{ => apps/Map}/components/MapLegend/Legend.tsx | 2 +- .../Map/components/MapLegend/Styles.tsx} | 0 .../Map}/components/MapLegend/assets/close.svg | 0 .../components/MapLegend/assets/construction.png | Bin .../Map}/components/MapLegend/assets/dividers.png | Bin .../Map}/components/MapLegend/assets/footways.png | Bin .../MapLegend/assets/guardrail-legend.png | Bin src/{ => apps/Map}/components/MapLegend/index.ts | 1 - src/apps/Map/index.tsx | 2 +- 11 files changed, 4 insertions(+), 5 deletions(-) rename src/{ => apps/Map}/components/MapLegend/CadastreLegendGrid.tsx (99%) rename src/{ => apps/Map}/components/MapLegend/IncidentLegendGrid.tsx (98%) rename src/{ => apps/Map}/components/MapLegend/Legend.tsx (95%) rename src/{components/MapLegend/LegendStyles.tsx => apps/Map/components/MapLegend/Styles.tsx} (100%) rename src/{ => apps/Map}/components/MapLegend/assets/close.svg (100%) rename src/{ => apps/Map}/components/MapLegend/assets/construction.png (100%) rename src/{ => apps/Map}/components/MapLegend/assets/dividers.png (100%) rename src/{ => apps/Map}/components/MapLegend/assets/footways.png (100%) rename src/{ => apps/Map}/components/MapLegend/assets/guardrail-legend.png (100%) rename src/{ => apps/Map}/components/MapLegend/index.ts (76%) diff --git a/src/components/MapLegend/CadastreLegendGrid.tsx b/src/apps/Map/components/MapLegend/CadastreLegendGrid.tsx similarity index 99% rename from src/components/MapLegend/CadastreLegendGrid.tsx rename to src/apps/Map/components/MapLegend/CadastreLegendGrid.tsx index 4555a8f21..ffd0df1bb 100644 --- a/src/components/MapLegend/CadastreLegendGrid.tsx +++ b/src/apps/Map/components/MapLegend/CadastreLegendGrid.tsx @@ -13,7 +13,7 @@ import { LegendCol, LegendItem, LegendWrapper, -} from './index'; +} from './Styles'; export const CadastreLegendGrid = () => ( diff --git a/src/components/MapLegend/IncidentLegendGrid.tsx b/src/apps/Map/components/MapLegend/IncidentLegendGrid.tsx similarity index 98% rename from src/components/MapLegend/IncidentLegendGrid.tsx rename to src/apps/Map/components/MapLegend/IncidentLegendGrid.tsx index 60955f7a1..9748625ea 100644 --- a/src/components/MapLegend/IncidentLegendGrid.tsx +++ b/src/apps/Map/components/MapLegend/IncidentLegendGrid.tsx @@ -5,7 +5,7 @@ import { LegendCol, LegendItem, LegendWrapper, -} from './index'; +} from './Styles'; export const IncidentLegendGrid = () => ( diff --git a/src/components/MapLegend/Legend.tsx b/src/apps/Map/components/MapLegend/Legend.tsx similarity index 95% rename from src/components/MapLegend/Legend.tsx rename to src/apps/Map/components/MapLegend/Legend.tsx index 18979bd9a..47c63e1f0 100644 --- a/src/components/MapLegend/Legend.tsx +++ b/src/apps/Map/components/MapLegend/Legend.tsx @@ -6,7 +6,7 @@ import { FloatingLegendProps, } from '~/components2/FloatingLegend'; import config from '~/config'; -import { CadastreLegendGrid, IncidentLegendGrid } from './index'; +import { CadastreLegendGrid, IncidentLegendGrid } from '.'; const Header = styled.h1` font-size: 1.2em; diff --git a/src/components/MapLegend/LegendStyles.tsx b/src/apps/Map/components/MapLegend/Styles.tsx similarity index 100% rename from src/components/MapLegend/LegendStyles.tsx rename to src/apps/Map/components/MapLegend/Styles.tsx diff --git a/src/components/MapLegend/assets/close.svg b/src/apps/Map/components/MapLegend/assets/close.svg similarity index 100% rename from src/components/MapLegend/assets/close.svg rename to src/apps/Map/components/MapLegend/assets/close.svg diff --git a/src/components/MapLegend/assets/construction.png b/src/apps/Map/components/MapLegend/assets/construction.png similarity index 100% rename from src/components/MapLegend/assets/construction.png rename to src/apps/Map/components/MapLegend/assets/construction.png diff --git a/src/components/MapLegend/assets/dividers.png b/src/apps/Map/components/MapLegend/assets/dividers.png similarity index 100% rename from src/components/MapLegend/assets/dividers.png rename to src/apps/Map/components/MapLegend/assets/dividers.png diff --git a/src/components/MapLegend/assets/footways.png b/src/apps/Map/components/MapLegend/assets/footways.png similarity index 100% rename from src/components/MapLegend/assets/footways.png rename to src/apps/Map/components/MapLegend/assets/footways.png diff --git a/src/components/MapLegend/assets/guardrail-legend.png b/src/apps/Map/components/MapLegend/assets/guardrail-legend.png similarity index 100% rename from src/components/MapLegend/assets/guardrail-legend.png rename to src/apps/Map/components/MapLegend/assets/guardrail-legend.png diff --git a/src/components/MapLegend/index.ts b/src/apps/Map/components/MapLegend/index.ts similarity index 76% rename from src/components/MapLegend/index.ts rename to src/apps/Map/components/MapLegend/index.ts index 00cb120fd..4fd4ab6c6 100644 --- a/src/components/MapLegend/index.ts +++ b/src/apps/Map/components/MapLegend/index.ts @@ -1,4 +1,3 @@ export * from './Legend'; export * from './IncidentLegendGrid'; export * from './CadastreLegendGrid'; -export * from './LegendStyles'; diff --git a/src/apps/Map/index.tsx b/src/apps/Map/index.tsx index aa176999a..6fd7311fb 100644 --- a/src/apps/Map/index.tsx +++ b/src/apps/Map/index.tsx @@ -7,7 +7,7 @@ import { withRouter, } from 'react-router-dom'; import styled from 'styled-components'; -import { Legend } from '~/components/MapLegend/Legend'; +import { Legend } from './components/MapLegend'; import { ErrorMessage } from '~/components2/ErrorMessage'; import { FloatingLegendIcon } from '~/components2/FloatingLegend'; import { Logo as FMBLogo } from '~/components2/Logo'; From 1f42062c03b907fe9e3aafa8a9fc3146865ad283 Mon Sep 17 00:00:00 2001 From: Tobias Date: Thu, 17 Mar 2022 12:06:02 +0100 Subject: [PATCH 14/22] Improve styled component code Using `css` here activates the code styling; and does not change the outcome. --- .../MapsControls/StyledMapButton.ts | 39 ++++++++++--------- 1 file changed, 20 insertions(+), 19 deletions(-) diff --git a/src/components2/MapsControls/StyledMapButton.ts b/src/components2/MapsControls/StyledMapButton.ts index 23ff01b01..a5beadd9d 100644 --- a/src/components2/MapsControls/StyledMapButton.ts +++ b/src/components2/MapsControls/StyledMapButton.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import config from '~/config'; type Props = { @@ -8,7 +8,7 @@ type Props = { // Use `$active` to invert the button and disable the hover/… styles. // `$active` needs to be prefixed with a `$` which makes it a special styled component prop // that does not get passed down to the underlying DOM element. -// Learn more at https://styled-components.com/docs/api#typescript and https://styled-components.com/docs/api#transient-props +// Learn more at https://styled-components.com/docs/api#typescript, https://styled-components.com/docs/api#transient-props export const StyledMapButton = styled.svg` cursor: pointer; display: block; @@ -20,23 +20,24 @@ export const StyledMapButton = styled.svg` } ${({ $active }) => $active && - ` - circle { - fill: ${config.colors.darkgrey}; - stroke: #EEE; - } - g { - stroke: #EEE; - } - `} + css` + circle { + fill: ${config.colors.darkgrey}; + stroke: #eee; + } + g { + stroke: #eee; + } + `} ${({ $active }) => !$active && - ` - &:hover circle { - fill: ${config.colors.lightbg}; - } - &:active circle, - &:focus circle { - fill: ${config.colors.lightgrey}; - }`} + css` + &:hover circle { + fill: ${config.colors.lightbg}; + } + &:active circle, + &:focus circle { + fill: ${config.colors.lightgrey}; + } + `} `; From a885ea4312ab1dfdd14659bfab1d459ad251f278 Mon Sep 17 00:00:00 2001 From: Tobias Date: Thu, 17 Mar 2022 12:56:03 +0100 Subject: [PATCH 15/22] Refactor+Mobile: Close-X Component and FloatingLegend - Rename ModalCloseIcon component to ClosePanelButton component - Remove duplicated CloseMapIcon component in favor of reusing ClosePanelButton - Refactor components to use `style` props which overwrite the given styled-components styles automatically. This means, we need to write less code in styled components. - Allow MapsControl to be hidden via props - Add styles for FullscreenMap on mobile - Cleanup FullscreenMap comments and props --- src/apps/Map/index.tsx | 5 +- .../Article/FullscreenMap/CloseMapIcon.tsx | 48 ------------------- .../Article/FullscreenMap/FullscreenMap.tsx | 42 ++++++++++------ .../ClosePanelButton.tsx} | 12 ++--- .../close-icon.svg | 0 src/components2/ClosePanelButton/index.ts | 1 + .../FloatingLegend/FloatingLegend.tsx | 21 ++++---- src/components2/MapsControls/MapControl.tsx | 29 ++++------- src/components2/ModalCloseIcon/index.ts | 1 - .../components/MapLegend/LegendExpanded.tsx | 4 +- .../components/WelcomeModal/WelcomeModal.tsx | 4 +- 11 files changed, 60 insertions(+), 107 deletions(-) delete mode 100644 src/components2/Article/FullscreenMap/CloseMapIcon.tsx rename src/components2/{ModalCloseIcon/ModalCloseIcon.tsx => ClosePanelButton/ClosePanelButton.tsx} (82%) rename src/components2/{ModalCloseIcon => ClosePanelButton}/close-icon.svg (100%) create mode 100644 src/components2/ClosePanelButton/index.ts delete mode 100644 src/components2/ModalCloseIcon/index.ts diff --git a/src/apps/Map/index.tsx b/src/apps/Map/index.tsx index 6fd7311fb..222c77dc2 100644 --- a/src/apps/Map/index.tsx +++ b/src/apps/Map/index.tsx @@ -142,7 +142,10 @@ const MapView = ({ )} - + changeZoom(1)} diff --git a/src/components2/Article/FullscreenMap/CloseMapIcon.tsx b/src/components2/Article/FullscreenMap/CloseMapIcon.tsx deleted file mode 100644 index a77ee9ed2..000000000 --- a/src/components2/Article/FullscreenMap/CloseMapIcon.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import config from '~/config'; -import CloseIcon from './icons/close-icon.svg'; - -const StyledCloseIcon = styled(CloseIcon)` - color: ${config.colors.lightgrey}; - cursor: pointer; - position: fixed; - right: 20px; - top: 20px; - z-index: 20; - overflow: visible; - width: 41px; - height: 41px; - - &:focus { - outline: none; - & .close-icon-background { - fill: ${config.colors.midgrey}; - } - } -`; - -type Props = { - onClick: () => void; - controlsId?: string; - label?: string; -}; - -/** - * @param {controlsId} string Space seperated list of one or more ID values referencing the elements being controlled by the current element - * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls - */ -export const CloseMapIcon: React.VFC = ({ - onClick, - controlsId = undefined, - label = 'Schließen', -}) => { - return ( - onClick()} - aria-label={label} - aria-controls={controlsId} - role="button" - /> - ); -}; diff --git a/src/components2/Article/FullscreenMap/FullscreenMap.tsx b/src/components2/Article/FullscreenMap/FullscreenMap.tsx index 6d33beeb5..74b50dbca 100644 --- a/src/components2/Article/FullscreenMap/FullscreenMap.tsx +++ b/src/components2/Article/FullscreenMap/FullscreenMap.tsx @@ -2,49 +2,53 @@ import MapboxGL from 'mapbox-gl'; import React, { useEffect, useState } from 'react'; import styled from 'styled-components'; import { BaseMap } from '~/components2/BaseMap'; +import { ClosePanelButton } from '~/components2/ClosePanelButton'; import { FloatingLegend, FloatingLegendIcon, } from '~/components2/FloatingLegend'; import { MapControl } from '~/components2/MapsControls'; +import { breakpoints, matchMediaSize, media } from '~/styles/utils'; import { MAPBOX_INTERACTION_HANDLERS } from '../Map/MapInteractionHandler.const'; import { ActivateButton, ButtonArea, MapWrapper, Wrapper } from '../Map/styles'; -import { CloseMapIcon } from './CloseMapIcon'; import { LayerToggleTester } from './LayerToggleTester'; const FullscreenWrapper = styled.div` position: fixed; - inset: 0; z-index: 10; + inset: 78px 0 0 0; // To respect the sticky header on mobile + + ${media.m` + inset: 0; + `} `; export type FullscreenMapProps = { - defaultActive?: boolean; mapboxStyle: mapboxgl.MapboxOptions['style']; toggleLayers?: string[]; setToggleLayers?: (toggleLayers: string[]) => void; } & Partial; /** - * Map component for use in an article. + * Map component with fullscreen capabilities for use in an article. * - * Let's users enable interactivity with an animated button overlay. + * Shows a preview of the map (non interactive). + * The button to activate the map shows the map full screen with a floating legend panel. * * Extends mapboxgl.Map component props * - * @param defaultActive set true to hide `activate` button * @param toggleLayers an array of map layers to show / hide */ export const FullscreenMap: React.FC = ({ - defaultActive = false, toggleLayers, setToggleLayers, children, ...mapProps }) => { + const isDesktopView = matchMediaSize(breakpoints.m); const [map, setMap] = useState(null); - const [isFullscreen, setFullscreen] = useState(defaultActive); - const [showLegend, setShowLegend] = useState(true); + const [isFullscreen, setFullscreen] = useState(false); + const [showLegend, setShowLegend] = useState(isDesktopView); // Activate interaction handlers when activate button is clicked useEffect(() => { @@ -71,10 +75,17 @@ export const FullscreenMap: React.FC = ({ if (isFullscreen) { return ( - setFullscreen(false)} - controlsId="FullscreenMap" - /> + + setFullscreen(false)} + controlsId="FullscreenMap" + style={{ + position: 'relative', + right: 'auto', + top: 'auto', + }} + /> + @@ -86,8 +97,9 @@ export const FullscreenMap: React.FC = ({ setFullscreen(false)} - positionTop="70px" + closeLegend={() => setShowLegend(false)} + closeLegendStyle={{ left: '16px', right: 'auto' }} + style={isDesktopView ? { right: '70px' } : { top: '36px' }} > <> {children} diff --git a/src/components2/ModalCloseIcon/ModalCloseIcon.tsx b/src/components2/ClosePanelButton/ClosePanelButton.tsx similarity index 82% rename from src/components2/ModalCloseIcon/ModalCloseIcon.tsx rename to src/components2/ClosePanelButton/ClosePanelButton.tsx index 052ec9334..4770b5382 100644 --- a/src/components2/ModalCloseIcon/ModalCloseIcon.tsx +++ b/src/components2/ClosePanelButton/ClosePanelButton.tsx @@ -7,8 +7,8 @@ const StyledCloseIcon = styled(CloseIcon)` color: ${config.colors.lightgrey}; cursor: pointer; position: absolute; - right: ${({ styles: { right } }) => right || '10px'}; - top: -18px; + right: 10px; + top: -21px; z-index: 500; overflow: visible; width: 41px; @@ -26,18 +26,18 @@ type Props = { onClick: () => void; controlsId?: string; label?: string; - positionRight?: string; + style?: React.CSSProperties; }; /** * @param {controlsId} string Space seperated list of one or more ID values referencing the elements being controlled by the current element * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls */ -export const ModalCloseIcon: React.FC = ({ +export const ClosePanelButton: React.FC = ({ onClick, controlsId = undefined, label = 'Schließen', - positionRight = undefined, + style, }) => { return ( = ({ aria-label={label} aria-controls={controlsId} role="button" - styles={{ right: positionRight }} + style={style} /> ); }; diff --git a/src/components2/ModalCloseIcon/close-icon.svg b/src/components2/ClosePanelButton/close-icon.svg similarity index 100% rename from src/components2/ModalCloseIcon/close-icon.svg rename to src/components2/ClosePanelButton/close-icon.svg diff --git a/src/components2/ClosePanelButton/index.ts b/src/components2/ClosePanelButton/index.ts new file mode 100644 index 000000000..7dff9d174 --- /dev/null +++ b/src/components2/ClosePanelButton/index.ts @@ -0,0 +1 @@ +export * from './ClosePanelButton'; diff --git a/src/components2/FloatingLegend/FloatingLegend.tsx b/src/components2/FloatingLegend/FloatingLegend.tsx index e29a08166..38ca397e6 100644 --- a/src/components2/FloatingLegend/FloatingLegend.tsx +++ b/src/components2/FloatingLegend/FloatingLegend.tsx @@ -1,6 +1,6 @@ import React from 'react'; import styled from 'styled-components'; -import { ModalCloseIcon } from '~/components2/ModalCloseIcon'; +import { ClosePanelButton } from '~/components2/ClosePanelButton'; import config from '~/config'; import { media } from '~/styles/utils'; @@ -16,7 +16,7 @@ const FloatingWrapper = styled.section` box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); bottom: 0; position: absolute; - z-index: 400; + z-index: 700; ${media.s` padding: 0; @@ -31,10 +31,7 @@ const FloatingWrapper = styled.section` bottom: initial; position: absolute; left: 15px; - top: ${ - ({ style: { top } }: any) => - top || '85px' /* did not find the proper TS types… */ - }; + top: 85px; width: 40vw; max-width: 24em; font-size: 1.5625vw; @@ -70,25 +67,27 @@ const IconWrapper = styled.div` export type FloatingLegendProps = { visible: boolean; closeLegend: () => void; - positionTop?: string; + closeLegendStyle?: React.CSSProperties; + style?: React.CSSProperties; }; export const FloatingLegend: React.FC = ({ visible, closeLegend, - positionTop, + closeLegendStyle, + style, children, }) => { if (!visible) return null; return ( - + - closeLegend()} controlsId="Legend" label="Legende schließen" - positionRight="25px" + style={closeLegendStyle} /> {children} diff --git a/src/components2/MapsControls/MapControl.tsx b/src/components2/MapsControls/MapControl.tsx index 03324135d..5270964aa 100644 --- a/src/components2/MapsControls/MapControl.tsx +++ b/src/components2/MapsControls/MapControl.tsx @@ -1,38 +1,23 @@ import React from 'react'; import styled from 'styled-components'; -export type MapControlPositionProp = - | 'top-left' - | 'top-right' - | 'bottom-right' - | 'bottom-left'; - const StyledMapControl = styled.div` position: absolute; z-index: 600; - top: ${(props: CustonPosition) => props?.top}; - right: ${(props: CustonPosition) => props?.right}; - bottom: ${(props: CustonPosition) => props?.bottom}; - left: ${(props: CustonPosition) => props?.left}; `; -type CustonPosition = { - top?: string; - bottom?: string; - left?: string; - right?: string; -}; - export type MapcControlProps = { - position?: MapControlPositionProp; + position?: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'; className?: string; - customPosition?: CustonPosition; + style?: React.CSSProperties; + visible?: boolean; }; export const MapControl: React.FC = ({ position = 'top-left', className, - customPosition, + style, + visible = true, children, }) => { const positionCss = (pos) => { @@ -62,11 +47,13 @@ export const MapControl: React.FC = ({ } }; + if (!visible) return null; + return ( {children} diff --git a/src/components2/ModalCloseIcon/index.ts b/src/components2/ModalCloseIcon/index.ts deleted file mode 100644 index 18eaa146c..000000000 --- a/src/components2/ModalCloseIcon/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { ModalCloseIcon } from './ModalCloseIcon'; diff --git a/src/pages/Reports/pages/OverviewMap/components/MapLegend/LegendExpanded.tsx b/src/pages/Reports/pages/OverviewMap/components/MapLegend/LegendExpanded.tsx index aa4f3c563..ce0ca3995 100644 --- a/src/pages/Reports/pages/OverviewMap/components/MapLegend/LegendExpanded.tsx +++ b/src/pages/Reports/pages/OverviewMap/components/MapLegend/LegendExpanded.tsx @@ -1,6 +1,6 @@ import React from 'react'; import styled from 'styled-components'; -import { ModalCloseIcon } from '~/components2/ModalCloseIcon'; +import { ClosePanelButton } from '~/components2/ClosePanelButton'; import { StatsCounter, StatsExpanded } from '~/pages/Reports/components/Stats'; import config from '~/pages/Reports/config'; import { BaseWrapper } from './LegendCollapsed'; @@ -29,7 +29,7 @@ const StyledLegendGrid = styled(LegendGrid)<{ compact: boolean }>` const LegendExpanded = ({ onToggle, compact = false }) => ( - = ({ visible, setView }) => { aria-labelledby="WelcomeModalTitle" aria-modal="true" > - + Neuigkeiten zum Happy-Bike-Index From f5c35e274207f3a50e342133fdbf729d6a6a4aa8 Mon Sep 17 00:00:00 2001 From: Tobias Date: Thu, 17 Mar 2022 13:10:34 +0100 Subject: [PATCH 16/22] Remove Map Layer Toggle from Xhain This was an experiment that we do not need anymore. The rest of the code was already removed. --- .../LegendItemsNetworkSchoolways.tsx | 6 ++---- .../Section02Surroundings/Map02Surroundings.tsx | 10 ---------- .../sections/Section03Crossing/Map03Crossing.tsx | 12 ------------ 3 files changed, 2 insertions(+), 26 deletions(-) diff --git a/src/pages/XhainWayToSchool/sections/Section01Network/LegendItemsNetworkSchoolways.tsx b/src/pages/XhainWayToSchool/sections/Section01Network/LegendItemsNetworkSchoolways.tsx index da149bf14..7a44748d7 100644 --- a/src/pages/XhainWayToSchool/sections/Section01Network/LegendItemsNetworkSchoolways.tsx +++ b/src/pages/XhainWayToSchool/sections/Section01Network/LegendItemsNetworkSchoolways.tsx @@ -9,12 +9,10 @@ import SchoolWays100 from '../assets/school-ways-100.svg'; import SchoolWays200 from '../assets/school-ways-200.svg'; import SchoolWays300 from '../assets/school-ways-300.svg'; -type Props = { onClick?: () => void }; - -export const LegendItemsNetworkSchoolways: React.FC = ({ onClick }) => { +export const LegendItemsNetworkSchoolways: React.FC = () => { return ( <> - Schulwege-Häufigkeit + Schulwege-Häufigkeit diff --git a/src/pages/XhainWayToSchool/sections/Section02Surroundings/Map02Surroundings.tsx b/src/pages/XhainWayToSchool/sections/Section02Surroundings/Map02Surroundings.tsx index 5c7b24a4e..323af5506 100644 --- a/src/pages/XhainWayToSchool/sections/Section02Surroundings/Map02Surroundings.tsx +++ b/src/pages/XhainWayToSchool/sections/Section02Surroundings/Map02Surroundings.tsx @@ -23,14 +23,6 @@ import { import { IconKmh } from './components/IconKmh'; export const Map02Surroundings = () => { - const allVisibleLayers = [ - 'network-schoolways', - 'network-schoolways-labels', - 'speedlimits', - 'streetclass', - 'elementary-schools-HVS', - ]; - return ( <> { maxBounds={BOUNDS} center={CENTER} zoom={ZOOM} - allLayers={ALL_LAYERS} - visibleLayers={allVisibleLayers} /> diff --git a/src/pages/XhainWayToSchool/sections/Section03Crossing/Map03Crossing.tsx b/src/pages/XhainWayToSchool/sections/Section03Crossing/Map03Crossing.tsx index fc17c8853..e3dc50da3 100644 --- a/src/pages/XhainWayToSchool/sections/Section03Crossing/Map03Crossing.tsx +++ b/src/pages/XhainWayToSchool/sections/Section03Crossing/Map03Crossing.tsx @@ -26,16 +26,6 @@ import { import { LegendItemsNetworkSchoolways } from '../Section01Network/LegendItemsNetworkSchoolways'; export const Map03Crossing = () => { - const allVisibleLayers = [ - 'network-schoolways', - 'network-schoolways-labels', - 'accidents-fuss', - 'elementary-schools-HVS', - 'knotenpunkte-withnocrossing', - 'traffic-light-system-xhain', - 'crosswalk-xhain', - ]; - return ( <> { maxBounds={BOUNDS} center={CENTER} zoom={ZOOM} - allLayers={ALL_LAYERS} - visibleLayers={allVisibleLayers} /> From b1e7354c0a99101aad8d21279f115d31d90a9eb8 Mon Sep 17 00:00:00 2001 From: Tobias Date: Thu, 17 Mar 2022 15:21:37 +0100 Subject: [PATCH 17/22] Extract MapActivationButton in shared component Its used by the Article/Map and Article/FullscreenMap. --- .../Article/FullscreenMap/FullscreenMap.tsx | 31 ++++---- src/components2/Article/Map/Map.tsx | 37 ++------- .../Article/Map/MapActivationButton.tsx | 76 +++++++++++++++++++ src/components2/Article/Map/styles.ts | 52 +------------ 4 files changed, 96 insertions(+), 100 deletions(-) create mode 100644 src/components2/Article/Map/MapActivationButton.tsx diff --git a/src/components2/Article/FullscreenMap/FullscreenMap.tsx b/src/components2/Article/FullscreenMap/FullscreenMap.tsx index 74b50dbca..f34db33ab 100644 --- a/src/components2/Article/FullscreenMap/FullscreenMap.tsx +++ b/src/components2/Article/FullscreenMap/FullscreenMap.tsx @@ -9,8 +9,9 @@ import { } from '~/components2/FloatingLegend'; import { MapControl } from '~/components2/MapsControls'; import { breakpoints, matchMediaSize, media } from '~/styles/utils'; +import { MapActivationButton } from '../Map/MapActivationButton'; import { MAPBOX_INTERACTION_HANDLERS } from '../Map/MapInteractionHandler.const'; -import { ActivateButton, ButtonArea, MapWrapper, Wrapper } from '../Map/styles'; +import { MapWrapper, Wrapper } from '../Map/styles'; import { LayerToggleTester } from './LayerToggleTester'; const FullscreenWrapper = styled.div` @@ -118,24 +119,18 @@ export const FullscreenMap: React.FC = ({ - - setFullscreen(true)} - mapActive={isFullscreen} + + - - - - Karte aktivieren - - + + + Karte aktivieren + ); }; diff --git a/src/components2/Article/Map/Map.tsx b/src/components2/Article/Map/Map.tsx index 561e7c36f..a9b6eaa84 100644 --- a/src/components2/Article/Map/Map.tsx +++ b/src/components2/Article/Map/Map.tsx @@ -1,15 +1,14 @@ import MapboxGL from 'mapbox-gl'; import React, { useEffect, useState } from 'react'; import { BaseMap } from '~/components2/BaseMap'; -import { MAPBOX_INTERACTION_HANDLERS } from './MapInteractionHandler.const'; import IconActivate from './assets/smartphone-finger-icon.svg'; -import { ActivateButton, ButtonArea, MapWrapper, Wrapper } from './styles'; +import { MapActivationButton } from './MapActivationButton'; +import { MAPBOX_INTERACTION_HANDLERS } from './MapInteractionHandler.const'; +import { MapWrapper, Wrapper } from './styles'; type Props = { defaultActive?: boolean; mapboxStyle: mapboxgl.MapboxOptions['style']; - allLayers?: string[]; - visibleLayers?: string[]; } & Partial; /** @@ -20,13 +19,9 @@ type Props = { * Extends mapboxgl.Map component props * * @param defaultActive set true to hide `activate` button - * @param allLayers an array of all map custom map layers; use together with `visibleLayers` - * @param visibleLayers an array of map layers to show; only those are visible for this map */ export const Map: React.VFC = ({ defaultActive = false, - allLayers = [], - visibleLayers = [], ...mapProps }) => { const [map, setMap] = useState(null); @@ -41,34 +36,14 @@ export const Map: React.VFC = ({ ); }, [map, isActive]); - // Layer visibility - useEffect(() => { - if (map === null) return; - - // Hide all custom layers so we can show those we want - allLayers.forEach((layer) => { - map.setLayoutProperty(layer, 'visibility', 'none'); - }); - visibleLayers.forEach((layer) => { - map.setLayoutProperty(layer, 'visibility', 'visible'); - }); - }, [map, allLayers, visibleLayers]); - return ( - - setActive(true)} - mapActive={isActive} - > - - Karte aktivieren - - + + Karte aktivieren + ); }; diff --git a/src/components2/Article/Map/MapActivationButton.tsx b/src/components2/Article/Map/MapActivationButton.tsx new file mode 100644 index 000000000..4677190c1 --- /dev/null +++ b/src/components2/Article/Map/MapActivationButton.tsx @@ -0,0 +1,76 @@ +import React from 'react'; +import styled, { css } from 'styled-components'; +import { Button } from '~/components2/Button'; +import { media } from '~/styles/utils'; + +const ActivateButton = styled(Button)<{ mapActive: boolean }>` + & { + align-items: center; + background-color: white; + display: flex; + flex-direction: row; + height: 48px; + justify-content: center; + padding: 0 24px; + width: initial; + z-index: 100; + + &:focus { + box-shadow: none; + border-color: transparent; + outline-style: none; + } + + & > svg { + margin-right: 0.5em; + } + + // Move button outside of map wrapper when activated + transition: transform 0.3s; + ${({ mapActive }) => + mapActive + ? css` + transform: translateY(200%); + ` + : null} + } +`; + +const ButtonArea = styled.div` + bottom: 1em; + display: flex; + justify-content: center; + position: absolute; + width: 100%; + + ${media.m` + bottom: 2em; + `} + + ${media.xl` + bottom: 2em; + `} +`; + +type Props = { + isActive: boolean; + setActive: (isActive: boolean) => void; +}; + +export const MapActivationButton: React.FC = ({ + isActive, + setActive, + children, +}) => { + return ( + + setActive(true)} + mapActive={isActive} + > + {children} + + + ); +}; diff --git a/src/components2/Article/Map/styles.ts b/src/components2/Article/Map/styles.ts index 743e29a56..ad7d00420 100644 --- a/src/components2/Article/Map/styles.ts +++ b/src/components2/Article/Map/styles.ts @@ -1,5 +1,4 @@ -import styled, { css } from 'styled-components'; -import { Button } from '~/components2/Button'; +import styled from 'styled-components'; import { media } from '~/styles/utils'; export const MapWrapper = styled.div` @@ -37,52 +36,3 @@ export const Wrapper = styled.div` width: calc(100% - 151px + 5em); `} `; - -export const ActivateButton = styled(Button)<{ mapActive: boolean }>` - & { - align-items: center; - background-color: white; - display: flex; - flex-direction: row; - height: 48px; - justify-content: center; - padding: 0 24px; - width: initial; - z-index: 100; - - &:focus { - box-shadow: none; - border-color: transparent; - outline-style: none; - } - - & > svg { - margin-right: 0.5em; - } - - // Move button outside of map wrapper when activated - transition: transform 0.3s; - ${({ mapActive }) => - mapActive - ? css` - transform: translateY(200%); - ` - : null} - } -`; - -export const ButtonArea = styled.div` - bottom: 1em; - display: flex; - justify-content: center; - position: absolute; - width: 100%; - - ${media.m` - bottom: 2em; - `} - - ${media.xl` - bottom: 2em; - `} -`; From 5dc47a0b38256bd313deb62d30c99db094d21bcd Mon Sep 17 00:00:00 2001 From: Tobias Date: Thu, 17 Mar 2022 15:37:54 +0100 Subject: [PATCH 18/22] Refactor MapControls position Lets use true/false props here for position which makes the code a lot easier. Also fixes the visibility of the button on desktop. --- src/apps/Map/index.tsx | 2 +- .../Article/FullscreenMap/FullscreenMap.tsx | 4 +- .../MapsControls/LocatorMapControl.tsx | 11 ++--- src/components2/MapsControls/MapControl.tsx | 42 +++++++------------ .../components/LocateMeMap/index.js | 2 +- 5 files changed, 21 insertions(+), 40 deletions(-) diff --git a/src/apps/Map/index.tsx b/src/apps/Map/index.tsx index 222c77dc2..09ec80bb6 100644 --- a/src/apps/Map/index.tsx +++ b/src/apps/Map/index.tsx @@ -137,7 +137,7 @@ const MapView = ({ calculatePopupPosition={calculatePopupPosition} > {!isEmbedMode && ( - + )} diff --git a/src/components2/Article/FullscreenMap/FullscreenMap.tsx b/src/components2/Article/FullscreenMap/FullscreenMap.tsx index f34db33ab..5382741ce 100644 --- a/src/components2/Article/FullscreenMap/FullscreenMap.tsx +++ b/src/components2/Article/FullscreenMap/FullscreenMap.tsx @@ -76,7 +76,7 @@ export const FullscreenMap: React.FC = ({ if (isFullscreen) { return ( - + setFullscreen(false)} controlsId="FullscreenMap" @@ -90,7 +90,7 @@ export const FullscreenMap: React.FC = ({ - + & LocatorButtonProps; export const LocatorMapControl: React.VFC = ({ - position = 'top-left', - customPosition, className, + style, onChange, }) => { return ( - + ); diff --git a/src/components2/MapsControls/MapControl.tsx b/src/components2/MapsControls/MapControl.tsx index 5270964aa..673db6a6e 100644 --- a/src/components2/MapsControls/MapControl.tsx +++ b/src/components2/MapsControls/MapControl.tsx @@ -7,44 +7,30 @@ const StyledMapControl = styled.div` `; export type MapcControlProps = { - position?: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'; + top?: boolean; + right?: boolean; + bottom?: boolean; + left?: boolean; className?: string; style?: React.CSSProperties; visible?: boolean; }; export const MapControl: React.FC = ({ - position = 'top-left', + top = false, + right = false, + bottom = false, + left = false, className, style, visible = true, children, }) => { - const positionCss = (pos) => { - switch (pos) { - case 'top-left': - return { - top: '16px', - left: '16px', - }; - case 'top-right': - return { - top: '16px', - right: '16px', - }; - case 'bottom-right': - return { - right: '16px', - bottom: '16px', - }; - case 'bottom-left': - return { - bottom: '16px', - left: '16px', - }; - default: - return {}; - } + const position: React.CSSProperties = { + top: top && '16px', + right: right && '16px', + bottom: bottom && '16px', + left: left && '16px', }; if (!visible) return null; @@ -53,7 +39,7 @@ export const MapControl: React.FC = ({ {children} diff --git a/src/pages/Reports/pages/SubmitReport/components/LocateMeMap/index.js b/src/pages/Reports/pages/SubmitReport/components/LocateMeMap/index.js index bce7b1e01..fcffa039a 100644 --- a/src/pages/Reports/pages/SubmitReport/components/LocateMeMap/index.js +++ b/src/pages/Reports/pages/SubmitReport/components/LocateMeMap/index.js @@ -291,7 +291,7 @@ class LocateMeMap extends Component { )} From 40ea9c0c4f01078b000b710c34155d47b54d3d29 Mon Sep 17 00:00:00 2001 From: Tobias Date: Thu, 17 Mar 2022 15:48:25 +0100 Subject: [PATCH 19/22] Add comment about process.env.CONTEXT See also https://github.com/FixMyBerlin/fixmy.frontend/issues/994 --- src/components2/Article/FullscreenMap/LayerToggleTester.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components2/Article/FullscreenMap/LayerToggleTester.tsx b/src/components2/Article/FullscreenMap/LayerToggleTester.tsx index 2e7dff41b..e33ecdc30 100644 --- a/src/components2/Article/FullscreenMap/LayerToggleTester.tsx +++ b/src/components2/Article/FullscreenMap/LayerToggleTester.tsx @@ -21,8 +21,7 @@ export const LayerToggleTester: React.VFC = ({ setLayerlist(layers); }, [mapLayer]); - // useEffect(() => console.table(layerList), [layerList]); - + // Env.CONTEXT ist a Netlify variable. More: https://docs.netlify.com/site-deploys/overview/#deploy-contexts if ( process.env.NODE_ENV === 'production' && process.env.CONTEXT === 'production' From fbab2cb33d394e020957bc887662c2202c8ec7a8 Mon Sep 17 00:00:00 2001 From: Tobias Date: Thu, 17 Mar 2022 22:04:08 +0100 Subject: [PATCH 20/22] Refactor config routes, menu for all apps - Use named export - Consolidate the types in a /config/types folder - Simplify the types where possible; did not manage to get rid of the per route-types, though; but they are simplified - Add types where missing --- src/config/aachen/index.ts | 7 ++- src/config/aachen/menu.ts | 8 ++-- src/config/aachen/routes.ts | 20 +++++---- src/config/aachen/staticpages.ts | 4 +- src/config/default/index.ts | 7 ++- src/config/default/mandatoryRoutes.ts | 19 +++++++++ src/config/default/menu.ts | 55 ++---------------------- src/config/default/routes.ts | 61 +++++++-------------------- src/config/default/staticpages.ts | 4 +- src/config/eichwalde/menu.ts | 5 ++- src/config/eichwalde/routes.ts | 14 ++++-- src/config/types/ConfigMenu.ts | 49 +++++++++++++++++++++ src/config/types/ConfigRoute.ts | 5 +++ src/config/types/ConfigStaticPages.ts | 6 +++ 14 files changed, 139 insertions(+), 125 deletions(-) create mode 100644 src/config/default/mandatoryRoutes.ts create mode 100644 src/config/types/ConfigMenu.ts create mode 100644 src/config/types/ConfigRoute.ts create mode 100644 src/config/types/ConfigStaticPages.ts diff --git a/src/config/aachen/index.ts b/src/config/aachen/index.ts index ff81a0c4b..e10321848 100644 --- a/src/config/aachen/index.ts +++ b/src/config/aachen/index.ts @@ -2,10 +2,9 @@ import { map as defaultMapConfig } from '~/config/default/apps'; import defaultBase from '~/config/default/base'; import defaultColors from '~/config/default/colors'; import { RegionConfig } from '~/types'; - -import menu from './menu'; -import routes from './routes'; -import staticpages from './staticpages'; +import { menu } from './menu'; +import { routes } from './routes'; +import { staticpages } from './staticpages'; const apiEndpoints = { local: 'http://localhost:8000/api', diff --git a/src/config/aachen/menu.ts b/src/config/aachen/menu.ts index e558025a1..88fa9926f 100644 --- a/src/config/aachen/menu.ts +++ b/src/config/aachen/menu.ts @@ -1,6 +1,8 @@ -import routes from './routes'; +import { ConfigMenu } from '../types/ConfigMenu'; +import { routes } from './routes'; +import FixHere from '~/images/fixhere.svg'; -export default { +export const menu: ConfigMenu = { size: 325, profileLabel: 'Zum Profil', loginLabel: 'Login', @@ -10,7 +12,7 @@ export default { { type: 'link', label: 'Radbügelmeldung', - icon: 'fixhere', + icon: FixHere, link: routes.reports.landing, border: false, }, diff --git a/src/config/aachen/routes.ts b/src/config/aachen/routes.ts index dd5c5e0e1..ffb48aef8 100644 --- a/src/config/aachen/routes.ts +++ b/src/config/aachen/routes.ts @@ -1,17 +1,19 @@ -import defaultRoutes from '../default/routes'; +import { + ConfigMandatoryRoutes, + mandatoryRoutes, +} from '../default/mandatoryRoutes'; +import { ConfigRoutePage } from '../types/ConfigRoute'; -export default { +type Props = ConfigMandatoryRoutes & { + reports: ConfigRoutePage; +}; + +export const routes: Props = { + ...mandatoryRoutes, reports: { index: '/', landing: '/meldungen', map: '/meldungen/karte', new: '/meldungen/neu', }, - signup: defaultRoutes.signup, - login: defaultRoutes.login, - forgotPassword: defaultRoutes.forgotPassword, - resetPassword: defaultRoutes.resetPassword, - emailVerification: defaultRoutes.emailVerification, - profile: defaultRoutes.profile, - userVerify: defaultRoutes.userVerify, }; diff --git a/src/config/aachen/staticpages.ts b/src/config/aachen/staticpages.ts index fc0afb5af..54ac53a65 100644 --- a/src/config/aachen/staticpages.ts +++ b/src/config/aachen/staticpages.ts @@ -1,4 +1,6 @@ -export default [ +import { ConfigStaticpages } from '../types/ConfigStaticPages'; + +export const staticpages: ConfigStaticpages[] = [ { key: 'aachen-privacy', route: '/datenschutz', diff --git a/src/config/default/index.ts b/src/config/default/index.ts index 0c6172238..4ea48c599 100644 --- a/src/config/default/index.ts +++ b/src/config/default/index.ts @@ -1,11 +1,10 @@ import { DefaultConfig } from '~/types'; - import { map } from './apps'; import baseConfig from './base'; import colors from './colors'; -import menu from './menu'; -import routes from './routes'; -import staticpages from './staticpages'; +import { menu } from './menu'; +import { routes } from './routes'; +import { staticpages } from './staticpages'; const defaultConfig: DefaultConfig = { apps: { diff --git a/src/config/default/mandatoryRoutes.ts b/src/config/default/mandatoryRoutes.ts new file mode 100644 index 000000000..d28b9c979 --- /dev/null +++ b/src/config/default/mandatoryRoutes.ts @@ -0,0 +1,19 @@ +export type ConfigMandatoryRoutes = { + signup: string; + login: string; + forgotPassword: string; + resetPassword: string; + emailVerification: string; + profile: string; + userVerify: string; +}; + +export const mandatoryRoutes: ConfigMandatoryRoutes = { + signup: '/registrieren', + login: '/anmelden', + forgotPassword: '/passwort-vergessen', + resetPassword: '/reset', + emailVerification: '/email-verification', + profile: '/profil', + userVerify: '/bestaetigen', +}; diff --git a/src/config/default/menu.ts b/src/config/default/menu.ts index e30f0488e..43b07c4fc 100644 --- a/src/config/default/menu.ts +++ b/src/config/default/menu.ts @@ -8,57 +8,10 @@ import MapIcon from '~/images/map.svg'; import QuestionIcon from '~/images/question.svg'; import ReportsIcon from '~/images/reports-icon.svg'; import SpielstrassenIcon from '~/images/spielstrassen-icon.svg'; +import { ConfigMenu } from '../types/ConfigMenu'; +import { routes } from './routes'; -import routes from './routes'; - -interface Menu { - size: number; - profileLabel: string; - loginLabel: string; - logo?: boolean; - twitter?: boolean; - items: MenuItem[]; - footeritems: FooterItem[]; -} - -type MenuItem = Link | ExternalLink | Separator | Plus; - -type SVGIcon = JSX.Element; - -type Link = { - type: 'link'; - label: string; - link: string; - icon: SVGIcon; - border: boolean; -}; - -type ExternalLink = { - type: 'external'; - label: string; - href: string; - icon: SVGIcon; - border: boolean; -}; - -type Separator = { - type: 'separator'; - label: string; -}; - -type Plus = { - type: 'plus'; - label: string; - icon?: SVGIcon; - children: Link[]; -}; - -type FooterItem = { - label: string; - link: string; -}; - -const menuConfig: Menu = { +export const menu: ConfigMenu = { size: 325, profileLabel: 'Zum Profil', loginLabel: 'Login', @@ -175,5 +128,3 @@ const menuConfig: Menu = { }, ], }; - -export default menuConfig; diff --git a/src/config/default/routes.ts b/src/config/default/routes.ts index 38564ad16..8c75e55e0 100644 --- a/src/config/default/routes.ts +++ b/src/config/default/routes.ts @@ -1,41 +1,19 @@ -interface RouteConfig { - // optional routes - map?: { - projectsIndex: string; - projectsDetail: string; - hbiIndex: string; - hbiDetail: string; - }; - analysis?: string; - reports?: { - [page: string]: string; - }; - katasterKI?: { - [page: string]: string; - }; - spielstrassen?: { - [page: string]: string; - }; - research?: { - [page: string]: string; - }; - wayToSchool?: { - [page: string]: string; - }; - parkingLane?: { - [page: string]: string; - }; - // mandatory routes - signup: string; - login: string; - forgotPassword: string; - resetPassword: string; - emailVerification: string; - profile: string; - userVerify: string; -} +import { ConfigRoutePage, ConfigRoutePath } from '../types/ConfigRoute'; +import { ConfigMandatoryRoutes, mandatoryRoutes } from './mandatoryRoutes'; -const routes: RouteConfig = { +type Props = ConfigMandatoryRoutes & { + analysis: ConfigRoutePath; + map: ConfigRoutePage; + reports: ConfigRoutePage; + katasterKI: ConfigRoutePage; + spielstrassen: ConfigRoutePage; + wayToSchool: ConfigRoutePage; + parkingLane: ConfigRoutePage; + research: ConfigRoutePage; +}; + +export const routes: Props = { + ...mandatoryRoutes, analysis: '/analyse', map: { hbiIndex: '/zustand', @@ -76,17 +54,8 @@ const routes: RouteConfig = { landing: '/parkraum', xhain: '/parkraum/friedrichshain-kreuzberg', }, - signup: '/registrieren', - login: '/anmelden', - forgotPassword: '/passwort-vergessen', - resetPassword: '/reset', - emailVerification: '/email-verification', - profile: '/profil', - userVerify: '/bestaetigen', research: { landing: '/research', survey: '/research/subjektive-sicherheit', }, }; - -export default routes; diff --git a/src/config/default/staticpages.ts b/src/config/default/staticpages.ts index 5b3f355a1..f2b794401 100644 --- a/src/config/default/staticpages.ts +++ b/src/config/default/staticpages.ts @@ -1,4 +1,6 @@ -export default [ +import { ConfigStaticpages } from '../types/ConfigStaticPages'; + +export const staticpages: ConfigStaticpages[] = [ { key: 'contact', route: '/kontakt', diff --git a/src/config/eichwalde/menu.ts b/src/config/eichwalde/menu.ts index 6ca4262a0..4c8a59de7 100644 --- a/src/config/eichwalde/menu.ts +++ b/src/config/eichwalde/menu.ts @@ -1,8 +1,9 @@ -import PlanningIcon from '~/images/planning-icons/planung.svg'; import AboutIcon from '~/images/info.svg'; +import PlanningIcon from '~/images/planning-icons/planung.svg'; +import { ConfigMenu } from '../types/ConfigMenu'; import { routes } from './routes'; -export const menu = { +export const menu: ConfigMenu = { size: 325, profileLabel: 'Zum Profil', loginLabel: 'Login', diff --git a/src/config/eichwalde/routes.ts b/src/config/eichwalde/routes.ts index 6b57d9924..cb1e3e578 100644 --- a/src/config/eichwalde/routes.ts +++ b/src/config/eichwalde/routes.ts @@ -1,7 +1,15 @@ -import defaultRoutes from '../default/routes'; +import { + ConfigMandatoryRoutes, + mandatoryRoutes, +} from '../default/mandatoryRoutes'; +import { ConfigRoutePath } from '../types/ConfigRoute'; -export const routes = { - ...defaultRoutes, +type Props = ConfigMandatoryRoutes & { + landing: ConfigRoutePath; + cycleNetworkDevelopment: ConfigRoutePath; +}; +export const routes: Props = { + ...mandatoryRoutes, landing: '/forschungsprojekt', cycleNetworkDevelopment: '/radnetzentwicklung', }; diff --git a/src/config/types/ConfigMenu.ts b/src/config/types/ConfigMenu.ts new file mode 100644 index 000000000..132e3ffbb --- /dev/null +++ b/src/config/types/ConfigMenu.ts @@ -0,0 +1,49 @@ +import { ConfigRoutePath, ConfigRoutePage } from './ConfigRoute'; + +type SVGIcon = JSX.Element; + +type Link = { + type: 'link'; + label: string; + link: ConfigRoutePath | ConfigRoutePage; // The Page + icon: SVGIcon; + border: boolean; +}; + +type ExternalLink = { + type: 'external'; + label: string; + href: `https://${string}`; + icon: SVGIcon; + border: boolean; +}; + +type Separator = { + type: 'separator'; + label: string; +}; + +type Plus = { + type: 'plus'; + label: string; + icon?: SVGIcon; + children: Link[]; +}; + +type FooterItem = { + label: string; + link: ConfigRoutePath; +}; + +type MenuItem = Link | ExternalLink | Separator | Plus; + +export type ConfigMenu = { + size: number; + profileLabel: string; + login?: boolean; + loginLabel: string; + logo?: boolean; + twitter?: boolean; + items: MenuItem[]; + footeritems: FooterItem[]; +}; diff --git a/src/config/types/ConfigRoute.ts b/src/config/types/ConfigRoute.ts new file mode 100644 index 000000000..e61fd02f1 --- /dev/null +++ b/src/config/types/ConfigRoute.ts @@ -0,0 +1,5 @@ +export type ConfigRoutePath = `/${string}`; + +export type ConfigRoutePage = { + [key: string]: ConfigRoutePath; +}; diff --git a/src/config/types/ConfigStaticPages.ts b/src/config/types/ConfigStaticPages.ts new file mode 100644 index 000000000..ce553e934 --- /dev/null +++ b/src/config/types/ConfigStaticPages.ts @@ -0,0 +1,6 @@ +import { ConfigRoutePath } from './ConfigRoute'; + +export type ConfigStaticpages = { + key: string; + route: ConfigRoutePath; +}; From d32ea423b6a8954722839d2fae314aab540b5518 Mon Sep 17 00:00:00 2001 From: Tobias Date: Thu, 17 Mar 2022 22:09:52 +0100 Subject: [PATCH 21/22] Hide Login link in Sidebar via config.menu.login=false --- src/components/Menu/MenuHeader.js | 13 +++++++++---- src/config/eichwalde/menu.ts | 1 + src/config/types/ConfigMenu.ts | 2 +- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/Menu/MenuHeader.js b/src/components/Menu/MenuHeader.js index 12f183020..963dd553e 100644 --- a/src/components/Menu/MenuHeader.js +++ b/src/components/Menu/MenuHeader.js @@ -48,10 +48,15 @@ export default (props) => { return ( - Store.dispatch(toggle())}> - - {profileLabel} - + {config.menu?.login !== false && ( + Store.dispatch(toggle())} + > + + {profileLabel} + + )} diff --git a/src/config/eichwalde/menu.ts b/src/config/eichwalde/menu.ts index 4c8a59de7..911e43be3 100644 --- a/src/config/eichwalde/menu.ts +++ b/src/config/eichwalde/menu.ts @@ -6,6 +6,7 @@ import { routes } from './routes'; export const menu: ConfigMenu = { size: 325, profileLabel: 'Zum Profil', + login: false, loginLabel: 'Login', logo: false, twitter: false, diff --git a/src/config/types/ConfigMenu.ts b/src/config/types/ConfigMenu.ts index 132e3ffbb..768c73122 100644 --- a/src/config/types/ConfigMenu.ts +++ b/src/config/types/ConfigMenu.ts @@ -40,7 +40,7 @@ type MenuItem = Link | ExternalLink | Separator | Plus; export type ConfigMenu = { size: number; profileLabel: string; - login?: boolean; + login?: false | undefined; loginLabel: string; logo?: boolean; twitter?: boolean; From 891c216e4a0d7af9cc37e96f2221983089bd5199 Mon Sep 17 00:00:00 2001 From: Tobias Date: Mon, 11 Apr 2022 09:12:51 +0200 Subject: [PATCH 22/22] Typescript: Add explicit children to React.FC Remove React.VFC. This is in preparation for React 18. --- src/apps/Gastro/components/FileUpload.tsx | 2 +- src/apps/Map/components/MapLegend/Legend.tsx | 2 +- src/components2/Article/ArticleHeader/ArticleHeader.tsx | 2 +- src/components2/Article/ArticleHeader/ArticleMeta.tsx | 2 +- src/components2/Article/ArticleHeader/Author.tsx | 2 +- src/components2/Article/ArticleHeader/PublishDate.tsx | 2 +- src/components2/Article/ArticleWrapper/ArticleWrapper.tsx | 2 +- .../Article/ArticleWrapper/ArticleWrapperHeader.tsx | 2 +- src/components2/Article/ArticleWrapper/TOCEntry.tsx | 2 +- src/components2/Article/FullscreenMap/FullscreenMap.tsx | 1 + src/components2/Article/FullscreenMap/LayerToggleTester.tsx | 2 +- src/components2/Article/Image/Image.tsx | 2 +- src/components2/Article/Image/ImageFull.tsx | 2 +- src/components2/Article/Image/ImageMulti.tsx | 1 + src/components2/Article/Map/Map.tsx | 2 +- src/components2/Article/Map/MapActivationButton.tsx | 1 + src/components2/Article/Map/MapLegendStyledComponents.tsx | 4 +++- src/components2/Article/Quote/FaceQuote.tsx | 1 + src/components2/Article/Quote/Quote.tsx | 1 + src/components2/Article/Typography/Details.tsx | 6 +++++- src/components2/Article/Typography/List.tsx | 3 ++- src/components2/Article/types.ts | 1 + src/components2/BaseMap/BaseMap.tsx | 2 +- src/components2/ErrorMessage/ErrorMessage.tsx | 1 + src/components2/FloatingLegend/FloatingLegend.tsx | 1 + src/components2/FloatingLegend/FloatingLegendIcon.tsx | 2 +- src/components2/Image/InsertImage.tsx | 2 +- src/components2/MapsControls/LocatorButton.tsx | 2 +- src/components2/MapsControls/LocatorMapControl.tsx | 2 +- src/components2/MapsControls/MapControl.tsx | 1 + src/components2/NewsletterWidget/NewsletterWidget.tsx | 2 +- src/pages/ZESPlus-Research/components/Logos/Logos.tsx | 2 +- .../components/MapPlaceholder/MapPlaceholder.tsx | 2 +- 33 files changed, 40 insertions(+), 24 deletions(-) diff --git a/src/apps/Gastro/components/FileUpload.tsx b/src/apps/Gastro/components/FileUpload.tsx index 6838f148a..ecb09c14a 100644 --- a/src/apps/Gastro/components/FileUpload.tsx +++ b/src/apps/Gastro/components/FileUpload.tsx @@ -68,7 +68,7 @@ type Props = ConnectedProps & { isSubmitting: boolean; name: string; values: any; - children: React.ReactNode; // shouldn't be necessary but it is + children: React.ReactNode; }; const FileUploadRaw: React.FC = ({ diff --git a/src/apps/Map/components/MapLegend/Legend.tsx b/src/apps/Map/components/MapLegend/Legend.tsx index 47c63e1f0..eba4f0069 100644 --- a/src/apps/Map/components/MapLegend/Legend.tsx +++ b/src/apps/Map/components/MapLegend/Legend.tsx @@ -31,7 +31,7 @@ const FooterWrapper = styled.div` type Props = Pick; -export const Legend: React.VFC = ({ visible, closeLegend }) => { +export const Legend: React.FC = ({ visible, closeLegend }) => { return (
Legende Katasterdaten
diff --git a/src/components2/Article/ArticleHeader/ArticleHeader.tsx b/src/components2/Article/ArticleHeader/ArticleHeader.tsx index 659b48e84..5c51d90c6 100644 --- a/src/components2/Article/ArticleHeader/ArticleHeader.tsx +++ b/src/components2/Article/ArticleHeader/ArticleHeader.tsx @@ -45,7 +45,7 @@ const Kicker = styled.div` `} `; -export const ArticleHeader: React.VFC = ({ +export const ArticleHeader: React.FC = ({ kicker, logo, publishDate, diff --git a/src/components2/Article/ArticleHeader/ArticleMeta.tsx b/src/components2/Article/ArticleHeader/ArticleMeta.tsx index a76051d3f..6f7bacec6 100644 --- a/src/components2/Article/ArticleHeader/ArticleMeta.tsx +++ b/src/components2/Article/ArticleHeader/ArticleMeta.tsx @@ -49,7 +49,7 @@ const MetaInnerWrap = styled.div` flex-wrap: wrap; `; -export const ArticleMeta: React.VFC = ({ +export const ArticleMeta: React.FC = ({ publishDate, author, className, diff --git a/src/components2/Article/ArticleHeader/Author.tsx b/src/components2/Article/ArticleHeader/Author.tsx index 53c339351..6c3dbdecd 100644 --- a/src/components2/Article/ArticleHeader/Author.tsx +++ b/src/components2/Article/ArticleHeader/Author.tsx @@ -6,7 +6,7 @@ type AuthorProps = { className?: string; }; -export const Author: React.VFC = ({ name = '', className }) => ( +export const Author: React.FC = ({ name = '', className }) => ( = ({ +export const PublishDate: React.FC = ({ date, className, }) => ( diff --git a/src/components2/Article/ArticleWrapper/ArticleWrapper.tsx b/src/components2/Article/ArticleWrapper/ArticleWrapper.tsx index f8b3bc223..d509733d7 100644 --- a/src/components2/Article/ArticleWrapper/ArticleWrapper.tsx +++ b/src/components2/Article/ArticleWrapper/ArticleWrapper.tsx @@ -77,7 +77,7 @@ type Props = { children: any; // Really hard to type }; -export const ArticleWrapper: React.VFC = ({ +export const ArticleWrapper: React.FC = ({ bannerTitle, logo = null, bgPattern = null, diff --git a/src/components2/Article/ArticleWrapper/ArticleWrapperHeader.tsx b/src/components2/Article/ArticleWrapper/ArticleWrapperHeader.tsx index 980b388a6..ccdd93cf4 100644 --- a/src/components2/Article/ArticleWrapper/ArticleWrapperHeader.tsx +++ b/src/components2/Article/ArticleWrapper/ArticleWrapperHeader.tsx @@ -56,7 +56,7 @@ type Props = { logo?: React.ReactNode; }; -export const ArticleWrapperHeader: React.VFC = ({ +export const ArticleWrapperHeader: React.FC = ({ locales, logo, bannerTitle, diff --git a/src/components2/Article/ArticleWrapper/TOCEntry.tsx b/src/components2/Article/ArticleWrapper/TOCEntry.tsx index fb077cca2..c8a3acf6b 100644 --- a/src/components2/Article/ArticleWrapper/TOCEntry.tsx +++ b/src/components2/Article/ArticleWrapper/TOCEntry.tsx @@ -69,7 +69,7 @@ type Props = { enumerate: boolean; }; -export const TOCEntry: React.VFC = ({ +export const TOCEntry: React.FC = ({ index, entry, active = false, diff --git a/src/components2/Article/FullscreenMap/FullscreenMap.tsx b/src/components2/Article/FullscreenMap/FullscreenMap.tsx index 5382741ce..a8cc96434 100644 --- a/src/components2/Article/FullscreenMap/FullscreenMap.tsx +++ b/src/components2/Article/FullscreenMap/FullscreenMap.tsx @@ -28,6 +28,7 @@ export type FullscreenMapProps = { mapboxStyle: mapboxgl.MapboxOptions['style']; toggleLayers?: string[]; setToggleLayers?: (toggleLayers: string[]) => void; + children: React.ReactNode; } & Partial; /** diff --git a/src/components2/Article/FullscreenMap/LayerToggleTester.tsx b/src/components2/Article/FullscreenMap/LayerToggleTester.tsx index e33ecdc30..9b4711872 100644 --- a/src/components2/Article/FullscreenMap/LayerToggleTester.tsx +++ b/src/components2/Article/FullscreenMap/LayerToggleTester.tsx @@ -7,7 +7,7 @@ type Props = { setToggleLayers: FullscreenMapProps['setToggleLayers']; }; -export const LayerToggleTester: React.VFC = ({ +export const LayerToggleTester: React.FC = ({ mapLayer, setToggleLayers, }) => { diff --git a/src/components2/Article/Image/Image.tsx b/src/components2/Article/Image/Image.tsx index 6745392ac..717b35532 100644 --- a/src/components2/Article/Image/Image.tsx +++ b/src/components2/Article/Image/Image.tsx @@ -15,7 +15,7 @@ const ImageWrapperSimple = styled.div` `} `; -export const Image: React.VFC = ({ +export const Image: React.FC = ({ source, alt, role = null, diff --git a/src/components2/Article/Image/ImageFull.tsx b/src/components2/Article/Image/ImageFull.tsx index df0f0b58e..9c8daf1ec 100644 --- a/src/components2/Article/Image/ImageFull.tsx +++ b/src/components2/Article/Image/ImageFull.tsx @@ -14,7 +14,7 @@ const ImageWrapperFull = styled.div` `} `; -export const ImageFull: React.VFC = ({ +export const ImageFull: React.FC = ({ source, alt, className, diff --git a/src/components2/Article/Image/ImageMulti.tsx b/src/components2/Article/Image/ImageMulti.tsx index 82d7c8134..1a8f769e2 100644 --- a/src/components2/Article/Image/ImageMulti.tsx +++ b/src/components2/Article/Image/ImageMulti.tsx @@ -25,6 +25,7 @@ const ImageSpacer = styled.div` type ImageMultiProps = React.FC & { Inner: React.FC; Subtitle: React.FC; + children?: React.ReactNode; }; export const ImageMulti: ImageMultiProps = ({ children }) => ( diff --git a/src/components2/Article/Map/Map.tsx b/src/components2/Article/Map/Map.tsx index a9b6eaa84..a7d4d8f18 100644 --- a/src/components2/Article/Map/Map.tsx +++ b/src/components2/Article/Map/Map.tsx @@ -20,7 +20,7 @@ type Props = { * * @param defaultActive set true to hide `activate` button */ -export const Map: React.VFC = ({ +export const Map: React.FC = ({ defaultActive = false, ...mapProps }) => { diff --git a/src/components2/Article/Map/MapActivationButton.tsx b/src/components2/Article/Map/MapActivationButton.tsx index 4677190c1..d09e85960 100644 --- a/src/components2/Article/Map/MapActivationButton.tsx +++ b/src/components2/Article/Map/MapActivationButton.tsx @@ -55,6 +55,7 @@ const ButtonArea = styled.div` type Props = { isActive: boolean; setActive: (isActive: boolean) => void; + children: React.ReactNode; }; export const MapActivationButton: React.FC = ({ diff --git a/src/components2/Article/Map/MapLegendStyledComponents.tsx b/src/components2/Article/Map/MapLegendStyledComponents.tsx index b27e1d97e..18071727f 100644 --- a/src/components2/Article/Map/MapLegendStyledComponents.tsx +++ b/src/components2/Article/Map/MapLegendStyledComponents.tsx @@ -47,7 +47,9 @@ const LegendGrid = styled.div` `} `; -export const Legend: React.FC = ({ children }) => ( +type LegendProps = { children: React.ReactNode }; + +export const Legend: React.FC = ({ children }) => ( {children} diff --git a/src/components2/Article/Quote/FaceQuote.tsx b/src/components2/Article/Quote/FaceQuote.tsx index 6f1ba4d87..0df9ed060 100644 --- a/src/components2/Article/Quote/FaceQuote.tsx +++ b/src/components2/Article/Quote/FaceQuote.tsx @@ -47,6 +47,7 @@ const SourceFunction = styled.p` type Props = { sourceName?: string; sourceFunction?: string; + children: React.ReactNode; } & ( | { imageAttributionText?: string; image?: React.ReactElement } | { imageAttributionText: string; image: React.ReactElement } diff --git a/src/components2/Article/Quote/Quote.tsx b/src/components2/Article/Quote/Quote.tsx index ce5cc87b4..b2ee42179 100644 --- a/src/components2/Article/Quote/Quote.tsx +++ b/src/components2/Article/Quote/Quote.tsx @@ -6,6 +6,7 @@ import { media } from '~/styles/utils'; type Props = { sourceText?: string; long?: boolean; + children: React.ReactNode; }; const Wrapper = styled.div` diff --git a/src/components2/Article/Typography/Details.tsx b/src/components2/Article/Typography/Details.tsx index 0d99def96..f9d8e2e26 100644 --- a/src/components2/Article/Typography/Details.tsx +++ b/src/components2/Article/Typography/Details.tsx @@ -2,7 +2,11 @@ import React from 'react'; import styled from 'styled-components'; import { Paragraph } from './Paragraph'; -type Props = { summary: string; style?: React.CSSProperties }; +type Props = { + summary: string; + style?: React.CSSProperties; + children: React.ReactNode; +}; const StyledSummary = styled.summary` cursor: pointer; diff --git a/src/components2/Article/Typography/List.tsx b/src/components2/Article/Typography/List.tsx index 41c6d7a58..42330d46d 100644 --- a/src/components2/Article/Typography/List.tsx +++ b/src/components2/Article/Typography/List.tsx @@ -43,9 +43,10 @@ const ListItem = styled.li` type Props = React.FC<{ ordered?: boolean; className?: string; + children: React.ReactNode; }> & { Item: React.FC }; -export const List: Props = ({ children, className, ordered }) => { +export const List: Props = ({ className, ordered, children }) => { const Container = ordered ? StyledOl : StyledUl; return {children}; }; diff --git a/src/components2/Article/types.ts b/src/components2/Article/types.ts index f6ff3a022..16a57aff8 100644 --- a/src/components2/Article/types.ts +++ b/src/components2/Article/types.ts @@ -1,4 +1,5 @@ export type SectionProps = { toc: string; tocAnchor?: string; + children: React.ReactNode; }; diff --git a/src/components2/BaseMap/BaseMap.tsx b/src/components2/BaseMap/BaseMap.tsx index a7498704e..6ecc82db6 100644 --- a/src/components2/BaseMap/BaseMap.tsx +++ b/src/components2/BaseMap/BaseMap.tsx @@ -28,7 +28,7 @@ type BaseMapProps = Partial & { * @param mapboxStyle - Mapbox style URL * @param maxBounds - Use Mapbox `maxBounds` or `center` + `zoom` to intialize the map position */ -export const BaseMap: React.VFC = ({ +export const BaseMap: React.FC = ({ onInit, className, center, diff --git a/src/components2/ErrorMessage/ErrorMessage.tsx b/src/components2/ErrorMessage/ErrorMessage.tsx index 2766c3437..758ca5135 100644 --- a/src/components2/ErrorMessage/ErrorMessage.tsx +++ b/src/components2/ErrorMessage/ErrorMessage.tsx @@ -26,6 +26,7 @@ type Props = { title?: string; dismissMessage?: string; onDismiss?: () => void; + children: React.ReactNode; }; export const ErrorMessage: React.FC = ({ diff --git a/src/components2/FloatingLegend/FloatingLegend.tsx b/src/components2/FloatingLegend/FloatingLegend.tsx index 38ca397e6..e9f5e95e4 100644 --- a/src/components2/FloatingLegend/FloatingLegend.tsx +++ b/src/components2/FloatingLegend/FloatingLegend.tsx @@ -69,6 +69,7 @@ export type FloatingLegendProps = { closeLegend: () => void; closeLegendStyle?: React.CSSProperties; style?: React.CSSProperties; + children: React.ReactNode; }; export const FloatingLegend: React.FC = ({ diff --git a/src/components2/FloatingLegend/FloatingLegendIcon.tsx b/src/components2/FloatingLegend/FloatingLegendIcon.tsx index f09b5c83e..d9fedceeb 100644 --- a/src/components2/FloatingLegend/FloatingLegendIcon.tsx +++ b/src/components2/FloatingLegend/FloatingLegendIcon.tsx @@ -7,7 +7,7 @@ type Props = { setShowLegend: (showLegend: boolean) => void; }; -export const FloatingLegendIcon: React.VFC = ({ +export const FloatingLegendIcon: React.FC = ({ showLegend, setShowLegend, }) => { diff --git a/src/components2/Image/InsertImage.tsx b/src/components2/Image/InsertImage.tsx index d9c33146d..8b5b44ac9 100644 --- a/src/components2/Image/InsertImage.tsx +++ b/src/components2/Image/InsertImage.tsx @@ -43,7 +43,7 @@ type Props = } ); -export const InsertImage: React.VFC = ({ +export const InsertImage: React.FC = ({ attributionText, attributionLink, ...imageProps diff --git a/src/components2/MapsControls/LocatorButton.tsx b/src/components2/MapsControls/LocatorButton.tsx index 4bf7c5f9c..56cebc41b 100644 --- a/src/components2/MapsControls/LocatorButton.tsx +++ b/src/components2/MapsControls/LocatorButton.tsx @@ -48,7 +48,7 @@ export type LocatorButtonProps = { // showError: () => void; }; -export const LocatorButton: React.VFC = ({ onChange }) => { +export const LocatorButton: React.FC = ({ onChange }) => { const [isLoading, setIsLoading] = useState(false); const [isError, setIsError] = useState(false); diff --git a/src/components2/MapsControls/LocatorMapControl.tsx b/src/components2/MapsControls/LocatorMapControl.tsx index d9acb173b..0ad3dc76c 100644 --- a/src/components2/MapsControls/LocatorMapControl.tsx +++ b/src/components2/MapsControls/LocatorMapControl.tsx @@ -4,7 +4,7 @@ import { MapcControlProps, MapControl } from './MapControl'; type Props = Pick & LocatorButtonProps; -export const LocatorMapControl: React.VFC = ({ +export const LocatorMapControl: React.FC = ({ className, style, onChange, diff --git a/src/components2/MapsControls/MapControl.tsx b/src/components2/MapsControls/MapControl.tsx index 673db6a6e..6a66fa703 100644 --- a/src/components2/MapsControls/MapControl.tsx +++ b/src/components2/MapsControls/MapControl.tsx @@ -14,6 +14,7 @@ export type MapcControlProps = { className?: string; style?: React.CSSProperties; visible?: boolean; + children: React.ReactNode; }; export const MapControl: React.FC = ({ diff --git a/src/components2/NewsletterWidget/NewsletterWidget.tsx b/src/components2/NewsletterWidget/NewsletterWidget.tsx index 5d0e9c2c9..a75d10a8d 100644 --- a/src/components2/NewsletterWidget/NewsletterWidget.tsx +++ b/src/components2/NewsletterWidget/NewsletterWidget.tsx @@ -16,7 +16,7 @@ type Props = { * @param height `height` attribute of the iFrame * @param embedUrl optional `src` for the iframe */ -export const NewsletterWidget: React.VFC = ({ height, embedUrl }) => { +export const NewsletterWidget: React.FC = ({ height, embedUrl }) => { const src = embedUrl || `${config.newsletter.embedUrl}?v=4`; return ( diff --git a/src/pages/ZESPlus-Research/components/Logos/Logos.tsx b/src/pages/ZESPlus-Research/components/Logos/Logos.tsx index 40503750e..22548a92c 100644 --- a/src/pages/ZESPlus-Research/components/Logos/Logos.tsx +++ b/src/pages/ZESPlus-Research/components/Logos/Logos.tsx @@ -87,7 +87,7 @@ const StyledLogoFONA = styled(LogoFONA)` `} `; -export const Logos: React.VFC = () => ( +export const Logos: React.FC = () => (