Frontend desing improvements (#28)
This commit is contained in:
konrad
Gitea
parent
2631b39678
commit
ad6ba80021
6 changed files with 123 additions and 77 deletions
42
src/App.vue
42
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() {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -35,10 +35,9 @@
|
|||
}
|
||||
|
||||
.namespace-container{
|
||||
background: $vikunja-blue;
|
||||
box-shadow: 0 0 1em darken(#fff, 30%);
|
||||
background: $vikunja-nav-background;
|
||||
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%);
|
||||
}
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
background: $white;
|
||||
border-left: $vikunja-nav-selected-width solid darken($primary, 3%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-menu {
|
||||
margin: $navbar-padding 0;
|
||||
margin: $navbar-padding / 2 0 $navbar-padding;
|
||||
|
||||
.menu-list a {
|
||||
padding-left: $navbar-padding;
|
||||
.menu-list {
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
6
todo.md
6
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
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue