FeaturePanel: ClimbingGuideInfo update (#900)

zbycz · Jan 26, 2025 · 6dcdbe1 · 6dcdbe1
1 parent e838fd4
commit 6dcdbe1
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 33 deletions.
diff --git 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) => {
     <MobilePageDrawer className="climbing-areas-drawer">
       <PanelContent>
         <PanelScrollbars>
-          <ClosePanelButton right onClick={handleClose} />
+          <ClimbingGuideInfo />
           <PanelSidePadding>
+            <ClosePanelButton right onClick={handleClose} />
             <h1>{t('climbingareas.title')}</h1>
-
-            <Typography variant="body2">
-              {t('climbing.guideinfo.title')}{' '}
-              <TooltipButton tooltip={t('climbing.guideinfo.description')} />
-            </Typography>
           </PanelSidePadding>
 
           <TableContainer component={Paper}>

diff --git 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 (
-    <Container>
-      <Typography variant="body2">
-        {t('climbing.guideinfo.title')}{' '}
-        <TooltipButton tooltip={t('climbing.guideinfo.description')} />
-      </Typography>
-    </Container>
+    <Accordion
+      disableGutters
+      elevation={0}
+      square
+      sx={{
+        borderBottom: `solid 1px ${theme.palette.divider}`,
+        marginBottom: 2,
+      }}
+    >
+      <AccordionSummary expandIcon={<ExpandMoreIcon color="secondary" />}>
+        <Stack direction="row" alignItems="center" gap={1}>
+          <LogoOpenClimbing width={24} />
+          <Typography color="secondary" variant="caption">
+            <strong>openclimbing.org:</strong> {t('climbing.guideinfo.title')}
+          </Typography>
+        </Stack>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Typography variant="body2">
+          {t('climbing.guideinfo.description')}
+        </Typography>
+        <Stack
+          direction="row"
+          justifyContent="flex-end"
+          alignItems="center"
+          mt={1}
+        >
+          <Button
+            variant="text"
+            color="primary"
+            endIcon={<ArrowForwardIosIcon />}
+            sx={{ alignSelf: 'flex-end' }}
+            onClick={handleClick}
+          >
+            {t('climbing.guideinfo.button')}
+          </Button>
+        </Stack>
+      </AccordionDetails>
+    </Accordion>
   );
 };
diff --git a/src/components/FeaturePanel/Climbing/FeaturePanelClimbingGuideInfo.tsx 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 <ClimbingGuideInfo />;
+};
diff --git a/src/components/FeaturePanel/FeatureHeading.tsx b/src/components/FeaturePanel/FeatureHeading.tsx
@@ -96,7 +96,6 @@ export const FeatureHeading = React.forwardRef<HTMLDivElement>((_, ref) => {
 
   return (
     <Container ref={ref} isStandalone={isStandalone}>
-      <PoiDescription />
       <HeadingContainer>
         <Stack direction="row" gap={1}>
           <Headings />
@@ -107,6 +106,7 @@ export const FeatureHeading = React.forwardRef<HTMLDivElement>((_, ref) => {
           <NwrIcon osmType={feature.osmMeta.type} />
         </Box>
       </HeadingContainer>
+      <PoiDescription />
       <QuickActions />
     </Container>
   );

diff --git 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 (
     <>
       <PanelContent>
+        <FeaturePanelClimbingGuideInfo />
         <PanelSidePadding>
           <FeatureHeading ref={headingRef} />
           <Stack spacing={1} alignItems="flex-start">
             <ClimbingRouteGrade />
             <ClimbingTypeBadge feature={feature} />
           </Stack>
-          <ClimbingGuideInfo />
           <ParentLink />
           <ClimbingRestriction />
 

diff --git 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
@@ -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.',