From 6e1a86b191d9b821f5c7df70e6ce350755324b42 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 31 Mar 2022 13:24:54 +0200
Subject: [PATCH] style endphase for logic und function

---
 frontend/src/App.vue                          |   1 +
 .../src/assets/scss/gradido-template.scss     |   6 +-
 frontend/src/components/Auth/Carousel.vue     |   8 +-
 frontend/src/components/Auth/Header.vue       |   8 +
 frontend/src/layouts/AuthLayout_gdd.vue       | 204 ++++++++++++------
 frontend/src/pages/ForgotPassword.vue         |  11 +-
 frontend/src/pages/Login.vue                  |   6 +-
 frontend/src/pages/Register.vue               |  10 +-
 frontend/src/pages/ResetPassword.vue          |   2 +-
 9 files changed, 171 insertions(+), 85 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index cc8fe9b13..389faea98 100755
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -19,6 +19,7 @@ export default {
 <style>
 #app {
   height: 100%;
+  min-width: 500px;
 }
 
 .pointer {
diff --git a/frontend/src/assets/scss/gradido-template.scss b/frontend/src/assets/scss/gradido-template.scss
index 103fedc52..e05446c1b 100644
--- a/frontend/src/assets/scss/gradido-template.scss
+++ b/frontend/src/assets/scss/gradido-template.scss
@@ -8,12 +8,15 @@ html, body {
   }
 
   /* Button */
+  .btn {
+    border-radius: 24.8pt;
+  }
+
   .btn-gradido {
     background-image: linear-gradient(146deg, rgba(249,205,105,1) 50%, rgba(197,141,56,1) 100%);
     background-size: auto;
     background-position: 0% 0%;
     background-repeat: repeat;
-    border-radius: 24.8pt;
     border-style: none;
   }
   
@@ -24,7 +27,6 @@ html, body {
   .btn-outline-gradido {
       color: rgb(248,161,27);
       border: 1px solid #F5B805;
-      border-radius: 24.8pt;
   }
 
   .form-control, .custom-select {
diff --git a/frontend/src/components/Auth/Carousel.vue b/frontend/src/components/Auth/Carousel.vue
index 3631a8333..ce5df27ab 100644
--- a/frontend/src/components/Auth/Carousel.vue
+++ b/frontend/src/components/Auth/Carousel.vue
@@ -45,8 +45,6 @@
         </p>
       </b-carousel-slide>
     </b-carousel>
-
-
   </div>
 </template>
 
@@ -70,9 +68,9 @@ export default {
 </script>
 <style>
 .carousel {
-    position: relative;
-    height: 100%;
-    border-radius: 0% 50% 70% 0%/50% 70% 70% 50%;
+  position: relative;
+  height: 100%;
+  border-radius: 0% 50% 70% 0%/50% 70% 70% 50%;
 }
 .carousel-inner {
   height: 100%;
diff --git a/frontend/src/components/Auth/Header.vue b/frontend/src/components/Auth/Header.vue
index 3e4d85134..c58a3d41a 100644
--- a/frontend/src/components/Auth/Header.vue
+++ b/frontend/src/components/Auth/Header.vue
@@ -40,6 +40,14 @@ export default {
 }
 </script>
 <style lang="scss">
+.navbar-collapse {
+  margin-left: 20px;
+}
+.navbar-collapse li {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
 .auth-header {
   position: sticky;
 }
diff --git a/frontend/src/layouts/AuthLayout_gdd.vue b/frontend/src/layouts/AuthLayout_gdd.vue
index dc502e34d..2613abddd 100644
--- a/frontend/src/layouts/AuthLayout_gdd.vue
+++ b/frontend/src/layouts/AuthLayout_gdd.vue
@@ -1,85 +1,152 @@
 <template>
   <div class="auth-template">
-    <auth-header />
-    <b-row class="auth-template-content">
-      <b-col lg="6" md="none" sm="none">
-        <div class="bg-img-box d-none d-lg-block">
-          <!-- <b-img class="bg-img" src="/img/template/Foto_01.jpg"></b-img>-->
+    <div v-if="mobilStart" class="mobil-start-box d-inline d-sm-inline d-md-inline d-lg-none">
+      <b-img
+        fluid
+        height="100%"
+        id="img1"
+        src="img/template/background-start-mobil.png"
+        alt="start background image"
+      ></b-img>
+      <b-img id="img2" src="img/template/logo-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-button variant="gradido" @click="linkRouter('/register')">Registrieren</b-button>
+        <div>
+          Du hast schon einen Account?
+          <router-link @click="linkRouter('/login')">Hier Anmelden</router-link>
         </div>
-        <div class="w-100 bg-txt-box d-none d-lg-block text-center align-self-center">
-          <div class="text-light h0">Dankbarkeit</div>
-          <div class="text-light h1">Die neue Währung</div>
-          <div class="text-light h2 text-uppercase">Für Einander, Für alle, Für die Natur</div>
-          <b-button variant="gradido">Erfahre mehr...</b-button>
-        </div>
-      </b-col>
-      <b-col lg="6" md="12" sm="12" class="pr-5">
-        <b-row class="mt-5">
-          <b-col>
-            <div class="h1">Willkommen</div>
-            <div class="h1">Communities World Wide</div>
-            <div>1000 Dank, weil du bei uns bist!</div>
-          </b-col>
-          <b-col class="text-right">
-            <b-avatar src="img/brand/gradido_coin●.png" size="6rem"></b-avatar>
-          </b-col>
-        </b-row>
-        <b-card no-body class="border-0 mt-4 gradido-custom-background">
-          <b-row class="p-4">
-            <b-col cols="10">
-              <language-switch />
+      </div>
+    </div>
+    <div>
+      <auth-header />
+      <b-row class="auth-template-content">
+        <b-col lg="6" md="none" sm="none">
+          <div class="bg-img-box d-none d-lg-block">
+            <!-- <b-img class="bg-img" src="/img/template/Foto_01.jpg"></b-img>-->
+            <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">Dankbarkeit</div>
+            <div class="h1">Die neue Währung</div>
+            <div class="h2 text-uppercase">Für Einander, Für alle, Für die Natur</div>
+            <b-button variant="gradido">Erfahre mehr...</b-button>
+          </div>
+        </b-col>
+        <b-col lg="6" md="12" sm="12" class="pl-5 pr-5">
+          <b-row class="mt-5">
+            <b-col>
+              <div class="h1">Willkommen</div>
+              <div class="h1">Communities World Wide</div>
+              <div>1000 Dank, weil du bei uns bist!</div>
             </b-col>
-            <b-col cols="2" class="text-right">
-              <div id="popover-target-1" class="pointer">
-                <span>A</span>
-                <span class="h1">A</span>
-              </div>
-              <b-popover
-                target="popover-target-1"
-                triggers="hover"
-                placement="topleft"
-                variant="dark"
-              >
-                <div class="text-light">
-                  <span class="pointer" @click="setTextSize(85)">85%</span>
-                  |
-                  <span class="pointer" @click="setTextSize(100)">100%</span>
-                  |
-                  <span class="pointer" @click="setTextSize(125)">125%</span>
-                </div>
-              </b-popover>
+            <b-col class="text-right d-none d-sm-none d-md-inline">
+              <b-avatar src="img/brand/gradido_coin●.png" size="6rem"></b-avatar>
             </b-col>
           </b-row>
-
-          <b-card-body class="p-4">
-            <router-view></router-view>
-          </b-card-body>
-        </b-card>
-        <content-footer v-if="!$route.meta.hideFooter"></content-footer>
-      </b-col>
-    </b-row>
-    <!-- <auth-layout-gdd />-->
+          <b-card no-body class="border-0 mt-4 gradido-custom-background">
+            <b-row class="p-4">
+              <b-col cols="10">
+                <language-switch />
+              </b-col>
+              <b-col cols="2" class="text-right">
+                <div id="popover-target-1" class="pointer">
+                  <span>A</span>
+                  <span class="h1">A</span>
+                </div>
+                <b-popover
+                  target="popover-target-1"
+                  triggers="hover"
+                  placement="topleft"
+                  variant="dark"
+                >
+                  <div class="text-light">
+                    <span class="pointer" @click="setTextSize(85)">85%</span>
+                    |
+                    <span class="pointer" @click="setTextSize(100)">100%</span>
+                    |
+                    <span class="pointer" @click="setTextSize(125)">125%</span>
+                  </div>
+                </b-popover>
+              </b-col>
+            </b-row>
+            <b-row class="d-inline d-sm-inline d-md-none d-lg-none mb-3">
+              <b-col class="text-center">
+                <b-avatar src="img/brand/gradido_coin●.png" size="6rem"></b-avatar>
+                <div>
+                  <span><router-link to="login">Anmelden</router-link></span>
+                  |
+                  <span><router-link to="register">Registrieren</router-link></span>
+                </div>
+              </b-col>
+            </b-row>
+            <b-card-body class="">
+              <router-view></router-view>
+            </b-card-body>
+          </b-card>
+          <content-footer v-if="!$route.meta.hideFooter"></content-footer>
+        </b-col>
+      </b-row>
+      <!-- <auth-layout-gdd />-->
+    </div>
   </div>
 </template>
 <script>
 import ContentFooter from '@/components/ContentFooter.vue'
 import LanguageSwitch from '@/components/LanguageSwitch2'
 import AuthHeader from '@/components/Auth/Header.vue'
+import Carousel from '@/components/Auth/Carousel.vue'
+
 export default {
   name: 'AuthTemplate',
   components: {
     ContentFooter,
     LanguageSwitch,
     AuthHeader,
+    Carousel,
+  },
+  data() {
+    return {
+      mobilStart: true,
+    }
   },
   methods: {
     setTextSize(size) {
       alert('set page text size of: ' + size + '%')
     },
+    linkRouter(to) {
+      this.mobilStart = false
+      this.$router.push(to)
+    },
   },
 }
 </script>
 <style lang="scss">
+.mobil-start-box {
+  position: fixed;
+  height: 100%;
+  z-index: 1000;
+}
+.mobil-start-box #img1 {
+  position: absolute;
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+  z-index: 10;
+}
+.mobil-start-box #img2 {
+  width: 61%;
+  position: absolute;
+  z-index: 2;
+}
+.mobil-start-box #img3 {
+  width: 100%;
+}
+.mobil-start-box-text {
+  position: relative;
+  z-index: 10;
+}
+
 .auth-template {
   height: 92%;
 }
@@ -87,27 +154,38 @@ export default {
   height: 100%;
 }
 .auth-header {
-  z-index: 1000;
+  z-index: 999;
 }
 
 .bg-img-box {
   margin-top: -178px;
-  margin-left: -80px;
+  /* margin-left: -80px; */
   position: absolute;
   top: 0px;
   bottom: 0px;
-  min-width: 600px;
-  max-width: 800px;
+  min-width: 86%;
+  /* max-width: 800px; */
   background-color: bisque;
-  border-radius: 0% 50% 70% 0% / 50% 70% 70% 50%;
+  border-radius: 0% 50% 70% 0%/50% 70% 70% 50%;
 }
 .bg-txt-box {
-  position: inherit;
-  padding-top: 30%;
-  height: auto;
+  position: relative;
+  margin-top: 300px;
+  padding-bottom: 20px;
+
+  text-shadow: 2px 2px 8px #000000;
 }
 .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 {
diff --git a/frontend/src/pages/ForgotPassword.vue b/frontend/src/pages/ForgotPassword.vue
index d913a58cf..ae29d1537 100644
--- a/frontend/src/pages/ForgotPassword.vue
+++ b/frontend/src/pages/ForgotPassword.vue
@@ -1,14 +1,13 @@
 <template>
-  <div class="forgot-password p-4">
+  <div class="forgot-password">
     <div class="pb-5">Bitte gib deine E-Mail an mit der du bei Gradido angemeldet bist.</div>
     <validation-observer ref="observer" v-slot="{ handleSubmit }">
       <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
         <input-email v-model="form.email"></input-email>
-        <div class="text-center">
-          <b-button type="submit" variant="gradido">
-            {{ $t('settings.password.send_now') }}
-          </b-button>
-        </div>
+
+        <b-button type="submit" variant="gradido" class="mt-4">
+          {{ $t('settings.password.send_now') }}
+        </b-button>
       </b-form>
     </validation-observer>
 
diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index 32a0352a6..5a3ed028e 100755
--- a/frontend/src/pages/Login.vue
+++ b/frontend/src/pages/Login.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="login-form p-4">
+  <div class="login-form">
     <div class="pb-5">Melde dich mit deinen Zugangsdaten an. Bewahre sie stet's sicher auf!</div>
     <!-- <div class="text-center mb-4 test-communitydata">
           <b>{{ $store.state.community.name }}</b>
@@ -18,8 +18,8 @@
     <validation-observer ref="observer" v-slot="{ handleSubmit }">
       <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
         <b-row>
-          <b-col><input-email v-model="form.email"></input-email></b-col>
-          <b-col>
+          <b-col sm="12" md="6"><input-email v-model="form.email"></input-email></b-col>
+          <b-col sm="12" md="6">
             <input-password
               :label="$t('form.password')"
               :placeholder="$t('form.password')"
diff --git a/frontend/src/pages/Register.vue b/frontend/src/pages/Register.vue
index 9510582b8..d65cc14f5 100755
--- a/frontend/src/pages/Register.vue
+++ b/frontend/src/pages/Register.vue
@@ -1,12 +1,12 @@
 <template>
-  <div id="registerform p-4">
+  <div id="registerform">
     <div class="pb-5">
       Registriere dich indem du alle Daten vollständig und in die richtigen Felder eingibst.
     </div>
     <validation-observer ref="observer" v-slot="{ handleSubmit }">
       <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
         <b-row>
-          <b-col>
+          <b-col sm="12" md="6">
             <validation-provider
               :name="$t('form.firstname')"
               :rules="{ required: true, min: 3 }"
@@ -32,7 +32,7 @@
               </b-form-group>
             </validation-provider>
           </b-col>
-          <b-col>
+          <b-col sm="12" md="6">
             <validation-provider
               :name="$t('form.lastname')"
               :rules="{ required: true, min: 2 }"
@@ -56,8 +56,8 @@
           </b-col>
         </b-row>
         <b-row>
-          <b-col><input-email v-model="form.email"></input-email></b-col>
-          <b-col>
+          <b-col sm="12" md="6"><input-email v-model="form.email"></input-email></b-col>
+          <b-col sm="12" md="6">
             <label>{{ $t('language') }}</label>
             <language-switch-select @update-language="updateLanguage" />
           </b-col>
diff --git a/frontend/src/pages/ResetPassword.vue b/frontend/src/pages/ResetPassword.vue
index b8291fdfc..03d9e59ae 100644
--- a/frontend/src/pages/ResetPassword.vue
+++ b/frontend/src/pages/ResetPassword.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="resetpwd-form p-4">
+  <div class="resetpwd-form">
     <div class="pb-5">Trage bitte dein Passwort ein und wiederhole es.</div>
     <validation-observer ref="observer" v-slot="{ handleSubmit }">
       <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">