Merge pull request #539 from RyanCoulsonCA/fix-193

add max height to stickied image panel in mobile view
ramp4-pcar4 · Feb 7, 2025 · 759abb1 · 759abb1
2 parents 2843d00 + 4d5a5f5
commit 759abb1
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 36 deletions.
diff --git a/src/components/panels/image-panel.vue b/src/components/panels/image-panel.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="graphic self-start justify-center flex flex-col h-full align-middle pb-5 w-full">
+    <div class="graphic self-start flex flex-col h-full align-middle pb-5 w-full">
         <fullscreen :expandable="config.fullscreen" :type="config.type">
             <img
                 ref="img"
@@ -105,8 +105,13 @@ onMounted((): void => {
 @media screen and (max-width: 640px) {
     .graphic {
         max-width: 100vw;
+        max-height: 60vh;
+        overflow-y: auto;
         background-color: white;
+
+        box-shadow: 1px 2px 5px #ddd;
     }
+
     .graphic-image {
         max-height: 38vh;
     }

diff --git a/src/components/panels/interactive-map.vue b/src/components/panels/interactive-map.vue
@@ -84,43 +84,51 @@ const init = async () => {
         ? el.value.children[0].children[0].children[0]
         : el.value.children[0].children[1];
 
-    fetch(props.config.config).then((data) => {
-        // parse JSON data
-        data.json().then((rampConfig: any) => {
-            rInstance.value = createInstance(mapComponent.value as HTMLElement, rampConfig);
-            const mapInstance = rInstance.value;
-
-            // Remove the appbar on load if it exists.
-            mapInstance.event.on('map/created', () => {
-                if (mapInstance.fixture.get('appbar')) {
-                    mapInstance.fixture.remove('appbar');
-                }
-            });
+    // parse JSON data
+    const data = await fetch(props.config.config);
+
+    if (data === undefined) {
+        console.error('An error occurred while fetching the map configuration.');
+    }
+
+    const rampConfig = await data.json();
+
+    rInstance.value = createInstance(mapComponent.value as HTMLElement, rampConfig);
+    const mapInstance = rInstance.value;
+
+    // Remove the appbar on load if it exists.
+    mapInstance.event.on('map/created', () => {
+        if (mapInstance.fixture.get('appbar')) {
+            mapInstance.fixture.remove('appbar');
+        }
+    });
 
-            // Set icons for the points of interest.
-            mapInstance.geo.map.viewPromise.then(() => {
-                props.config.points.forEach(async (point: PointOfInterest) => {
-                    const target = point.target;
-
-                    const layer = mapInstance.geo.layer.getLayer(target.layerId);
-                    layer.loadPromise().then(() => {
-                        if (target.layerIndex !== undefined) {
-                            // Layer is a map image layer.
-                            const subLayer = layer.getSublayer(target.layerIndex);
-                            subLayer.loadPromise().then(() => {
-                                subLayer.getIcon(target.oid).then((icon: string) => {
-                                    point.target.icon = icon;
-                                });
-                            });
-                        } else {
-                            layer.getIcon(target.oid).then((icon: string) => {
-                                point.target.icon = icon;
-                            });
-                        }
-                    });
-                });
+    // Set icons for the points of interest.
+    await mapInstance.geo.map.viewPromise;
+
+    props.config.points.forEach(async (point: PointOfInterest) => {
+        const target = point.target;
+
+        // Ignore "return home" points, as the map should already be showing the default
+        // extent on map initialization.
+        if (target.returnHome !== undefined) return;
+
+        const layer = mapInstance.geo.layer.getLayer(target.layerId);
+
+        await layer.loadPromise();
+
+        if (target.layerIndex !== undefined) {
+            // Layer is a map image layer.
+            const subLayer = layer.getSublayer(target.layerIndex);
+            await subLayer.loadPromise();
+            subLayer.getIcon(target.oid).then((icon: string) => {
+                point.target.icon = icon;
             });
-        });
+        } else {
+            layer.getIcon(target.oid).then((icon: string) => {
+                point.target.icon = icon;
+            });
+        }
     });
 };
 

diff --git a/src/components/panels/slideshow-panel.vue b/src/components/panels/slideshow-panel.vue
@@ -194,6 +194,8 @@ window.addEventListener('resize', () => {
     .carousel-container {
         max-width: 100vw;
         background-color: white;
+        overflow-y: auto;
+        max-height: 60vh;
     }
     .carousel-item,
     .map-carousel-item {