Design improvments (closes #4)
This commit is contained in:
kolaente
parent
23dc41b501
commit
95b8178496
GPG key ID:
F40E70337AB24C9B
11 changed files with 370 additions and 141 deletions
124
src/App.vue
124
src/App.vue
|
|
@ -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>
|
||||
|
|
|
|||
Reference in a new issue