Move modules to modules filter

client/src/components/modules/ModuleFilter.vue

@@ -1,30 +1,28 @@
 <template>
   <div>
     <div class="container">
-    <div class="radio-group">
-      <div v-for="(category, index) in firstLevelCategories" :key="index" class="radio-item">
-        <input
-          type="radio"
-          :value="category"
-          :id="'category-' + index"
-          v-model="selectedCategory"
-          @change="filterModules"
-        />
-        <label :for="'category-' + index">{{ category }}</label>
+      <div class="radio-group">
+        <div v-for="(category, index) in firstLevelCategories" :key="index" class="radio-item">
+          <input
+            type="radio"
+            :value="category"
+            :id="'category-' + index"
+            v-model="selectedCategory"
+            @change="filterModules"
+          />
+          <label :for="'category-' + index">{{ category }}</label>
+        </div>
+      </div>
+      <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="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 class="topic__modules">
+     <div class="topic__modules">
         <module-teaser
           v-for="module in filteredModules"
           v-bind="module"
@@ -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 {
-  display: flex;
-  flex-wrap: wrap;
-}
+
+  .container {
+    display: flex;
+    flex-wrap: wrap;
+  }
 
 
   .module-filter {
@@ -119,23 +111,43 @@
   }
 
   .dropdown-container {
-  margin-left: 40px;
-  display: flex;
-  align-items: center;
-}
-
-  topic__modules {
-    margin-top: 40px;
+    margin-left: 40px;
     display: flex;
-    flex-wrap: wrap;
-    @supports (display: grid) {
-      display: grid;
-    }
-    grid-column-gap: $large-spacing;
-    grid-row-gap: $large-spacing;
-
+    align-items: center;
+  }
+  .topic {
+    display: grid;
+    padding: $large-spacing $small-spacing;
     @include desktop {
-      grid-template-columns: repeat(3, minmax(auto, 380px));
+      padding: $large-spacing 0;
+    }
+    grid-template-columns: 1fr;
+    @include desktop {
+      grid-template-columns: 300px 1fr;
+    }
+
+
+    &__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));
+      }
+    }
+
+
+    &__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>