From 82544930e34a2105339620e10321d38c0741d44a Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 17 Nov 2022 18:16:37 +0100
Subject: [PATCH] ContentHeader && RideSide Structur

---
 frontend/src/App.vue                          |  2 +-
 frontend/src/components/skeleton/Overview.vue | 10 ++--
 frontend/src/layouts/DashboardLayout.vue      | 11 ++--
 .../src/layouts/templates/ContentHeader.vue   | 43 +++++++++++++--
 frontend/src/layouts/templates/RightSide.vue  | 53 +++++++++++++++++--
 5 files changed, 101 insertions(+), 18 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 98807768f..b616f3a39 100755
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" class="placeholder">
+  <div id="app" class="placeholder h-100">
     <component :is="$route.meta.requiresAuth ? 'DashboardLayout' : 'AuthLayout'" />
     <div class="goldrand position-fixed w-100 fixed-bottom zindex1000"></div>
   </div>
diff --git a/frontend/src/components/skeleton/Overview.vue b/frontend/src/components/skeleton/Overview.vue
index 2713d949e..d80da65d8 100644
--- a/frontend/src/components/skeleton/Overview.vue
+++ b/frontend/src/components/skeleton/Overview.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="skeleton-overview h-100">
     <b-row class="text-center">
       <b-col>
         <b-skeleton-img no-aspect animation="wave" height="118px"></b-skeleton-img>
@@ -19,13 +19,13 @@
         </div>
       </b-col>
     </b-row>
-    <b-row class="text-center mt-5">
-      <b-col>
+    <b-row class="text-center mt-5 pt-5">
+      <b-col cols="12" lg="">
         <b-skeleton animation="wave" width="85%"></b-skeleton>
         <b-skeleton animation="wave" width="55%"></b-skeleton>
         <b-skeleton animation="wave" width="70%"></b-skeleton>
       </b-col>
-      <b-col cols="6">
+      <b-col cols="12" lg="6">
         <b-skeleton animation="wave" width="85%"></b-skeleton>
         <b-skeleton animation="wave" width="55%"></b-skeleton>
         <b-skeleton animation="wave" width="70%"></b-skeleton>
@@ -33,7 +33,7 @@
         <b-skeleton animation="wave" width="55%"></b-skeleton>
         <b-skeleton animation="wave" width="70%"></b-skeleton>
       </b-col>
-      <b-col>
+      <b-col cols="12" lg="">
         <b-skeleton animation="wave" width="85%"></b-skeleton>
         <b-skeleton animation="wave" width="55%"></b-skeleton>
         <b-skeleton animation="wave" width="70%"></b-skeleton>
diff --git a/frontend/src/layouts/DashboardLayout.vue b/frontend/src/layouts/DashboardLayout.vue
index 0903d5c91..d83149581 100755
--- a/frontend/src/layouts/DashboardLayout.vue
+++ b/frontend/src/layouts/DashboardLayout.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="main-page">
+  <div class="main-page h-100">
     <div v-if="skeleton">
       <skeleton-overview />
     </div>
     <div v-else>
-      <!--sm menu mobil hamburger button-->
+      <!--menu mobil hamburger button-->
       <div class="d-block d-lg-none d-md-none d-sm-block fixed-bottom h-15 width70 zindex1000">
         {{ hamburger }}
         <b-button v-if="hamburger" @click="toogleMobilMenu">
@@ -27,6 +27,7 @@
         />
       </div>
       <b-row fluid class="d-flex">
+        <!-- Sidebar left -->
         <b-col cols="2" class="d-none d-lg-block d-md-block">
           <sidebar-new
             class="main-sidebar"
@@ -36,15 +37,18 @@
             @toogleMobilMenu="toogleMobilMenu"
           />
         </b-col>
+        <!-- ContentHeader && Content -->
         <b-col>
           <b-row>
             <b-col cols="12">
               <b-row class="d-lg-flex" cols="12">
+                <!-- ContentHeader -->
                 <b-col>
                   <content-header />
                 </b-col>
               </b-row>
             </b-col>
+            <!-- RideSide Mobil -->
             <b-col class="d-block d-lg-none">
               <right-side />
             </b-col>
@@ -67,6 +71,7 @@
             </b-col>
           </b-row>
         </b-col>
+        <!-- RightSide Desktop -->
         <b-col cols="2" class="d-none d-lg-block" align-self="stretch">
           <right-side />
         </b-col>
@@ -193,7 +198,7 @@ export default {
       this.tunneledEmail = email
     },
     toogleMobilMenu() {
-      console.log(this.$refs.sideMenuRow.classList.value)
+      // console.log(this.$refs.sideMenuRow.classList.value)
       this.$refs.sideMenuRow.classList.toggle('d-inline')
       this.$refs.sideMenuRow.classList.toggle('position-absolute')
 
diff --git a/frontend/src/layouts/templates/ContentHeader.vue b/frontend/src/layouts/templates/ContentHeader.vue
index 507cecc40..765231431 100644
--- a/frontend/src/layouts/templates/ContentHeader.vue
+++ b/frontend/src/layouts/templates/ContentHeader.vue
@@ -1,12 +1,45 @@
 <template>
   <div>
-    <div class="p-5">
-      <b-container v-if="path === '/overview'">overview content header</b-container>
-      <b-container v-if="path === '/storys'">storys content header</b-container>
+    <div>
+      <b-container v-if="path === '/overview'">
+        <b-row>
+          <b-col cols="5">
+            <div class="p-4 bg-light rounded">a overview</div>
+          </b-col>
+          <b-col cols="7">
+            <div class="p-4 bg-light rounded">b overview</div>
+          </b-col>
+        </b-row>
+      </b-container>
+      <b-container v-if="path === '/storys'"><h2>Deine Community im Überblick</h2></b-container>
       <b-container v-if="path === '/favourites'">favourites content header</b-container>
-      <b-container v-if="path === '/send'">send content header</b-container>
+      <b-container v-if="path === '/send'">
+        <b-row>
+          <b-col cols="6">
+            <div class="p-4 bg-light rounded">a send</div>
+          </b-col>
+          <b-col cols="6">
+            <div class="p-4 bg-light rounded">b send</div>
+          </b-col>
+        </b-row>
+      </b-container>
       <b-container v-if="path === '/transactions'">transactions content header</b-container>
-      <b-container v-if="path === '/profile'">profile content header</b-container>
+      <b-container v-if="path === '/profile'">
+        <b-row>
+          <b-col>
+            <div class="p-4 bg-light rounded">
+              <b-row>
+                <b-col cols="8" class="h3">Zeige deiner Community wer du bist.</b-col>
+                <b-col cols="4" class="text-small text-muted">vor 4 Stunden geändert</b-col>
+              </b-row>
+              <b-row>
+                <b-col cols="2" class=""><b-avatar size="72px" rounded="lg"></b-avatar></b-col>
+                <b-col cols="10" class="">Text</b-col>
+              </b-row>
+            </div>
+          </b-col>
+        </b-row>
+      </b-container>
       <b-container v-if="path === '/community'">community content header</b-container>
       <b-container v-if="path === '/settings'">settings content header</b-container>
     </div>
diff --git a/frontend/src/layouts/templates/RightSide.vue b/frontend/src/layouts/templates/RightSide.vue
index e6fb04b84..e6c2be850 100644
--- a/frontend/src/layouts/templates/RightSide.vue
+++ b/frontend/src/layouts/templates/RightSide.vue
@@ -1,9 +1,54 @@
 <template>
-  <div class="p-5">
-    <b-container v-if="path === '/overview'">overview ride side</b-container>
-    <b-container v-if="path === '/storys'">storys ride side</b-container>
+  <div class="right-side mt-3 mt-lg-0">
+    <b-container v-if="path === '/overview'">
+      <b-row>
+        <b-col>
+          <div class="p-4 bg-light rounded">a ride side overview</div>
+        </b-col>
+      </b-row>
+      <b-row class="mt-3 mt-lg-5">
+        <b-col>
+          <div class="p-4 bg-light rounded h-100">
+            <div>b ride side overview</div>
+            <div>b ride side overview</div>
+            <div>b ride side overview</div>
+          </div>
+        </b-col>
+      </b-row>
+    </b-container>
+    <b-container v-if="path === '/storys'">
+      <b-row>
+        <b-col>
+          <div class="p-4 bg-light rounded">a storys ride side</div>
+        </b-col>
+      </b-row>
+      <b-row class="mt-3 mt-lg-5">
+        <b-col>
+          <div class="p-4 bg-light rounded h-100">
+            <div>b storys ride side</div>
+            <div>b storys ride side</div>
+            <div>b storys ride side</div>
+          </div>
+        </b-col>
+      </b-row>
+    </b-container>
     <b-container v-if="path === '/favourites'">favourites ride side</b-container>
-    <b-container v-if="path === '/send'">send ride side</b-container>
+    <b-container v-if="path === '/send'">
+      <b-row>
+        <b-col>
+          <div class="p-4 bg-light rounded">a ride side send</div>
+        </b-col>
+      </b-row>
+      <b-row class="mt-3 mt-lg-5">
+        <b-col>
+          <div class="p-4 bg-light rounded h-100">
+            <div>b ride side send</div>
+            <div>b ride side send</div>
+            <div>b ride side send</div>
+          </div>
+        </b-col>
+      </b-row>
+    </b-container>
     <b-container v-if="path === '/transactions'">transactions ride side</b-container>
     <b-container v-if="path === '/profile'">profile ride side</b-container>
     <b-container v-if="path === '/community'">community ride side</b-container>