Update topic page

client/src/layouts/DefaultLayout.vue

@@ -6,7 +6,10 @@
     <profile-sidebar/>
     <header-bar class="header layout__header"/>
 
-    <router-view class="layout__content"/>
+    <router-view
+      :key="$route.fullPath"
+      class="layout__content"
+    />
     <default-footer class="layout__footer"/>
   </div>
 </template>

client/src/pages/book.vue

@@ -1,36 +0,0 @@
-<template>
-  <div class="book">
-    <main class="book__content">
-      <router-view :key="$route.fullPath"/>
-    </main>
-
-  </div>
-
-</template>
-
-<style scoped lang="scss">
-  @import "@/styles/_mixins.scss";
-
-  .book {
-    padding-top: $large-spacing;
-
-    &__content {
-      display: -ms-grid;
-      -ms-grid-columns: 1200px;
-      @supports (display: grid) {
-        display: grid;
-      }
-
-      grid-column-gap: 50px;
-
-      justify-items: start;
-
-      padding: 0 24px;
-
-      @include desktop {
-        grid-template-columns: 1200px;
-        justify-content: center;
-      }
-    }
-  }
-</style>

client/src/pages/topic.vue

@@ -1,32 +1,38 @@
 <template>
   <div class="topic">
-    <h1 class="topic__title">{{ topic.title }}</h1>
-    <p class="topic__teaser">
-      {{ topic.teaser }}
-    </p>
-    <div class="topic__links">
-      <div
-        class="topic__video-link topic__link"
-        v-if="topic.vimeoId"
-        @click="openVideo">
-        <play-icon class="topic__video-link-icon topic__link-icon"/>
-        <span class="topic__link-description">Video schauen</span>
-      </div>
-      <a
-        :href="topic.instructions"
-        target="_blank"
-        class="topic__instruction-link topic__link"
-        v-if="me.isTeacher && topic.instructions">
-        <bulb-icon class="topic__instruction-icon topic__link-icon"/>
-        <span class="topic__link-description">Anweisungen zum Thema anzeigen</span>
-      </a>
-
+    <div class="topic__navigation">
+      <book-topic-navigation />
     </div>
-    <div class="topic__modules">
-      <module-teaser
-        :key="module.id"
-        v-bind="module"
-        v-for="module in modules"/>
+
+    <div class="topic__content">
+      <h1 class="topic__title">{{ topic.title }}</h1>
+      <p class="topic__teaser">
+        {{ topic.teaser }}
+      </p>
+      <div class="topic__links">
+        <div
+          class="topic__video-link topic__link"
+          v-if="topic.vimeoId"
+          @click="openVideo">
+          <play-icon class="topic__video-link-icon topic__link-icon"/>
+          <span class="topic__link-description">Video schauen</span>
+        </div>
+        <a
+          :href="topic.instructions"
+          target="_blank"
+          class="topic__instruction-link topic__link"
+          v-if="me.isTeacher && topic.instructions">
+          <bulb-icon class="topic__instruction-icon topic__link-icon"/>
+          <span class="topic__link-description">Anweisungen zum Thema anzeigen</span>
+        </a>
+
+      </div>
+      <div class="topic__modules">
+        <module-teaser
+          :key="module.id"
+          v-bind="module"
+          v-for="module in modules"/>
+      </div>
     </div>
   </div>
 </template>
@@ -37,11 +43,13 @@
   import BulbIcon from '@/components/icons/BulbIcon';
   import TOPIC_QUERY from '@/graphql/gql/topicQuery.gql';
   import me from '@/mixins/me';
+  import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
 
   export default {
 
     mixins: [me],
     components: {
+      BookTopicNavigation,
       ModuleTeaser,
       PlayIcon,
       BulbIcon
@@ -90,6 +98,14 @@
   @import "@/styles/_mixins.scss";
 
   .topic {
+    display: grid;
+    padding: $large-spacing 0;
+    grid-template-columns: 300px 1fr;
+
+    &__navigation {
+      padding: 0 $medium-spacing;
+    }
+
     &__teaser {
       color: $color-charcoal-dark;
       width: 90%;
@@ -133,7 +149,7 @@
       grid-row-gap: $large-spacing;
 
       @include desktop {
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: repeat(3, minmax(auto, 380px));
       }
     }
   }