From ed935e41a4e076f99c222c1b12a5bfe67af69a92 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 6 May 2022 06:03:59 +0200
Subject: [PATCH] style seperade left and right side in content

---
 frontend/src/components/Auth/Header.vue | 10 +++---
 frontend/src/layouts/AuthLayout_gdd.vue | 46 ++++++++++++++-----------
 2 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/Auth/Header.vue b/frontend/src/components/Auth/Header.vue
index 6f68cba8c..30bec3c68 100644
--- a/frontend/src/components/Auth/Header.vue
+++ b/frontend/src/components/Auth/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="auth-header">
-    <b-navbar toggleable="lg" class="p-0">
+    <b-navbar toggleable="lg" class="p-0 pr-4">
       <div class="g-logo-radius bg-white p-3">
         <b-img :src="logo" height="40" alt="..." />
       </div>
@@ -13,10 +13,10 @@
           <b-nav-item href="https://gradido.net/de/" target="_blank">
             {{ $t('auth.navbar.overGradido') }}
           </b-nav-item>
-
-          <b-nav-item to="/register">{{ $t('signup') }}</b-nav-item>
-
-          <b-nav-item to="/login">{{ $t('signin') }}</b-nav-item>
+          <b-nav-item class="ml-5">
+            <b-link to="/register">{{ $t('signup') }} {{ $t('|') }}</b-link>
+            <b-link to="/login">{{ $t('signin') }}</b-link>
+          </b-nav-item>
         </b-navbar-nav>
       </b-collapse>
     </b-navbar>
diff --git a/frontend/src/layouts/AuthLayout_gdd.vue b/frontend/src/layouts/AuthLayout_gdd.vue
index 5a4d63b38..c96bc209d 100644
--- a/frontend/src/layouts/AuthLayout_gdd.vue
+++ b/frontend/src/layouts/AuthLayout_gdd.vue
@@ -41,24 +41,21 @@
 
     <div>
       <auth-header class="auth-header" />
-      <b-row class="auth-template-content ml-1 mr-1 mr-md-0 ml-md-0">
-        <b-col lg="6" md="none" sm="none">
-          <div class="bg-img-box d-none d-lg-block">
-            <carousel class="d-block w-100 h-100" />
-          </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>
-            <b-button variant="gradido">{{ $t('auth.left.learnMore') }}</b-button>
-          </div>
-        </b-col>
-        <b-col
-          lg="6"
-          md="12"
-          sm="12"
-          class="ml-2 ml-md-0 ml-lg-0 pl-2 pl-md-5 pr-2 pr-md-5 pr-md-5"
-        >
+
+      <div class="left-content-box">
+        <div class="bg-img-box d-none d-lg-block">
+          <carousel class="d-block w-100 h-100" />
+        </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>
+          <b-button variant="gradido">{{ $t('auth.left.learnMore') }}</b-button>
+        </div>
+      </div>
+
+      <b-row>
+        <b-col lg="6" offset-lg="6" md="12" sm="12">
           <div class="right-content-box">
             <b-row class="mt-5 pl-2 pl-md-0 pl-lg-0">
               <b-col>
@@ -114,7 +111,7 @@
               </b-card-body>
             </b-card>
           </div>
-          <auth-footer v-if="!$route.meta.hideFooter"></auth-footer>
+          <auth-footer v-if="!$route.meta.hideFooter" class="pr-5"></auth-footer>
         </b-col>
       </b-row>
       <!-- <auth-layout-gdd />-->
@@ -148,6 +145,13 @@ export default {
 }
 </script>
 <style lang="scss">
+.left-content-box {
+  position: fixed;
+  max-width: 484px;
+  background-color: aquamarine;
+  top: 0px;
+  bottom: 0px;
+}
 .right-content-box {
   max-width: 640px;
 }
@@ -183,9 +187,9 @@ export default {
   z-index: 10;
 }
 .mobil-start-box #img0 {
-  position: absolute;
+  /* position: absolute;*/
   z-index: 1000;
-  width: 33%;
+  /* width: 33%; */
 }
 .mobil-start-box #img2 {
   position: absolute;