Add book and topic views including styling

client/src/components/BookSidebar.vue

@@ -1,11 +1,15 @@
 <template>
-  <aside>
+  <aside class="book-sidebar">
-    <h2>Themen</h2>
+    <h2 class="book-sidebar__title">Themen</h2>
-    <ul>
+    <nav class="book-topics">
-      <li v-for="topic in topics" :key="topic.id">{{topic.id}}. {{topic.title}}</li>
+      <div class="book-topics__topic"
-    </ul>
+           :class="{'book-topics__topic--active': topic.active}"
-    <h2>Basiswissen</h2>
+           v-for="topic in topics"
-    <h2>ABU News</h2>
+           :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: 3, title: 'Risiko und Sicherheit'},
-          {id: 4, title: 'Geld und Kauf'},
+          {id: 4, title: 'Demokratie und Mitgestaltung'},
-          {id: 5, title: 'Kauf und Geld'},
+          {id: 5, title: 'Kultur und Kunst'},
-          {id: 6, title: 'Geld und Kauf'},
+          {id: 6, title: 'Die Schweiz in Europa und der Welt'},
-          {id: 7, title: 'Geld und Kauf'},
+          {id: 7, title: 'Markt und Konsum'},
-          {id: 8, title: 'Geld und Kauf'},
+          {id: 8, title: 'Globale Herausforderungen'},
-          {id: 9, title: 'Geld und Kauf'}
+          {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>

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>

client/src/components/modules/ModuleTeaser.vue

@@ -1,15 +1,18 @@
 <template>
-  <div class="module-teaser">
+  <router-link to="/module" tag="div" class="module-teaser">
-    <img src="@/assets/maggie.jpg" alt="" class="module-teaser__image">
+    <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__meta-title">{{metaTitle}}</h3>
-      <h3 class="module-teaser__title">Mein neues Umfeld</h3>
+      <h3 class="module-teaser__title">{{title}}</h3>
-      <p class="module-teaser__description">Wie erging es Ihnen am ersten Arbeits- und Schultag?</p>
+      <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;
     }

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+

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>

client/src/pages/topic.vue

@@ -8,10 +8,7 @@
       das Zusammenleben und Zusammenarbeiten.
     </p>
     <div class="topic__modules">
-      <module-teaser></module-teaser>
+      <module-teaser v-for="module in modules" :key="module.id" v-bind="module"></module-teaser>
-      <module-teaser></module-teaser>
-      <module-teaser></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>