From a44f9583c2ddb09fef36a40d50ef2b91de40b6b1 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 17 Nov 2022 17:00:56 +0100
Subject: [PATCH] skeleton struktur, bg-image svg

---
 .../img/svg/Gradido_Blaetter_Mainpage.svg     | 22 ++++++
 frontend/src/components/Menu/SidebarNew.vue   | 14 +++-
 frontend/src/components/skeleton/Overview.vue | 43 +++++++++++
 frontend/src/layouts/DashboardLayout.vue      | 76 +++++++------------
 .../src/layouts/templates/ContentHeader.vue   | 24 +++++-
 frontend/src/layouts/templates/RightSide.vue  | 21 ++++-
 6 files changed, 148 insertions(+), 52 deletions(-)
 create mode 100644 frontend/public/img/svg/Gradido_Blaetter_Mainpage.svg
 create mode 100644 frontend/src/components/skeleton/Overview.vue

diff --git a/frontend/public/img/svg/Gradido_Blaetter_Mainpage.svg b/frontend/public/img/svg/Gradido_Blaetter_Mainpage.svg
new file mode 100644
index 000000000..e5815bde0
--- /dev/null
+++ b/frontend/public/img/svg/Gradido_Blaetter_Mainpage.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 673.47 722.49" style="enable-background:new 0 0 673.47 722.49;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F2F2F2;}
+</style>
+<path class="st0" d="M651.42,228.24c-60.85,51.18-92.46,94.8-99.91,105.69c0,0.02,0,0.03,0,0.05
+	c1.42,86.34-28.15,168.15-50.15,216.73c39.98-24.28,89.26-65.02,118.74-128.7l0,0C659.32,337.31,659.75,271.5,651.42,228.24z"/>
+<path class="st0" d="M646.33,207.44c-0.05-0.18-0.1-0.36-0.15-0.53c-2.99-10.12-6.9-19.95-11.68-29.36
+	c-17.24,6.73-56.21,25.49-96.38,68.97c5.66,18.49,9.52,37.49,11.52,56.73C566.8,281.58,598.73,246.5,646.33,207.44z"/>
+<path class="st0" d="M298.67,20.88c-0.2-0.07-0.4-0.15-0.59-0.21c-10.31-3.64-20.85-6.59-31.56-8.81
+	c-25.13,29.67-143.01,183.42-63.67,369.93c40.68,95.63,123.09,145.6,185.48,170.76c0.11,0.04,0.21,0.08,0.31,0.12
+	C324.51,465.51,231.5,283.62,298.67,20.88z"/>
+<path class="st0" d="M510.68,247.67l-2.43-7.18C459.77,109.65,374.24,52.52,317.22,28.11c-71.14,281.83,47.26,466.57,106.05,536.85
+	c16.02,4.94,28.92,7.91,36.87,9.52l0,0c11.18-20.87,40.87-80.69,55.88-153.12c0.01-0.04,0.02-0.09,0.03-0.13
+	c0.17-0.83,0.34-1.66,0.51-2.5C527.35,364.97,529.9,304.36,510.68,247.67z"/>
+<path class="st0" d="M421.89,593.39l0.57-0.38c-52.89-15.28-143.12-52.46-204.42-132.98c-16.54,7.11-32.45,15.63-47.53,25.46
+	C93.05,535.92,53.61,590.95,33.65,631.56c-0.11,0.22-0.21,0.43-0.31,0.66C212.12,676.57,341.56,639.33,421.89,593.39z"/>
+<path class="st0" d="M25.21,650.55c-4.32,10.7-7.73,21.74-10.19,33.01c32.95,14.7,159.32,62.04,304.57-0.12l0,0
+	c26.69-12.2,58.63-31.05,88.89-60.51c-54.82,27.16-127.46,48.99-217.62,48.99C141.92,671.91,85.22,665.71,25.21,650.55z"/>
+</svg>
diff --git a/frontend/src/components/Menu/SidebarNew.vue b/frontend/src/components/Menu/SidebarNew.vue
index be8ead2be..711ba854f 100644
--- a/frontend/src/components/Menu/SidebarNew.vue
+++ b/frontend/src/components/Menu/SidebarNew.vue
@@ -1,7 +1,11 @@
 <template>
   <div id="component-sidebar">
-    <div id="side-menu" class="pl-lg-1 gradido-border-radius shadow-default pt-2 mt-4">
-     
+    <div
+      id="side-menu"
+      ref="sideMenu"
+      class="pl-lg-1 gradido-border-radius shadow-default pt-2 mt-4"
+    >
+      <!-- @mouseout="$emit('toogleMobilMenu')" -->
       <div class="mb-6 mt-3">
         <b-nav vertical class="w-200">
           <b-nav-item to="/overview" class="mb-3">
@@ -62,6 +66,12 @@
             <b-icon icon="power" aria-hidden="true"></b-icon>
             <span class="d-none d-lg-inline ml-2">{{ $t('navigation.logout') }}</span>
           </b-nav-item>
+          <b-nav-item
+            class="mt-4 mb-3 d-block d-md-none d-lg-none"
+            @click="$emit('toogleMobilMenu')"
+          >
+            <b-icon icon="x" aria-hidden="true"></b-icon>
+          </b-nav-item>
         </b-nav>
       </div>
     </div>
diff --git a/frontend/src/components/skeleton/Overview.vue b/frontend/src/components/skeleton/Overview.vue
new file mode 100644
index 000000000..2713d949e
--- /dev/null
+++ b/frontend/src/components/skeleton/Overview.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <b-row class="text-center">
+      <b-col>
+        <b-skeleton-img no-aspect animation="wave" height="118px"></b-skeleton-img>
+      </b-col>
+      <b-col cols="6">
+        <b-skeleton animation="wave" class="mt-4 pt-5"></b-skeleton>
+      </b-col>
+      <b-col>
+        <div class="b-right m-4">
+          <b-row>
+            <b-col><b-skeleton type="avatar"></b-skeleton></b-col>
+            <b-col>
+              <b-skeleton></b-skeleton>
+              <b-skeleton></b-skeleton>
+            </b-col>
+          </b-row>
+        </div>
+      </b-col>
+    </b-row>
+    <b-row class="text-center mt-5">
+      <b-col>
+        <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-skeleton animation="wave" width="85%"></b-skeleton>
+        <b-skeleton animation="wave" width="55%"></b-skeleton>
+        <b-skeleton animation="wave" width="70%"></b-skeleton>
+        <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>
+        <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-row>
+  </div>
+</template>
diff --git a/frontend/src/layouts/DashboardLayout.vue b/frontend/src/layouts/DashboardLayout.vue
index 39a12178d..0903d5c91 100755
--- a/frontend/src/layouts/DashboardLayout.vue
+++ b/frontend/src/layouts/DashboardLayout.vue
@@ -1,68 +1,39 @@
 <template>
   <div class="main-page">
     <div v-if="skeleton">
-      <b-row class="text-center">
-        <b-col>
-          <b-skeleton-img no-aspect animation="wave" height="118px"></b-skeleton-img>
-        </b-col>
-        <b-col cols="6">
-          <b-skeleton animation="wave" class="mt-4 pt-5"></b-skeleton>
-        </b-col>
-        <b-col>
-          <div class="b-right m-4">
-            <b-row>
-              <b-col><b-skeleton type="avatar"></b-skeleton></b-col>
-              <b-col>
-                <b-skeleton></b-skeleton>
-                <b-skeleton></b-skeleton>
-              </b-col>
-            </b-row>
-          </div>
-        </b-col>
-      </b-row>
-      <b-row class="text-center mt-5">
-        <b-col>
-          <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-skeleton animation="wave" width="85%"></b-skeleton>
-          <b-skeleton animation="wave" width="55%"></b-skeleton>
-          <b-skeleton animation="wave" width="70%"></b-skeleton>
-          <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>
-          <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-row>
+      <skeleton-overview />
     </div>
     <div v-else>
       <!--sm menu mobil hamburger button-->
       <div class="d-block d-lg-none d-md-none d-sm-block fixed-bottom h-15 width70 zindex1000">
-        <b-button @click="toogleMobilMenu">
-          <span v-if="hamburger" class="navbar-toggler-icon"></span>
-          <span v-else><b-icon icon="x-square" aria-hidden="true"></b-icon></span>
+        {{ hamburger }}
+        <b-button v-if="hamburger" @click="toogleMobilMenu">
+          <span class="navbar-toggler-icon"></span>
         </b-button>
       </div>
-
       <b-row>
         <!-- navbar -->
         <b-col>
           <navbar-new class="main-navbar" :balance="balance"></navbar-new>
         </b-col>
       </b-row>
+      <div ref="sideMenuRow" class="d-none d-lg-none d-md-none zindex1000">
+        <sidebar-new
+          class="main-sidebar"
+          @admin="admin"
+          @logout="logout"
+          @modeToggle="modeToggle"
+          @toogleMobilMenu="toogleMobilMenu"
+        />
+      </div>
       <b-row fluid class="d-flex">
-        <b-col cols="2" ref="sideMenuRow" class="d-none d-lg-block d-md-block zindex1000">
+        <b-col cols="2" class="d-none d-lg-block d-md-block">
           <sidebar-new
             class="main-sidebar"
             @admin="admin"
             @logout="logout"
             @modeToggle="modeToggle"
+            @toogleMobilMenu="toogleMobilMenu"
           />
         </b-col>
         <b-col>
@@ -113,6 +84,7 @@
 <script>
 import ContentHeader from '@/layouts/templates/ContentHeader.vue'
 import RightSide from '@/layouts/templates/RightSide.vue'
+import SkeletonOverview from '@/components/skeleton/Overview.vue'
 // import Navbar from '@/components/Menu/Navbar.vue'
 import NavbarNew from '@/components/Menu/NavbarNew.vue'
 // import Sidebar from '@/components/Menu/Sidebar.vue'
@@ -127,6 +99,7 @@ import CONFIG from '@/config'
 export default {
   name: 'DashboardLayout',
   components: {
+    SkeletonOverview,
     ContentHeader,
     RightSide,
     // Navbar,
@@ -220,11 +193,10 @@ export default {
       this.tunneledEmail = email
     },
     toogleMobilMenu() {
-      // console.log(this.$refs.sideMenuRow.classList.contains('position-absolute'))
-
-      this.$refs.sideMenuRow.classList.toggle('d-none')
+      console.log(this.$refs.sideMenuRow.classList.value)
+      this.$refs.sideMenuRow.classList.toggle('d-inline')
       this.$refs.sideMenuRow.classList.toggle('position-absolute')
-      // console.log(document.getElementById('component-sidebar'))
+
       document.getElementById('side-menu').classList.toggle('bg-lightgrey')
       this.hamburger ? (this.hamburger = false) : (this.hamburger = true)
     },
@@ -256,6 +228,14 @@ export default {
 }
 </script>
 <style>
+/* frontend/public/img/svg/Gradido_Blaetter_Mainpage.svg */
+.main-page {
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-image: url(/img/svg/Gradido_Blaetter_Mainpage.svg) !important;
+}
 .b-right {
   text-align: -webkit-right;
 }
diff --git a/frontend/src/layouts/templates/ContentHeader.vue b/frontend/src/layouts/templates/ContentHeader.vue
index 7712f7905..507cecc40 100644
--- a/frontend/src/layouts/templates/ContentHeader.vue
+++ b/frontend/src/layouts/templates/ContentHeader.vue
@@ -1,3 +1,25 @@
 <template>
-  <div class="p-5">Content Header Template</div>
+  <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>
+      <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 === '/transactions'">transactions content header</b-container>
+      <b-container v-if="path === '/profile'">profile content header</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>
+  </div>
 </template>
+
+<script>
+export default {
+  name: 'ContentHeader',
+  computed: {
+    path() {
+      return this.$route.path
+    },
+  },
+}
+</script>
diff --git a/frontend/src/layouts/templates/RightSide.vue b/frontend/src/layouts/templates/RightSide.vue
index ec0dd059e..e6fb04b84 100644
--- a/frontend/src/layouts/templates/RightSide.vue
+++ b/frontend/src/layouts/templates/RightSide.vue
@@ -1,3 +1,22 @@
 <template>
-  <div class="p-5">Right Side Template</div>
+  <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>
+    <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 === '/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>
+    <b-container v-if="path === '/settings'">settings ride side</b-container>
+  </div>
 </template>
+<script>
+export default {
+  name: 'RightSide',
+  computed: {
+    path() {
+      return this.$route.path
+    },
+  },
+}
+</script>