ami/tl-vikunja
1
0
Fork 0
Code Activity

Added logo & Top bar

Browse Source
This commit is contained in:
konrad
2018-09-09 17:23:06 +02:00
parent 5f80cef54f
commit aeff748cc8
6 changed files with 3441 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/App.vue
View File

@ -1,7 +1,33 @@
<template>
<div id="app" class="container">
<div class="column is-centered" v-if="user.authenticated">
<button v-on:click="logout()" class="button is-right">Logout</button>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-menu">
<div class="navbar-brand">
<div class="navbar-item logo">
<img src="logo-full.svg"/>
</div>
</div>
<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"/>
</span>
</a>
</div>
</div>
</nav>
<div class="columns" v-if="user.authenticated">
<div class="column">
</div>
<div class="column is-2 is-right has-text-right">
</div>
</div>
<div class="column is-centered">
<div class="box" v-if="user.authenticated">
@ -65,6 +91,9 @@
logout() {
auth.logout()
},
gravatar() {
return 'https://www.gravatar.com/avatar/' + this.user.infos.avatar + '?s=50'
},
loadNamespaces() {
this.loading = true
this.namespaces = []
@ -107,7 +136,7 @@
}
</script>
<style>
<style lang="scss" >
*, *:focus, *:active{
outline: none;
}
@ -183,4 +212,24 @@
transform: rotate(360deg);
}
}
/* Logout-icon */
.logout-icon {
padding-right: 2em !important;
}
/* Navbar */
.navbar{
background: none !important;
}
.logo {
padding-left: 2rem !important;
img {
max-height: 3rem !important;
margin-right: 1rem;
}
}
</style>

9
src/main.js
View File

@ -11,6 +11,15 @@ Vue.config.productionTip = false
import Notifications from 'vue-notification'
Vue.use(Notifications)
// Icons
import { library } from '@fortawesome/fontawesome-svg-core'
import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faSignOutAlt)
Vue.component('icon', FontAwesomeIcon)
// Check the user's auth status when the app starts
auth.checkAuth()