From 08e66795b5509e9a0dd67d2f815d3250f9ade265 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Mon, 1 Apr 2019 10:44:53 +0200
Subject: [PATCH] Add header to start page

---
 client/src/components/HeaderBar.vue  | 120 +++++++++++++++++++++++++++
 client/src/layouts/DefaultLayout.vue | 102 +----------------------
 client/src/pages/start.vue           |  13 ++-
 3 files changed, 133 insertions(+), 102 deletions(-)
 create mode 100644 client/src/components/HeaderBar.vue

diff --git a/client/src/components/HeaderBar.vue b/client/src/components/HeaderBar.vue
new file mode 100644
index 00000000..71f5770f
--- /dev/null
+++ b/client/src/components/HeaderBar.vue
@@ -0,0 +1,120 @@
+<template>
+  <header class="header-bar">
+    <top-navigation></top-navigation>
+    <router-link to="/" class="header-bar__logo">skillbox</router-link>
+    <div class="user-header">
+      <user-widget v-bind="me"></user-widget>
+      <logout-widget></logout-widget>
+    </div>
+    <book-navigation v-if="showSubnavigation">
+    </book-navigation>
+  </header>
+</template>
+
+<script>
+  import TopNavigation from '@/components/TopNavigation.vue';
+  import BookNavigation from '@/components/book-navigation/BookNavigation';
+  import UserWidget from '@/components/UserWidget.vue';
+  import LogoutWidget from '@/components/LogoutWidget.vue';
+
+  import ME_QUERY from '@/graphql/gql/meQuery.gql';
+
+  export default {
+    components: {
+      TopNavigation,
+      UserWidget,
+      LogoutWidget,
+      BookNavigation
+    },
+
+    computed: {
+      showSubnavigation() {
+        return this.$route.meta.subnavigation;
+      }
+    },
+
+    data() {
+      return {
+        me: {}
+      }
+    },
+
+    apollo: {
+      me: {
+        query: ME_QUERY,
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .header-bar {
+    display: -ms-grid;
+    @supports (display: grid) {
+      display: grid;
+    }
+    align-items: center;
+    justify-content: space-around;
+    background-color: $color-white;
+    grid-auto-rows: 50px;
+    width: 100%;
+
+    @include desktop {
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+
+    /*
+     * For IE10+
+     */
+    -ms-grid-columns: 1fr 1fr 1fr;
+    -ms-grid-rows: 60px 60px;
+
+    /*
+    * For IE10+
+    */
+    & > :nth-child(1) {
+      -ms-grid-column: 1;
+      -ms-grid-row-align: center;
+    }
+
+    /*
+    * For IE10+
+    */
+    & > :nth-child(3) {
+      -ms-grid-column: 3;
+      -ms-grid-row-align: center;
+      -ms-grid-column-align: end;
+
+      justify-self: end;
+    }
+
+    & > :nth-child(4) {
+      -ms-grid-row: 2;
+      -ms-grid-column: 1;
+      -ms-grid-column-span: 3;
+    }
+
+    &__logo {
+      color: #17A887;
+      font-size: 36px;
+      font-weight: 800;
+      font-family: $sans-serif-font-family;
+      display: flex;
+      justify-self: center;
+
+      /*
+      * For IE10+
+      */
+      -ms-grid-column: 2;
+      -ms-grid-row-align: center;
+      -ms-grid-column-align: center;
+    }
+  }
+
+  .user-header {
+    display: flex;
+  }
+</style>
diff --git a/client/src/layouts/DefaultLayout.vue b/client/src/layouts/DefaultLayout.vue
index 02201f0b..3ce6255e 100644
--- a/client/src/layouts/DefaultLayout.vue
+++ b/client/src/layouts/DefaultLayout.vue
@@ -1,15 +1,7 @@
 <template>
   <div class="container skillbox" :class="specialContainerClass">
-    <header class="header skillbox__header">
-      <top-navigation></top-navigation>
-      <router-link to="/" class="skillbox__header-logo">skillbox</router-link>
-      <div class="user-header">
-        <user-widget v-bind="me"></user-widget>
-        <logout-widget></logout-widget>
-      </div>
-      <book-navigation v-if="showSubnavigation">
-      </book-navigation>
-    </header>
+    <header-bar class="header skillbox__header">
+    </header-bar>
 
     <filter-bar v-if="showFilter"></filter-bar>
 
@@ -19,46 +11,24 @@
 </template>
 
 <script>
-  import TopNavigation from '@/components/TopNavigation.vue';
-  import BookNavigation from '@/components/book-navigation/BookNavigation';
-  import UserWidget from '@/components/UserWidget.vue';
   import FilterBar from '@/components/FilterBar.vue';
-  import LogoutWidget from '@/components/LogoutWidget.vue';
-  import ME_QUERY from '@/graphql/gql/meQuery.gql';
+  import HeaderBar from '@/components/HeaderBar.vue';
 
   export default {
     components: {
-      TopNavigation,
-      UserWidget,
       FilterBar,
-      LogoutWidget,
-      BookNavigation
+      HeaderBar
     },
 
     computed: {
       showFilter() {
         return this.$route.meta.filter;
       },
-      showSubnavigation() {
-        return this.$route.meta.subnavigation;
-      },
       specialContainerClass() {
         let cls = this.$store.state.specialContainerClass;
         return [cls ? `skillbox--${cls}` : '', {'skillbox--show-filter': this.showFilter}]
       }
     },
-
-    data() {
-      return {
-        me: {}
-      }
-    },
-
-    apollo: {
-      me: {
-        query: ME_QUERY,
-      },
-    },
   }
 </script>
 
@@ -93,67 +63,7 @@
 
     &__header {
       grid-area: h;
-      display: -ms-grid;
-      @supports (display: grid) {
-        display: grid;
-      }
-      align-items: center;
-      justify-content: space-around;
-      background-color: $color-white;
-      grid-auto-rows: 50px;
-      width: 100%;
 
-      @include desktop {
-        grid-template-columns: 1fr 1fr 1fr;
-      }
-
-      /*
-       * For IE10+
-       */
-      -ms-grid-columns: 1fr 1fr 1fr;
-      -ms-grid-rows: 60px 60px;
-
-      /*
-      * For IE10+
-      */
-      & > :nth-child(1) {
-        -ms-grid-column: 1;
-        -ms-grid-row-align: center;
-      }
-
-      /*
-      * For IE10+
-      */
-      & > :nth-child(3) {
-        -ms-grid-column: 3;
-        -ms-grid-row-align: center;
-        -ms-grid-column-align: end;
-
-        justify-self: end;
-      }
-
-      & > :nth-child(4) {
-        -ms-grid-row: 2;
-        -ms-grid-column: 1;
-        -ms-grid-column-span: 3;
-      }
-
-    }
-
-    &__header-logo {
-      color: #17A887;
-      font-size: 36px;
-      font-weight: 800;
-      font-family: $sans-serif-font-family;
-      display: flex;
-      justify-self: center;
-
-      /*
-      * For IE10+
-      */
-      -ms-grid-column: 2;
-      -ms-grid-row-align: center;
-      -ms-grid-column-align: center;
     }
 
     &__footer {
@@ -169,8 +79,4 @@
       -ms-grid-column: 1;
     }
   }
-
-  .user-header {
-    display: flex;
-  }
 </style>
diff --git a/client/src/pages/start.vue b/client/src/pages/start.vue
index f6718d4a..79cabeed 100644
--- a/client/src/pages/start.vue
+++ b/client/src/pages/start.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="start-page">
-    <h1 class="start-page__title h1"><span class="start-page__my">my</span>skillbox</h1>
+    <header-bar class="start-page__header"></header-bar>
     <div class="start-page__sections start-sections">
 
       <section-block
@@ -43,11 +43,10 @@
     </div>
   </div>
 </template>
-
 <script>
-
   import SectionBlock from '@/components/SectionBlock.vue';
   import NewsTeaser from '@/components/NewsTeaser.vue';
+  import HeaderBar from '@/components/HeaderBar';
 
   import ContentsIllustration from '@/components/illustrations/ContentsIllustration';
   import PortfolioIllustration from '@/components/illustrations/PortfolioIllustration';
@@ -57,6 +56,7 @@
 
   export default {
     components: {
+      HeaderBar,
       SectionBlock,
       NewsTeaser,
       ContentsIllustration,
@@ -91,6 +91,7 @@
   }
 </script>
 
+
 <style scoped lang="scss">
 
   @import "@/styles/_variables.scss";
@@ -101,7 +102,10 @@
     grid-template-rows: auto 1fr auto;
     min-height: 100vh;
     box-sizing: border-box;
-    padding-top: 2*$large-spacing;
+
+    &__header {
+      
+    }
 
     &__title {
       color: $color-brand;
@@ -143,6 +147,7 @@
     grid-row-gap: 15px;
     grid-column-gap: 50px;
     justify-items: start;
+    align-items: center;
   }
 
   .news {