Mercurial > gemma

changeset 551:89bc8111563a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: Layout adjustments
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 31 Aug 2018 14:12:00 +0200
parents 06907c875077
children ac61b03c0eaf
files client/src/App.vue client/src/components/Maplayer.vue client/src/components/Sidebar.vue client/src/components/Topbar.vue client/src/components/Userdetail.vue client/src/views/Main.vue client/src/views/Users.vue
diffstat 7 files changed, 52 insertions(+), 39 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/App.vue	Fri Aug 31 12:11:38 2018 +0200
+++ b/client/src/App.vue	Fri Aug 31 14:12:00 2018 +0200
@@ -1,5 +1,7 @@
 <template>
-  <div id="app">
+  <div id="app main d-flex flex-column">
+    <Topbar></Topbar>
+    <Sidebar></Sidebar>
     <router-view/>
   </div>
 </template>
@@ -26,3 +28,15 @@
   color: #2c3e50;
 }
 </style>
+
+<script>
+import Sidebar from "./components/Sidebar";
+import Topbar from "./components/Topbar";
+export default {
+  name: "app",
+  components: {
+    Sidebar,
+    Topbar
+  }
+};
+</script>
--- a/client/src/components/Maplayer.vue	Fri Aug 31 12:11:38 2018 +0200
+++ b/client/src/components/Maplayer.vue	Fri Aug 31 14:12:00 2018 +0200
@@ -23,12 +23,13 @@
 }
 
 #map {
-  height: 96vh;
+  margin-top: $topbarheight;
+  height: 100-$topbarheight;
 }
 
 .layerselection {
   position: absolute;
-  top: $topbarheight;
+  top: 40px + $small-offset;
   margin-top: $small-offset;
   right: $small-offset;
   min-height: 20%;
--- a/client/src/components/Sidebar.vue	Fri Aug 31 12:11:38 2018 +0200
+++ b/client/src/components/Sidebar.vue	Fri Aug 31 14:12:00 2018 +0200
@@ -91,7 +91,7 @@
   margin-top: $topbarheight;
   background-color: #ffffff;
   padding-top: $large-offset;
-  height: 95vh;
+  height: 100vh-$topbarheight;
 }
 
 .overlay {
--- a/client/src/components/Topbar.vue	Fri Aug 31 12:11:38 2018 +0200
+++ b/client/src/components/Topbar.vue	Fri Aug 31 14:12:00 2018 +0200
@@ -22,17 +22,19 @@
 <style lang="scss">
 @import "../assets/application.scss";
 .topbar {
-  min-height: 38px;
+  position: absolute;
+  width: 100vw;
   height: $topbarheight;
+  min-height: 40px;
+  background-color: white;
+  z-index: 100;
 }
 
 .searchcontainer {
-  min-width: 300px;
   margin-left: auto;
 }
 
 .usermanagement {
-  min-width: 300px;
   margin-left: auto;
 }
 .logout {
@@ -60,7 +62,7 @@
 }
 
 .searchbar {
-  width: 50vw;
+  width: 30vw;
   border: 1px solid;
   border-color: #aaaaaa;
   border-radius: 10px;
--- a/client/src/components/Userdetail.vue	Fri Aug 31 12:11:38 2018 +0200
+++ b/client/src/components/Userdetail.vue	Fri Aug 31 14:12:00 2018 +0200
@@ -74,8 +74,8 @@
 }
 
 .userdetails {
-  margin-top: $large-offset;
-  width: 48vw;
+  margin-top: $topbarheight;
+  min-width: 40vw;
   margin-right: auto;
   height: 100%;
 }
--- a/client/src/views/Main.vue	Fri Aug 31 12:11:38 2018 +0200
+++ b/client/src/views/Main.vue	Fri Aug 31 14:12:00 2018 +0200
@@ -1,18 +1,11 @@
 <template>
-  <div class="main d-flex flex-column">
-    <Topbar></Topbar>
-    <Sidebar></Sidebar>
-    <Maplayer :lat="6155376" :long="1819178" :zoom="11"></Maplayer>
-  </div>
+    <div class="main d-flex flex-column">
+        <Maplayer :lat="6155376" :long="1819178" :zoom="11"></Maplayer>
+    </div>
 </template>
 
 <style lang="scss">
 @import "../assets/application.scss";
-.topbar {
-  background-color: white;
-  height: $topbarheight;
-  z-index: 10;
-}
 
 .menubutton {
   margin-left: $small-offset;
@@ -21,14 +14,11 @@
 
 <script>
 import Maplayer from "../components/Maplayer";
-import Sidebar from "../components/Sidebar";
-import Topbar from "../components/Topbar";
+
 export default {
   name: "mainview",
   components: {
-    Maplayer,
-    Sidebar,
-    Topbar
+    Maplayer
   }
 };
 </script>
--- a/client/src/views/Users.vue	Fri Aug 31 12:11:38 2018 +0200
+++ b/client/src/views/Users.vue	Fri Aug 31 14:12:00 2018 +0200
@@ -1,7 +1,5 @@
 <template>
   <div class="main d-flex flex-column">
-    <Topbar></Topbar>
-    <Sidebar></Sidebar>
     <div class="d-flex content flex-column">
       <div class="d-flex flex-row">
         <div :class="userlistStyle">
@@ -49,16 +47,16 @@
                 </tbody>
               </table>
             </div>
-            <div>
-              <i @click="prevPage" v-if="this.currentPage!=1" class="pages fa fa-caret-left"></i> {{this.currentPage}} / {{this.pages}}
-              <i @click="nextPage" class="pages fa fa-caret-right"></i>
+            <div class="d-flex flex-row pagination">
+              <i @click=" prevPage " v-if="this.currentPage!=1 " class="backwards btn btn-sm btn-light align-self-center pages fa fa-caret-left "></i> {{this.currentPage}} / {{this.pages}}
+              <i @click="nextPage " class="forwards btn btn-sm btn-light align-self-center pages fa fa-caret-right "></i>
             </div>
-            <div class="adduser">
-              <button @click="addUser" class="btn btn-info pull-right shadow-sm">Add User</button>
+            <div class="adduser ">
+              <button @click="addUser " class="btn btn-info pull-right shadow-sm ">Add User</button>
             </div>
           </div>
         </div>
-        <Userdetail v-if="isUserDetailsVisible"></Userdetail>
+        <Userdetail v-if="isUserDetailsVisible "></Userdetail>
       </div>
     </div>
   </div>
@@ -70,6 +68,14 @@
   height: 100vh;
 }
 
+.backwards {
+  margin-right: 0.5rem;
+}
+
+.forwards {
+  margin-left: 0.5rem;
+}
+
 .content {
   margin-top: $large-offset;
   margin-left: auto;
@@ -82,11 +88,15 @@
 }
 
 .userlist {
-  margin-top: $large-offset;
+  margin-top: $topbarheight;
   margin-right: $offset;
   min-width: 520px;
 }
 
+.pagination {
+  margin-left: auto;
+  margin-right: auto;
+}
 .userlistsmall {
   width: 35vw;
 }
@@ -124,8 +134,6 @@
 </style>
 
 <script>
-import Sidebar from "../components/Sidebar";
-import Topbar from "../components/Topbar";
 import Userdetail from "../components/Userdetail";
 import store from "../store";
 import { mapGetters } from "vuex";
@@ -141,9 +149,7 @@
     };
   },
   components: {
-    Sidebar,
-    Userdetail,
-    Topbar
+    Userdetail
   },
   computed: {
     ...mapGetters("usermanagement", ["isUserDetailsVisible"]),