PB-1235 : make legend window adapt to its content

and make it resizable too, so that users can adjust the size to their needs
geoadmin · Nov 27, 2024 · dc5df6b · dc5df6b
1 parent 0e9fc33
commit dc5df6b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/src/modules/menu/components/LayerDescriptionPopup.vue b/src/modules/menu/components/LayerDescriptionPopup.vue
@@ -63,6 +63,7 @@ onMounted(async () => {
         :title="title"
         movable
         allow-print
+        resizeable
         initial-position="top-left"
         @close="emit('close', layerId)"
     >

diff --git a/src/utils/components/SimpleWindow.vue b/src/utils/components/SimpleWindow.vue
@@ -25,6 +25,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    resizeable: {
+        type: Boolean,
+        default: false,
+    },
     allowPrint: {
         type: Boolean,
         default: false,
@@ -83,7 +87,11 @@ onMounted(() => {
             class="simple-window card"
             :class="[
                 initialPositionClass,
-                { 'dev-disclaimer-present': hasDevSiteWarning, wide: wide },
+                {
+                    'dev-disclaimer-present': hasDevSiteWarning,
+                    wide: wide,
+                    resizable: resizeable && showBody,
+                },
             ]"
         >
             <div
@@ -124,9 +132,16 @@ onMounted(() => {
     position: fixed;
     top: $top-margin;
     right: 4rem;
-    width: max-content;
-    max-width: 400px;
-    max-height: calc(100vh - $top-margin);
+    min-width: min-content;
+    width: min-content;
+    height: min(500px, calc(100vh - $top-margin));
+    max-width: max-content;
+    max-height: max-content;
+
+    &.resizable {
+        resize: both;
+        overflow: auto;
+    }
 
     @include respond-above(phone) {
         &.wide {