Add SplitLayout, refactor onboarding

client/src/App.vue

@@ -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,

client/src/layouts/SplitLayout.vue

@@ -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>

client/src/pages/forgot-password.vue

@@ -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>

client/src/pages/hello.vue

@@ -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';
 

client/src/pages/onboarding.vue

@@ -1,40 +1,26 @@
 <template>
   <div
-    :class="['onboarding', {'onboarding--illustration': illustration}]"
+    class="onboarding__content"
     data-cy="onboarding-page">
-    <div class="onboarding__illustration">
+    <router-view/>
-      <component :is="illustration"/>
+    <a
-    </div>
+      class="onboarding__button button button--primary button--big"
-    <div class="onboarding__content">
+      data-cy="onboarding-next-link"
-      <router-view/>
+      @click="next">{{ nextLabel }}
-      <a
+    </a>
-        class="onboarding__button button button--primary button--big"
+    <a
-        data-cy="onboarding-next-link"
+      class="onboarding__secondary-link"
-        @click="next">{{ nextLabel }}
+      data-cy="onboarding-skip-link"
-      </a>
+      @click.prevent="completeOnboarding">Einführung überspringen</a>
-      <a
-        class="onboarding__secondary-link"
-        data-cy="onboarding-skip-link"
-        @click.prevent="completeOnboarding">Einführung überspringen</a>
-    </div>
   </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';

client/src/router/auth.routes.js

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

client/src/router/index.js

@@ -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,

client/src/router/onboarding.routes.js

@@ -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',
         },