vikunja/frontend
Archived
6
39
Fork 48
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

New design #14

Merged
konrad merged 43 commits from new-design into master 2018-12-25 15:03:52 +00:00
Conversation 0 Commits 43 Files Changed 51 +88 -86
4 changed files with 88 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit fc688ecbba - Show all commits

162
src/App.vue
View File

@ -7,97 +7,95 @@
</router-link>
</div>
</nav>
<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="column is-centered">
<div v-if="user.authenticated">
<div class="columns app-container">
<div class="column is-2 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>
<router-link :to="{ name: 'home'}">
<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>
<router-link :to="{ name: 'home'}">
<span class="icon">
<icon icon="calendar"/>
</span>
Overview
</router-link>
</li>
<li>
<router-link :to="{ name: 'listTeams'}">
<span class="icon">
<icon icon="users"/>
</span>
Teams
</router-link>
</li>
<li>
<router-link :to="{ name: 'newNamespace'}">
<span class="icon">
<icon icon="layer-group"/>
</span>
New Namespace
</router-link>
</li>
</ul>
</div>
<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 v-tooltip.right="'Settings'" :to="{name: 'editNamespace', params: {id: n.id} }" class="nsettings" v-if="n.id > 0">
<span class="icon">
<icon icon="calendar"/>
<icon icon="cog"/>
</span>
Overview
</router-link>
</li>
<li>
<router-link :to="{ name: 'listTeams'}">
</router-link>
<router-link v-tooltip="'Add a new list in the ' + n.name + ' namespace'" :to="{ name: 'newList', params: { id: n.id} }" class="nsettings" :key="n.id + 'newList'" v-if="n.id > 0">
<span class="icon">
<icon icon="users"/>
<icon icon="plus"/>
</span>
Teams
</router-link>
</li>
<li>
<router-link :to="{ name: 'newNamespace'}">
<span class="icon">
<icon icon="layer-group"/>
</span>
New Namespace
</router-link>
</li>
</ul>
</div>
<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 v-tooltip.right="'Settings'" :to="{name: 'editNamespace', params: {id: n.id} }" class="nsettings" v-if="n.id > 0">
<span class="icon">
<icon icon="cog"/>
</span>
</router-link>
<router-link v-tooltip="'Add a new list in the ' + n.name + ' namespace'" :to="{ name: 'newList', params: { id: n.id} }" class="nsettings" :key="n.id + 'newList'" v-if="n.id > 0">
<span class="icon">
<icon icon="plus"/>
</span>
</router-link>
<div class="menu-label">
{{n.name}}
</div>
</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-10 app-content" :class="{'fullpage-overlay': fullpage}">
<a class="mobile-overlay" v-if="mobileMenuActive" @click="mobileMenuActive = false"></a>
<transition name="fade">
<router-view/>
</transition>
</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>
<div v-else>
<div class="container has-text-centered">
<div class="column is-4 is-offset-4">
<img src="/images/logo-full.svg"/>
<router-view/>
</div>
<div class="app-content" :class="{'fullpage-overlay': fullpage}">
<a class="mobile-overlay" v-if="mobileMenuActive" @click="mobileMenuActive = false"></a>
<transition name="fade">
<router-view/>
</transition>
</div>
</div>
</div>
<notifications position="bottom left" />
<div v-else>
<div class="container has-text-centered">
<div class="column is-4 is-offset-4">
<img src="/images/logo-full.svg"/>
<router-view/>
</div>
</div>
</div>
<notifications position="bottom left" />
</div>
</template>

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

@ -27,7 +27,7 @@
<div class="columns">
<div class="column">
<div class="tasks" v-if="this.list.tasks && this.list.tasks.length > 0">
<div class="tasks" v-if="this.list.tasks && this.list.tasks.length > 0" :class="{'short': isTaskEdit}">
<div class="task" v-for="l in list.tasks" v-bind:key="l.id">
<label v-bind:for="l.id">
<div class="fancycheckbox">

6
src/styles/general.scss
View File

@ -45,6 +45,7 @@
bottom: 0;
top: $navbar-height + 0.75rem;
overflow-x: auto;
width: 17vw;
@media screen and (max-width: $tablet) {
padding: 0 0 1em;
@ -180,11 +181,10 @@
}
.app-content{
padding: 1.5em;
padding: $navbar-height + 2.5rem 1.5em 0 1.5em;
z-index: 2;
background: url('../public/images/llama-upside-down.svg') no-repeat top right darken(#fff, 4);
margin-left: 16.66666%;
margin-top: $navbar-height + 0.75rem;
margin-left: 17vw;
@media screen and (max-width: $tablet) {
margin-left: 0;

4
src/styles/tasks.scss
View File

@ -8,6 +8,10 @@
padding: 0;
text-align: left;
max-width: 80vw;
&.short{
max-width: 53vw;
}
@media screen and (max-width: $tablet) {
max-width: 100%;