diff --git a/src/components/ClimbingAreasPanel/ClimbingAreasPanel.tsx b/src/components/ClimbingAreasPanel/ClimbingAreasPanel.tsx index 4284ca113..463760b5d 100644 --- a/src/components/ClimbingAreasPanel/ClimbingAreasPanel.tsx +++ b/src/components/ClimbingAreasPanel/ClimbingAreasPanel.tsx @@ -21,6 +21,7 @@ import { MobilePageDrawer } from '../utils/MobilePageDrawer'; import { ClimbingArea } from '../../services/climbing-areas/getClimbingAreas'; import Link from 'next/link'; import { TooltipButton } from '../utils/TooltipButton'; +import { ClimbingGuideInfo } from '../FeaturePanel/Climbing/ClimbingGuideInfo'; type ClimbingAreasPanelProps = { areas: ClimbingArea[]; @@ -35,14 +36,10 @@ export const ClimbingAreasPanel = ({ areas }: ClimbingAreasPanelProps) => { - + +

{t('climbingareas.title')}

- - - {t('climbing.guideinfo.title')}{' '} - -
diff --git a/src/components/FeaturePanel/Climbing/ClimbingGuideInfo.tsx b/src/components/FeaturePanel/Climbing/ClimbingGuideInfo.tsx index 73d689c9b..c8806e560 100644 --- a/src/components/FeaturePanel/Climbing/ClimbingGuideInfo.tsx +++ b/src/components/FeaturePanel/Climbing/ClimbingGuideInfo.tsx @@ -1,32 +1,66 @@ import React from 'react'; -import { Typography } from '@mui/material'; +import { + Accordion, + AccordionDetails, + AccordionSummary, + Button, + Stack, + Typography, + useTheme, +} from '@mui/material'; import { useFeatureContext } from '../../utils/FeatureContext'; import { t } from '../../../services/intl'; -import { TooltipButton } from '../../utils/TooltipButton'; -import styled from '@emotion/styled'; - -const Container = styled.div` - font-size: 14px; - margin-bottom: 12px; -`; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'; +import { LogoOpenClimbing } from '../../../assets/LogoOpenClimbing'; export const ClimbingGuideInfo = () => { - const { feature } = useFeatureContext(); + const { persistShowHomepage } = useFeatureContext(); + const theme = useTheme(); - if ( - !['crag', 'area', 'route', 'route_bottom', 'route_top'].includes( - feature.tags.climbing, - ) - ) { - return null; - } + const handleClick = () => { + persistShowHomepage(); + }; return ( - - - {t('climbing.guideinfo.title')}{' '} - - - + + }> + + + + openclimbing.org: {t('climbing.guideinfo.title')} + + + + + + {t('climbing.guideinfo.description')} + + + + + + ); }; diff --git a/src/components/FeaturePanel/Climbing/FeaturePanelClimbingGuideInfo.tsx b/src/components/FeaturePanel/Climbing/FeaturePanelClimbingGuideInfo.tsx new file mode 100644 index 000000000..ca41abbe1 --- /dev/null +++ b/src/components/FeaturePanel/Climbing/FeaturePanelClimbingGuideInfo.tsx @@ -0,0 +1,16 @@ +import { ClimbingGuideInfo } from './ClimbingGuideInfo'; +import { useFeatureContext } from '../../utils/FeatureContext'; + +export const FeaturePanelClimbingGuideInfo = () => { + const { feature } = useFeatureContext(); + + if ( + !['crag', 'area', 'route', 'route_bottom', 'route_top'].includes( + feature.tags.climbing, + ) + ) { + return null; + } + + return ; +}; diff --git a/src/components/FeaturePanel/FeatureHeading.tsx b/src/components/FeaturePanel/FeatureHeading.tsx index 668140e9d..a9c554872 100644 --- a/src/components/FeaturePanel/FeatureHeading.tsx +++ b/src/components/FeaturePanel/FeatureHeading.tsx @@ -96,7 +96,6 @@ export const FeatureHeading = React.forwardRef((_, ref) => { return ( - @@ -107,6 +106,7 @@ export const FeatureHeading = React.forwardRef((_, ref) => { + ); diff --git a/src/components/FeaturePanel/FeaturePanel.tsx b/src/components/FeaturePanel/FeaturePanel.tsx index 0133b60f3..ab85dd956 100644 --- a/src/components/FeaturePanel/FeaturePanel.tsx +++ b/src/components/FeaturePanel/FeaturePanel.tsx @@ -28,6 +28,7 @@ import { isPublictransportRoute } from '../../utils'; import { Sockets } from './Sockets/Sockets'; import { ClimbingTypeBadge } from './Climbing/ClimbingTypeBadge'; import { TestApiWarning } from './helpers/TestApiWarning'; +import { FeaturePanelClimbingGuideInfo } from './Climbing/FeaturePanelClimbingGuideInfo'; const Flex = styled.div` flex: 1; @@ -60,13 +61,13 @@ export const FeaturePanel = ({ headingRef }: FeaturePanelProps) => { return ( <> + - diff --git a/src/locales/cs.js b/src/locales/cs.js index 3a26a8364..9f188abea 100644 --- a/src/locales/cs.js +++ b/src/locales/cs.js @@ -33,9 +33,10 @@ export default { 'project.openclimbing.description': 'Otevřený lezecký průvodce', 'project.openclimbing.serpDescription': 'Otevřený lezecký průvodce s vyznačením cest. Postaveno na projektech OpenStreetMap a Wikipedie.', - 'climbing.guideinfo.title': 'Otevřený lezecký průvodce openclimbing.org', + 'climbing.guideinfo.title': 'Otevřený lezecký průvodce', 'climbing.guideinfo.description': 'OpenClimbing.org je otevřená platforma pro lezecké průvodce a mapy. Vyznačené cesty a fotky se ukládají do projektů OpenStreetMap a Wikipedie, takže je může kdykoliv editovat.', + 'climbing.guideinfo.button': 'Více informací', 'install.button': 'Stáhnout aplikaci', 'install.tabs_aria_label': 'Vyberte si svou platformu', diff --git a/src/locales/vocabulary.js b/src/locales/vocabulary.js index b4f2bd9dc..0d5f4051f 100644 --- a/src/locales/vocabulary.js +++ b/src/locales/vocabulary.js @@ -61,9 +61,10 @@ export default { 'project.osmapp.serpDescription': 'An open-source map of the world based on the OpenStreetMap database. Features a search, clickable points of interest, in-app map edits, and more!', - 'climbing.guideinfo.title': 'A free climbing guide openclimbing.org', + 'climbing.guideinfo.title': 'A free climbing guides', 'climbing.guideinfo.description': - 'OpenClimbing.org is an open platform for climbing guides and maps. Topos and photos are stored in OpenStreetMap and Wikipedia projects, so they can be edited by anyone.', + 'openclimbing.org is an open platform for climbing guides and maps. Topos and photos are stored in OpenStreetMap and Wikipedia projects, so they can be edited by anyone.', + 'climbing.guideinfo.button': 'More info', 'project.openclimbing.description': 'Free wiki climbing map', 'project.openclimbing.serpDescription': 'A wiki based open-source climbing map with topos. Built on OpenStreetMap and Wikipedia projects.',