From e2d504c8394df2a121fbec7af672d84080e67cda Mon Sep 17 00:00:00 2001
From: Settel <achim.settelmeier@diva-e.com>
Date: Sun, 9 Oct 2022 21:29:09 +0200
Subject: [PATCH] css: make index page ready for smartphone

---
 client/src/components/TitleBox.vue | 10 +++----
 client/src/pages/index.vue         | 42 ++++++++++++++++++++++++++++--
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/client/src/components/TitleBox.vue b/client/src/components/TitleBox.vue
index 63b43d9..14df46f 100644
--- a/client/src/components/TitleBox.vue
+++ b/client/src/components/TitleBox.vue
@@ -21,9 +21,9 @@
     justify-content: center;
 
     @media (max-width: $phone-max-width) {
-      padding: 40px 0;      
+      padding: 40px 0;
     }
-}
+  }
 
   &__titleborderbox1,
   &__titleborderbox2,
@@ -57,9 +57,9 @@
     @media (max-width: $phone-max-width) {
       top: 75px;
       width: 300px;
-      height: 80px;      
+      height: 80px;
     }
-}
+  }
 
   &__titleborderbox3 {
     position: absolute;
@@ -81,7 +81,7 @@
     text-align: center;
 
     @media (max-width: $phone-max-width) {
-      font-size: 32px;      
+      font-size: 32px;
     }
   }
 
diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
index 9741c07..7366c43 100644
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@@ -6,7 +6,9 @@
       <div class="page-index__login">
         <LoginBox />
       </div>
-      <div class="page-index__separator" />
+      <div class="page-index__separator">
+        <span class="page-index__separator-text">{{ $t('or') }}</span>
+      </div>
       <div class="page-index__create-team">
         <Button :border="false" @click="createTeam">{{ $t('create-team') }}</Button>
       </div>
@@ -28,6 +30,7 @@ import useI18n from '@/composables/useI18n'
 
 const { $t } = useI18n({
   'create-team': { en: 'Create Team ...', de: 'Team erstellen ...' },
+  or: { en: 'or', de: 'oder' },
 })
 
 const config = useRuntimeConfig()
@@ -57,18 +60,53 @@ body {
     display: flex;
     width: 100%;
     height: 120px;
+
+    @media (max-width: $phone-max-width) {
+      flex-direction: column;
+      margin: 32px 0 0 0;
+    }
   }
 
   &__login,
   &__create-team {
     width: 320px;
     align-self: center;
+
+    @media (max-width: $phone-max-width) {
+      width: auto;
+    }
   }
 
   &__separator {
     width: 1px;
     margin: 0 48px;
     border-left: $box-primary-border;
+
+    @media (max-width: $phone-max-width) {
+      position: relative;
+      width: 300px;
+      height: 1px;
+      margin: 48px 0;
+      border-left: none;
+      border-bottom: $box-primary-border;
+      align-self: center;
+    }
+
+    &-text {
+      display: none;
+
+      @media (max-width: $phone-max-width) {
+        display: block;
+        position: absolute;
+        top: -10px;
+        left: 120px;
+        width: 60px;
+        background-color: $background-primary-color;
+        font-size: 18px;
+        color: $text-primary-color;
+        text-align: center;
+      }
+    }
   }
 
   &__space {
@@ -81,7 +119,7 @@ body {
     bottom: 0;
     color: #606060;
     cursor: pointer;
-    
+
     &:hover {
       color: #c0c0c0;
     }