Fix: Improve filter layout for mobile (#120)

ls1intum · Oct 16, 2024 · d08c7f4 · d08c7f4
1 parent 6a290c9
commit d08c7f4
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 12 deletions.
diff --git a/webapp/src/app/home/home.component.html b/webapp/src/app/home/home.component.html
@@ -1,6 +1,6 @@
 <div class="flex flex-col items-center">
   <div class="">
-    <div class="grid grid-cols-1 xl:grid-cols-4 gap-4 xl:gap-8">
+    <div class="grid grid-cols-1 xl:grid-cols-4 gap-y-4 xl:gap-8">
       <div class="space-y-2 col-span-1">
         <div class="flex flex-col gap-2 mb-4">
           <h1 class="text-3xl font-bold">Artemis Leaderboard</h1>

diff --git a/webapp/src/app/home/leaderboard/filter/filter.component.html b/webapp/src/app/home/leaderboard/filter/filter.component.html
@@ -1,9 +1,9 @@
-<div class="inline-flex flex-col gap-2 border rounded-md border-input bg-background p-4">
+<div class="w-full xl:w-fit inline-flex flex-col gap-2 border rounded-md border-input bg-background p-4">
   <span class="flex items-center pb-2 gap-2 text-muted-foreground">
     <lucide-angular [img]="ListFilter" class="size-4" />
     <h3 class="text-base font-semibold tracking-wide">Filter</h3>
   </span>
-  <form ngForm class="flex xl:flex-col gap-4">
+  <form ngForm class="flex flex-wrap gap-4">
     <app-leaderboard-filter-timeframe />
     @if (repositories() && repositories()!.length > 1) {
       <app-leaderboard-filter-repository [repositories]="repositories()!" />

diff --git a/webapp/src/app/home/leaderboard/filter/repository/repository.component.ts b/webapp/src/app/home/leaderboard/filter/repository/repository.component.ts
@@ -26,15 +26,13 @@ export class LeaderboardFilterRepositoryComponent {
   });
 
   options = computed(() => {
-    const options: SelectOption[] = !this.repositories()
-      ? []
-      : this.repositories()!.map((name, index) => {
-          return {
-            id: index + 1,
-            value: name,
-            label: name
-          };
-        });
+    const options: SelectOption[] = this.repositories().map((name, index) => {
+      return {
+        id: index + 1,
+        value: name,
+        label: name
+      };
+    });
     options.unshift({
       id: 0,
       value: 'all',