Mercurial > gemma

changeset 3022:0b19105c7c4b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: panes: added flex display to panes so that content can expand to full width and height automatically
author Markus Kottlaender <markus@intevation.de>
date Fri, 12 Apr 2019 11:03:29 +0200
parents 2e2a271c1026
children 5d06629a14df
files client/src/components/Main.vue
diffstat 1 files changed, 31 insertions(+), 21 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/Main.vue	Thu Apr 11 18:57:40 2019 +0200
+++ b/client/src/components/Main.vue	Fri Apr 12 11:03:29 2019 +0200
@@ -20,23 +20,25 @@
     </div>
 
     <template v-if="panes.length === 1">
-      <div id="pane1" class="pane wh-100"><component :is="panes[0]" /></div>
+      <div id="pane1" class="pane d-flex wh-100">
+        <component :is="panes[0]" />
+      </div>
     </template>
 
     <template v-if="panes.length === 2">
       <template v-if="paneMode === 'horizontal'">
-        <div id="pane1" class="pane w-100 h-50">
+        <div id="pane1" class="pane d-flex w-100 h-50">
           <component :is="panes[0]" />
         </div>
-        <div id="pane2" class="pane w-100 h-50">
+        <div id="pane2" class="pane d-flex w-100 h-50">
           <component :is="panes[1]" />
         </div>
       </template>
       <template v-if="paneMode === 'vertical'">
-        <div id="pane1" class="pane w-50 h-100">
+        <div id="pane1" class="pane d-flex w-50 h-100">
           <component :is="panes[0]" />
         </div>
-        <div id="pane2" class="pane w-50 h-100">
+        <div id="pane2" class="pane d-flex w-50 h-100">
           <component :is="panes[1]" />
         </div>
       </template>
@@ -44,56 +46,64 @@
 
     <template v-if="panes.length === 3">
       <template v-if="paneMode === 'top'">
-        <div id="pane1" class="pane w-100 h-50">
+        <div id="pane1" class="pane d-flex w-100 h-50">
           <component :is="panes[0]" />
         </div>
-        <div id="pane3" class="pane w-50 h-50">
+        <div id="pane3" class="pane d-flex w-50 h-50">
           <component :is="panes[2]" />
         </div>
-        <div id="pane2" class="pane w-50 h-50">
+        <div id="pane2" class="pane d-flex w-50 h-50">
           <component :is="panes[1]" />
         </div>
       </template>
       <template v-if="paneMode === 'right'">
-        <div id="pane3" class="pane w-50 h-50">
+        <div id="pane3" class="pane d-flex w-50 h-50">
           <component :is="panes[2]" />
         </div>
-        <div id="pane2" class="pane w-50 h-50">
+        <div id="pane2" class="pane d-flex w-50 h-50">
           <component :is="panes[1]" />
         </div>
-        <div id="pane1" class="pane w-50 h-100">
+        <div id="pane1" class="pane d-flex w-50 h-100">
           <component :is="panes[0]" />
         </div>
       </template>
       <template v-if="paneMode === 'bottom'">
-        <div id="pane2" class="pane w-50 h-50">
+        <div id="pane2" class="pane d-flex w-50 h-50">
           <component :is="panes[1]" />
         </div>
-        <div id="pane3" class="pane w-50 h-50">
+        <div id="pane3" class="pane d-flex w-50 h-50">
           <component :is="panes[2]" />
         </div>
-        <div id="pane1" class="pane w-100 h-50">
+        <div id="pane1" class="pane d-flex w-100 h-50">
           <component :is="panes[0]" />
         </div>
       </template>
       <template v-if="paneMode === 'left'">
-        <div id="pane1" class="pane w-50 h-100">
+        <div id="pane1" class="pane d-flex w-50 h-100">
           <component :is="panes[0]" />
         </div>
-        <div id="pane2" class="pane w-50 h-50">
+        <div id="pane2" class="pane d-flex w-50 h-50">
           <component :is="panes[1]" />
         </div>
-        <div id="pane3" class="pane w-50 h-50">
+        <div id="pane3" class="pane d-flex w-50 h-50">
           <component :is="panes[2]" />
         </div>
       </template>
     </template>
 
     <template v-if="panes.length === 4">
-      <div id="pane1" class="pane w-50 h-50"><component :is="panes[0]" /></div>
-      <div id="pane2" class="pane w-50 h-50"><component :is="panes[1]" /></div>
-      <div id="pane4" class="pane w-50 h-50"><component :is="panes[3]" /></div>
-      <div id="pane3" class="pane w-50 h-50"><component :is="panes[2]" /></div>
+      <div id="pane1" class="pane d-flex w-50 h-50">
+        <component :is="panes[0]" />
+      </div>
+      <div id="pane2" class="pane d-flex w-50 h-50">
+        <component :is="panes[1]" />
+      </div>
+      <div id="pane4" class="pane d-flex w-50 h-50">
+        <component :is="panes[3]" />
+      </div>
+      <div id="pane3" class="pane d-flex w-50 h-50">
+        <component :is="panes[2]" />
+      </div>
     </template>
   </div>
 </template>