ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add SplitLayout, refactor onboarding

This commit is contained in:
Christian Cueni 2021-06-03 08:34:47 +02:00
parent 050ca414a8
commit 125882df46
8 changed files with 164 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/App.vue
View File

@ -20,6 +20,7 @@
import FullScreenLayout from '@/layouts/FullScreenLayout';
import PublicLayout from '@/layouts/PublicLayout';
import BlankLayout from '@/layouts/BlankLayout';
import SplitLayout from '@/layouts/SplitLayout';
import Modal from '@/components/Modal';
import NewContentBlockWizard from '@/components/content-block-form/NewContentBlockWizard';
import EditContentBlockWizard from '@/components/content-block-form/EditContentBlockWizard';
@ -50,6 +51,7 @@
FullScreenLayout,
PublicLayout,
BlankLayout,
SplitLayout,
Modal,
NewContentBlockWizard,
EditContentBlockWizard,

142
client/src/layouts/SplitLayout.vue Normal file
View File

@ -0,0 +1,142 @@
<template>
<div :class="['split-view', {'split-view--illustration': illustration}]">
<div class="split-view__illustration">
<component :is="illustration"/>
</div>
<div class="split-view__content">
<router-view/>
</div>
</div>
</template>
<script>
import ContentsIllustration from '@/components/illustrations/ContentsIllustration';
import PortfolioIllustration from '@/components/illustrations/PortfolioIllustration';
import RoomsIllustration from '@/components/illustrations/RoomsIllustration';
export default {
components: {
contents: ContentsIllustration,
portfolio: PortfolioIllustration,
rooms: RoomsIllustration
},
computed: {
illustration() {
return this.$route.meta.illustration;
}
},
};
</script>
<style lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.split-view {
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 {
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>

39
client/src/pages/forgot-password.vue
View File

@ -1,39 +0,0 @@
<template>
<div class="forgot-password public-page">
<header class="info-header">
<h1
class="forgot-password__title public-page__title"
data-cy="forgot-password">Passwort vergessen?</h1>
</header>
<section class="forgot-password__section forgot-password__text">
<p class="forgot-info">
Ihr Benutzerkonto wird durch den hep Verlag verwaltet. Um Ihr Passwort zurückzusetzen,
gehen Sie
auf die Verlagsseite.</p>
</section>
<section class="forgot-password__section forgot-password__text">
<p class="forgot-info">
Passwort unter
<a
class="hep-link"
href="https://www.hep-verlag.ch/customer/account/forgotpassword/"
target="_blank">www.hep-verlag.ch</a> zurücksetzen</p>
</section>
</div>
</template>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.forgot-info {
font-family: $sans-serif-font-family;
margin-bottom: $medium-spacing;
}
.forgot-password__link {
margin-top: $large-spacing;
}
</style>

5
client/src/pages/hello.vue
View File

@ -1,5 +1,7 @@
<template>
<div class="hello public-page">
<div
class="hello"
data-cy="hello-page">
<h1
class="hello__title public-page__title"
data-cy="hello-title">Wollen Sie {{ pageTitle }} jetzt im Unterricht verwenden?</h1>
@ -11,7 +13,6 @@
<script>
// import HELLO_EMAIL_MUTATION from '@/graphql/gql/local/mutations/helloEmail.gql';
import LoadingButton from '@/components/LoadingButton';
import pageTitleMixin from '@/mixins/page-title';

36
client/src/pages/onboarding.vue
View File

@ -1,40 +1,26 @@
<template>
<div
:class="['onboarding', {'onboarding--illustration': illustration}]"
class="onboarding__content"
data-cy="onboarding-page">
<div class="onboarding__illustration">
<component :is="illustration"/>
</div>
<div class="onboarding__content">
<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>
<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 ContentsIllustration from '@/components/illustrations/ContentsIllustration';
import PortfolioIllustration from '@/components/illustrations/PortfolioIllustration';
import RoomsIllustration from '@/components/illustrations/RoomsIllustration';
import UPDATE_ONBOARDING_PROGRESS from '@/graphql/gql/mutations/updateOnboardingProgress.gql';
import ME_QUERY from '@/graphql/gql/queries/meQuery';
export default {
components: {
contents: ContentsIllustration,
portfolio: PortfolioIllustration,
rooms: RoomsIllustration
},
computed: {
nextLabel() {
return this.$route.name === 'onboarding-start' ? 'Einführung starten' : 'Weiter';

2
client/src/router/auth.routes.js
View File

@ -7,7 +7,7 @@ export default [
name: 'hello',
component: hello,
meta: {
layout: 'public',
layout: 'split',
public: true,
},
},

12
client/src/router/index.js
View File

@ -11,7 +11,6 @@ import surveyPage from '@/pages/survey';
import styleGuidePage from '@/pages/styleguide';
import checkEmail from '@/pages/check-email';
import licenseActivation from '@/pages/license-activation';
import forgotPassword from '@/pages/forgot-password';
import joinClass from '@/pages/joinClass';
import news from '@/pages/news';
@ -31,7 +30,7 @@ const routes = [
{
path: '/',
name: 'home',
component: start,
component: start
},
...moduleRoutes,
...authRoutes,
@ -73,15 +72,6 @@ const routes = [
layout: 'public',
},
},
{
path: '/forgot-password',
component: forgotPassword,
name: 'forgotPassword',
meta: {
layout: 'public',
public: true,
},
},
{
path: '/news',
component: news,

8
client/src/router/onboarding.routes.js
View File

@ -16,7 +16,7 @@ export default [
component: onboardingStart,
name: 'onboarding-start',
meta: {
layout: 'blank',
layout: 'split',
next: ONBOARDING_STEP_1,
},
},
@ -25,7 +25,7 @@ export default [
component: onboardingStep1,
name: ONBOARDING_STEP_1,
meta: {
layout: 'blank',
layout: 'split',
next: ONBOARDING_STEP_2,
illustration: 'contents',
},
@ -35,7 +35,7 @@ export default [
component: onboardingStep2,
name: ONBOARDING_STEP_2,
meta: {
layout: 'blank',
layout: 'split',
next: ONBOARDING_STEP_3,
illustration: 'rooms',
},
@ -45,7 +45,7 @@ export default [
component: onboardingStep3,
name: ONBOARDING_STEP_3,
meta: {
layout: 'blank',
layout: 'split',
next: 'home',
illustration: 'portfolio',
},