Move modules to modules filter

client/src/components/modules/ModuleFilter.vue

@@ -16,14 +16,12 @@
       <div class="dropdown-container">
         <select id="lernfeld-select" v-model="selectedLernfeld" @change="filterModules">
           <option v-for="(lernfeld, index) in lernfeldOptions" :key="index" :value="lernfeld"
->
+          >
             {{ lernfeld }}
           </option>
         </select>
       </div>
-
-
-
+    </div>
      <div class="topic__modules">
         <module-teaser
           v-for="module in filteredModules"
@@ -33,12 +31,6 @@
       </div>
 
 
-  </div>
-
-
-
-
-
   </div>
 </template>
 
@@ -59,7 +51,7 @@
 
 
   const firstLevelCategories = computed(() => {
-    return ["1. Lehrjahr", "2. Lehrjahr", "3. Lehrjahr", ];
+    return ["1. Lehrjahr", "2. Lehrjahr", "3. Lehrjahr",];
   });
 
   let filteredModules = computed(() => {
@@ -90,16 +82,16 @@
     return filteredModules;
 
 
-
   }
 </script>
 
 <style scoped lang="scss">
   @import 'styles/helpers';
-.container {
+
+  .container {
     display: flex;
     flex-wrap: wrap;
-}
+  }
 
 
   .module-filter {
@@ -122,9 +114,20 @@
     margin-left: 40px;
     display: flex;
     align-items: center;
-}
+  }
+  .topic {
+    display: grid;
+    padding: $large-spacing $small-spacing;
+    @include desktop {
+      padding: $large-spacing 0;
+    }
+    grid-template-columns: 1fr;
+    @include desktop {
+      grid-template-columns: 300px 1fr;
+    }
 
-  topic__modules {
+
+    &__modules {
       margin-top: 40px;
       display: flex;
       flex-wrap: wrap;
@@ -138,4 +141,13 @@
         grid-template-columns: repeat(3, minmax(auto, 380px));
       }
     }
+
+
+    &__teaser {
+      color: $color-charcoal-dark;
+      width: 90%;
+      @include lead-paragraph;
+      margin-bottom: $large-spacing;
+    }
+  }
 </style>

client/src/pages/topic-page.vue

@@ -15,7 +15,7 @@
         {{ topic.teaser }}
       </p>
       <div class="topic__modulefilter">
-        <module-filter></module-filter>
+        <module-filter :modules="modules"></module-filter>
       </div>
       <div class="topic__links">
         <div
@@ -36,13 +36,7 @@
           <span class="topic__link-description">Anweisungen zum {{ $flavor.textTopic }} anzeigen</span>
         </a>
       </div>
-      <div class="topic__modules">
-        <module-teaser
-          v-for="module in modules"
-          v-bind="module"
-          :key="module.slug"
-        />
-      </div>
+
     </div>
   </div>
 </template>
@@ -175,10 +169,6 @@ export default {
     grid-template-columns: 300px 1fr;
   }
 
-  &__modulefilter {
-    width: 90%;
-    height: 40px;
-  }
 
   &__navigation {
     padding: 0 $medium-spacing;
@@ -220,19 +210,5 @@ export default {
     @include heading-3;
   }
 
-  &__modules {
-    margin-top: 40px;
-    display: flex;
-    flex-wrap: wrap;
-    @supports (display: grid) {
-      display: grid;
-    }
-    grid-column-gap: $large-spacing;
-    grid-row-gap: $large-spacing;
-
-    @include desktop {
-      grid-template-columns: repeat(3, minmax(auto, 380px));
-    }
-  }
 }
 </style>