<template> <v-app style=" background: -webkit-linear-gradient(bottom right, #E1F3EE 40%, #f3e8e2 60%); background: -moz-linear-gradient(bottom right, #E1F3EE 40%, #f3e8e2 60%); background: linear-gradient(to top left, #E1F3EE 40%, #f3e8e2 60%); background-attachment: fixed; "> <v-navigation-drawer v-if="$route.name && ($route.name.includes('site') || $route.name.includes('admin'))" touchless app v-model="navigationDrawerState" overlay-opacity="0.2" class="elevation-0" overlay-color="white" style="z-index: 50" > <v-list> <v-list-item exact :to="{name:'pub-home'}"> <v-list-item-content class="justify-center"> <v-img :src="require('@/assets/logo.png')" contain class="shrink" max-width="180" transition="scale-transition"></v-img> </v-list-item-content> </v-list-item> <v-list-item v-if="$auth.check()"> <v-list-item-icon> <v-avatar color="primary" size="40" class="text-uppercase black--text text-h5"> {{ _team.name.substr(0, 2) }} </v-avatar> </v-list-item-icon> <v-list-item-content> <v-list-item-title class="text-h5 font-weight-bold"> {{ _team.name }} </v-list-item-title> </v-list-item-content> </v-list-item> <v-list-item exact :to="{name:'site-dashboard'}" v-if="$auth.check('user')" color="primary"> <v-list-item-icon> <v-icon color="primary" large>mdi-view-dashboard</v-icon> </v-list-item-icon> <v-list-item-content> <v-list-item-title class="black--text"> Dashboard </v-list-item-title> </v-list-item-content> </v-list-item> <v-list-item exact :to="{name:'site-kanban'}" v-if="$auth.check('user')" color="primary"> <v-list-item-icon> <v-icon color="primary" large>mdi-view-column</v-icon> </v-list-item-icon> <v-list-item-content> <v-list-item-title class="black--text"> Kanban </v-list-item-title> </v-list-item-content> </v-list-item> <v-list-item exact :to="{name:'site-tasks'}" v-if="$auth.check('user')" color="primary"> <v-list-item-icon> <v-icon color="primary" large>mdi-archive</v-icon> </v-list-item-icon> <v-list-item-content> <v-list-item-title class="black--text"> Backlog </v-list-item-title> </v-list-item-content> </v-list-item> <v-list-item exact :to="{name:'site-settings'}" color="primary" v-if="$auth.check('user')"> <v-list-item-icon> <v-icon color="primary" large>mdi-cog</v-icon> </v-list-item-icon> <v-list-item-content> <v-list-item-title class="black--text"> Settings </v-list-item-title> </v-list-item-content> </v-list-item> <v-list-item exact :to="{name:'site-tutorials'}" color="primary" v-if="$auth.check('user') && $store.getters['site/getSettings'].includes('tutorials')"> <v-list-item-icon> <v-icon color="primary" large>mdi-help-box</v-icon> </v-list-item-icon> <v-list-item-content> <v-list-item-title class="black--text"> Tutorials </v-list-item-title> </v-list-item-content> </v-list-item> <v-list-item exact :to="{name:'admin-admin'}" v-if="$auth.check('admin') && !$store.getters['auth/impersonating']" color="primary"> <v-list-item-icon> <v-icon color="primary" large>mdi-account-settings</v-icon> </v-list-item-icon> <v-list-item-content> <v-list-item-title class="black--text"> Admin </v-list-item-title> </v-list-item-content> </v-list-item> <v-list-item exact :to="{name:'auth-login'}" v-if="!$auth.check()" color="primary"> <v-list-item-icon> <v-icon color="primary" large>mdi-login-variant</v-icon> </v-list-item-icon> <v-list-item-content> <v-list-item-title class="black--text"> Login </v-list-item-title> </v-list-item-content> </v-list-item> </v-list> <template v-slot:append v-if="$auth.check()"> <v-list> <v-list-item v-if="$store.getters['auth/impersonating']" exact href="#" @click="$store.dispatch('auth/unimpersonate')" color="primary"> <v-list-item-icon> <v-icon color="primary" large>mdi-logout-variant</v-icon> </v-list-item-icon> <v-list-item-content> <v-list-item-title class="black--text font-weight-bold"> Unimpersonate </v-list-item-title> </v-list-item-content> </v-list-item> <v-list-item v-else exact href="#" @click="onLogout" color="primary"> <v-list-item-icon> <v-icon color="primary" large>mdi-logout-variant</v-icon> </v-list-item-icon> <v-list-item-content> <v-list-item-title class="black--text font-weight-bold"> Log Out </v-list-item-title> </v-list-item-content> </v-list-item> </v-list> </template> </v-navigation-drawer> <v-main class="content"> <router-view></router-view> </v-main> <snackbar></snackbar> <v-footer color="rgba(0,0,0,0)" padless> <v-row no-gutters justify="center"> <v-col class="py-3 text-center body-2" cols="12" md="5" :style="$route.name === 'auth-login' ? 'background: rgba(255,255,255,0.3)' : 'background: rgba(255,255,255,0)'"> {{ new Date().getFullYear() }} | Petra | <router-link :to="{name: 'pub-legal-notice'}" style="text-decoration: none; color: #01141C">Legal Notice </router-link> | <router-link :to="{name: 'pub-data-privacy'}" style="text-decoration: none; color: #01141C">Data Protection Declaration </router-link> </v-col> </v-row> </v-footer> </v-app> </template> <script> import {mapGetters} from "vuex"; import Snackbar from "@/components/Snackbar"; export default { name: 'App', components: {Snackbar}, data: () => ({}), computed: { ...mapGetters('site', ['getNavigationDrawer']), _team() { return this.$auth.user() || {}; }, navigationDrawerState: { get() { return this.getNavigationDrawer }, set(val) { this.$store.dispatch('site/toggleNavigationDrawer', val) } }, }, methods: { onLogout() { this.$store.dispatch('auth/logout'); this.$store.dispatch('site/toggleNavigationDrawer', false) // this.navigation.items.filter(item => item.title !== 'Dashboard') } }, } </script> <style lang="scss"> @import '~vuetify/src/styles/settings/_variables'; body { background-color: white; } .v-application { background-color: var(--v-background-base) !important; } .v-navigation-drawer { background-color: rgba(255, 255, 255, 0.4) !important; @media #{map-get($display-breakpoints, 'md-and-down')} { background-color: rgba(255, 255, 255, 0.8) !important; } } .v-label { font-size: 0.875rem !important; } .v-input { font-size: 0.875rem !important; } .v-list-item__title { font-size: 0.875rem !important; //line-height: 1.0 !important; } .v-list-item { min-height: 40px !important; } .v-chip { font-size: 0.875rem !important; } .v-subheader { font-size: 0.875rem !important; } .v-btn { text-transform: none !important; } .v-tab { text-transform: none !important; } .content { //background-color: rgba(255, 255, 255, 0.4) !important; } // v-stepper at PrototypeProgress.vue .v-stepper { background-color: rgba(255, 255, 255, 0.0) !important; } .theme--light.v-stepper .v-stepper__step:not(.v-stepper__step--active):not(.v-stepper__step--complete):not(.v-stepper__step--error) .v-stepper__step__step { // Color of steps background: #a0a2a2 !important; } @media only screen and (max-width: 959px) { .v-stepper:not(.v-stepper--vertical) .v-stepper__label { display: flex !important; } } @media only screen and (max-width: 400px) { // hide header labels below 400 px .v-stepper:not(.v-stepper--vertical) .v-stepper__label { display: none !important; } } .theme--light.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state) > .v-input__control > .v-input__slot fieldset { border-color: #01141C !important; } </style>