Mercurial > gemma

changeset 630:855cca0142ec

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: Usermanagement now flexible sidebar layout In order to prevent overlapping of sidebar and content a spacer is for a small viewport width added and collapsed accordingly to the sidebar.
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 12 Sep 2018 16:11:05 +0200
parents 8278b2fb0c33
children 13bccabbf7c5
files client/src/application/Sidebar.vue client/src/application/Topbar.vue client/src/application/User.vue client/src/application/assets/application.scss client/src/map/Maplayer.vue client/src/usermanagement/Usermanagement.vue
diffstat 6 files changed, 53 insertions(+), 11 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/application/Sidebar.vue	Wed Sep 12 12:23:11 2018 +0200
+++ b/client/src/application/Sidebar.vue	Wed Sep 12 16:11:05 2018 +0200
@@ -59,7 +59,7 @@
 }
 
 .menu {
-  padding-top: 5vh;
+  padding-top: $small-offset;
 }
 
 .sidebar {
@@ -83,7 +83,7 @@
 }
 
 .sidebarextended {
-  height: 400px;
-  width: 215px;
+  height: $sidebar-height;
+  width: $sidebar-width;
 }
 </style>
--- a/client/src/application/Topbar.vue	Wed Sep 12 12:23:11 2018 +0200
+++ b/client/src/application/Topbar.vue	Wed Sep 12 16:11:05 2018 +0200
@@ -11,7 +11,7 @@
             </div>
             <input id="search" type="text" class="form-control ui-element search searchbar">
         </div>
-        <div>
+        <div v-if="routeName != 'usermanagement'">
             <i @click="splitScreen" class="ui-element splitscreen fa fa-window-restore shadow"></i>
         </div>
         <Layers v-if="routeName != 'usermanagement'"></Layers>
--- a/client/src/application/User.vue	Wed Sep 12 12:23:11 2018 +0200
+++ b/client/src/application/User.vue	Wed Sep 12 16:11:05 2018 +0200
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <img @click="extendUserMenu" class="ui-element userpic" src="../application/assets/user.png">
+        <img @click="extendUserMenu" class="ui-element userpic shadow" src="../application/assets/user.png">
         <div :class="userManagementStyle">
             <span v-if="!isUsermenuCollapsed" class="username align-self-center">{{ userinfo }}</span>
             <span v-if="!isUsermenuCollapsed" class="logout align-self-center" @click="logoff">
@@ -16,7 +16,8 @@
   position: absolute;
   bottom: $offset;
   left: $offset;
-  height: 45px;
+  height: $icon-width;
+  width: $icon-height;
   border-radius: $border-radius;
 }
 
--- a/client/src/application/assets/application.scss	Wed Sep 12 12:23:11 2018 +0200
+++ b/client/src/application/assets/application.scss	Wed Sep 12 16:11:05 2018 +0200
@@ -10,6 +10,10 @@
 $transition-slow: 3s;
 $smaller: 0.9rem;
 $border-radius: 5px;
+$sidebar-width: 15rem;
+$sidebar-height: 13rem;
+$icon-height: 3rem;
+$icon-width: 3rem;
 
 .debug {
   border: 1px solid red;
--- a/client/src/map/Maplayer.vue	Wed Sep 12 12:23:11 2018 +0200
+++ b/client/src/map/Maplayer.vue	Wed Sep 12 16:11:05 2018 +0200
@@ -13,7 +13,7 @@
 
 .ol-zoom {
   display: flex;
-  left: 15vw;
+  left: 16vw;
   z-index: 5;
   top: 1rem;
   padding: 0.3rem;
--- a/client/src/usermanagement/Usermanagement.vue	Wed Sep 12 12:23:11 2018 +0200
+++ b/client/src/usermanagement/Usermanagement.vue	Wed Sep 12 16:11:05 2018 +0200
@@ -1,5 +1,6 @@
 <template>
-    <div class="main d-flex flex-column">
+    <div class="main d-flex flex-row">
+        <div :class="spacerStyle"></div>
         <div class="d-flex content flex-column">
             <div class="d-flex flex-row">
                 <div :class="userlistStyle">
@@ -72,6 +73,26 @@
 <style lang="scss">
 @import "../application/assets/tooltip.scss";
 
+.spacer {
+  margin-left: $offset;
+  height: 100vh;
+}
+
+.spacer-collapsed {
+  min-width: $icon-width + $offset;
+}
+
+@media screen and (min-width: 600px) {
+  .spacer-expanded {
+    min-width: $icon-width + $offset;
+  }
+}
+@media screen and (max-width: 1650px) {
+  .spacer-expanded {
+    min-width: $sidebar-width + $offset;
+  }
+}
+
 .main {
   height: 100vh;
 }
@@ -84,9 +105,18 @@
   margin-left: $small-offset;
 }
 
-.content {
-  margin-left: auto;
-  margin-right: auto;
+@media screen and (min-width: 600px) {
+  .content {
+    margin-left: $offset;
+    margin-right: auto;
+  }
+}
+
+@media screen and (min-width: 1650px) {
+  .content {
+    margin-left: $sidebar-width;
+    margin-right: auto;
+  }
 }
 
 .adduser {
@@ -166,6 +196,13 @@
   computed: {
     ...mapGetters("usermanagement", ["isUserDetailsVisible"]),
     ...mapGetters("application", ["sidebarCollapsed"]),
+    spacerStyle() {
+      return {
+        spacer: true,
+        "spacer-expanded": !this.sidebarCollapsed,
+        "spacer-collapsed": this.sidebarCollapsed
+      };
+    },
     users() {
       let users = [...this.$store.getters["usermanagement/users"]];
       users.sort((a, b) => {