summaryrefslogtreecommitdiffstats
path: root/webapp/src/components
diff options
context:
space:
mode:
authorJannik Schönartz2019-05-10 15:30:26 +0200
committerJannik Schönartz2019-05-10 15:30:26 +0200
commitb698f1c5f94c3e7122d6418bd23f9c74161f13af (patch)
tree8344506b296fc9ee06952ce83700aeb757363f66 /webapp/src/components
parent[webapp] Add screenshot css classes & add Screenshot classes to the User Module (diff)
downloadbas-b698f1c5f94c3e7122d6418bd23f9c74161f13af.tar.gz
bas-b698f1c5f94c3e7122d6418bd23f9c74161f13af.tar.xz
bas-b698f1c5f94c3e7122d6418bd23f9c74161f13af.zip
[webapp] Add a simple home / welcome landing page
Diffstat (limited to 'webapp/src/components')
-rw-r--r--webapp/src/components/DashboardPage.vue8
-rw-r--r--webapp/src/components/HomeModule.vue92
2 files changed, 97 insertions, 3 deletions
diff --git a/webapp/src/components/DashboardPage.vue b/webapp/src/components/DashboardPage.vue
index 4f7dc03..68c3973 100644
--- a/webapp/src/components/DashboardPage.vue
+++ b/webapp/src/components/DashboardPage.vue
@@ -47,7 +47,7 @@
<v-toolbar :height="$vuetify.breakpoint.smAndDown ? 56 : 64" dark app :clipped-left="settings.clipped" class="non-selectable" style="z-index: 10;" id="topbar">
<v-toolbar-side-icon class="drawer-icon" @click.stop="toggleDrawer"></v-toolbar-side-icon>
- <div class="logo"><img class="non-draggable hidden-md-and-down" src="@/assets/logo.svg" /></div>
+ <a class="logo" href="/dashboard/home"><img class="non-draggable hidden-md-and-down" src="@/assets/logo.svg" /></a>
<v-spacer></v-spacer>
<v-btn v-if="devMode" icon @click="$store.commit('saveSetting', { name: 'locale', value: settings.locale === 'en' ? 'de' : 'en' })"><v-icon>language</v-icon></v-btn>
<v-btn icon @click="$store.commit('saveSetting', { name: 'dark', value: !settings.dark })"><v-icon>invert_colors</v-icon></v-btn>
@@ -90,10 +90,11 @@
<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
+import AccountModule from '@/components/AccountModule'
import BackToTopButton from '@/components/BackToTopButton'
+import HomeModule from '@/components/HomeModule'
import NotificationsAlerts from '@/components/NotificationsAlerts'
import NotificationsSnackbars from '@/components/NotificationsSnackbars'
-import AccountModule from '@/components/AccountModule'
import SettingsModule from '@/components/SettingsModule'
import dashboardCategories from '@/config/dashboard'
@@ -102,7 +103,8 @@ export default {
routes () {
return [
{ path: 'account', component: AccountModule },
- { path: 'settings', component: SettingsModule }
+ { path: 'settings', component: SettingsModule },
+ { path: 'home', component: HomeModule }
]
},
components: {
diff --git a/webapp/src/components/HomeModule.vue b/webapp/src/components/HomeModule.vue
new file mode 100644
index 0000000..8a6febf
--- /dev/null
+++ b/webapp/src/components/HomeModule.vue
@@ -0,0 +1,92 @@
+<i18n>
+{
+ "en": {
+ "basApplication": "BAS Webapplication",
+ "welcome": "Welcome"
+ },
+ "de": {
+ "basApplication": "BAS Webapplikation",
+ "welcome": "Willkommen"
+ }
+}
+</i18n>
+
+<template>
+ <v-container fill-height>
+ <v-layout>
+ <v-flex class="center">
+ <img v-if="settings.dark" class="logo" src="@/assets/logo.svg"/>
+ <img v-else class="logo" src="@/assets/logo-light.svg"/>
+ <h1 v-if="settings.dark" class="main-label main-label-dark">{{ $t('basApplication') }}</h1>
+ <h1 v-else class="main-label main-label-light">{{ $t('basApplication') }}</h1>
+ <p v-if="settings.dark" class="description description-dark">Boot Auswahl Server</p>
+ <p v-else class="description description-light">Boot Auswahl Server</p>
+
+ <p v-if="settings.dark" class="description description-dark">{{ $t('welcome') }} {{ user.name }}</p>
+ <p v-else class="description description-light">{{ $t('welcome') }} {{ user.name }}</p>
+ </v-flex>
+ </v-layout>
+ </v-container>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+ name: 'HomeModule',
+ data () {
+ return {
+ }
+ },
+ computed: {
+ ...mapState(['settings', 'user'])
+ },
+ methods: {
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.logo {
+ width: auto;
+ height: 280px;
+}
+
+.center {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 3%;
+}
+
+.main-label {
+ font-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+ font-font-weight: 600;
+ line-height: 1.25;
+ font-size: 3rem;
+ margin: 1.8rem auto;
+}
+
+.main-label-dark {
+ color: white;
+}
+
+.main-label-light {
+ color: #2c3e50;
+}
+
+.description {
+ max-width: 35rem;
+ font-size: 1.6rem;
+ line-height: 1.3;
+}
+
+.description-dark {
+ color: #7b7b7b;
+}
+
+.description-light {
+ color: #6a8bad;
+}
+</style>