Split screen vertically for time series tables

Deltares · Jun 24, 2024 · 55e047e · 55e047e
1 parent 3067590
commit 55e047e
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 6 deletions.
diff --git a/src/components/spatialdisplay/SpatialDisplay.vue b/src/components/spatialdisplay/SpatialDisplay.vue
@@ -1,6 +1,15 @@
 <template>
-  <div class="container">
-    <div class="child-container" :class="{ 'd-none': hideMap }">
+  <div
+    class="container"
+    :class="{ 'vertical-split': route.meta.useVerticalSplit }"
+  >
+    <div
+      class="child-container"
+      :class="{
+        'd-none': hideMap,
+        'vertical-split': route.meta.useVerticalSplit,
+      }"
+    >
       <SpatialDisplayComponent
         :layer-name="props.layerName"
         :location-id="props.locationId"
@@ -16,7 +25,11 @@
         @coordinate-click="onCoordinateClick"
       ></SpatialDisplayComponent>
     </div>
-    <div v-if="filter" class="child-container">
+    <div
+      v-if="filter"
+      class="child-container"
+      :class="{ 'vertical-split': route.meta.useVerticalSplit }"
+    >
       <router-view
         @close="closeTimeSeriesDisplay"
         :filter="filter"
@@ -275,17 +288,29 @@ watch(
   height: 100%;
 }
 
+.container.vertical-split {
+  flex-direction: column;
+}
+
 .child-container {
   position: relative;
   display: flex;
   flex-direction: column;
-  width: 50%;
-  max-width: 100%;
   flex: 1 1 0px;
 }
 
 .child-container.mobile {
   height: 100%;
   width: 100%;
 }
+
+.child-container:not(.vertical-split) {
+  width: 50%;
+  max-width: 100%;
+}
+
+.child-container.vertical-split {
+  height: 50%;
+  max-height: 100%;
+}
 </style>
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -199,7 +199,7 @@ export const dynamicRoutes: Readonly<RouteRecordRaw[]> = [
             name: 'SpatialTableDisplay',
             component: SpatialTableDisplay,
             props: true,
-            meta: { sidebar: true },
+            meta: { sidebar: true, useVerticalSplit: true },
           },
         ],
       },