Mercurial > gemma

changeset 626:d4fa28bfa6ec

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fix: layout minor fixes of buttons and menu
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 11 Sep 2018 17:17:37 +0200
parents 4acf60d1bbb4
children afd5595c8d8b
files client/src/App.vue client/src/application/Main.vue client/src/application/Sidebar.vue client/src/application/Topbar.vue client/src/application/User.vue client/src/layers/Layers.vue client/src/layers/Layerselect.vue client/src/map/Maplayer.vue
diffstat 8 files changed, 42 insertions(+), 33 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/App.vue	Tue Sep 11 17:03:22 2018 +0200
+++ b/client/src/App.vue	Tue Sep 11 17:17:37 2018 +0200
@@ -15,7 +15,7 @@
 
                 </div>
             </div>
-            <div class="bottomcontainer">
+            <div class="bottomcontainer d-flex flex-row align-items-end">
                 <User v-if="isAuthenticated"></User>
             </div>
         </div>
@@ -42,9 +42,7 @@
 }
 
 .bottomcontainer {
-  .top {
-    height: 10vh;
-  }
+  height: 10vh;
 }
 
 .midcontainer {
--- a/client/src/application/Main.vue	Tue Sep 11 17:03:22 2018 +0200
+++ b/client/src/application/Main.vue	Tue Sep 11 17:17:37 2018 +0200
@@ -10,10 +10,6 @@
 <style lang="scss">
 @import "../application/assets/application.scss";
 
-.menubutton {
-  margin-left: $small-offset;
-}
-
 .profile {
   background-color: white;
   height: 50vh;
--- a/client/src/application/Sidebar.vue	Tue Sep 11 17:03:22 2018 +0200
+++ b/client/src/application/Sidebar.vue	Tue Sep 11 17:17:37 2018 +0200
@@ -59,7 +59,8 @@
 }
 
 .sidebar {
-  top: 0;
+  top: 1rem;
+  left: 1rem;
   background-color: #ffffff;
   padding-top: $large-offset;
   opacity: 0.96;
@@ -71,12 +72,10 @@
 }
 
 .sidebarcollapsed {
-  transition: $transition;
-  left: -250px;
+  display: none;
 }
 
 .sidebarextended {
-  transition: $transition;
-  left: 0;
+  display: block;
 }
 </style>
--- a/client/src/application/Topbar.vue	Tue Sep 11 17:03:22 2018 +0200
+++ b/client/src/application/Topbar.vue	Tue Sep 11 17:17:37 2018 +0200
@@ -33,6 +33,7 @@
   background-color: white;
   padding: 0.5rem;
   border-radius: 5px;
+  margin-left: 1rem;
 }
 
 .searchcontainer {
@@ -50,9 +51,8 @@
 }
 
 .topbar {
-  padding-top: 2vh;
-  margin-right: 1vw;
-  margin-left: 0;
+  padding-top: 1rem;
+  margin-right: 1rem;
 }
 
 .logout {
--- a/client/src/application/User.vue	Tue Sep 11 17:03:22 2018 +0200
+++ b/client/src/application/User.vue	Tue Sep 11 17:17:37 2018 +0200
@@ -14,6 +14,7 @@
   margin-left: 1rem;
   padding: 0.25rem;
   border-radius: 5px;
+  margin-bottom: 1rem;
 }
 
 .usermanagementcollapsed {
--- a/client/src/layers/Layers.vue	Tue Sep 11 17:03:22 2018 +0200
+++ b/client/src/layers/Layers.vue	Tue Sep 11 17:17:37 2018 +0200
@@ -1,15 +1,15 @@
 <template>
-  <div class="ui-element card layerselection shadow">
-    <div class="card-body">
-      <div class="headline">
-        <h4 class="card-title">Layers</h4>
-      </div>
-      <hr>
-      <div class="d-flex flex-column">
-        <Layerselect :layerindex="index" :layername="layer.name" v-for="(layer, index) in layers" :key="layer.name" :isVisible="layer.isVisible" @visibilityToggled="visibilityToggled"></Layerselect>
-      </div>
+    <div class="ui-element card layerselection shadow">
+        <div class="card-body">
+            <div class="headline">
+                <h4 class="card-title">Layers</h4>
+            </div>
+            <hr>
+            <div class="d-flex flex-column">
+                <Layerselect :layerindex="index" :layername="layer.name" v-for="(layer, index) in layers" :key="layer.name" :isVisible="layer.isVisible" @visibilityToggled="visibilityToggled"></Layerselect>
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <style lang="scss">
@@ -18,6 +18,7 @@
 .layerselection {
   background-color: white;
   margin-left: 0.5rem;
+  padding: 0.5rem;
 }
 </style>
 
--- a/client/src/layers/Layerselect.vue	Tue Sep 11 17:03:22 2018 +0200
+++ b/client/src/layers/Layerselect.vue	Tue Sep 11 17:17:37 2018 +0200
@@ -1,12 +1,17 @@
 <template>
-  <div class="form-check d-flex flex-row">
-    <input class="form-check-input" @change="visibilityToggled" :id="layername" type="checkbox" :checked="isVisible">
-    <label class="form-check-label" :for="layername">{{this.layername}}</label>
-  </div>
+    <div class="form-check d-flex flex-row flex-start selection">
+        <input class="form-check-input" @change="visibilityToggled" :id="layername" type="checkbox" :checked="isVisible">
+        <label class="layername form-check-label" :for="layername">{{this.layername}}</label>
+    </div>
 </template>
 
-<style lang="sass">
-
+<style lang="scss">
+.selection {
+  text-align: left;
+}
+.layername {
+  margin-left: 0.5rem;
+}
 </style>
 
 
--- a/client/src/map/Maplayer.vue	Tue Sep 11 17:03:22 2018 +0200
+++ b/client/src/map/Maplayer.vue	Tue Sep 11 17:17:37 2018 +0200
@@ -16,11 +16,20 @@
 .ol-zoom {
   display: flex;
   left: 15vw;
-  margin-top: 2vh;
   z-index: 5;
+  top: 1rem;
+  padding: 0.3rem;
   background-color: white;
   box-shadow: $basic-shadow;
 }
+
+.ol-attribution {
+  padding: 0.3rem;
+  background-color: white;
+  box-shadow: $basic-shadow;
+  margin-bottom: 1rem;
+  margin-right: 0.3rem;
+}
 </style>
 
 <script>