diff --git a/frontend/src/components/Map/DetailsMap/DetailsMap.tsx b/frontend/src/components/Map/DetailsMap/DetailsMap.tsx index c5a534705..569350c8e 100644 --- a/frontend/src/components/Map/DetailsMap/DetailsMap.tsx +++ b/frontend/src/components/Map/DetailsMap/DetailsMap.tsx @@ -21,13 +21,13 @@ import { useTileLayer } from 'hooks/useTileLayer'; import { TrekChildGeometry, TrekFamily } from 'modules/details/interface'; import { SensitiveAreaGeometry } from 'modules/sensitiveArea/interface'; import { VisibleSectionContext } from 'components/pages/details/VisibleSectionContext'; -import { colorPalette, desktopOnly, MAX_WIDTH_MOBILE } from 'stylesheet'; import { useDetailsAndMapContext } from 'components/pages/details/DetailsAndMapContext'; import { Check } from 'components/Icons/Check'; import { FormattedMessage } from 'react-intl'; import { InformationDesk } from 'modules/informationDesk/interface'; import { SignageDictionary } from 'modules/signage/interface'; import { InfrastructureDictionary } from 'modules/infrastructure/interface'; +import { cn } from 'services/utils/cn'; import { BackButton } from '../components/BackButton'; import { TrekMarkersAndCourse } from './TrekMarkersAndCourse'; @@ -66,7 +66,7 @@ export type PropsType = { trekGeoJSON?: string; pointsReference?: Coordinate2D[] | null; hideMap?: () => void; - type: 'DESKTOP' | 'MOBILE'; + hasZoomControl: boolean; openFilterMenu?: () => void; hasFilters?: boolean; arrivalLocation?: Coordinate2D; @@ -136,19 +136,20 @@ export const DetailsMap: React.FC = props => { }, [map, center]); const { visibleSection } = useContext(VisibleSectionContext); - const mapWrapperProps = { - ...(visibleSection === 'report' && - reportVisibility && { - className: 'with-report', - }), - }; const hasTitle = Boolean(props.title); return ( - - + = props => { minZoom={ navigator.onLine ? undefined : Math.min(...(mapConfig?.zoomAvailableOffline ?? [])) } - zoomControl={props.type === 'DESKTOP'} + zoomControl={props.hasZoomControl} whenCreated={setMapInstance} bounds={bounds} - hasDrawer={hasTitle} > {reportVisibility && coordinatesReportTouched ? ( @@ -269,39 +269,9 @@ export const DetailsMap: React.FC = props => { /> )} - - + + ); }; -const MapWrapper = styled.div` - position: relative; - width: 100%; - height: 100%; - &.with-report::after { - content: ''; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - border: 3px solid ${colorPalette.red}; - pointer-events: none; - @media (min-width: ${MAX_WIDTH_MOBILE}px) { - top: 2px; - } - } -`; - -const StyledMapContainer = styled(MapContainer)<{ hasDrawer: boolean }>` - width: 100%; - height: 100%; - .leaflet-bottom { - margin-bottom: ${props => (props.hasDrawer ? '50px' : 0)}; - ${desktopOnly(css` - margin-bottom: 0; - `)} - } -`; - export default DetailsMap; diff --git a/frontend/src/components/Map/SearchMap/MapContainer.tsx b/frontend/src/components/Map/SearchMap/MapContainer.tsx index 4b8df013c..de8c62cbb 100644 --- a/frontend/src/components/Map/SearchMap/MapContainer.tsx +++ b/frontend/src/components/Map/SearchMap/MapContainer.tsx @@ -5,22 +5,22 @@ import { Map } from 'leaflet'; interface Props { whenCreated: (map: Map) => void; - type: string; + hasZoomControl?: boolean; children: React.ReactNode; } -const MapContainer: React.FC = ({ children, whenCreated, type }) => { +const MapContainer: React.FC = ({ children, whenCreated, hasZoomControl = false }) => { const mapConfig = getMapConfig(); return ( {children} diff --git a/frontend/src/components/Map/SearchMap/SearchMapChildrens.tsx b/frontend/src/components/Map/SearchMap/SearchMapChildrens.tsx index 60923b6c6..8ad7f6ff9 100644 --- a/frontend/src/components/Map/SearchMap/SearchMapChildrens.tsx +++ b/frontend/src/components/Map/SearchMap/SearchMapChildrens.tsx @@ -14,7 +14,6 @@ import { useListAndMapContext } from '../../../modules/map/ListAndMapContext'; export type PropsType = { segments?: { x: number; y: number }[]; hideMap?: () => void; - type: 'DESKTOP' | 'MOBILE'; openFilterMenu?: () => void; hasFilters?: boolean; arrivalLocation?: { x: number; y: number }; diff --git a/frontend/src/components/Map/SearchMap/index.tsx b/frontend/src/components/Map/SearchMap/index.tsx index 2cbbc2fd4..c245ce5d9 100644 --- a/frontend/src/components/Map/SearchMap/index.tsx +++ b/frontend/src/components/Map/SearchMap/index.tsx @@ -16,7 +16,7 @@ import TileLayerManager from '../components/TileLayerManager'; export type PropsType = { segments?: { x: number; y: number }[]; hideMap?: () => void; - type: 'DESKTOP' | 'MOBILE'; + hasZoomControl?: boolean; openFilterMenu?: () => void; hasFilters?: boolean; arrivalLocation?: { x: number; y: number }; @@ -37,7 +37,7 @@ const SearchMap: React.FC = props => { const { setMapInstance } = useTileLayer(); return ( - + {props.onMove && } } onClick={hideMap} /> diff --git a/frontend/src/components/Map/TouristicContentMap/TouristicContentMap.tsx b/frontend/src/components/Map/TouristicContentMap/TouristicContentMap.tsx index 02bc31ea0..a21d9fc1f 100644 --- a/frontend/src/components/Map/TouristicContentMap/TouristicContentMap.tsx +++ b/frontend/src/components/Map/TouristicContentMap/TouristicContentMap.tsx @@ -41,7 +41,7 @@ interface TouristicContentGeometryNullable { export type PropsType = { touristicContentGeometry: TouristicContentGeometryNullable; hideMap?: () => void; - type: 'DESKTOP' | 'MOBILE'; + hasZoomControl: boolean; bbox: Bbox; }; @@ -63,6 +63,7 @@ export const TouristicContentMap: React.FC = props => { return ( <> = props => { minZoom={ navigator.onLine ? undefined : Math.min(...(mapConfig?.zoomAvailableOffline ?? [])) } - style={{ height: '100%', width: '100%' }} whenCreated={setMapInstance} - zoomControl={props.type === 'DESKTOP'} + zoomControl={props.hasZoomControl} bounds={center} attributionControl={false} > diff --git a/frontend/src/components/pages/details/Details.tsx b/frontend/src/components/pages/details/Details.tsx index 2b224fc34..a73b7a333 100644 --- a/frontend/src/components/pages/details/Details.tsx +++ b/frontend/src/components/pages/details/Details.tsx @@ -7,7 +7,6 @@ import { FormattedMessage } from 'react-intl'; import { PageHead } from 'components/PageHead'; import { DetailsMapDynamicComponent } from 'components/Map'; import { OpenMapButton } from 'components/OpenMapButton'; -import { MobileMapContainer } from 'components/pages/search'; import { useShowOnScrollPosition } from 'hooks/useShowOnScrollPosition'; import { useMediaPredicate } from 'react-media-hook'; import { sizes } from 'stylesheet'; @@ -20,6 +19,7 @@ import { Footer } from 'components/Footer'; import Accessibility, { shouldDisplayAccessibility } from 'components/Accessibility'; import useHasMounted from 'hooks/useHasMounted'; +import { cn } from 'services/utils/cn'; import { renderToStaticMarkup } from 'react-dom/server'; import { MapPin } from 'components/Icons/MapPin'; import { ImageWithLegend } from 'components/ImageWithLegend'; @@ -120,565 +120,492 @@ export const DetailsUIWithoutContext: React.FC = ({ slug, parentId, langu )} ) : ( - <> -
- - {details.title !== undefined && } -
+
+ + {details.title !== undefined && } +
+
+ + + {({ isFullscreen, toggleFullscreen }) => ( +
+ {details.imgs.length > 1 && hasNavigator ? ( + + ) : ( + + )} +
+ )} +
- - - {({ isFullscreen, toggleFullscreen }) => ( -
- {details.imgs.length > 1 && hasNavigator ? ( - + + {sectionsTrek.map(section => { + if (section.name === 'presentation') { + return ( +
+ - ) : ( - + ); + } + if (section.name === 'itinerancySteps' && details.children.length > 0) { + return ( +
+ ({ + ...child, + id: `${child.id}`, + }))} + parentId={id} + title={intl.formatMessage( + { id: 'details.itinerancyStepsFullTitle' }, + { count: details.children.length }, + )} + type="TREK" /> - )} -
- )} - -
- - - {sectionsTrek.map(section => { - if (section.name === 'presentation') { - return ( -
- -
- ); - } - if (section.name === 'itinerancySteps' && details.children.length > 0) { - return ( -
- ({ - ...child, - id: `${child.id}`, - }))} - parentId={id} - title={intl.formatMessage( - { id: 'details.itinerancyStepsFullTitle' }, - { count: details.children.length }, - )} - type="TREK" - /> -
- ); - } - - if (section.name === 'poi' && details.pois.length > 0) { - return ( -
- ({ - id: `${poi.id}`, - name: poi.name ?? '', - description: poi.description, - thumbnails: poi.thumbnails, - attachments: poi.attachments, - iconUri: poi.type.pictogramUri, - iconName: poi.type.label, - }))} - type="POI" - /> -
- ); - } - - if (section.name === 'description' && details.description) { - return ( -
- -
- ); - } - - if ( - section.name === 'forecastWidget' && - getGlobalConfig().enableMeteoWidget && - details.cities_raw?.[0] - ) { - return ( -
- {hasNavigator && ( - - - +
+ ); + } + + if (section.name === 'poi' && details.pois.length > 0) { + return ( +
+ - ); - } - - if ( - section.name === 'altimetricProfile' && - displayAltimetricProfile === true - ) { - return ( -
+ detailsCards={details.pois.map(poi => ({ + id: `${poi.id}`, + name: poi.name ?? '', + description: poi.description, + thumbnails: poi.thumbnails, + attachments: poi.attachments, + iconUri: poi.type.pictogramUri, + iconName: poi.type.label, + }))} + type="POI" + /> +
+ ); + } + + if (section.name === 'description' && details.description) { + return ( +
+ +
+ ); + } + + if ( + section.name === 'forecastWidget' && + getGlobalConfig().enableMeteoWidget && + details.cities_raw?.[0] + ) { + return ( +
+ {hasNavigator && ( -
+ -
- ); - } - - if (section.name === 'sensitiveAreas' && details.sensitiveAreas.length > 0) { - return ( -
+ ); + } + + if (section.name === 'altimetricProfile' && displayAltimetricProfile === true) { + return ( +
+ - - - - - {details.sensitiveAreas.map((sensitiveArea, i) => ( - - ))} - -
- ); - } - - if ( - section.name === 'practicalInformations' && - (details.informationDesks.length > 0 || - details.transport || - details.access || - details.labels.length > 0 || - (details.advice !== null && details.advice.length > 0)) - ) { - return ( -
+ + + ); + } + + if (section.name === 'sensitiveAreas' && details.sensitiveAreas.length > 0) { + return ( +
+ - {(details.labels.length > 0 || - (details.advice !== null && details.advice.length > 0)) && ( -
- - {details.advice !== null && details.advice.length > 0 && ( - - )} - {details.gear !== null && ( - - )} - {details.labels.map((label, i) => ( - - ))} - -
- )} - {details.informationDesks.length > 0 && ( - - {details.informationDesks.map((informationDesk, i) => ( - - ))} - - )} - - {details.transport && ( - - {parse(details.transport)} - - )} - - {(details.access || details.parking) && ( + + + + {details.sensitiveAreas.map((sensitiveArea, i) => ( + + ))} + +
+ ); + } + + if ( + section.name === 'practicalInformations' && + (details.informationDesks.length > 0 || + details.transport || + details.access || + details.labels.length > 0 || + (details.advice !== null && details.advice.length > 0)) + ) { + return ( +
+ {(details.labels.length > 0 || + (details.advice !== null && details.advice.length > 0)) && ( +
- {details.access && ( - {parse(details.access)} + {details.advice !== null && details.advice.length > 0 && ( + )} - {details.parking && ( -
-

- {`${intl.formatMessage({ id: 'details.stationnement' })} :`} -

- {parse(details.parking)} -
+ {details.gear !== null && ( + )} + {details.labels.map((label, i) => ( + + ))} - )} -
- ); - } - - if (section.name === 'accessibility' && shouldDisplayAccessibility(details)) { - return ( -
+
+ )} + {details.informationDesks.length > 0 && ( - + {details.informationDesks.map((informationDesk, i) => ( + + ))} - - ); - } + )} - if (section.name === 'more' && details.webLinks.length > 0) { - return ( -
+ {details.transport && ( - {details.webLinks.map((link, i) => ( - - ))} + {parse(details.transport)} -
- ); - } + )} - if (section.name === 'source' && details.sources.length > 0) { - return ( -
+ {(details.access || details.parking) && ( - {details.sources.map((source, i) => ( - - ))} + {details.access && ( + {parse(details.access)} + )} + {details.parking && ( +
+

+ {`${intl.formatMessage({ id: 'details.stationnement' })} :`} +

+ {parse(details.parking)} +
+ )} -
- ); - } - - if (section.name === 'report' && getGlobalConfig().enableReport) { - return ( -
+ ); + } + + if (section.name === 'accessibility' && shouldDisplayAccessibility(details)) { + return ( +
+ + + +
+ ); + } + + if (section.name === 'more' && details.webLinks.length > 0) { + return ( +
+ + {details.webLinks.map((link, i) => ( + + ))} + +
+ ); + } + + if (section.name === 'source' && details.sources.length > 0) { + return ( +
+ + {details.sources.map((source, i) => ( + + ))} + +
+ ); + } + + if (section.name === 'report' && getGlobalConfig().enableReport) { + return ( +
+ + + +
+ ); + } + + if ( + section.name === 'touristicContent' && + details.touristicContents.length > 0 + ) { + return ( +
+ ({ + id: `${touristicContent.id}`, + name: touristicContent.name ?? '', + place: touristicContent.category.label, + description: touristicContent.descriptionTeaser, + thumbnails: touristicContent.thumbnails, + attachments: touristicContent.attachments, + iconUri: touristicContent.category.pictogramUri, + iconName: touristicContent.category.label, + }))} + type="TOURISTIC_CONTENT" + /> +
+ ); + } + + if ( + section.name === 'reservationWidget' && + details.reservation && + details.reservation_id !== null + ) { + return ( +
+ {hasNavigator && ( - -
- ); - } - - if ( - section.name === 'touristicContent' && - details.touristicContents.length > 0 - ) { - return ( -
- ({ - id: `${touristicContent.id}`, - name: touristicContent.name ?? '', - place: touristicContent.category.label, - description: touristicContent.descriptionTeaser, - thumbnails: touristicContent.thumbnails, - attachments: touristicContent.attachments, - iconUri: touristicContent.category.pictogramUri, - iconName: touristicContent.category.label, - }))} - type="TOURISTIC_CONTENT" - /> -
- ); - } - - if ( - section.name === 'reservationWidget' && - details.reservation && - details.reservation_id !== null - ) { - return ( -
- {hasNavigator && ( - - - - )} -
- ); - } + )} +
+ ); + } - return null; - })} -
-
+ return null; + })}
- - {!isMobile && ( -
- ({ - location: { x: poi.geometry.x, y: poi.geometry.y }, - pictogramUri: poi.type.pictogramUri, - name: poi.name, - id: `DETAILS-POI-${poi.id}`, - }))} - pointsReference={details.pointsReference} - bbox={details.bbox} - trekChildrenGeometry={details.children.reduce( - (children, currentChild) => { - if (currentChild.geometry) { - children.push({ - ...currentChild.geometry, - id: `TREK-${currentChild.geometry.id}`, - }); - } - return children; - }, - [], - )} - touristicContentPoints={details.touristicContents - .filter(touristicContent => touristicContent.geometry !== null) - .map(touristicContent => ({ - // It's ok to ignore this rule, we filtered null values 2 lines above - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - geometry: touristicContent.geometry!, - pictogramUri: touristicContent.category.pictogramUri, - name: touristicContent.name, - id: `DETAILS-TOURISTIC_CONTENT-${touristicContent.id}`, - }))} - sensitiveAreas={details.sensitiveAreas - .filter(sensitiveArea => sensitiveArea.geometry !== null) - .map(({ geometry, color }) => ({ - geometry, - color, - }))} - trekId={Number(id)} - displayAltimetricProfile={displayAltimetricProfile} - informationDesks={details.informationDesks} - signage={details.signage} - service={details.service?.map(service => ({ - location: { x: service.geometry.x, y: service.geometry.y }, - pictogramUri: - service.type.pictogram ?? renderToStaticMarkup(), - name: service.type.name, - id: `DETAILS-SERVICE-${service.id}`, - }))} - infrastructure={details.infrastructure} - /> -
- )} +
-
- {isMobile && ( - ({ location: { x: poi.geometry.x, y: poi.geometry.y }, pictogramUri: poi.type.pictogramUri, name: poi.name, - id: `${poi.id}`, + id: `DETAILS-POI-${poi.id}`, }))} pointsReference={details.pointsReference} bbox={details.bbox} @@ -686,7 +613,10 @@ export const DetailsUIWithoutContext: React.FC = ({ slug, parentId, langu trekChildrenGeometry={details.children.reduce( (children, currentChild) => { if (currentChild.geometry) { - children.push(currentChild.geometry); + children.push({ + ...currentChild.geometry, + id: `TREK-${currentChild.geometry.id}`, + }); } return children; }, @@ -702,7 +632,12 @@ export const DetailsUIWithoutContext: React.FC = ({ slug, parentId, langu name: touristicContent.name, id: `${touristicContent.id}`, }))} - hideMap={hideMobileMap} + sensitiveAreas={details.sensitiveAreas + .filter(sensitiveArea => sensitiveArea.geometry !== null) + .map(({ geometry, color }) => ({ + geometry, + color, + }))} trekId={Number(id)} displayAltimetricProfile={displayAltimetricProfile} informationDesks={details.informationDesks} @@ -716,9 +651,9 @@ export const DetailsUIWithoutContext: React.FC = ({ slug, parentId, langu }))} infrastructure={details.infrastructure} /> - - )} - +
+ + )} ), diff --git a/frontend/src/components/pages/search/Search.tsx b/frontend/src/components/pages/search/Search.tsx index eeba77d6b..eb9368c5f 100644 --- a/frontend/src/components/pages/search/Search.tsx +++ b/frontend/src/components/pages/search/Search.tsx @@ -260,7 +260,7 @@ export const SearchUI: React.FC = ({ language }) => { {!isMobile && ( = ({ language }) => { > 0} shouldUseClusters diff --git a/frontend/src/components/pages/site/OutdoorCourseUI.tsx b/frontend/src/components/pages/site/OutdoorCourseUI.tsx index b0328421d..c6dce04b8 100644 --- a/frontend/src/components/pages/site/OutdoorCourseUI.tsx +++ b/frontend/src/components/pages/site/OutdoorCourseUI.tsx @@ -19,12 +19,12 @@ import { DetailsMapDynamicComponent } from 'components/Map'; import { PageHead } from 'components/PageHead'; import { Footer } from 'components/Footer'; import { OpenMapButton } from 'components/OpenMapButton'; -import { MobileMapContainer } from 'components/pages/search'; import { getGlobalConfig } from 'modules/utils/api.config'; import { renderToStaticMarkup } from 'react-dom/server'; import { MapPin } from 'components/Icons/MapPin'; import useHasMounted from 'hooks/useHasMounted'; import { ImageWithLegend } from 'components/ImageWithLegend'; +import { cn } from 'services/utils/cn'; import { cleanHTMLElementsFromString } from '../../../modules/utils/string'; import { DetailsPreview } from '../details/components/DetailsPreview'; import { ErrorFallback } from '../search/components/ErrorFallback'; @@ -97,362 +97,306 @@ export const OutdoorCourseUIWithoutContext: React.FC = ({ outdoorCourseUr )} ) : ( - <> -
- - {outdoorCourseContent.name !== undefined && ( - - )} -
+
+ + {outdoorCourseContent.name !== undefined && ( + + )} +
+
+ + + {({ toggleFullscreen, isFullscreen }) => ( +
+ {outdoorCourseContent.attachments.length > 1 && hasNavigator ? ( + + ) : ( + + )} +
+ )} +
- - - {({ toggleFullscreen, isFullscreen }) => ( -
- {outdoorCourseContent.attachments.length > 1 && hasNavigator ? ( - + + {sectionsOutdoorCourse.map(section => { + if (section.name === 'presentation') { + return ( +
+ - ) : ( - + ); + } + if (section.name === 'description' && outdoorCourseContent.description) { + return ( +
+ - )} -
- )} - -
- + + ); + } + if (section.name === 'gear' && outdoorCourseContent.gear) { + return ( +
+ } + /> +
+ ); + } - {sectionsOutdoorCourse.map(section => { - if (section.name === 'presentation') { - return ( -
- -
- ); - } - if (section.name === 'description' && outdoorCourseContent.description) { - return ( -
- -
- ); - } - if (section.name === 'gear' && outdoorCourseContent.gear) { - return ( -
- } - /> -
- ); - } + if (section.name === 'equipment' && outdoorCourseContent.equipment) { + return ( +
+ } + /> +
+ ); + } - if (section.name === 'equipment' && outdoorCourseContent.equipment) { - return ( -
- } - /> -
- ); - } + if (section.name === 'poi' && Number(outdoorCourseContent?.pois?.length) > 0) { + return ( +
+ ({ + id: `${poi.id}`, + name: poi.name ?? '', + description: poi.description, + thumbnails: poi.thumbnails, + attachments: poi.attachments, + iconUri: poi.type.pictogramUri, + iconName: poi.type.label, + }))} + type="POI" + /> +
+ ); + } - if ( - section.name === 'poi' && - Number(outdoorCourseContent?.pois?.length) > 0 - ) { - return ( -
0 + ) { + return ( +
+ - ({ - id: `${poi.id}`, - name: poi.name ?? '', - description: poi.description, - thumbnails: poi.thumbnails, - attachments: poi.attachments, - iconUri: poi.type.pictogramUri, - iconName: poi.type.label, - }))} - type="POI" - /> -
- ); - } + + + + {outdoorCourseContent.sensitiveAreas.map((sensitiveArea, i) => ( + + ))} + +
+ ); + } - if ( - section.name === 'sensitiveAreas' && - outdoorCourseContent.sensitiveAreas.length > 0 - ) { - return ( -
+ - - - - - {outdoorCourseContent.sensitiveAreas.map((sensitiveArea, i) => ( - - ))} - -
- ); - } + {outdoorCourseContent.advice && ( + + )} - if ( - section.name === 'practicalInformations' && - (outdoorCourseContent.advice || outdoorCourseContent.accessibility) - ) { - return ( -
+ {outdoorCourseContent.accessibility && ( +
+ + :{' '} + + {parse(outdoorCourseContent.accessibility)} +
+ )} + +
+ ); + } + + if ( + section.name === 'touristicContent' && + outdoorCourseContent.touristicContents.length > 0 + ) { + return ( +
+ ({ + id: `${touristicContent.id}`, + name: touristicContent.name ?? '', + place: touristicContent.category.label, + description: touristicContent.descriptionTeaser, + thumbnails: touristicContent.thumbnails, + attachments: touristicContent.attachments, + iconUri: touristicContent.category.pictogramUri, + iconName: touristicContent.category.label, + }), + )} + type="TOURISTIC_CONTENT" + /> +
+ ); + } + + if ( + section.name === 'forecastWidget' && + getGlobalConfig().enableMeteoWidget && + outdoorCourseContent.cities_raw?.[0] + ) { + return ( +
+ {hasNavigator && ( - {outdoorCourseContent.advice && ( - - )} - - {outdoorCourseContent.accessibility && ( -
- - :{' '} - - {parse(outdoorCourseContent.accessibility)} -
- )} + -
- ); - } - - if ( - section.name === 'touristicContent' && - outdoorCourseContent.touristicContents.length > 0 - ) { - return ( -
- ({ - id: `${touristicContent.id}`, - name: touristicContent.name ?? '', - place: touristicContent.category.label, - description: touristicContent.descriptionTeaser, - thumbnails: touristicContent.thumbnails, - attachments: touristicContent.attachments, - iconUri: touristicContent.category.pictogramUri, - iconName: touristicContent.category.label, - }), - )} - type="TOURISTIC_CONTENT" - /> -
- ); - } - - if ( - section.name === 'forecastWidget' && - getGlobalConfig().enableMeteoWidget && - outdoorCourseContent.cities_raw?.[0] - ) { - return ( -
- {hasNavigator && ( - - - - )} -
- ); - } - return null; - })} -
-
+ )} + + ); + } + return null; + })}
- {!isMobile && ( -
- ({ - location: { x: poi.geometry.x, y: poi.geometry.y }, - pictogramUri: poi.type.pictogramUri, - name: poi.name, - id: `DETAILS-POI-${poi.id}`, - }))} - bbox={outdoorCourseContent.bbox} - trekChildrenGeometry={[]} - touristicContentPoints={outdoorCourseContent.touristicContents - .filter(touristicContent => touristicContent.geometry !== null) - .map(touristicContent => ({ - // It's ok to ignore this rule, we filtered null values 2 lines above - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - geometry: touristicContent.geometry!, - pictogramUri: touristicContent.category.pictogramUri, - name: touristicContent.name, - id: `DETAILS-TOURISTIC_CONTENT-${touristicContent.id}`, - }))} - sensitiveAreas={outdoorCourseContent.sensitiveAreas - .filter(sensitiveArea => sensitiveArea.geometry !== null) - .map(({ geometry, color }) => ({ - geometry, - color, - }))} - trekId={Number(id)} - title={outdoorCourseContent.name} - signage={outdoorCourseContent.signage} - service={outdoorCourseContent.service?.map(service => ({ - location: { x: service.geometry.x, y: service.geometry.y }, - pictogramUri: - service.type.pictogram ?? renderToStaticMarkup(), - name: service.type.name, - id: `DETAILS-SERVICE-${service.id}`, - }))} - infrastructure={outdoorCourseContent.infrastructure} - /> -
- )} +
-
- - {isMobile && ( - = ({ outdoorCourseUr location: { x: poi.geometry.x, y: poi.geometry.y }, pictogramUri: poi.type.pictogramUri, name: poi.name, - id: `${poi.id}`, + id: `DETAILS-POI-${poi.id}`, }))} bbox={outdoorCourseContent.bbox} trekChildrenGeometry={[]} @@ -475,9 +419,14 @@ export const OutdoorCourseUIWithoutContext: React.FC = ({ outdoorCourseUr geometry: touristicContent.geometry!, pictogramUri: touristicContent.category.pictogramUri, name: touristicContent.name, - id: `${touristicContent.id}`, + id: `DETAILS-TOURISTIC_CONTENT-${touristicContent.id}`, + }))} + sensitiveAreas={outdoorCourseContent.sensitiveAreas + .filter(sensitiveArea => sensitiveArea.geometry !== null) + .map(({ geometry, color }) => ({ + geometry, + color, }))} - hideMap={hideMobileMap} trekId={Number(id)} title={outdoorCourseContent.name} signage={outdoorCourseContent.signage} @@ -489,10 +438,11 @@ export const OutdoorCourseUIWithoutContext: React.FC = ({ outdoorCourseUr id: `DETAILS-SERVICE-${service.id}`, }))} infrastructure={outdoorCourseContent.infrastructure} + hideMap={hideMobileMap} /> - - )} - +
+
+
)} ), diff --git a/frontend/src/components/pages/site/OutdoorSiteUI.tsx b/frontend/src/components/pages/site/OutdoorSiteUI.tsx index 97df7b05f..dc3c382a3 100644 --- a/frontend/src/components/pages/site/OutdoorSiteUI.tsx +++ b/frontend/src/components/pages/site/OutdoorSiteUI.tsx @@ -23,12 +23,12 @@ import { DetailsMapDynamicComponent } from 'components/Map'; import { PageHead } from 'components/PageHead'; import { Footer } from 'components/Footer'; import { OpenMapButton } from 'components/OpenMapButton'; -import { MobileMapContainer } from 'components/pages/search'; import { getGlobalConfig } from 'modules/utils/api.config'; import { renderToStaticMarkup } from 'react-dom/server'; import { MapPin } from 'components/Icons/MapPin'; import useHasMounted from 'hooks/useHasMounted'; import { ImageWithLegend } from 'components/ImageWithLegend'; +import { cn } from 'services/utils/cn'; import { cleanHTMLElementsFromString } from '../../../modules/utils/string'; import { useOutdoorSite } from './useOutdoorSite'; import { DetailsPreview } from '../details/components/DetailsPreview'; @@ -103,481 +103,426 @@ const OutdoorSiteUIWithoutContext: React.FC = ({ outdoorSiteUrl, language )} ) : ( - <> -
- - {outdoorSiteContent.name !== undefined && ( - - )} -
+
+ + {outdoorSiteContent.name !== undefined && ( + + )} +
+
+ + + {({ isFullscreen, toggleFullscreen }) => ( +
+ {outdoorSiteContent.attachments.length > 1 && hasNavigator ? ( + + ) : ( + + )} +
+ )} +
- - - {({ isFullscreen, toggleFullscreen }) => ( -
- {outdoorSiteContent.attachments.length > 1 && hasNavigator ? ( - + + {sectionsOutdoorSite.map(section => { + if (section.name === 'presentation') { + return ( +
+ - ) : ( - + ); + } + if ( + section.name === 'poi' && + outdoorSiteContent?.pois?.length && + Number(outdoorSiteContent?.pois?.length) > 0 + ) { + return ( +
+ ({ + id: `${poi.id}`, + name: poi.name ?? '', + description: poi.description, + thumbnails: poi.thumbnails, + attachments: poi.attachments, + iconUri: poi.type.pictogramUri, + iconName: poi.type.label, + }))} + type="POI" /> - )} -
- )} - -
- + + ); + } - {sectionsOutdoorSite.map(section => { - if (section.name === 'presentation') { - return ( -
- -
- ); - } - if ( - section.name === 'poi' && - outdoorSiteContent?.pois?.length && - Number(outdoorSiteContent?.pois?.length) > 0 - ) { - return ( -
- ({ - id: `${poi.id}`, - name: poi.name ?? '', - description: poi.description, - thumbnails: poi.thumbnails, - attachments: poi.attachments, - iconUri: poi.type.pictogramUri, - iconName: poi.type.label, - }))} - type="POI" - /> -
- ); - } + if (section.name === 'description' && outdoorSiteContent.description) { + return ( +
+ +
+ ); + } - if (section.name === 'description' && outdoorSiteContent.description) { - return ( -
- -
- ); - } + if ( + section.name === 'subsites' && + Number(outdoorSiteContent.children?.length) > 0 + ) { + return ( +
+ +
+ ); + } - if ( - section.name === 'subsites' && - Number(outdoorSiteContent.children?.length) > 0 - ) { - return ( -
- -
- ); - } + if ( + section.name === 'courses' && + Number(outdoorSiteContent.children?.length) > 0 + ) { + return ( +
+ +
+ ); + } - if ( - section.name === 'courses' && - Number(outdoorSiteContent.children?.length) > 0 - ) { - return ( -
0 + ) { + return ( +
+ - -
- ); - } + + + + {outdoorSiteContent.sensitiveAreas.map((sensitiveArea, i) => ( + + ))} + +
+ ); + } - if ( - section.name === 'sensitiveAreas' && - outdoorSiteContent.sensitiveAreas.length > 0 - ) { - return ( -
+ if ( + section.name === 'practicalInformations' && + (Number(outdoorSiteContent?.informationDesks?.length) > 0 || + outdoorSiteContent.advice || + Number(outdoorSiteContent?.labels?.length) > 0) + ) { + return ( +
+ {(outdoorSiteContent.advice || + Number(outdoorSiteContent?.labels?.length) > 0) && ( - - - - {outdoorSiteContent.sensitiveAreas.map((sensitiveArea, i) => ( - + )} + {outdoorSiteContent?.labels?.map((label, i) => ( + ))} - -
- ); - } - - if ( - section.name === 'practicalInformations' && - (Number(outdoorSiteContent?.informationDesks?.length) > 0 || - outdoorSiteContent.advice || - Number(outdoorSiteContent?.labels?.length) > 0) - ) { - return ( -
- {(outdoorSiteContent.advice || - Number(outdoorSiteContent?.labels?.length) > 0) && ( - - {outdoorSiteContent.advice && ( - - )} - {outdoorSiteContent?.labels?.map((label, i) => ( - - ))} - {outdoorSiteContent.accessibility && ( -
- - :{' '} - - {parse(outdoorSiteContent.accessibility)} -
- )} - - )} - - {outdoorSiteContent?.informationDesks?.map((informationDesk, i) => ( - - ))} + {outdoorSiteContent.accessibility && ( +
+ + :{' '} + + {parse(outdoorSiteContent.accessibility)} +
+ )} -
- ); - } - - if ( - section.name === 'access' && - Number(outdoorSiteContent.access?.length) > 0 - ) { - return ( -
- -
- ); - } + {outdoorSiteContent?.informationDesks?.map((informationDesk, i) => ( + + ))} + +
+ ); + } - if ( - section.name === 'forecastWidget' && - getGlobalConfig().enableMeteoWidget && - outdoorSiteContent.cities_raw?.[0] - ) { - return ( -
- {hasNavigator && ( - - - + if ( + section.name === 'access' && + Number(outdoorSiteContent.access?.length) > 0 + ) { + return ( +
+ - ); - } + type="TREK" + /> +
+ ); + } - if ( - section.name === 'source' && - Number(outdoorSiteContent?.source?.length) > 0 - ) { - return ( -
+ if ( + section.name === 'forecastWidget' && + getGlobalConfig().enableMeteoWidget && + outdoorSiteContent.cities_raw?.[0] + ) { + return ( +
+ {hasNavigator && ( - {outdoorSiteContent?.source?.map((source, i) => ( - - ))} + -
- ); - } + )} +
+ ); + } - if ( - section.name === 'more' && - Number(outdoorSiteContent?.webLinks?.length) > 0 - ) { - return ( -
0 + ) { + return ( +
+ - - {outdoorSiteContent?.webLinks?.map((link, i) => ( - - ))} - -
- ); - } + {outdoorSiteContent?.source?.map((source, i) => ( + + ))} + +
+ ); + } - if ( - section.name === 'touristicContent' && - outdoorSiteContent.touristicContents.length > 0 - ) { - return ( -
0 + ) { + return ( +
+ - ({ - id: `${touristicContent.id}`, - name: touristicContent.name ?? '', - place: touristicContent.category.label, - description: touristicContent.descriptionTeaser, - thumbnails: touristicContent.thumbnails, - attachments: touristicContent.attachments, - iconUri: touristicContent.category.pictogramUri, - iconName: touristicContent.category.label, - }), - )} - type="TOURISTIC_CONTENT" - /> -
- ); - } + {outdoorSiteContent?.webLinks?.map((link, i) => ( + + ))} + +
+ ); + } - return null; - })} -
-
-
+ if ( + section.name === 'touristicContent' && + outdoorSiteContent.touristicContents.length > 0 + ) { + return ( +
+ ({ + id: `${touristicContent.id}`, + name: touristicContent.name ?? '', + place: touristicContent.category.label, + description: touristicContent.descriptionTeaser, + thumbnails: touristicContent.thumbnails, + attachments: touristicContent.attachments, + iconUri: touristicContent.category.pictogramUri, + iconName: touristicContent.category.label, + }), + )} + type="TOURISTIC_CONTENT" + /> +
+ ); + } - {!isMobile && ( -
- ({ - location: { x: poi.geometry.x, y: poi.geometry.y }, - pictogramUri: poi.type.pictogramUri, - name: poi.name, - id: `DETAILS-POI-${poi.id}`, - }))} - bbox={outdoorSiteContent.bbox} - trekChildrenGeometry={[]} - touristicContentPoints={outdoorSiteContent.touristicContents - .filter(touristicContent => touristicContent.geometry !== null) - .map(touristicContent => ({ - // It's ok to ignore this rule, we filtered null values 2 lines above - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - geometry: touristicContent.geometry!, - pictogramUri: touristicContent.category.pictogramUri, - name: touristicContent.name, - id: `DETAILS-TOURISTIC_CONTENT-${touristicContent.id}`, - }))} - sensitiveAreas={outdoorSiteContent.sensitiveAreas - .filter(sensitiveArea => sensitiveArea.geometry !== null) - .map(({ geometry, color }) => ({ - geometry, - color, - }))} - trekId={Number(id)} - informationDesks={outdoorSiteContent?.informationDesks} - signage={outdoorSiteContent.signage} - service={outdoorSiteContent.service?.map(service => ({ - location: { x: service.geometry.x, y: service.geometry.y }, - pictogramUri: - service.type.pictogram ?? renderToStaticMarkup(), - name: service.type.name, - id: `DETAILS-SERVICE-${service.id}`, - }))} - infrastructure={outdoorSiteContent.infrastructure} - /> -
- )} + return null; + })} +
+
-
- {isMobile && ( - = ({ outdoorSiteUrl, language location: { x: poi.geometry.x, y: poi.geometry.y }, pictogramUri: poi.type.pictogramUri, name: poi.name, - id: `${poi.id}`, + id: `DETAILS-POI-${poi.id}`, }))} bbox={outdoorSiteContent.bbox} trekChildrenGeometry={[]} @@ -600,10 +545,16 @@ const OutdoorSiteUIWithoutContext: React.FC = ({ outdoorSiteUrl, language geometry: touristicContent.geometry!, pictogramUri: touristicContent.category.pictogramUri, name: touristicContent.name, - id: `${touristicContent.id}`, + id: `DETAILS-TOURISTIC_CONTENT-${touristicContent.id}`, + }))} + sensitiveAreas={outdoorSiteContent.sensitiveAreas + .filter(sensitiveArea => sensitiveArea.geometry !== null) + .map(({ geometry, color }) => ({ + geometry, + color, }))} - hideMap={hideMobileMap} trekId={Number(id)} + informationDesks={outdoorSiteContent?.informationDesks} signage={outdoorSiteContent.signage} service={outdoorSiteContent.service?.map(service => ({ location: { x: service.geometry.x, y: service.geometry.y }, @@ -613,10 +564,11 @@ const OutdoorSiteUIWithoutContext: React.FC = ({ outdoorSiteUrl, language id: `DETAILS-SERVICE-${service.id}`, }))} infrastructure={outdoorSiteContent.infrastructure} + hideMap={hideMobileMap} /> - - )} - +
+
+ )} ), diff --git a/frontend/src/components/pages/touristicContent/TouristicContentUI.tsx b/frontend/src/components/pages/touristicContent/TouristicContentUI.tsx index a68dd24a5..d67d95b3d 100644 --- a/frontend/src/components/pages/touristicContent/TouristicContentUI.tsx +++ b/frontend/src/components/pages/touristicContent/TouristicContentUI.tsx @@ -7,10 +7,10 @@ import { TouristicContentMapDynamicComponent } from 'components/Map'; import { PageHead } from 'components/PageHead'; import { Footer } from 'components/Footer'; import { OpenMapButton } from 'components/OpenMapButton'; -import { MobileMapContainer } from 'components/pages/search'; import { getGlobalConfig } from 'modules/utils/api.config'; import useHasMounted from 'hooks/useHasMounted'; import { ImageWithLegend } from 'components/ImageWithLegend'; +import { cn } from 'services/utils/cn'; import { useTouristicContent } from './useTouristicContent'; import { DetailsPreview } from '../details/components/DetailsPreview'; import { DetailsSection } from '../details/components/DetailsSection'; @@ -70,268 +70,247 @@ export const TouristicContentUI: React.FC = ({ )} ) : ( - <> -
- - {touristicContent.name !== undefined && ( - - )} -
+
+ + {touristicContent.name !== undefined && ( + + )} +
+
+ + + {({ isFullscreen, toggleFullscreen }) => ( +
+ {touristicContent.attachments.length > 1 && hasNavigator ? ( + + ) : ( + + )} +
+ )} +
- - - {({ isFullscreen, toggleFullscreen }) => ( -
- {touristicContent.attachments.length > 1 && hasNavigator ? ( - - ) : ( - - )} -
- )} - -
- + > + - {sectionsTouristicContent.map(section => { - if (section.name === 'presentation') { - return ( -
- -
- ); - } - if ( - section.name === 'practicalInformations' && - touristicContent.practicalInfo - ) { - return ( -
{ + if (section.name === 'presentation') { + return ( +
+ +
+ ); + } + if (section.name === 'practicalInformations' && touristicContent.practicalInfo) { + return ( +
+ - - {parse(touristicContent.practicalInfo)} - -
- ); - } + {parse(touristicContent.practicalInfo)} + +
+ ); + } - if (section.name === 'accessibility' && touristicContent.accessibility) { - return ( -
+ - - {parse(touristicContent.accessibility)} - -
- ); - } + {parse(touristicContent.accessibility)} + + + ); + } - if ( - section.name === 'contact' && - (!!touristicContent.contact?.length || - !!touristicContent.email?.length || - !!touristicContent.website?.length) - ) { - return ( -
+ - - {parse(touristicContent.contact)} - {!!touristicContent.email?.length && ( - - )} - {!!touristicContent.website?.length && ( - + )} + {!!touristicContent.website?.length && ( + - )} - -
- ); - } - - if ( - section.name === 'forecastWidget' && - getGlobalConfig().enableMeteoWidget && - touristicContent.cities_raw?.[0] - ) { - return ( -
- {hasNavigator && ( - - - + > + {touristicContent.website} + +
)} - - ); - } + + + ); + } - if (section.name === 'source' && touristicContent.sources.length > 0) { - return ( -
+ if ( + section.name === 'forecastWidget' && + getGlobalConfig().enableMeteoWidget && + touristicContent.cities_raw?.[0] + ) { + return ( +
+ {hasNavigator && ( - {touristicContent.sources.map((source, i) => ( - - ))} + -
- ); - } + )} +
+ ); + } - return null; - })} -
-
+ if (section.name === 'source' && touristicContent.sources.length > 0) { + return ( +
+ + {touristicContent.sources.map((source, i) => ( + + ))} + +
+ ); + } + + return null; + })}
- {!isMobile && ( -
- -
- )} +
-
- {isMobile && ( - = ({ }} hideMap={hideMobileMap} /> - - )} - +
+
+ )} ); diff --git a/frontend/src/components/pages/touristicEvent/TouristicEventUI.tsx b/frontend/src/components/pages/touristicEvent/TouristicEventUI.tsx index 5ec66d4e1..60f4b510d 100644 --- a/frontend/src/components/pages/touristicEvent/TouristicEventUI.tsx +++ b/frontend/src/components/pages/touristicEvent/TouristicEventUI.tsx @@ -18,10 +18,10 @@ import { DetailsMapDynamicComponent } from 'components/Map'; import { PageHead } from 'components/PageHead'; import { Footer } from 'components/Footer'; import { OpenMapButton } from 'components/OpenMapButton'; -import { MobileMapContainer } from 'components/pages/search'; import { getGlobalConfig } from 'modules/utils/api.config'; import useHasMounted from 'hooks/useHasMounted'; import { ImageWithLegend } from 'components/ImageWithLegend'; +import { cn } from 'services/utils/cn'; import { cleanHTMLElementsFromString } from '../../../modules/utils/string'; import { DetailsPreview } from '../details/components/DetailsPreview'; import { ErrorFallback } from '../search/components/ErrorFallback'; @@ -96,320 +96,287 @@ export const TouristicEventUIWithoutContext: React.FC = ({ )} ) : ( - <> -
- - {touristicEventContent.name !== undefined && ( - - )} -
+
+ + {touristicEventContent.name !== undefined && ( + + )} +
+
+ + + {({ toggleFullscreen, isFullscreen }) => ( +
+ {touristicEventContent.attachments.length > 1 && hasNavigator ? ( + + ) : ( + + )} +
+ )} +
- - - {({ toggleFullscreen, isFullscreen }) => ( -
- {touristicEventContent.attachments.length > 1 && hasNavigator ? ( - - ) : ( - - )} -
- )} - -
- - - {sectionsTouristicEvents.map(section => { - if (section.name === 'presentation') { - return ( -
- -
- ); - } - if (section.name === 'description' && touristicEventContent.description) { - return ( -
- -
- ); - } - if (section.name === 'practicalInformations') { - return ( -
- } - email={touristicEventContent.email} - website={touristicEventContent.website} - /> - {touristicEventContent.accessibility && ( -
- } - /> -
- )} + ref={sectionsContainerRef} + > + - {touristicEventContent.organizer && ( -
- } - /> -
- )} + {sectionsTouristicEvents.map(section => { + if (section.name === 'presentation') { + return ( +
+ +
+ ); + } + if (section.name === 'description' && touristicEventContent.description) { + return ( +
+ +
+ ); + } + if (section.name === 'practicalInformations') { + return ( +
+ } + email={touristicEventContent.email} + website={touristicEventContent.website} + /> + {touristicEventContent.accessibility && ( +
+ } + /> +
+ )} - {touristicEventContent.speaker && ( -
- } - /> -
- )} + {touristicEventContent.organizer && ( +
+ } + /> +
+ )} - {touristicEventContent.targetAudience && ( -
- } - /> -
- )} + {touristicEventContent.speaker && ( +
+ } + /> +
+ )} - {touristicEventContent.practicalInfo && ( -
- } - /> -
- )} + {touristicEventContent.targetAudience && ( +
+ } + /> +
+ )} - {touristicEventContent.booking && ( -
- } - /> -
- )} -
- ); - } + {touristicEventContent.practicalInfo && ( +
+ } + /> +
+ )} - if ( - section.name === 'forecastWidget' && - getGlobalConfig().enableMeteoWidget && - touristicEventContent.cities_raw?.[0] - ) { - return ( -
- {hasNavigator && ( - + - - - )} -
- ); - } + title={} + /> +
+ )} + + ); + } - if (section.name === 'source' && touristicEventContent.sources.length > 0) { - return ( -
+ if ( + section.name === 'forecastWidget' && + getGlobalConfig().enableMeteoWidget && + touristicEventContent.cities_raw?.[0] + ) { + return ( +
+ {hasNavigator && ( - {touristicEventContent.sources.map((source, i) => ( - - ))} + -
- ); - } + )} +
+ ); + } - if ( - section.name === 'touristicContent' && - touristicEventContent.touristicContents.length > 0 - ) { - return ( -
0) { + return ( +
+ - ({ - id: `${touristicContent.id}`, - name: touristicContent.name ?? '', - place: touristicContent.category.label, - description: touristicContent.descriptionTeaser, - thumbnails: touristicContent.thumbnails, - attachments: touristicContent.attachments, - iconUri: touristicContent.category.pictogramUri, - iconName: touristicContent.category.label, - }), - )} - type="TOURISTIC_CONTENT" - /> -
- ); - } + {touristicEventContent.sources.map((source, i) => ( + + ))} + +
+ ); + } + + if ( + section.name === 'touristicContent' && + touristicEventContent.touristicContents.length > 0 + ) { + return ( +
+ ({ + id: `${touristicContent.id}`, + name: touristicContent.name ?? '', + place: touristicContent.category.label, + description: touristicContent.descriptionTeaser, + thumbnails: touristicContent.thumbnails, + attachments: touristicContent.attachments, + iconUri: touristicContent.category.pictogramUri, + iconName: touristicContent.category.label, + }), + )} + type="TOURISTIC_CONTENT" + /> +
+ ); + } - return null; - })} -
-
+ return null; + })}
- {!isMobile && ( -
- touristicContent.geometry !== null) - .map(touristicContent => ({ - // It's ok to ignore this rule, we filtered null values 2 lines above - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - geometry: touristicContent.geometry!, - pictogramUri: touristicContent.category.pictogramUri, - name: touristicContent.name, - id: `DETAILS-TOURISTIC_CONTENT-${touristicContent.id}`, - }))} - sensitiveAreas={[]} - trekId={Number(id)} - /> -
- )} +
-
- - {isMobile && ( - = ({ geometry: touristicContent.geometry!, pictogramUri: touristicContent.category.pictogramUri, name: touristicContent.name, - id: `${touristicContent.id}`, + id: `DETAILS-TOURISTIC_CONTENT-${touristicContent.id}`, }))} - hideMap={hideMobileMap} + sensitiveAreas={[]} trekId={Number(id)} + hideMap={hideMobileMap} /> - - )} - +
+
+ )} ), diff --git a/frontend/src/public/style.css b/frontend/src/public/style.css index 61cdda016..9afd23af3 100644 --- a/frontend/src/public/style.css +++ b/frontend/src/public/style.css @@ -1,8 +1,3 @@ -.leaflet-map { - height: 65%; - max-height: 100vh; -} - .savetiles { display: none; } diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css index 0256dcfe7..dab6d978c 100644 --- a/frontend/src/styles/global.css +++ b/frontend/src/styles/global.css @@ -49,3 +49,8 @@ w-full ; } + +.hasDrawer .leaflet-bottom { + @apply mb-12; + @apply desktop:mb-0; +}