tweaking genre dropdown

Author: elkiki99

resources/css/app.css

@@ -9,6 +9,8 @@
 
     .swiper-button-next, .swiper-button-prev {
         color: white;
+        height: 10px;
+        width: 10px;
     }
 }
 

resources/views/components/dropdown.blade.php

@@ -8,7 +8,7 @@
     };
 
     $width = match ($width) {
-        '48' => 'w-48',
+        '64' => 'w-64 sm:w-96',
         default => $width,
     };
 @endphp

resources/views/components/movie-card.blade.php

@@ -3,20 +3,21 @@
 <div x-data="{ loaded: @js($loaded) }" wire:remove wire:key="item-{{ $movie['id'] }}"
     wire:target='toggle-watchlist,{{ $movie['id'] }}'
     class="relative transition duration-300 bg-gray-800 border border-transparent rounded-sm shadow-md hover:cursor-pointer hover:border-gray-400 hover:shadow-lg hover:shadow-gray-200/50">
-    <div class="absolute inset-0 flex items-center justify-center" x-show="!loaded">
-        <div class="w-8 h-8 border-4 border-gray-200 rounded-full border-t-gray-500 animate-spin"></div>
-    </div>
 
-    <div class="relative">
+    <div class="relative aspect-w-2 aspect-h-3">
+        <div class="absolute inset-0 flex items-center justify-center" x-show="!loaded">
+            <div class="w-8 h-8 border-4 border-gray-200 rounded-full border-t-gray-500 animate-spin"></div>
+        </div>
+
         <a href="{{ route('movies.show', $movie['id']) }}">
             <img loading="{{ $index < 6 ? 'eager' : 'lazy' }}"
-                src="https://image.tmdb.org/t/p/w500{{ $movie['poster_path'] }}" alt="{{ $movie['title'] }}"
-                class="object-cover w-full h-auto transition duration-500 ease-in-out opacity-0" @load="loaded = true"
+                src="{{ 'https://image.tmdb.org/t/p/w500' . $movie['poster_path'] }}" alt="{{ $movie['title'] }}"
+                class="object-cover w-full h-full transition duration-500 ease-in-out opacity-0" @load="loaded = true"
                 :class="loaded ? 'opacity-100' : 'opacity-0'">
         </a>
 
         <div class="absolute top-2 right-2">
-            <x-dropdown align="right" width="48" class="bg-black bg-opacity-50">
+            <x-dropdown align="top" width="48" class="bg-black bg-opacity-50">
                 <x-slot name="trigger">
                     <button>
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"

resources/views/livewire/genres/movie-genres.blade.php

@@ -18,8 +18,8 @@ public function loadMovieGenres()
     }
 }; ?>
 
-<div class="inline-flex">
-    <x-dropdown align="left" width="72" class="bg-black w-96 bg-opacity-80">
+<div class="inline-flex pt-2">
+    <x-dropdown align="right" width="64" class="bg-black bg-opacity-80">
         <x-slot name="trigger">
             <button
                 class="inline-flex items-center text-sm font-medium leading-4 text-gray-400 transition duration-150 ease-in-out bg-transparent border border-transparent rounded-md hover:text-gray-300 focus:outline-none">
@@ -36,9 +36,9 @@ class="inline-flex items-center text-sm font-medium leading-4 text-gray-400 tran
         </x-slot>
 
         <x-slot name="content">
-            <div class="grid grid-cols-3 gap-1">
+            <div class="grid grid-cols-2 gap-1 sm:grid-cols-3">
                 @foreach ($movieGenres as $genre)
-                    <x-dropdown-link href="{{ route('movies.genres', $genre['id'])}}" wire:navigate>
+                    <x-dropdown-link class="text-xs sm:text-sm" href="{{ route('movies.genres', $genre['id'])}}" wire:navigate>
                         {{ $genre['name'] }}
                     </x-dropdown-link>
                 @endforeach 

resources/views/livewire/genres/series-genres.blade.php

@@ -19,7 +19,7 @@ public function loadSeriesGenres()
 }; ?>
 
 <div class="inline-flex">
-    <x-dropdown align="left" width="96" class="bg-black w-96 bg-opacity-80">
+    <x-dropdown align="left" width="64" class="bg-black bg-opacity-80">
         <x-slot name="trigger">
             <button
                 class="inline-flex items-center text-sm font-medium leading-4 text-gray-400 transition duration-150 ease-in-out bg-transparent border border-transparent rounded-md hover:text-gray-300 focus:outline-none">
@@ -38,7 +38,7 @@ class="inline-flex items-center text-sm font-medium leading-4 text-gray-400 tran
         <x-slot name="content">
             <div class="grid grid-cols-3 gap-1 p-1">
                 @foreach ($seriesGenres as $genre)
-                    <x-dropdown-link href="{{ route('series.genres', $genre['id'])}}" wire:navigate>
+                    <x-dropdown-link class="text-xs sm:text-sm" href="{{ route('series.genres', $genre['id'])}}" wire:navigate>
                         {{ $genre['name'] }}
                     </x-dropdown-link>
                 @endforeach

resources/views/movies/index.blade.php

@@ -3,7 +3,9 @@
 
     <div class="px-4 sm:px-6 lg:px-8">
         <!-- Genres -->
-        <livewire:genres.movie-genres />
+        <div class="flex justify-end px-4">
+            <livewire:genres.movie-genres />
+        </div>
 
         <!-- Popular -->
         <livewire:movies.popular />

resources/views/series/index.blade.php

@@ -3,18 +3,20 @@
 
     <div class="px-4 sm:px-6 lg:px-8">
         <!-- Genres -->
-        <livewire:genres.series-genres />
-        
+        <div class="flex justify-end px-4">
+            <livewire:genres.series-genres />
+        </div>
+
         <!-- Airing today -->
         <livewire:series.airing-today />
-        
+
         <!-- Top rated -->
         <livewire:series.top-rated />
-        
+
         <!-- On the air -->
         <livewire:series.on-the-air />
-        
+
         <!-- Popular -->
         <livewire:series.popular />
     </div>
-</x-app-layout>
+</x-app-layout>