Frontend desing improvements (#28)

src/App.vue

@@ -1,30 +1,41 @@
 <template>
 	<div id="app">
-		<nav class="navbar is-dark is-fixed-top" role="navigation" aria-label="main navigation" v-if="user.authenticated">
+		<nav class="navbar main-theme is-fixed-top" role="navigation" aria-label="main navigation" v-if="user.authenticated">
 			<div class="navbar-brand">
 				<router-link :to="{name: 'home'}" class="navbar-item logo">
-					<img src="/images/logo-full-white.svg"/>
+					<img src="/images/logo-full.svg" alt="Vikunja"/>
 				</router-link>
 			</div>
+			<div class="navbar-end">
+				<div class="user">
+					<img :src="gravatar()" class="avatar" alt=""/>
+					<div class="dropdown is-right is-active">
+						<div class="dropdown-trigger">
+							<button class="button noshadow" @click="userMenuActive = !userMenuActive">
+								<span>{{user.infos.username}}</span>
+								<span class="icon is-small">
+									<icon icon="chevron-down"/>
+								</span>
+							</button>
+						</div>
+						<transition name="fade">
+							<div class="dropdown-menu" v-if="userMenuActive">
+								<div class="dropdown-content">
+									<a @click="logout()" class="dropdown-item">
+										Logout
+									</a>
+								</div>
+							</div>
+						</transition>
+					</div>
+				</div>
+			</div>
 		</nav>
 		<div v-if="user.authenticated">
 			<a @click="mobileMenuActive = true" class="mobilemenu-show-button" v-if="!mobileMenuActive"><icon icon="bars"></icon></a>
 			<a @click="mobileMenuActive = false" class="mobilemenu-hide-button" v-if="mobileMenuActive"><icon icon="times"></icon></a>
 			<div class="app-container">
 				<div class="namespace-container" :class="{'is-active': mobileMenuActive}">
-					<div class="menu top-menu">
-						<ul class="menu-list user">
-							<li>
-								<img :src="gravatar()" class="is-rounded" alt=""/>
-								<span class="username">{{user.infos.username}}</span>
-								<a @click="logout()" class="logout-icon">
-									<span class="icon is-medium">
-										<icon icon="power-off" size="2x"/>
-									</span>
-								</a>
-							</li>
-						</ul>
-					</div>
 					<div class="menu top-menu">
 						<ul class="menu-list">
 							<li>
@@ -140,6 +151,7 @@
 				mobileMenuActive: false,
 				fullpage: false,
 				currentDate: new Date(),
+				userMenuActive: false,
 			}
 		},
 		beforeMount() {

src/main.js

@@ -42,6 +42,7 @@ import { faPowerOff } from '@fortawesome/free-solid-svg-icons'
 import { faCalendarWeek } from '@fortawesome/free-solid-svg-icons'
 import { faExclamation } from '@fortawesome/free-solid-svg-icons'
 import { faTags } from '@fortawesome/free-solid-svg-icons'
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
 import { faTimesCircle } from '@fortawesome/free-regular-svg-icons'
 import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -68,6 +69,7 @@ library.add(faCalendarWeek)
 library.add(faCalendarAlt)
 library.add(faExclamation)
 library.add(faTags)
+library.add(faChevronDown)
 
 Vue.component('icon', FontAwesomeIcon)
 

src/styles/_variables.scss

@@ -16,12 +16,17 @@ $navbar-item-active-color: $primary;
 $dropdown-content-shadow: none;
 $navbar-dropdown-boxed-shadow: $dropdown-content-shadow;
 $bulmaswatch-import-font: false !default;
+$light-background: #F1F5F8;
 
 $vikunja-font: 'Quicksand', sans-serif;
 $vikunja-light-text: darken(#fff, 10%);
 $vikunja-blue: #7F23FF;// #7F23FF; // #5974d9
 $vikunja-green: #4DB788;
-$navbar-padding: 1.5em;
+
+$navbar-padding: 2em;
+$vikunja-nav-background: $light-background;
+$vikunja-nav-color: lighten($black, 25);
+$vikunja-nav-selected-width: 0.4em;
 
 $transition: 150ms ease;
 

src/styles/general.scss

@@ -35,10 +35,9 @@
   }
 
   .namespace-container{
-    background: $vikunja-blue;
+    background: $vikunja-nav-background;
-    box-shadow: 0 0 1em darken(#fff, 30%);
     z-index: 3;
-    color: $vikunja-light-text;
+    color: $vikunja-nav-color;
     padding: 0;
     transition: all $transition;
     position: fixed;
@@ -60,14 +59,10 @@
       }
     }
 
-    .namespaces-lists{
-      border-top: 1px solid darken($vikunja-blue, 6);
-    }
-
     .menu{
       .menu-label {
         font-size: 1em;
-        font-weight: 400;
+        font-weight: 700;
         min-height: 2.5em;
         padding-top: $navbar-padding * 0.3;
 
@@ -90,29 +85,36 @@
       }
 
       .menu-label,.nsettings,.menu-list a{
-        color: $vikunja-light-text;
+        color: $vikunja-nav-color;
       }
 
       .menu-label{
+        color: $grey;
+        font-weight: 500;
         padding-left: $navbar-padding;
       }
 
       .menu-list {
         li {
-          height: 36px;
+          height: 44px;
         }
 
         a {
-          padding-left: $navbar-padding * 2;
+          padding: 0.75em 1em 0.75em $navbar-padding * 1.5;
           transition: all 0.2s ease;
 
+          -webkit-border-radius: 0;
+          -moz-border-radius: 0;
+          border-radius: 0;
           white-space: nowrap;
           text-overflow: ellipsis;
           overflow: hidden;
           display: inline-block;
           width: 100%;
+          border-left: $vikunja-nav-selected-width solid transparent;
 
           .icon {
+            color: lighten($vikunja-nav-color, 20);
             height: 1rem;
             vertical-align: middle;
             padding-bottom: 4px;
@@ -120,62 +122,33 @@
           }
 
           &.router-link-exact-active {
-            background: darken($vikunja-blue, 5%);
+            color: $primary;
+            border-left: $vikunja-nav-selected-width solid darken($primary, 5%);
+            .icon {
+              color: $primary;
+            }
           }
 
           &:hover {
-            background: darken($vikunja-blue, 3%);
+            background: $white;
-          }
+            border-left: $vikunja-nav-selected-width solid darken($primary, 3%);
-        }
-
-        &.user{
-          padding: 0 0.5em 1em 1em;
-          border-bottom: 1px solid #6d04ff;
-
-          li{
-            height: auto;
-          }
-
-          img.is-rounded{
-            border-radius: 100%;
-            vertical-align: middle;
-            margin-top: -20px;
-            display: inline-block;
-          }
-
-          .username{
-            font-family: $vikunja-font;
-            font-weight: bold;
-            font-size: 1.5em;
-            padding-left: 0.5em;
-            margin-top: 20px;
-
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            width: calc(100% - 103px - 1em);
-            display: inline-block;
-          }
-
-          a.logout-icon{
-            float: right;
-            width: 53px;
-            margin-top: 15px;
-
-            &:hover, &:focus{
-              color: lighten($light, 80);
-              background: transparent;
-            }
           }
         }
       }
     }
 
     .top-menu {
-      margin: $navbar-padding 0;
+      margin: $navbar-padding / 2 0 $navbar-padding;
 
-      .menu-list a {
+      .menu-list {
-        padding-left: $navbar-padding;
+        li {
+          font-weight: 500;
+          font-family: $vikunja-font;
+        }
+
+        a {
+          padding-left: 2em;
+        }
       }
     }
   }
@@ -183,7 +156,7 @@
   .app-content{
     padding: $navbar-height + 1.5rem 1.5em 0 1.5em;
     z-index: 2;
-    background: url('../public/images/llama-upside-down.svg') no-repeat top right darken(#fff, 4);
+    background: url('../public/images/llama-upside-down.svg') no-repeat top right $light-background;
     margin-left: 17vw;
 
     @media screen and (max-width: $tablet) {
@@ -198,6 +171,54 @@
   }
 }
 
+.navbar .user{
+  padding: 1em 0.5em 0;
+
+  span {
+    font-family: $vikunja-font;
+  }
+
+  .avatar {
+    -webkit-border-radius: 100%;
+    -moz-border-radius: 100%;
+    border-radius: 100%;
+    vertical-align: middle;
+    height: 40px;
+  }
+
+  .logout-icon {
+    color: lighten($black, 10);
+
+    .icon {
+      vertical-align: middle;
+    }
+  }
+
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity 150ms;
+  }
+  .fade-enter, .fade-leave-to {
+    opacity: 0;
+  }
+
+  .dropdown-trigger .button {
+    background: none;
+
+    &:focus:not(:active), &:active{
+      outline: none !important;
+      -webkit-box-shadow: none !important;
+      -moz-box-shadow: none !important;
+      box-shadow: none !important;
+    }
+  }
+
+  .dropdown-menu {
+    .dropdown-content {
+      box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
+    }
+  }
+}
+
 .mobilemenu-hide-button,.mobilemenu-show-button{
   display: none;
   position: fixed;

src/styles/theme.scss

@@ -217,7 +217,7 @@
 }
 
 body {
-  background: url('../public/images/llama.svg') no-repeat bottom left fixed darken(#fff, 4);
+  background: url('../public/images/llama.svg') no-repeat bottom left fixed $light-background;
   min-height: 100vh;
 }
 
@@ -237,3 +237,7 @@ h1,h2,h3,h4,h5,h6{
 .buttonright {
   margin-right: 0.5rem;
 }
+
+.navbar.main-theme {
+  background: $light-background;
+}

todo.md

@@ -34,6 +34,8 @@
 * [x] Google fonts raus (sollen von lokal geladen werden)
 * [x] Ladeanimationen erst nach 100ms anzeigen, sonst wird das überflüssigerweise angezeigt
 * [x] Btns für Teams und neuer Namespace nach oben in die Leiste verschieben
+* [ ] Card-like overview of all lists with the first 3-5 tasks, undone first
+* [ ] Be able to collapse all lists in a namespace by clicking on the menu entry
 
 ## Funktionales
 
@@ -99,7 +101,7 @@
   * [x] Label overview + edit
   	* [x] Only be able to edit labels where the user has the right, disable the others
   * [x] Delay when searching to not search for the character I entered 5 minutes ago
-* [ ] Timeline/Calendar view -> Dazu tasks die in einem Bestimmten Bereich due sind, macht dann das Frontend
+* [ ] Timeline/Calendar view -> Get and show tasks in a range
 
 ## Other features
 
@@ -118,7 +120,7 @@
 * [x] Same improvements also for user sharing
 * [x] Use rights const everywhere
 * [x] Styling of the search dropdown to match the rest of the theme
-* [ ] Use query params when getting tasks in a range
+* [x] Use query params when getting tasks in a range
 
 ## Waiting for backend