FeaturePanel: swipeable drawer in mobile

src/components/App/App.tsx

@@ -12,7 +12,6 @@ import { HomepagePanel } from '../HomepagePanel/HomepagePanel';
 import { Loading } from './Loading';
 import { FeatureProvider, useFeatureContext } from '../utils/FeatureContext';
 import { OsmAuthProvider } from '../utils/OsmAuthContext';
-import { FeaturePreview } from '../FeaturePreview/FeaturePreview';
 import { TitleAndMetaTags } from '../../helpers/TitleAndMetaTags';
 import { InstallDialog } from '../HomepagePanel/InstallDialog';
 import { setIntlForSSR } from '../../services/intl';
@@ -21,6 +20,8 @@ import { ClimbingDialog } from '../FeaturePanel/Climbing/ClimbingDialog';
 import { ClimbingContextProvider } from '../FeaturePanel/Climbing/contexts/ClimbingContext';
 import { StarsProvider } from '../utils/StarsContext';
 import { SnackbarProvider } from '../utils/SnackbarContext';
+import { useMobileMode } from '../helpers';
+import { FeaturePanelInDrawer } from '../FeaturePanel/FeaturePanelInDrawer';
 
 const usePersistMapView = () => {
   const { view } = useMapStateContext();
@@ -66,7 +67,8 @@ const useUpdateViewFromHash = () => {
 };
 
 const IndexWithProviders = () => {
-  const { feature, featureShown, preview } = useFeatureContext();
+  const isMobileMode = useMobileMode();
+  const { feature, featureShown } = useFeatureContext();
   const router = useRouter();
   useUpdateViewFromFeature();
   usePersistMapView();
@@ -78,9 +80,10 @@ const IndexWithProviders = () => {
   const photo = router.query.all?.[3];
   return (
     <>
-      <SearchBox />
       <Loading />
-      {featureShown && <FeaturePanel />}
+      <SearchBox />
+      {featureShown && !isMobileMode && <FeaturePanel />}
+      {featureShown && isMobileMode && <FeaturePanelInDrawer />}
       {isClimbingDialogShown && (
         <ClimbingContextProvider feature={feature}>
           <ClimbingDialog photo={photo} />
@@ -90,14 +93,14 @@ const IndexWithProviders = () => {
       <HomepagePanel />
       {router.pathname === '/install' && <InstallDialog />}
       <Map />
-      {preview && <FeaturePreview />}
       <TitleAndMetaTags />
     </>
   );
 };
 
 const App = ({ featureFromRouter, initialMapView, cookies }) => {
   const mapView = getMapViewFromHash() || initialMapView;
+
   return (
     <SnackbarProvider>
       <FeatureProvider featureFromRouter={featureFromRouter} cookies={cookies}>

src/components/App/Loading.tsx

@@ -6,7 +6,7 @@ import { isDesktop, useBoolState } from '../helpers';
 
 const Wrapper = styled.div`
   position: absolute;
-  top: 72px;
+  top: 0;
   z-index: 1200;
 
   width: 100%;

src/components/FeaturePanel/Climbing/ClimbingPanel.tsx

@@ -1,100 +1,45 @@
 import React from 'react';
-import styled from 'styled-components';
-import Router from 'next/router';
-import ZoomInIcon from '@mui/icons-material/ZoomIn';
-import { Button } from '@mui/material';
 import { useClimbingContext } from './contexts/ClimbingContext';
-import { PanelScrollbars, PanelWrapper } from '../../utils/PanelHelpers';
 import { RouteList } from './RouteList/RouteList';
 import { useFeatureContext } from '../../utils/FeatureContext';
-import { getLabel } from '../../../helpers/featureLabel';
-import { getOsmappLink } from '../../../services/helpers';
-import { StarButton } from '../ImageSection/StarButton';
 import { OsmError } from '../OsmError';
 import { Properties } from '../Properties/Properties';
-import { PoiDescription } from '../ImageSection/PoiDescription';
 import { ImageSlider } from '../ImagePane/ImageSlider';
-import { ClimbingParentLink } from '../ParentLink';
 import { RouteDistribution } from './RouteDistribution';
-import { YellowedBadge } from './YellowedBadge';
 import { getWikimediaCommonsKeys, removeFilePrefix } from './utils/photo';
 import { SuggestEdit } from '../SuggestEdit';
-
-const HeadingContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-
-const DetailButtonContainer = styled.div`
-  margin: 8px;
-  @supports (-webkit-touch-callout: none) {
-    /* CSS specific to iOS devices */
-    margin-bottom: 28px;
-  }
-`;
-
-const Heading = styled.div`
-  margin: 12px 8px 4px;
-  font-size: 36px;
-  line-height: 0.98;
-`;
+import { PanelContent, PanelSidePadding } from '../../utils/PanelHelpers';
+import { FeatureHeading } from '../FeatureHeading';
+import { ParentLink } from '../ParentLink';
 
 export const ClimbingPanel = ({ footer, showTagsTable }) => {
   const { feature } = useFeatureContext();
-  const label = getLabel(feature);
 
   const { preparePhotosAndSet } = useClimbingContext();
 
-  const onFullScreenClick = () => {
-    Router.push(`${getOsmappLink(feature)}/climbing${window.location.hash}`);
-  };
   const cragPhotos = getWikimediaCommonsKeys(feature.tags)
     .map((key) => feature.tags[key])
     .map(removeFilePrefix);
   preparePhotosAndSet(cragPhotos);
 
   return (
-    <>
-      <PanelWrapper>
-        <PanelScrollbars>
-          <ClimbingParentLink />
-
-          <HeadingContainer>
-            <Heading>{label}</Heading>
-            <YellowedBadge />
-            <StarButton />
-          </HeadingContainer>
-          <PoiDescription />
-
-          <ImageSlider />
-          <OsmError />
-
-          <RouteDistribution />
-          <RouteList />
-
-          <div style={{ padding: '35px 15px 5px' }}>
-            <Properties showTags={showTagsTable} />
-          </div>
-
-          <SuggestEdit />
-
-          {/* @TODO unite with parent panel */}
-          <div style={{ padding: '20px 15px 0 15px' }}>{footer}</div>
-        </PanelScrollbars>
-        <DetailButtonContainer>
-          <Button
-            color="primary"
-            size="large"
-            startIcon={<ZoomInIcon fontSize="inherit" />}
-            onClick={onFullScreenClick}
-            fullWidth
-            variant="contained"
-          >
-            Show crag detail
-          </Button>
-        </DetailButtonContainer>
-      </PanelWrapper>
-    </>
+    <PanelContent>
+      <PanelSidePadding>
+        <FeatureHeading />
+        <ParentLink />
+      </PanelSidePadding>
+      <ImageSlider />
+      <OsmError />
+      <RouteDistribution />
+      <RouteList />
+
+      <div style={{ padding: '35px 15px 5px' }}>
+        <Properties showTags={showTagsTable} />
+      </div>
+
+      <SuggestEdit />
+      {/* @TODO unite with parent panel */}
+      <div style={{ padding: '20px 15px 0 15px' }}>{footer}</div>
+    </PanelContent>
   );
 };

src/components/FeaturePanel/Climbing/ClimbingView.tsx

@@ -116,8 +116,8 @@ const ArrowExpanderButton = styled.div<{ $arrowOnTop?: boolean }>`
 `;
 
 const BlurContainer = styled.div<{ $isVisible: boolean }>`
-  -webkit-backdrop-filter: blur(15px);
   backdrop-filter: blur(15px);
+  -webkit-backdrop-filter: blur(15px);
   background-color: rgba(0, 0, 0, 0.6);
   visibility: ${({ $isVisible }) => ($isVisible ? 'visible' : 'hidden')};
   height: 100%;

src/components/FeaturePanel/FeatureHeading.tsx

@@ -1,27 +1,77 @@
 import React from 'react';
 import styled from 'styled-components';
-import { EditIconButton } from './helpers/EditIconButton';
+import EditIcon from '@mui/icons-material/Edit';
+import { IconButton } from '@mui/material';
 import { useEditDialogContext } from './helpers/EditDialogContext';
+import { PoiDescription } from './ImageSection/PoiDescription';
+import { StarButton } from './ImageSection/StarButton';
+import { getLabel } from '../../helpers/featureLabel';
+import { useFeatureContext } from '../utils/FeatureContext';
+import { t } from '../../services/intl';
 
-const Wrapper = styled.div<{ $deleted: boolean }>`
-  font-size: 36px;
-  line-height: 0.98;
+const StyledEditButton = styled(IconButton)`
+  visibility: hidden;
   position: relative;
-  padding-bottom: 30px;
-  ${({ $deleted }) => $deleted && 'text-decoration: line-through;'}
+  top: 3px;
+`;
+const NameWithEdit = styled.div`
+  display: flex;
+  gap: 8px;
+`;
+const Container = styled.div`
+  margin: 12px 0 20px 0;
+`;
+
+const HeadingContainer = styled.div`
+  margin: 6px 0 4px 0;
 
-  &:hover .show-on-hover {
-    display: block !important;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  position: relative;
+
+  &:hover ${StyledEditButton} {
+    visibility: visible;
   }
 `;
 
-export const FeatureHeading = ({ title, deleted, editEnabled }) => {
+const Heading = styled.h1<{ $deleted: boolean }>`
+  font-size: 36px;
+  line-height: 0.98;
+  margin: 0;
+  ${({ $deleted }) => $deleted && 'text-decoration: line-through;'}
+`;
+
+export const FeatureHeading = () => {
   const { openWithTag } = useEditDialogContext();
+  const { feature } = useFeatureContext();
+  const label = getLabel(feature);
+  const { skeleton, deleted } = feature;
+  const editEnabled = !skeleton;
 
   return (
-    <Wrapper $deleted={deleted}>
-      {editEnabled && <EditIconButton onClick={() => openWithTag('name')} />}
-      {title}
-    </Wrapper>
+    <Container>
+      <PoiDescription />
+      <HeadingContainer>
+        <NameWithEdit>
+          <Heading $deleted={deleted}>{label}</Heading>
+          {/* <YellowedBadge /> */}
+          {editEnabled && (
+            <div>
+              <StyledEditButton
+                onClick={() => openWithTag('name')}
+                size="small"
+              >
+                <EditIcon
+                  fontSize="small"
+                  titleAccess={t('featurepanel.inline_edit_title')}
+                />
+              </StyledEditButton>
+            </div>
+          )}
+        </NameWithEdit>
+        <StarButton />
+      </HeadingContainer>
+    </Container>
   );
 };