Mercurial > gemma
changeset 556:09d8e5483851
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) => {