ami/tl-vikunja
1
0
Fork 0
Code Activity

Design improvments (closes #4)

Browse Source
This commit is contained in:
kolaente
2018-11-06 16:53:32 +01:00
parent 23dc41b501
commit 95b8178496
11 changed files with 370 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
src/App.vue
View File

@ -1,71 +1,71 @@
<template>
<div id="app" class="container">
<nav class="navbar" 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.svg"/>
</router-link>
</div>
<div class="navbar-menu">
<div class="navbar-end">
<span class="navbar-item">{{user.infos.username}}</span>
<span class="navbar-item image">
<img :src="gravatar()" class="is-rounded" alt=""/>
</span>
<a v-on:click="logout()" class="navbar-item is-right logout-icon">
<span class="icon is-medium">
<icon icon="sign-out-alt" size="2x"/>
<div id="app">
<nav class="navbar is-dark" role="navigation" aria-label="main navigation" v-if="user.authenticated">
<div class="container">
<div class="navbar-brand">
<router-link :to="{name: 'home'}" class="navbar-item logo">
<img src="images/logo-full-white.svg"/>
</router-link>
</div>
<div class="navbar-menu">
<div class="navbar-end">
<span class="navbar-item">{{user.infos.username}}</span>
<span class="navbar-item image">
<img :src="gravatar()" class="is-rounded" alt=""/>
</span>
</a>
<a v-on:click="logout()" class="navbar-item is-right logout-icon">
<span class="icon is-medium">
<icon icon="sign-out-alt" size="2x"/>
</span>
</a>
</div>
</div>
</div>
</nav>
<div class="column is-centered">
<div v-if="user.authenticated">
<div class="box">
<div class="columns">
<div class="column is-3">
<router-link :to="{name: 'listTeams'}" class="button is-primary is-fullwidth button-bottom">
<span class="icon is-small">
<icon icon="users"/>
</span>
Teams
</router-link>
<router-link :to="{name: 'newNamespace'}" class="button is-success is-fullwidth button-bottom">
<span class="icon is-small">
<icon icon="layer-group"/>
</span>
New Namespace
</router-link>
<aside class="menu namespaces-lists">
<p class="menu-label" v-if="loading">Loading...</p>
<template v-for="n in namespaces">
<div :key="n.id">
<router-link :to="{name: 'editNamespace', params: {id: n.id} }" class="nsettings">
<span class="icon">
<icon icon="cog"/>
</span>
</router-link>
<router-link :to="{ name: 'newList', params: { id: n.id} }" class="is-success nsettings" :key="n.id + 'newList'">
<span class="icon">
<icon icon="plus"/>
</span>
</router-link>
<div class="menu-label">
{{n.name}}
</div>
<div class="column is-centered container">
<div class="box shadow" v-if="user.authenticated">
<div class="columns">
<div class="column is-3">
<router-link :to="{name: 'listTeams'}" class="button is-primary is-fullwidth button-bottom">
<span class="icon is-small">
<icon icon="users"/>
</span>
Teams
</router-link>
<router-link :to="{name: 'newNamespace'}" class="button is-success is-fullwidth button-bottom">
<span class="icon is-small">
<icon icon="layer-group"/>
</span>
New Namespace
</router-link>
<aside class="menu namespaces-lists">
<p class="menu-label" v-if="loading">Loading...</p>
<template v-for="n in namespaces">
<div :key="n.id">
<router-link :to="{name: 'editNamespace', params: {id: n.id} }" class="nsettings">
<span class="icon">
<icon icon="cog"/>
</span>
</router-link>
<router-link :to="{ name: 'newList', params: { id: n.id} }" class="is-success nsettings" :key="n.id + 'newList'">
<span class="icon">
<icon icon="plus"/>
</span>
</router-link>
<div class="menu-label">
{{n.name}}
</div>
<ul class="menu-list" :key="n.id + 'child'">
<li v-for="l in n.lists" :key="l.id">
<router-link :to="{ name: 'showList', params: { id: l.id} }">{{l.title}}</router-link>
</li>
</ul>
</template>
</aside>
</div>
<div class="column is-9">
<router-view/>
</div>
</div>
<ul class="menu-list" :key="n.id + 'child'">
<li v-for="l in n.lists" :key="l.id">
<router-link :to="{ name: 'showList', params: { id: l.id} }">{{l.title}}</router-link>
</li>
</ul>
</template>
</aside>
</div>
<div class="column is-9">
<router-view/>
</div>
</div>
</div>

2
src/components/lists/EditList.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="loader-container" v-bind:class="{ 'is-loading': loading}">
<div class="card">
<header class="card-header">
<p class="card-header-title">

8
src/components/lists/ShowList.vue
View File

@ -1,11 +1,5 @@
<template>
<div>
<div class="full-loader-wrapper" v-if="loading">
<div class="half-circle-spinner">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
</div>
</div>
<div class="loader-container" v-bind:class="{ 'is-loading': loading}">
<div class="content">
<router-link :to="{ name: 'editList', params: { id: list.id } }" class="icon settings is-medium">
<icon icon="cog" size="2x"/>

2
src/components/namespaces/EditNamespace.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="loader-container" v-bind:class="{ 'is-loading': loading}">
<div class="card">
<header class="card-header">
<p class="card-header-title">

2
src/components/teams/EditTeam.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="loader-container" v-bind:class="{ 'is-loading': loading}">
<div class="card" v-if="userIsAdmin">
<header class="card-header">
<p class="card-header-title">

2
src/components/teams/ListTeams.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="content">
<div class="content loader-container" v-bind:class="{ 'is-loading': loading}">
<router-link :to="{name:'newTeam'}" class="button is-success button-right" >
New Team
</router-link>

98
src/vikunja.scss
View File

@ -13,7 +13,7 @@
}
body {
background: url('../public/images/background.jpg') fixed repeat #f5f5f5;
background: url('../public/images/llama.svg') no-repeat bottom right fixed darken(#fff, 7%);
min-height: 100vh;
}
@ -22,73 +22,6 @@ h1,h2,h3,h4,h5,h6{
font-weight: 400 !important;
}
/* spinner */
.fullscreen-loader-wrapper {
position: fixed;
background: rgba(250,250,250,0.8);
z-index: 5;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
width: 78%;
height: 100%;
margin: -1em auto;
}
.full-loader-wrapper{
background: rgba(250,250,250,0.8);
position: absolute;
width: 78%;
height: 100%;
margin: -1em auto;
}
.half-circle-spinner, .half-circle-spinner * {
box-sizing: border-box;
}
.half-circle-spinner {
width: 60px;
height: 60px;
border-radius: 100%;
position: relative;
left: calc(50% - 30px);
top: calc(50% - 30px);
}
.half-circle-spinner .circle {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
border: calc(60px / 10) solid transparent;
}
.half-circle-spinner .circle.circle-1 {
border-top-color: #4CAF50;
animation: half-circle-spinner-animation 1s infinite;
}
.half-circle-spinner .circle.circle-2 {
border-bottom-color: #4CAF50;
animation: half-circle-spinner-animation 1s infinite alternate;
}
@keyframes half-circle-spinner-animation {
0% {
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
/* Logout-icon */
.logout-icon {
padding-right: 2em !important;
@ -191,4 +124,33 @@ h1,h2,h3,h4,h5,h6{
.settings{
float: right;
color: rgb(74, 74, 74);
}
.column.container {
padding:0;
.box.shadow {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
box-shadow: 2px 2px 5px lighten(#000, 85%);
}
}
/* Loading spinner */
.loader-container {
&.is-loading {
position: relative;
pointer-events: none;
opacity: 0.5;
&:after {
@include loader;
position: absolute;
top: calc(50% - 2.5em);
left: calc(50% - 2.5em);
width: 5em;
height: 5em;
border-width: 0.25em;
}
}
}