Implement some router changes for v4

client/src/components/book-navigation/TopicNavigation.vue

@@ -1,8 +1,8 @@
 <template>
   <nav class="topic-navigation">
     <router-link
-      :to="{ name: 'topic', params: { topicSlug: topic.slug } }"
+      :to="{name: 'topic', params: {topicSlug: topic.slug}}"
-      :class="{ 'topic-navigation__topic--active': topic.active, 'book-subnavigation__item--mobile': mobile }"
+      :class="{'topic-navigation__topic--active': topic.active, 'book-subnavigation__item--mobile': mobile}"
       tag="div"
       active-class="book-subnavigation__item--active"
       class="topic-navigation__topic book-subnavigation__item"
@@ -17,49 +17,49 @@
 </template>
 
 <script>
-import ALL_TOPICS_QUERY from '@/graphql/gql/queries/allTopicsQuery.gql';
+  import ALL_TOPICS_QUERY from '@/graphql/gql/queries/allTopicsQuery.gql';
-import sidebarMixin from '@/mixins/sidebar';
+  import sidebarMixin from '@/mixins/sidebar';
 
-export default {
+  export default {
-  props: {
+    props: {
-    mobile: {
+      mobile: {
-      default: false,
+        default: false,
-    },
-  },
-
-  mixins: [sidebarMixin],
-
-  data() {
-    return {
-      topics: [],
-    };
-  },
-
-  methods: {
-    topicId(id) {
-      return atob(id);
-    },
-  },
-
-  apollo: {
-    topics: {
-      query: ALL_TOPICS_QUERY,
-      manual: true,
-      result({ data, loading }) {
-        if (!loading) {
-          this.topics = this.$getRidOfEdges(data).topics;
-        }
       },
     },
-  },
+
-};
+    mixins: [sidebarMixin],
+
+    data() {
+      return {
+        topics: [],
+      };
+    },
+
+    methods: {
+      topicId(id) {
+        return atob(id);
+      },
+    },
+
+    apollo: {
+      topics: {
+        query: ALL_TOPICS_QUERY,
+        manual: true,
+        result({data, loading}) {
+          if (!loading) {
+            this.topics = this.$getRidOfEdges(data).topics;
+          }
+        },
+      },
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
+  @import "~styles/helpers";
 
-.topic-navigation {
+  .topic-navigation {
-  &__topic {
+    &__topic {
+    }
   }
-}
 </style>

client/src/components/modules/ModuleTeaser.vue

@@ -1,6 +1,13 @@
 <template>
-  <router-link :to="moduleLink" :class="['module-teaser', { 'module-teaser--small': !teaser }]" tag="div">
+  <router-link
-    <div :style="{ backgroundImage: 'url(' + heroImage + ')' }" class="module-teaser__image" />
+    :to="moduleLink"
+    :class="['module-teaser', {'module-teaser--small': !teaser}]"
+    tag="div"
+  >
+    <div
+      :style="{backgroundImage: 'url('+heroImage+')'}"
+      class="module-teaser__image"
+    />
     <div class="module-teaser__body">
       <h3 class="module-teaser__meta-title">
         {{ metaTitle }}
@@ -16,68 +23,72 @@
 </template>
 
 <script>
-export default {
+  export default {
-  props: ['metaTitle', 'title', 'teaser', 'id', 'slug', 'heroImage'],
+    props: ['metaTitle', 'title', 'teaser', 'id', 'slug', 'heroImage'],
 
-  computed: {
+    computed: {
-    moduleLink() {
+      moduleLink() {
-      return {
+        if (this.slug) {
-        name: 'module',
+          return {
-        params: {
+            name: 'module',
-          slug: this.slug,
+            params: {
-        },
+              slug: this.slug
-      };
+            }
-    },
+          };
-  },
+        } else {
-};
+          return {};
+        }
+      }
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
+  @import "@/styles/_variables.scss";
-@import '@/styles/_mixins.scss';
+  @import "@/styles/_mixins.scss";
 
-.module-teaser {
+  .module-teaser {
-  box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
+    box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
-  border: 1px solid #e2e2e2;
+    border: 1px solid #E2E2E2;
-  height: 330px;
+    height: 330px;
-  max-width: 380px;
+    max-width: 380px;
-  width: 100%;
-  border-radius: 12px;
-  overflow: hidden;
-  box-sizing: border-box;
-  cursor: pointer;
-
-  &--small {
-    height: 300px;
-  }
-
-  &__image {
     width: 100%;
-    max-height: 150px;
+    border-radius: 12px;
-    height: 150px;
+    overflow: hidden;
-    background-position: center;
+    box-sizing: border-box;
-    background-size: 100% auto;
+    cursor: pointer;
-    background-repeat: no-repeat;
-  }
 
-  &__body {
+    &--small {
-    padding: 20px;
+      height: 300px;
-  }
+    }
 
-  &__meta-title {
+    &__image {
-    color: $color-silver-dark;
+      width: 100%;
-    margin-bottom: $large-spacing;
+      max-height: 150px;
-    @include regular-text;
+      height: 150px;
-  }
+      background-position: center;
+      background-size: 100% auto;
+      background-repeat: no-repeat;
+    }
 
-  &__title {
+    &__body {
-    @include heading-3;
+      padding: 20px;
-    margin-bottom: 5px;
+    }
-  }
 
-  &__description {
+    &__meta-title {
-    line-height: $default-line-height;
+      color: $color-silver-dark;
-    font-size: 1.2rem;
+      margin-bottom: $large-spacing;
+      @include regular-text;
+    }
+
+    &__title {
+      @include heading-3;
+      margin-bottom: 5px;
+    }
+
+    &__description {
+      line-height: $default-line-height;
+      font-size: 1.2rem;
+    }
   }
-}
 </style>