refactor scss to bootstrap scss on element

frontend/src/assets/scss/gradido-template.scss

@@ -115,10 +115,22 @@ a,
   font-size: 1.5em;
 }
 
+.zindex10 {
+  z-index: 10;
+}
+
+.zindex100 {
+  z-index: 100;
+}
+
 .zindex1000 {
   z-index: 1000;
 }
 
+.zindex10000 {
+  z-index: 10000;
+}
+
 .gradido-global-color-blue {
   color: #0e79bc;
 }

frontend/src/components/Auth/MobileStart.vue

@@ -1,27 +1,43 @@
 <template>
-  <div class="mobil-start-box d-inline d-sm-inline d-md-inline d-lg-none">
+  <div
+    class="mobil-start-box position-fixed h-100 d-inline d-sm-inline d-md-inline d-lg-none zindex1000"
+  >
     <div class="position-absolute h1 text-white zindex1000 w-100 text-center mt-8">
       {{ $t('auth.left.gratitude') }}
     </div>
     <div class="position-absolute h2 text-white zindex1000 w-100 text-center mt-9">
       {{ $t('auth.left.newCurrency') }}
     </div>
-    <img src="img/template/Blaetter.png" class="header-img d-block d-lg-none zindex1000" />
-    <b-img id="img0" src="img/template/logo-header.png" alt="start background image"></b-img>
+    <img
+      src="img/template/Blaetter.png"
+      class="sheet-img position-absolute d-block d-lg-none zindex1000"
+    />
+    <b-img
+      id="img0"
+      class="position-absolute zindex1000"
+      src="img/template/logo-header.png"
+      alt="start background image"
+    ></b-img>
     <b-img
       fluid
-      height="100%"
       id="img1"
+      class="position-absolute h-100 w-100 overflow-hidden zindex10"
       src="img/template/gold_03.png"
       alt="start background image"
     ></b-img>
     <b-img
       id="img2"
+      class="position-absolute zindex100"
       src="img/template/gradido_background_header.png"
       alt="start background image"
     ></b-img>
-    <b-img id="img3" src="img/template/Foto_01.jpg" alt="start background image"></b-img>
-    <div class="mobil-start-box-text text-center">
+    <b-img
+      id="img3"
+      class="position-relative w-100"
+      src="img/template/Foto_01.jpg"
+      alt="start background image"
+    ></b-img>
+    <div class="mobil-start-box-text position-fixed w-100 text-center zindex1000">
       <b-button variant="gradido" to="/register" @click="$emit('is-mobile-start', false)">
         {{ $t('signup') }}
       </b-button>
@@ -44,66 +60,37 @@ export default {
 }
 </script>
 <style>
-.mobil-start-box {
-  position: fixed;
-  height: 100%;
-  z-index: 10000;
-}
 .mobil-start-box-text {
-  position: fixed;
-  z-index: 10000;
   bottom: 65px;
-  width: 100%;
 }
 
 /* logo */
 .mobil-start-box #img0 {
-  position: absolute;
-  z-index: 1000;
   width: 200px;
-  max-width: 280px;
 }
 
 /* background logo */
 .mobil-start-box #img2 {
-  position: absolute;
   width: 230px;
-  max-width: 300px;
-  height: auto;
-  z-index: 100;
 }
 
 /* background maske */
-.mobil-start-box #img1 {
-  position: absolute;
-  overflow: hidden;
-  height: 100%;
-  width: 100%;
-  z-index: 10;
-}
-
-.mobil-start-box #img3 {
-  position: relative;
-}
-
 @media screen and (min-width: 1024px) {
   .mobil-start-box #img3 {
-    width: 100%;
     top: -120px;
   }
 }
 
 @media screen and (max-width: 991px) {
   .mobil-start-box #img3 {
-    width: 100%;
     top: -148px;
   }
 }
 
 @media screen and (max-width: 650px) {
   .mobil-start-box #img3 {
-    top: 66px;
     width: 115%;
+    top: 66px;
   }
 }
 

frontend/src/components/Auth/NavbarSmall.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="navbar-small text-center">
+  <div class="navbar-small">
     <b-navbar>
-       <b-collapse is-nav class="mt-5 mt-lg-0">
-        <b-navbar-nav class="ml-md-auto">
+      <b-collapse is-nav class="mt-lg-0 mt-md-5">
+        <b-navbar-nav class="mx-auto mx-sm-auto mr-md-1">
           <b-nav-item class="ml-lg-5" to="/register">{{ $t('signup') }}</b-nav-item>
-          <span class="mt-3">{{ $t('|') }}</span>
+          <span class="mt-1">{{ $t('|') }}</span>
           <b-nav-item to="/login">{{ $t('signin') }}</b-nav-item>
         </b-navbar-nav>
       </b-collapse>

frontend/src/layouts/AuthLayout_gdd.spec.js

@@ -36,7 +36,7 @@ describe('AuthLayoutGdd', () => {
     })
 
     it('has Component AuthHeader', () => {
-      expect(wrapper.findComponent({ name: 'AuthHeader' }).exists()).toBe(true)
+      expect(wrapper.findComponent({ name: 'AuthNavbar' }).exists()).toBe(true)
     })
 
     it('has Component AuthCarousel', () => {

frontend/src/layouts/AuthLayout_gdd.vue

@@ -2,23 +2,23 @@
   <div class="auth-template">
     <mobile-start v-if="mobileStart" class="d-inline d-lg-none" @is-mobile-start="isMobileStart" />
     <div class="h-100 align-middle">
-      <auth-header class="auth-header" />
+      <navbar class="auth-header" />
 
-      <div class="left-content-box d-none d-lg-block">
-        <div class="bg-img-box">
+      <div class="left-content-box position-fixed d-none d-lg-block">
+        <div class="bg-img-box position-absolute w-100">
           <carousel class="carousel" />
         </div>
-        <div class="w-100 bg-txt-box d-none d-lg-block text-center align-self-center">
-          <div class="h0">{{ $t('auth.left.gratitude') }}</div>
-          <div class="h1">{{ $t('auth.left.newCurrency') }}</div>
-          <div class="h2 text-uppercase">{{ $t('auth.left.oneAnotherNature') }}</div>
+        <div class="bg-txt-box position-relative d-none d-lg-block text-center align-self-center">
+          <div class="h0 text-white">{{ $t('auth.left.gratitude') }}</div>
+          <div class="h1 text-white">{{ $t('auth.left.newCurrency') }}</div>
+          <div class="h2 text-uppercase text-white">{{ $t('auth.left.oneAnotherNature') }}</div>
           <b-button variant="gradido">{{ $t('auth.left.learnMore') }}</b-button>
         </div>
       </div>
       <b-row class="justify-content-md-center">
         <b-col sm="12" md="8" offset-lg="6" lg="6">
           <div class="right-content-box ml-2 ml-sm-4 mr-2 mr-sm-4">
-            <b-row class="d-none d-md-block d-lg-none mt-7">
+            <b-row class="d-none d-md-block d-lg-none mt-3">
               <b-col class="zindex1000 mb--4">
                 <navbar-small />
               </b-col>
@@ -82,7 +82,7 @@
 </template>
 <script>
 import MobileStart from '@/components/Auth/MobileStart.vue'
-import AuthHeader from '@/components/Auth/Header.vue'
+import Navbar from '@/components/Auth/Navbar.vue'
 import NavbarSmall from '@/components/Auth/NavbarSmall.vue'
 import Carousel from '@/components/Auth/Carousel.vue'
 import LanguageSwitch from '@/components/LanguageSwitch2'
@@ -92,7 +92,7 @@ export default {
   name: 'AuthTemplate',
   components: {
     MobileStart,
-    AuthHeader,
+    Navbar,
     NavbarSmall,
     Carousel,
     LanguageSwitch,
@@ -116,22 +116,17 @@ export default {
 <style lang="scss">
 /* left  */
 .left-content-box {
-  position: fixed;
   width: 40%;
   top: 0px;
   bottom: 0px;
 }
 
 .bg-img-box {
-  position: absolute;
   top: 0px;
   bottom: 0px;
 }
 
 /* right */
-.right-content {
-  flex-direction: column-reverse;
-}
 .right-content-box {
   max-width: 640px;
 }
@@ -140,9 +135,6 @@ export default {
 }
 .auth-template {
   overflow-x: hidden;
-}
-.auth-template,
-.auth-template-content {
   height: 100%;
 }
 .auth-header {
@@ -150,39 +142,27 @@ export default {
 }
 
 .bg-txt-box {
-  position: relative;
   margin-top: 317px;
   text-shadow: 2px 2px 8px #000000;
   max-width: 733px;
 }
 .bg-txt-box > .h0 {
   font-size: 4em;
-  color: white;
   text-shadow: -2px -2px -8px #e4a907;
 }
 
 .bg-txt-box .h1,
 .bg-txt-box .h2 {
   font-size: 1.5em;
-  color: white;
   text-shadow: -2px -2px -8px #e4a907;
 }
 
 .bg-img {
-  width: 100%;
   border-radius: 0% 50% 70% 0% / 50% 70% 70% 50%;
   overflow: hidden;
 }
 
-.zindex1000 {
-  z-index: 1000;
-}
-
 @media screen and (min-width: 2000px) {
-  .right-content {
-    height: 100%;
-    flex-direction: column-reverse;
-  }
   .right-content-box {
     max-width: 60%;
     font-size: xx-large;