Mercurial > gemma
changeset 523:e86d6e016bbb
refac: Sidebar menu entries are now adjusted to the left
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 27 Aug 2018 17:23:43 +0200 |
parents | 8e82936b49f7 |
children | 156a805941b5 |
files | client/src/assets/application.scss client/src/components/Sidebar.vue |
diffstat | 2 files changed, 14 insertions(+), 10 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/assets/application.scss Mon Aug 27 17:10:25 2018 +0200 +++ b/client/src/assets/application.scss Mon Aug 27 17:23:43 2018 +0200 @@ -9,7 +9,7 @@ $basic-shadow-light: 1px 1px 12px 1px rgba(235, 235, 235, 0.75); $transition: 0.5s; $transition-fast: 0.1s; -$transition-slow: 2s; +$transition-slow: 3s; %fully-centered { position: absolute;
--- a/client/src/components/Sidebar.vue Mon Aug 27 17:10:25 2018 +0200 +++ b/client/src/components/Sidebar.vue Mon Aug 27 17:23:43 2018 +0200 @@ -2,18 +2,17 @@ <div :class="sidebarStyle"> <div :class="collapseStyle"><i @click="collapse" :class="collapseicon"></i></div> <nav :class="menuStyle"> - <router-link to="/">Riverbed Morphology</router-link> - <a class="nav-link" href="#">Link</a> - <a class="nav-link" href="#">Link</a> - <a class="nav-link disabled" href="#">Disabled</a> + <router-link to="/" class="d-flex nav-link">Riverbed Morphology</router-link> + <a class="d-flex nav-link" href="#">Link</a> + <a class="d-flex nav-link" href="#">Link</a> <div v-if="isSysAdmin"> <hr/> - <div class="text-muted">Administration</div> - <router-link to="users">Users</router-link> + <div class="d-flex menupadding text-muted">Administration</div> + <router-link class="d-flex nav-link" to="users">Users</router-link> </div> </nav> <div :class="userinfoStyle"> - <div class="userinfo"> + <div class="menupadding userinfo"> <img class="userpic" src="../assets/user.png"><span class="username">{{ userinfo }}</span> </div> <div> @@ -50,7 +49,7 @@ userinfoStyle() { return { user: true, - "d-inline-flex": true, + "d-flex": true, "visibility-extended": !this.isCollapsed, "visibility-collapsed": this.isCollapsed }; @@ -95,6 +94,10 @@ $collapser-left-offset: 170px; $sidebar-collapsed-width: 0px; +.menupadding { + padding: 0.5rem 1rem; +} + .collapser { position: absolute; top: 0px; @@ -164,7 +167,8 @@ .logout { position: relative; - top: 8px; + top: 16px; + left: -5px; margin-left: $small-offset; cursor: pointer; }