Mercurial > gemma

changeset 523:e86d6e016bbb

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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;
 }