From 0aa3daf5c762b43660e1ef7541d5a334a729008e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 3 Feb 2021 09:10:56 +0100
Subject: [PATCH] Add header, footer, and centered selection dots

---
 .../ComponentSlider/ComponentSlider.vue       | 22 ++++++++++++-----
 .../Registration/RegistrationSlider.vue       | 24 +++++++++++++------
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue
index ecb334d7c..edf9ec272 100644
--- a/webapp/components/ComponentSlider/ComponentSlider.vue
+++ b/webapp/components/ComponentSlider/ComponentSlider.vue
@@ -1,19 +1,26 @@
 <template>
   <div class="Sliders">
-    <!-- <h2 class="subTitle">{{ $t('login.login') + ' XXX' }}</h2> -->
+    <slot :name="'header'" />
+
+    <ds-heading v-if="sliderData.sliders[sliderIndex].title" size="h3">
+      {{ sliderData.sliders[sliderIndex].title }}
+    </ds-heading>
+
     <slot :name="sliderData.sliders[sliderIndex].name" />
+
     <ds-flex>
-      <ds-flex-item>
+      <ds-flex-item :centered="true">
         <div
           v-for="(slider, index) in sliderData.sliders"
           :key="slider.name"
-          class="selection-button"
           :class="[
-            'Sliders__component-selection',
             index < sliderIndex && '--confirmed',
           ]"
         >
           <base-button
+            :class="[
+              'Sliders__slider-selection',
+            ]"
             style="float: left"
             :circle="true"
             size="small"
@@ -39,6 +46,8 @@
         </base-button>
       </ds-flex-item>
     </ds-flex>
+
+    <slot :name="'footer'" />
   </div>
 </template>
 
@@ -71,8 +80,9 @@ export default {
   // padding: 0;
   // list-style: none;
 
-  &__component-selection {
-    padding-right: 10px;
+  &__slider-selection {
+    // padding-top: 5px;
+    margin-right: 5px;
 
     // text-align: center;
     // height: 100%;
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index c6066a4b8..7d6af908a 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -7,15 +7,15 @@
         </a>
       </template>
 
-      <h1 class="title">{{ $t('components.registration.signup.title', metadata) }}</h1>
-
       <component-slider :sliderData="sliderData">
+        <template #header>
+          <ds-heading size="h2">
+            {{ $t('components.registration.signup.title', metadata) }}
+          </ds-heading>
+        </template>
+
         <template #enter-invite>
-          <registration-item-enter-invite :sliderData="sliderData" :inviteCode="sliderData.collectedComponentData.inviteCode ? sliderData.collectedComponentData.inviteCode : ''" :email="sliderData.collectedComponentData.email ? sliderData.collectedComponentData.email : ''">
-            <ds-space margin-bottom="xxx-small" margin-top="large" centered>
-              <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
-            </ds-space>
-          </registration-item-enter-invite>
+          <registration-item-enter-invite :sliderData="sliderData" :inviteCode="sliderData.collectedComponentData.inviteCode ? sliderData.collectedComponentData.inviteCode : ''" :email="sliderData.collectedComponentData.email ? sliderData.collectedComponentData.email : ''" />
         </template>
 
         <!-- <template #enter-email> -->
@@ -39,6 +39,12 @@
             email="user@example.org"
           />
         </template>
+
+        <template #footer>
+            <ds-space margin-bottom="xxx-small" margin-top="small" centered>
+              <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
+            </ds-space>
+        </template>
       </component-slider>
 
       <template #topMenu>
@@ -81,6 +87,8 @@ export default {
         sliders: [
           {
             name: 'enter-invite',
+            // title: this.$t('components.registration.create-user-account.title'),
+            title: 'Invitation', // Wolle
             validated: false,
             button: {
               title: 'Next', // Wolle
@@ -91,6 +99,7 @@ export default {
           // {
           //   name: 'enter-email',
             // validated: false,
+            // title: 'E-Mail', // Wolle
             // button: {
             //   title: 'Next', // Wolle
               // icon:           :icon="(sliderIndex < sliderData.sliders.length - 1 && 'arrow-right') || (sliderIndex === sliderData.sliders.length - 1 && 'check')"
@@ -99,6 +108,7 @@ export default {
           // },
           {
             name: 'create-user-account',
+            title: this.$t('components.registration.create-user-account.title'),
             validated: false,
             button: {
               title: this.$t('actions.save'), // Wolle