Mercurial > gemma
changeset 630:855cca0142ec
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) => {