From 031e2a797d2a279a741db05aed889846d82f3a1a Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Mon, 27 Aug 2018 16:38:26 +0200
Subject: [PATCH] Add book and topic views including styling

---
 client/src/components/BookSidebar.vue         | 65 ++++++++++++++-----
 client/src/components/TopNavigation.vue       |  2 +-
 .../src/components/modules/ModuleTeaser.vue   | 19 ++++--
 client/src/layouts/DefaultLayout.vue          |  1 +
 client/src/pages/book.vue                     |  5 ++
 client/src/pages/topic.vue                    | 48 ++++++++++++--
 6 files changed, 112 insertions(+), 28 deletions(-)

diff --git a/client/src/components/BookSidebar.vue b/client/src/components/BookSidebar.vue
index 8db505fa..ddee0482 100644
--- a/client/src/components/BookSidebar.vue
+++ b/client/src/components/BookSidebar.vue
@@ -1,11 +1,15 @@
 <template>
-  <aside>
-    <h2>Themen</h2>
-    <ul>
-      <li v-for="topic in topics" :key="topic.id">{{topic.id}}. {{topic.title}}</li>
-    </ul>
-    <h2>Basiswissen</h2>
-    <h2>ABU News</h2>
+  <aside class="book-sidebar">
+    <h2 class="book-sidebar__title">Themen</h2>
+    <nav class="book-topics">
+      <div class="book-topics__topic"
+           :class="{'book-topics__topic--active': topic.active}"
+           v-for="topic in topics"
+           :key="topic.id">{{topic.id}}. {{topic.title}}
+      </div>
+    </nav>
+    <h2 class="book-sidebar__title">Basiswissen</h2>
+    <h2 class="book-sidebar__title">ABU News</h2>
   </aside>
 
 </template>
@@ -15,17 +19,48 @@
     data: () => {
       return {
         topics: [
-          {id: 1, title: 'Berufliche Grundbildung'},
+          {id: 1, title: 'Berufliche Grundbildung', active: true},
           {id: 2, title: 'Geld und Kauf'},
-          {id: 3, title: 'Geld und Kauf'},
-          {id: 4, title: 'Geld und Kauf'},
-          {id: 5, title: 'Kauf und Geld'},
-          {id: 6, title: 'Geld und Kauf'},
-          {id: 7, title: 'Geld und Kauf'},
-          {id: 8, title: 'Geld und Kauf'},
-          {id: 9, title: 'Geld und Kauf'}
+          {id: 3, title: 'Risiko und Sicherheit'},
+          {id: 4, title: 'Demokratie und Mitgestaltung'},
+          {id: 5, title: 'Kultur und Kunst'},
+          {id: 6, title: 'Die Schweiz in Europa und der Welt'},
+          {id: 7, title: 'Markt und Konsum'},
+          {id: 8, title: 'Globale Herausforderungen'},
+          {id: 9, title: 'Wohnen und Zusammenleben'},
+          {id: 10, title: 'Arbeit und Zukunft'},
+          {id: 11, title: 'Grundsätzliches zum Recht'}
         ]
       }
     }
   }
 </script>
+
+<style scoped lang="scss">
+  @import "@/styles/_functions.scss";
+  @import "@/styles/_variables.scss";
+
+  .book-sidebar {
+    &__title {
+      font-size: toRem(17px);
+      font-weight: 400;
+      color: $color-grey;
+    }
+  }
+
+  .book-topics {
+    padding-left: 24px;
+    margin-bottom: 25px;
+
+    &__topic {
+      font-family: $sans-serif-font-family;
+      font-size: toRem(14px);
+      margin-bottom: 20px;
+      color: $color-grey;
+
+      &--active {
+        color: $color-brand;
+      }
+    }
+  }
+</style>
diff --git a/client/src/components/TopNavigation.vue b/client/src/components/TopNavigation.vue
index e933fa11..7106e6ee 100644
--- a/client/src/components/TopNavigation.vue
+++ b/client/src/components/TopNavigation.vue
@@ -1,6 +1,6 @@
 <template>
   <nav class="top-navigation">
-    <router-link to="/module" active-class="top-navigation__link--active" class="top-navigation__link">Inhalte</router-link>
+    <router-link to="/book/topic" active-class="top-navigation__link--active" class="top-navigation__link">Inhalte</router-link>
     <router-link to="/rooms" active-class="top-navigation__link--active" class="top-navigation__link">Räume</router-link>
     <router-link to="/404" active-class="top-navigation__link--active" class="top-navigation__link">Portfolio</router-link>
   </nav>
diff --git a/client/src/components/modules/ModuleTeaser.vue b/client/src/components/modules/ModuleTeaser.vue
index 87b03456..9173ac62 100644
--- a/client/src/components/modules/ModuleTeaser.vue
+++ b/client/src/components/modules/ModuleTeaser.vue
@@ -1,15 +1,18 @@
 <template>
-  <div class="module-teaser">
-    <img src="@/assets/maggie.jpg" alt="" class="module-teaser__image">
+  <router-link to="/module" tag="div" class="module-teaser">
+    <img :src="'https://picsum.photos/300/150?random='+id" alt="" class="module-teaser__image">
     <div class="module-teaser__body">
-      <h3 class="module-teaser__meta-title">Modul 1</h3>
-      <h3 class="module-teaser__title">Mein neues Umfeld</h3>
-      <p class="module-teaser__description">Wie erging es Ihnen am ersten Arbeits- und Schultag?</p>
+      <h3 class="module-teaser__meta-title">{{metaTitle}}</h3>
+      <h3 class="module-teaser__title">{{title}}</h3>
+      <p class="module-teaser__description">{{description}}</p>
     </div>
-  </div>
+  </router-link>
 </template>
 
 <script>
+  export default {
+    props: ['metaTitle', 'title', 'description', 'id']
+  }
 </script>
 
 <style scoped lang="scss">
@@ -22,6 +25,8 @@
     width: 100%;
     border-radius: 12px;
     overflow: hidden;
+    box-sizing: border-box;
+    cursor: pointer;
 
     &__image {
       width: 100%;
@@ -33,7 +38,7 @@
     }
 
     &__meta-title {
-      color: $color-lightgrey;
+      color: $color-grey;
       margin-bottom: 20px;
       font-size: 1.2rem;
     }
diff --git a/client/src/layouts/DefaultLayout.vue b/client/src/layouts/DefaultLayout.vue
index 6702a9a1..9fca20f6 100644
--- a/client/src/layouts/DefaultLayout.vue
+++ b/client/src/layouts/DefaultLayout.vue
@@ -55,6 +55,7 @@
     grid-row-gap: 32px;
     min-height: 100vh;
     grid-template-areas: "h" "c";
+    padding-bottom: 50px;
 
     /*
      * For IE10+
diff --git a/client/src/pages/book.vue b/client/src/pages/book.vue
index 01c57e0a..fd39cccc 100644
--- a/client/src/pages/book.vue
+++ b/client/src/pages/book.vue
@@ -27,5 +27,10 @@
       display: grid;
     }
     grid-template-columns: 305px 1fr;
+    grid-column-gap: 50px;
+
+    justify-items: start;
+
+    padding: 0 24px;
   }
 </style>
diff --git a/client/src/pages/topic.vue b/client/src/pages/topic.vue
index b8cd50ad..e241ce1c 100644
--- a/client/src/pages/topic.vue
+++ b/client/src/pages/topic.vue
@@ -8,10 +8,7 @@
       das Zusammenleben und Zusammenarbeiten.
     </p>
     <div class="topic__modules">
-      <module-teaser></module-teaser>
-      <module-teaser></module-teaser>
-      <module-teaser></module-teaser>
-
+      <module-teaser v-for="module in modules" :key="module.id" v-bind="module"></module-teaser>
     </div>
   </div>
 </template>
@@ -22,6 +19,43 @@
   export default {
     components: {
       ModuleTeaser
+    },
+
+    data() {
+      return {
+        modules: [
+          {
+            id: 1,
+            metaTitle: 'Intro',
+            title: 'Video',
+            description: 'Die Berufsbildung ist ein neuer Lebensabschnitt'
+          },
+          {
+            id: 2,
+            metaTitle: 'Modul 1',
+            title: 'Mein neues Umfeld',
+            description: 'Wie erging es Ihnen am ersten Arbeits- und Schultag?'
+          },
+          {
+            id: 3,
+            metaTitle: 'Modul 2',
+            title: 'Lehrvertrag',
+            description: 'Haben Sie etwas in Ihrem Lehrvertrag noch nicht verstanden?'
+          },
+          {
+            id: 4,
+            metaTitle: 'Modul 3',
+            title: 'Miteinander reden',
+            description: 'Welches war Ihre letzte schwierige Gesprächs- situation?'
+          },
+          {
+            id: 5,
+            metaTitle: 'Modul 4',
+            title: 'Lerntipps',
+            description: 'Wie gehen Sie vor, wenn Sie sich auf eine Prüfung vor-bereiten?'
+          }
+        ]
+      }
     }
   }
 </script>
@@ -34,7 +68,9 @@
       color: $color-grey;
       font-size: 1.2rem;
       line-height: 25px;
-      max-width: 895px;
+      width: 90%;
+      max-width: 900px;
+      font-family: $sans-serif-font-family;
     }
 
     &__modules {
@@ -45,6 +81,8 @@
       }
       grid-template-columns: repeat(3, 1fr);
       grid-column-gap: 40px;
+      grid-row-gap: 30px;
+
     }
   }
 </style>