summaryrefslogtreecommitdiffstats
path: root/webapp
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
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')
-rw-r--r--webapp/src/assets/logo-light.svg18
-rw-r--r--webapp/src/components/DashboardPage.vue8
-rw-r--r--webapp/src/components/HomeModule.vue92
-rw-r--r--webapp/src/router.js4
4 files changed, 117 insertions, 5 deletions
diff --git a/webapp/src/assets/logo-light.svg b/webapp/src/assets/logo-light.svg
new file mode 100644
index 0000000..0647108
--- /dev/null
+++ b/webapp/src/assets/logo-light.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 655 768" style="enable-background:new 0 0 655 768;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#424242;}
+ .st1{fill:#0095FF;}
+ .st2{fill:#004373;}
+ .st3{fill:#0076CA;}
+ .st4{fill:#005998;}
+</style>
+<polygon id="XMLID_5_" class="st0" points="618.8,360.3 3.5,715.5 3.5,753.6 651.8,379.4 "/>
+<polygon id="XMLID_13_" class="st1" points="586,342.5 585.4,342.9 171.5,582.7 171.5,491.3 428.4,343 428.5,342.9 427.8,342.5
+ 333.5,288.1 333.5,196.3 "/>
+<polygon id="XMLID_14_" class="st2" points="249.5,147.6 249.5,239.6 87.5,146.1 87.5,631.3 3.5,680 3.5,5.1 5.5,6.2 "/>
+<polygon id="XMLID_8_" class="st3" points="586,342.5 585.4,342.9 428.4,343 428.5,342.9 427.8,342.5 333.5,288.1 333.5,196.3 "/>
+<polygon id="XMLID_11_" class="st4" points="249.5,147.6 249.5,239.6 87.5,146.1 5.5,6.2 "/>
+</svg>
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>
diff --git a/webapp/src/router.js b/webapp/src/router.js
index 470ffec..0c873b0 100644
--- a/webapp/src/router.js
+++ b/webapp/src/router.js
@@ -29,13 +29,13 @@ var router = new Router({
{
path: '/dashboard',
name: 'dashboard',
- redirect: '/dashboard/groups',
+ redirect: '/dashboard/home',
component: DashboardPage,
children: setChildren(DashboardPage.routes().concat(...dashboardCategories.map(c => c.modules)))
},
{
path: '*',
- redirect: '/dashboard/groups'
+ redirect: '/dashboard/home'
}
]
})