changeset 1291:e9fb72fa6bae

improved box positioninig
author Markus Kottlaender <markus@intevation.de>
date Thu, 22 Nov 2018 13:15:48 +0100
parents ad528ad130d6
children 5aeda02c51b9
files client/src/assets/application.sass client/src/components/App.vue client/src/components/map/Identify.vue client/src/components/map/Pdftool.vue client/src/components/map/layers/Layers.vue
diffstat 5 files changed, 14 insertions(+), 8 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/assets/application.sass	Thu Nov 22 13:10:22 2018 +0100
+++ b/client/src/assets/application.sass	Thu Nov 22 13:15:48 2018 +0100
@@ -63,8 +63,9 @@
   overflow: hidden
   margin-left: 0
   margin-right: 0
+  margin-bottom: 0
   box-shadow: $shadow-xs
-  transition: max-width .4s, max-height .4s, margin-left .4s, margin-right .4s
+  transition: max-width .4s, max-height .4s, margin-left .4s, margin-right .4s, margin-bottom .4s
 
 .box h6,
 .contextbox h6
@@ -77,3 +78,4 @@
   max-width: 999px
   margin-left: 0.5rem
   margin-right: 0.5rem
+  margin-bottom: 0.5rem
--- a/client/src/components/App.vue	Thu Nov 22 13:10:22 2018 +0100
+++ b/client/src/components/App.vue	Thu Nov 22 13:15:48 2018 +0100
@@ -10,9 +10,13 @@
                     </div>
                 </div>
                 <div class="ml-auto d-flex">
-                    <Pdftool v-if="routeName == 'mainview'"></Pdftool>
-                    <Layers v-if="routeName == 'mainview'"></Layers>
-                    <Identify v-if="routeName == 'mainview'"></Identify>
+                    <div class="d-flex flex-column align-items-end">
+                        <Layers v-if="routeName == 'mainview'"></Layers>
+                    </div>
+                    <div class="d-flex flex-column align-items-end">
+                        <Identify v-if="routeName == 'mainview'"></Identify>
+                        <Pdftool v-if="routeName == 'mainview'"></Pdftool>
+                    </div>
                     <Toolbar v-if="routeName == 'mainview'"></Toolbar>
                 </div>
             </div>
--- a/client/src/components/map/Identify.vue	Thu Nov 22 13:10:22 2018 +0100
+++ b/client/src/components/map/Identify.vue	Thu Nov 22 13:15:48 2018 +0100
@@ -1,5 +1,5 @@
 <template>
-    <div :class="['box ui-element rounded bg-white mb-auto text-nowrap', { expanded: showIdentify }]">
+    <div :class="['box ui-element rounded bg-white text-nowrap', { expanded: showIdentify }]">
         <div style="width: 20rem">
             <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
               <i class="fa fa-info mr-2"></i>
--- a/client/src/components/map/Pdftool.vue	Thu Nov 22 13:10:22 2018 +0100
+++ b/client/src/components/map/Pdftool.vue	Thu Nov 22 13:15:48 2018 +0100
@@ -1,6 +1,6 @@
 <template>
-    <div :class="['box ui-element rounded bg-white mb-auto text-nowrap', { expanded: showPdfTool }]">
-        <div style="width: 15rem">
+    <div :class="['box ui-element rounded bg-white text-nowrap', { expanded: showPdfTool }]">
+        <div style="width: 20rem">
             <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
               <i class="fa fa-file-pdf-o mr-2"></i>
               Generate PDF
--- a/client/src/components/map/layers/Layers.vue	Thu Nov 22 13:10:22 2018 +0100
+++ b/client/src/components/map/layers/Layers.vue	Thu Nov 22 13:15:48 2018 +0100
@@ -1,5 +1,5 @@
 <template>
-    <div :class="['box ui-element rounded bg-white mb-auto text-nowrap', { expanded: showLayers }]">
+    <div :class="['box ui-element rounded bg-white text-nowrap', { expanded: showLayers }]">
         <div style="width: 20rem">
             <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
               <i class="fa fa-th-list mr-2"></i>