179 lines
3.7 KiB
Vue
179 lines
3.7 KiB
Vue
<template>
|
|
<div
|
|
class="onboarding__content"
|
|
data-cy="onboarding-page"
|
|
>
|
|
<router-view />
|
|
<a
|
|
class="onboarding__button button button--primary button--big"
|
|
data-cy="onboarding-next-link"
|
|
@click="next"
|
|
>{{ nextLabel }}
|
|
</a>
|
|
<a
|
|
class="onboarding__secondary-link"
|
|
data-cy="onboarding-skip-link"
|
|
@click.prevent="completeOnboarding"
|
|
>Einführung überspringen</a>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import UPDATE_ONBOARDING_PROGRESS from '@/graphql/gql/mutations/updateOnboardingProgress.gql';
|
|
import ME_QUERY from '@/graphql/gql/queries/meQuery';
|
|
|
|
export default {
|
|
computed: {
|
|
nextLabel() {
|
|
return this.$route.name === 'onboarding-start' ? 'Einführung starten' : 'Weiter';
|
|
},
|
|
illustration() {
|
|
return this.$route.meta.illustration;
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
next() {
|
|
const next = this.$route.meta.next;
|
|
if (next === 'home') {
|
|
this.completeOnboarding();
|
|
} else {
|
|
this.$router.push({name: next});
|
|
}
|
|
},
|
|
completeOnboarding() {
|
|
this.$apollo.mutate({
|
|
mutation: UPDATE_ONBOARDING_PROGRESS,
|
|
update(store, {data: {updateOnboardingProgress: {success: onboardingVisited}}}) {
|
|
const query = ME_QUERY;
|
|
const {me} = store.readQuery({query});
|
|
if (me) {
|
|
const data = {
|
|
me: {
|
|
...me,
|
|
onboardingVisited
|
|
}
|
|
};
|
|
store.writeQuery({query, data});
|
|
}
|
|
},
|
|
}).then(() => {
|
|
this.$router.push({name: 'home'});
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "~styles/helpers";
|
|
|
|
.onboarding {
|
|
background-color: $color-brand;
|
|
|
|
display: flex;
|
|
position: relative;
|
|
|
|
&--illustration {
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: 50%;
|
|
background: $color-brand-dark;
|
|
}
|
|
}
|
|
|
|
&__illustration {
|
|
width: 30vw;
|
|
min-width: 400px;
|
|
align-self: center;
|
|
background-color: $color-brand;
|
|
z-index: 1;
|
|
display: none;
|
|
|
|
@include desktop {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
background-color: $color-white;
|
|
padding: $medium-spacing;
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 1;
|
|
|
|
@include desktop {
|
|
padding: 2*$large-spacing;
|
|
}
|
|
}
|
|
|
|
&__logo {
|
|
max-width: 300px;
|
|
height: 50px;
|
|
margin-bottom: $large-spacing;
|
|
|
|
@include desktop {
|
|
margin-bottom: 70px;
|
|
}
|
|
}
|
|
|
|
&__page-subheading {
|
|
@include regular-text;
|
|
color: $color-brand;
|
|
margin-bottom: $small-spacing;
|
|
}
|
|
|
|
&__page-heading {
|
|
@include heading-2;
|
|
color: $color-brand;
|
|
margin-bottom: 2*$large-spacing;
|
|
}
|
|
|
|
&__heading {
|
|
@include heading-2;
|
|
margin-bottom: $small-spacing;
|
|
}
|
|
|
|
&__claim {
|
|
@include heading-2;
|
|
margin-bottom: 70px;
|
|
}
|
|
|
|
&__paragraph {
|
|
@include regular-text;
|
|
margin-bottom: $medium-spacing;
|
|
|
|
&:last-of-type {
|
|
margin-bottom: 2*$large-spacing;
|
|
}
|
|
}
|
|
|
|
&__button {
|
|
@include regular-text;
|
|
flex-grow: 0;
|
|
align-self: flex-start;
|
|
min-width: 150px;
|
|
display: inline-flex;
|
|
box-sizing: border-box;
|
|
justify-content: center;
|
|
margin-bottom: $large-spacing;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&__secondary-link {
|
|
@include inline-title;
|
|
cursor: pointer;
|
|
|
|
@include desktop {
|
|
margin-top: auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|