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,32 +149,23 @@
 <style scoped lang="scss">
   @import 'styles/helpers';
 
-  .container {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-
   .module-filter {
-    width: 100%;
-  }
 
-  .radio-group {
+    &__filterselection {
       display: flex;
       flex-wrap: wrap;
-  }
 
-  .radio-item {
-    display: flex;
-    align-items: center;
+    }
+    &__dropdown {
       margin-right: 20px;
-
+      width: 100%;
+      @include desktop {
+        width: 300px;
+      }
     }
 
-  .dropdown-container {
-    margin-left: 40px;
-    display: flex;
-    align-items: center;
+    &__module-filter {
+      width: 100%;
     }
 
     .topic {
@@ -209,4 +203,5 @@
         margin-bottom: $large-spacing;
       }
     }
+  }
 </style>

client/src/components/modules/ModuleFilterDropdown.vue

@@ -9,8 +9,10 @@
       @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>
+    <transition name="scaleY">
       <WidgetPopover
         :mobile="mobile"
         class="class-selection__popover"
@@ -31,13 +33,13 @@
 
 
       </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>