Mercurial > gemma

changeset 556:09d8e5483851

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fix: Layout for users and user details edited User's role is now rendered as icon sizing flaws removed
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 03 Sep 2018 14:21:31 +0200
parents f66116b3a249
children 009171c1485c
files client/src/components/Sidebar.vue client/src/components/Topbar.vue client/src/components/Userdetail.vue client/src/stores/application.js client/src/views/Users.vue
diffstat 5 files changed, 26 insertions(+), 47 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/Sidebar.vue	Mon Sep 03 12:57:33 2018 +0200
+++ b/client/src/components/Sidebar.vue	Mon Sep 03 14:21:31 2018 +0200
@@ -26,16 +26,7 @@
       return {
         menu: true,
         nav: true,
-        "flex-column": true,
-        "visibility-extended": !this.sidebarCollapsed,
-        "visibility-collapsed": this.sidebarCollapsed
-      };
-    },
-    collapseStyle() {
-      return {
-        collapser: true,
-        collapserextended: !this.sidebarCollapsed,
-        collapsercollapsed: this.sidebarCollapsed
+        "flex-column": true
       };
     },
     sidebarStyle() {
@@ -54,10 +45,6 @@
 <style lang="scss">
 @import "../assets/application.scss";
 
-$sidebar-full-width: 230px;
-$collapser-left-offset: 170px;
-$sidebar-collapsed-width: 0px;
-
 .router-link-exact-active {
   background-color: #f2f2f2;
 }
@@ -66,35 +53,9 @@
   margin-right: $small-offset;
 }
 
-.collapser {
-  position: absolute;
-  top: 0px;
-  z-index: 1000;
-  background-color: #ffffff;
-  font-size: 24px;
-}
-
-.collapserextended {
-  left: $collapser-left-offset;
-  transition: $transition;
-}
-
-.collapsercollapsed {
-  left: 3px;
-  transition: $transition;
-}
-
 .menu {
   height: 90%;
 }
-.visibility-extended {
-  opacity: 100;
-  transition: $transition-slow;
-}
-.visibility-collapsed {
-  opacity: 0;
-  transition: $transition-fast;
-}
 
 .sidebar {
   margin-top: $topbarheight;
@@ -109,12 +70,12 @@
 }
 
 .sidebarcollapsed {
-  width: $sidebar-collapsed-width;
   transition: $transition;
+  left: -250px;
 }
 
 .sidebarextended {
-  width: $sidebar-full-width;
   transition: $transition;
+  left: 0;
 }
 </style>
--- a/client/src/components/Topbar.vue	Mon Sep 03 12:57:33 2018 +0200
+++ b/client/src/components/Topbar.vue	Mon Sep 03 14:21:31 2018 +0200
@@ -29,7 +29,9 @@
   background-color: white;
   z-index: 100;
 }
-
+.menubutton {
+  cursor: pointer;
+}
 .searchcontainer {
   margin-left: auto;
 }
--- a/client/src/components/Userdetail.vue	Mon Sep 03 12:57:33 2018 +0200
+++ b/client/src/components/Userdetail.vue	Mon Sep 03 14:21:31 2018 +0200
@@ -1,5 +1,5 @@
 <template>
-  <div class="userdetails shadown fadeIn animated">
+  <div class="userdetails shadow fadeIn animated">
     <div class="card">
       <div class="card-header shadow-sm text-white bg-info mb-3">
         {{ this.cardHeader }}
--- a/client/src/stores/application.js	Mon Sep 03 12:57:33 2018 +0200
+++ b/client/src/stores/application.js	Mon Sep 03 14:21:31 2018 +0200
@@ -30,6 +30,9 @@
     },
     resetSidebar: state => {
       state.sidebar.iscollapsed = defaultCollapseState;
+    },
+    collapseSidebar: state => {
+      state.sidebar.iscollapsed = true;
     }
   },
   actions: {}
--- a/client/src/views/Users.vue	Mon Sep 03 12:57:33 2018 +0200
+++ b/client/src/views/Users.vue	Mon Sep 03 14:21:31 2018 +0200
@@ -39,9 +39,16 @@
                     <td>{{ user.user }}</td>
                     <td>{{ user.country }}</td>
                     <td>{{ user.email}}</td>
-                    <td>{{ user.role }}</td>
                     <td>
-                      <i @click="deleteUser(user.user)" class="fa fa-trash-o"></i>
+                      <i :class="{
+                        fa:true,
+                        icon:true, 
+                        'fa-user':user.role==='waterway_user',
+                        'fa-star':user.role=='sys_admin',
+                        'fa-adn':user.role==='waterway_admin'}"></i>
+                    </td>
+                    <td>
+                      <i @click="deleteUser(user.user)" class="icon fa fa-trash-o"></i>
                     </td>
                   </tr>
                 </tbody>
@@ -87,10 +94,15 @@
   padding-bottom: $offset;
 }
 
+.icon {
+  font-size: large;
+}
+
 .userlist {
   margin-top: $topbarheight;
   margin-right: $offset;
   min-width: 520px;
+  height: 100%;
 }
 
 .pagination {
@@ -98,7 +110,7 @@
   margin-right: auto;
 }
 .userlistsmall {
-  width: 35vw;
+  width: 30vw;
 }
 
 .userlistextended {
@@ -153,6 +165,7 @@
   },
   computed: {
     ...mapGetters("usermanagement", ["isUserDetailsVisible"]),
+    ...mapGetters("application", ["sidebarCollapsed"]),
     users() {
       let users = [...this.$store.getters["usermanagement/users"]];
       users.sort((a, b) => {