WIP - fix(POI Map): Popup style on small maps

Force the popup layout to behave like a modal taking up the full width
opendatasoft · Nov 16, 2023 · ac4122f · ac4122f
1 parent b082b66
commit ac4122f
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 14 deletions.
diff --git a/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx b/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx
@@ -21,8 +21,8 @@ const layer1: Layer = {
         display: PopupDisplayTypes.Tooltip,
         getContent: async (_, properties) => {
             await timeout(500);
-            const { key } = properties as { key: string };
-            return Promise.resolve(`<h4>${key}</h4>`);
+            const { key, description } = properties as Record<string, unknown>;
+            return Promise.resolve(`<h4>${key}</h4><div>${description}<div>`);
         },
         getLoadingContent: () => 'Loading...',
     },
@@ -107,7 +107,7 @@ const meta: ComponentMeta<typeof PoiMap> = {
 
 export default meta;
 
-const Template: ComponentStory<typeof PoiMap> = args => (
+const Template: ComponentStory<typeof PoiMap> = (args) => (
     <div
         style={{
             width: '50%',
@@ -177,7 +177,7 @@ PoiMapLegendCenter.args = PoiMapLegendCenterArgs;
 export const PoiMapMinMaxZooms: ComponentStory<typeof PoiMap> = Template.bind({});
 const PoiMapMinMaxZoomsArgs = {
     data: { value: { layers: [{ ...layer1, colorMatch: citiesColorMatch }, layer2], sources } },
-    options: { 
+    options: {
         ...options,
         legend,
         minZoom: 3,

diff --git a/packages/visualizations-react/stories/Poi/sources.ts b/packages/visualizations-react/stories/Poi/sources.ts
@@ -15,7 +15,8 @@ const sources : PoiMapData["sources"] = {
                         coordinates: [2.357573,48.837904],
                     },
                     properties: {
-                        key: 'Paris'
+                        key: 'Paris',
+                        description: 'Officia deserunt commodo enim ea ad veniam enim consectetur aliquip adipisicing duis. Exercitation aute velit pariatur est et ea qui veniam ad duis quis ad aliquip. Ipsum exercitation dolor tempor deserunt sunt amet laborum tempor excepteur est sunt ea quis.'
                     },
                 },
                 {
@@ -26,7 +27,8 @@ const sources : PoiMapData["sources"] = {
                         coordinates: [-0.563328,44.838245],
                     },
                     properties: {
-                        key: 'Bordeaux'
+                        key: 'Bordeaux',
+                        description: 'Pariatur duis mollit sit id ullamco ea non ad dolore voluptate nostrud deserunt fugiat proident. Sunt dolor qui consectetur exercitation mollit proident Lorem laborum cillum sit Lorem id eiusmod. Lorem culpa tempor aliqua aliquip reprehenderit. Aute officia reprehenderit aute pariatur incididunt nostrud exercitation voluptate id est ex. Qui eiusmod est enim est ipsum elit laboris.'
                     },
                 },
                 {
@@ -37,7 +39,8 @@ const sources : PoiMapData["sources"] = {
                         coordinates: [-1.552924,47.214847],
                     },
                     properties: {
-                        key: 'Nantes'
+                        key: 'Nantes',
+                        description: "Irure incididunt deserunt officia eiusmod occaecat duis nostrud sint excepteur. Id non voluptate non proident sunt sit nisi eiusmod sit excepteur duis cillum adipisicing. Nostrud officia ad tempor quis commodo aute elit tempor reprehenderit esse est aute fugiat reprehenderit. Aliquip eu occaecat Lorem cupidatat labore consequat. Culpa commodo sunt proident exercitation. Enim voluptate minim veniam enim nulla aute dolor magna est elit aliqua. Ex occaecat fugiat laboris do do dolor nostrud cupidatat."
                     },
                 },
                 {
@@ -48,7 +51,8 @@ const sources : PoiMapData["sources"] = {
                         coordinates: [5.360529,43.303114],
                     },
                     properties: {
-                        key: 'Marseille'
+                        key: 'Marseille',
+                        description: "Dolore nisi non id labore. Ea deserunt irure nisi nisi deserunt anim nisi et. Culpa sint mollit deserunt ea eiusmod laborum nostrud."
                     },
                 },
             ],
@@ -65,7 +69,7 @@ const sources : PoiMapData["sources"] = {
                     properties: {
                         name: "Battle of Verdun",
                         date: "1916",
-                        description: "The Battle of Verdun was fought from 21 February to 18 December 1916 on the Western Front in France. The battle was the longest of the First World War and took place on the hills north of Verdun-sur-Meuse."
+                        description: "The Battle of Verdun was fought from 21 February to 18 December 1916 on the Western Front in France. The battle was the longest of the First World War and took place on the hills north of Verdun-sur-Meuse. Nisi magna dolor ullamco Lorem culpa ea tempor exercitation dolor ex cupidatat esse voluptate ea. Incididunt consectetur ut officia eiusmod voluptate commodo adipisicing tempor eiusmod esse nulla veniam ut. Aute ipsum eiusmod culpa dolore ea aliquip nulla consectetur reprehenderit in mollit nostrud. Elit commodo non est voluptate pariatur. Exercitation reprehenderit pariatur dolore aute elit ea dolor commodo cillum. Est dolore ut elit in. Ullamco est laborum aute labore. Cillum incididunt laboris do eiusmod fugiat enim veniam aliquip duis incididunt laboris anim nostrud. Laborum mollit esse magna fugiat fugiat fugiat aliquip." 
                     },
                     geometry: {
                         type: "Point",

diff --git a/packages/visualizations/src/components/MapPoi/MapRender.svelte b/packages/visualizations/src/components/MapPoi/MapRender.svelte
@@ -112,6 +112,8 @@
         }
     }
     .map-card {
+        container-type: "size";
+        container-name: map-card;
         display: flex;
         flex-direction: column;
         margin: 0;
@@ -128,22 +130,31 @@
     .map-card :global(.poi-map__popup) {
         /* To be above map controls (z-index: 2)*/
         z-index: 3;
-        /* 26px is for its padding */
-        max-height: calc(100% - 26px);
+        /* 13px is for its top margin */
         height: auto;
         overflow-y: auto;
+        border-radius: 6px;
     }
     .map-card :global(.poi-map__popup.poi-map__popup--as-sidebar) {
         /* TO DO: add common stylesheet */
-        transform: translate(13px, 13px) !important;
+        max-height: calc(100% - 13px);
+        transform: translate(0px, 0px) !important;
+        margin: 13px 13px 0px 13px;
+        max-width: 100%;
+    }
+
+    @container map-card (max-width: 500px) {
+        .map-card :global(.poi-map__popup) {
+            transform: translate(0px, 0px) !important;
+            margin: 13px 13px 0px 13px;
+            width: 100%;
+        }
     }
     .map-card :global(.poi-map__popup.poi-map__popup--as-sidebar > .maplibregl-popup-tip) {
         display: none;
     }
     .map-card :global(.poi-map__popup > .maplibregl-popup-content) {
         padding: 13px;
-        border-radius: 6px;
-        box-shadow: 0 6px 13px 0 rgba(0, 0, 0, 0.26);
     }
     .main {
         aspect-ratio: var(--aspect-ratio);