summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorJannik Schönartz2019-05-15 23:16:43 +0200
committerJannik Schönartz2019-05-15 23:16:43 +0200
commitfe03f891b8255fc79fdab5509e5ce870410f3bd0 (patch)
treeb672c34f5d5474e2c7127931f29a7ac4047cd051 /webapp
parent[webapp] Add a simple home / welcome landing page (diff)
downloadbas-fe03f891b8255fc79fdab5509e5ce870410f3bd0.tar.gz
bas-fe03f891b8255fc79fdab5509e5ce870410f3bd0.tar.xz
bas-fe03f891b8255fc79fdab5509e5ce870410f3bd0.zip
[documentation] Add faq pages & add webapp tutorial classes for the home module
Diffstat (limited to 'webapp')
-rw-r--r--webapp/src/assets/styles.css13
-rw-r--r--webapp/src/components/DashboardPage.vue50
-rw-r--r--webapp/src/components/NotificationsAlerts.vue2
-rw-r--r--webapp/src/components/UserModule.vue2
4 files changed, 46 insertions, 21 deletions
diff --git a/webapp/src/assets/styles.css b/webapp/src/assets/styles.css
index aa6f146..b1a9322 100644
--- a/webapp/src/assets/styles.css
+++ b/webapp/src/assets/styles.css
@@ -84,6 +84,19 @@ html {
bottom: -3px;
left: -3px;
right: -3px;
+ pointer-events: none;
+}
+
+.tutorial-enabled .tutorial-border::after {
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+
+.tutorial-enabled .tutorial-border::before {
+ bottom: -11px !important;
+ left: 45% !important;
}
.tutorial-enabled .tutorial-element.element-icon::after {
diff --git a/webapp/src/components/DashboardPage.vue b/webapp/src/components/DashboardPage.vue
index 68c3973..00d2620 100644
--- a/webapp/src/components/DashboardPage.vue
+++ b/webapp/src/components/DashboardPage.vue
@@ -16,7 +16,7 @@
</i18n>
<template>
- <v-app :dark="settings.dark" :class="{ 'no-animation': settings.noAnimations }">
+ <v-app :dark="settings.dark" :class="{ 'no-animation': settings.noAnimations }" class="tutorial-enabled">
<v-navigation-drawer
class="drawer non-selectable"
@@ -28,33 +28,45 @@
width="250"
app
>
- <div class="drawer-header grey darken-4 hidden-lg-and-up"><img src="@/assets/logo.svg" /></div>
- <div v-for="category in categories" :key="category.name">
- <div class="dashboard-category text--secondary">{{ desktop && drawerMini ? '' : $t('$dashboardCategories.' + category.name) }}</div>
- <v-list>
- <v-list-tile ripple v-for="module in category.modules" :key="module.name" :to="{ name: module.name }">
- <v-list-tile-action>
- <v-icon v-html="module.icon"></v-icon>
- </v-list-tile-action>
- <v-list-tile-content>
- <v-list-tile-title v-text="$t('$dashboardModules.' + module.name)"></v-list-tile-title>
- </v-list-tile-content>
- </v-list-tile>
- </v-list>
- <v-divider></v-divider>
+ <div class="tutorial-element label-bottom tutorial-border" style="--label-number: '1'">
+ <div class="drawer-header grey darken-4 hidden-lg-and-up"><img src="@/assets/logo.svg" /></div>
+ <div v-for="category in categories" :key="category.name">
+ <div class="dashboard-category text--secondary">{{ desktop && drawerMini ? '' : $t('$dashboardCategories.' + category.name) }}</div>
+ <v-list>
+ <v-list-tile ripple v-for="module in category.modules" :key="module.name" :to="{ name: module.name }">
+ <v-list-tile-action>
+ <v-icon v-html="module.icon"></v-icon>
+ </v-list-tile-action>
+ <v-list-tile-content>
+ <v-list-tile-title v-text="$t('$dashboardModules.' + module.name)"></v-list-tile-title>
+ </v-list-tile-content>
+ </v-list-tile>
+ </v-list>
+ <v-divider></v-divider>
+ </div>
</div>
</v-navigation-drawer>
<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>
+ <v-toolbar-side-icon
+ @click.stop="toggleDrawer"
+ class="drawer-icon tutorial-element label-bottom tutorial-border element-icon"
+ style="--label-number: '2'"
+ ></v-toolbar-side-icon>
<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>
- <notifications-alerts style="margin-right: 16px"></notifications-alerts>
+ <v-btn
+ class="tutorial-element label-top-left element-icon" style="--label-number: '3'"
+ icon
+ @click="$store.commit('saveSetting', { name: 'dark', value: !settings.dark })"
+ ><v-icon>invert_colors</v-icon></v-btn>
+ <notifications-alerts style="margin-right: 16px;"></notifications-alerts>
<v-toolbar-items>
<v-menu offset-y attach>
- <v-btn class="user-button" flat slot="activator" style="text-transform: none;">
+ <v-btn class="user-button tutorial-element label-bottom tutorial-border"
+ style="--label-number: '5'; text-transform: none;"
+ flat slot="activator" >
<v-icon left>account_circle</v-icon>
<v-flex>
{{ user.name }}
diff --git a/webapp/src/components/NotificationsAlerts.vue b/webapp/src/components/NotificationsAlerts.vue
index c2c389b..efedd2a 100644
--- a/webapp/src/components/NotificationsAlerts.vue
+++ b/webapp/src/components/NotificationsAlerts.vue
@@ -18,7 +18,7 @@
<template>
<div>
<v-menu v-model="menu" offset-y left :close-on-content-click="false" :nudge-bottom="10" content-class="notifications" attach>
- <v-btn icon slot="activator">
+ <v-btn icon slot="activator" class="tutorial-element label-top-left element-icon" style="--label-number: '4'">
<v-badge :value="!menu && newAlertCount" color="red darken-3" bottom>
<span slot="badge">{{newAlertCount}}</span>
<v-icon>notifications</v-icon>
diff --git a/webapp/src/components/UserModule.vue b/webapp/src/components/UserModule.vue
index e89afe3..4e509d5 100644
--- a/webapp/src/components/UserModule.vue
+++ b/webapp/src/components/UserModule.vue
@@ -22,7 +22,7 @@
</i18n>
<template>
- <v-container fill-height>
+ <v-container fill-height class="tutorial-enabled">
<v-layout>
<v-flex xl10 offset-xl1 lg12>
<v-card class="tabbar-card">