summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/HomeModule.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/HomeModule.vue')
-rw-r--r--webapp/src/components/HomeModule.vue92
1 files changed, 92 insertions, 0 deletions
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>