Add Styling

client/src/components/modules/ModuleFilter.vue

@@ -1,12 +1,15 @@
 <template>
-  <div>
-    <div class="container">
-      <ModuleFilterDropdown :selected-item="selectedCategory"
+  <div class="module-filter">
+    <div class="module-filter__filterselection">
+      <ModuleFilterDropdown class="module-filter__dropdown"
+                            :selected-item="selectedCategory"
                             :items="firstLevelCategories"
                             @update:selectedItem="newItem => selectedCategory = newItem"
       ></ModuleFilterDropdown>
 
-      <ModuleFilterDropdown :selected-item="selectedLernfeld"
+      <ModuleFilterDropdown
+        class="module-filter__dropdown"
+        :selected-item="selectedLernfeld"
                             :items="lernfeldOptions"
                             @update:selectedItem="newItem => selectedLernfeld = newItem"
       ></ModuleFilterDropdown>
@@ -146,67 +149,59 @@
 <style scoped lang="scss">
   @import 'styles/helpers';
 
-  .container {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-
   .module-filter {
-    width: 100%;
-  }
 
-  .radio-group {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .radio-item {
-    display: flex;
-    align-items: center;
-    margin-right: 20px;
-
-  }
-
-  .dropdown-container {
-    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;
-    }
-
-
-    &__modules {
-      margin-top: 40px;
+    &__filterselection {
       display: flex;
       flex-wrap: wrap;
-      @supports (display: grid) {
-        display: grid;
-      }
-      grid-column-gap: $large-spacing;
-      grid-row-gap: $large-spacing;
 
+    }
+    &__dropdown {
+      margin-right: 20px;
+      width: 100%;
       @include desktop {
-        grid-template-columns: repeat(3, minmax(auto, 380px));
+        width: 300px;
       }
     }
 
+    &__module-filter {
+      width: 100%;
+    }
 
-    &__teaser {
-      color: $color-charcoal-dark;
-      width: 90%;
-      @include lead-paragraph;
-      margin-bottom: $large-spacing;
+    .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;
+      }
+
+
+      &__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/components/modules/ModuleFilterDropdown.vue

@@ -9,35 +9,37 @@
       @click.stop="toggle()"
     >
       <span class="selected-class__text"> {{ selectedItem.name }}</span>
-      <ChevronDown class="selected-class__dropdown-icon"/>
+      <ChevronDown class="selected-class__dropdown-icon" :class="{'rotate-chevron': showPopover}"
+      />
     </div>
-    <WidgetPopover
-      :mobile="mobile"
-      class="class-selection__popover"
-      v-if="showPopover"
-      @hide-me="showPopover = false"
-    >
-      <li
-        :label="selectedItem.name"
-        :item="selectedItem"
-        data-cy="class-selection-entry"
-        class="popover-links__link popover-links__link--large"
-        v-for="item in items"
-        :key="item.id"
-        @click="updateSelectedItem(item)"
+    <transition name="scaleY">
+      <WidgetPopover
+        :mobile="mobile"
+        class="class-selection__popover"
+        v-if="showPopover"
+        @hide-me="showPopover = false"
       >
-        <i v-if="selectedItem === item">A</i><span>{{ item.name }}</span>
-      </li>
+        <li
+          :label="selectedItem.name"
+          :item="selectedItem"
+          data-cy="class-selection-entry"
+          class="popover-links__link popover-links__link--large"
+          v-for="item in items"
+          :key="item.id"
+          @click="updateSelectedItem(item)"
+        >
+          <i v-if="selectedItem === item">A</i><span>{{ item.name }}</span>
+        </li>
 
 
-    </WidgetPopover>
+      </WidgetPopover>
+    </transition>
   </div>
 </template>
 
 <script setup lang="ts">
   import WidgetPopover from '@/components/ui/WidgetPopover.vue';
-  import {computed, ref, defineAsyncComponent} from "vue";
-  import {defineComponent} from "vue";
+  import {ref} from "vue";
   import ChevronDown from "@/components/icons/ChevronDown.vue";
 
   const props = defineProps<{
@@ -57,6 +59,7 @@
     emit('update:selectedItem', item);
     showPopover.value = false;
   }
+
   const emit = defineEmits(['update:selectedItem']);
 
 </script>
@@ -75,7 +78,7 @@
       white-space: nowrap;
       top: 100%;
       left: 0;
-      transform: translateY($small-spacing);
+      transform-origin: top;
     }
   }
 
@@ -102,12 +105,35 @@
     &__dropdown-icon {
       width: 20px;
       height: 20px;
+      transition: transform 0.3s ease;
+
       fill: #139EE0;
+
+      &.rotate-chevron { // This class will be applied when showPopover is true
+        transform: rotate(180deg);
+      }
     }
   }
 
   .widget-popover {
     width: 100%;
     border-radius: 12px;
+
+    .popover-links__link {
+      &:hover {
+        background-color: #efefef;
+      }
+    }
+  }
+
+  .scaleY-enter-active,
+  .scaleY-leave-active {
+    transition: transform 0.3s;
+  }
+
+  .scaleY-enter,
+  .scaleY-leave-to
+  {
+    transform: scaleY(0);
   }
 </style>