[Update] Season Pagination

- Added `whitespace-nowrap` to types and years so the buttons don't grow in size on smaller screens
Kurozora · Nov 22, 2024 · b150a96 · b150a96
1 parent 47359cb
commit b150a96
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/resources/views/components/season-pagination.blade.php b/resources/views/components/season-pagination.blade.php
@@ -23,7 +23,7 @@
     };
 @endphp
 
-<div class="flex flex-wrap gap-4 justify-between">
+<div class="flex flex-wrap gap-4 justify-between items-baseline">
     <div class="flex gap-2 overflow-x-scroll no-scrollbar">
         {{-- Previous page --}}
         @php
@@ -41,11 +41,11 @@
         @endphp
 
         @if ($nextYear < 1917 && $nextSeasonOfYear->value === \App\Enums\SeasonOfYear::Fall)
-            <a class="pl-4 pr-4 pb-2 border-b-2 hover:border-orange-500" href="{{ route($seasonIndexRouteName) }}">
+            <a class="pl-4 pr-4 pb-2 whitespace-nowrap border-b-2 hover:border-orange-500" href="{{ route($seasonIndexRouteName) }}">
                 {{ __('Current') }}
             </a>
         @else
-            <a class="pl-4 pr-4 pb-2 border-b-2 hover:border-orange-500" href="{{ route($seasonYearRouteName, [$nextYear, $nextSeasonOfYear->key]) }}">
+            <a class="pl-4 pr-4 pb-2 whitespace-nowrap border-b-2 hover:border-orange-500" href="{{ route($seasonYearRouteName, [$nextYear, $nextSeasonOfYear->key]) }}">
                 {{ $nextSeasonOfYear->key . ' ' . $nextYear }}
             </a>
         @endif
@@ -54,7 +54,7 @@
         @php
             $active = request()->routeIs($seasonYearRouteName, [$year, $seasonOfYear->key]);
         @endphp
-        <a class="pl-4 pr-4 pb-2 border-b-2 {{ $active ? 'border-orange-500' : 'hover:border-orange-500' }}" href="{{ route($seasonYearRouteName, [$year, $seasonOfYear->key]) }}">
+        <a class="pl-4 pr-4 pb-2 whitespace-nowrap border-b-2 {{ $active ? 'border-orange-500' : 'hover:border-orange-500' }}" href="{{ route($seasonYearRouteName, [$year, $seasonOfYear->key]) }}">
             {{ $seasonOfYear->key . ' ' . $year }}
         </a>
 
@@ -75,7 +75,7 @@
                 $previousYear = $nextYear;
                 $previousSeasonOfYear = $nextSeasonOfYear;
             @endphp
-            <a class="pl-4 pr-4 pb-2 border-b-2 hover:border-orange-500" href="{{ route($seasonYearRouteName, [$nextYear, $nextSeasonOfYear->key]) }}">
+            <a class="pl-4 pr-4 pb-2 whitespace-nowrap border-b-2 hover:border-orange-500" href="{{ route($seasonYearRouteName, [$nextYear, $nextSeasonOfYear->key]) }}">
                 {{ $nextSeasonOfYear->key . ' ' . $nextYear }}
             </a>
         @endforeach
@@ -84,15 +84,15 @@
         @php
             $active = request()->routeIs($seasonScheduleRouteName, [$year, $seasonOfYear->key]);
         @endphp
-        <a class="pl-4 pr-4 pb-2 border-b-2 {{ $active ? 'border-orange-500' : 'hover:border-orange-500' }}" href="{{ route($seasonScheduleRouteName) }}">
+        <a class="pl-4 pr-4 pb-2 whitespace-nowrap border-b-2 {{ $active ? 'border-orange-500' : 'hover:border-orange-500' }}" href="{{ route($seasonScheduleRouteName) }}">
             {{ __('Schedule') }}
         </a>
 
         {{-- Archive --}}
         @php
             $active = request()->routeIs($seasonArchiveRouteName, [$year, $seasonOfYear->key]);
         @endphp
-        <a class="pl-4 pr-4 pb-2 border-b-2 {{ $active ? 'border-orange-500' : 'hover:border-orange-500' }}" href="{{ route($seasonArchiveRouteName) }}">
+        <a class="pl-4 pr-4 pb-2 whitespace-nowrap border-b-2 {{ $active ? 'border-orange-500' : 'hover:border-orange-500' }}" href="{{ route($seasonArchiveRouteName) }}">
             {{ __('Archive') }}
         </a>
     </div>

diff --git a/resources/views/livewire/browse/anime/seasons/index.blade.php b/resources/views/livewire/browse/anime/seasons/index.blade.php
@@ -46,11 +46,11 @@ class="max-w-7xl mx-auto pl-4 pr-4 py-6 sm:px-6"
 
                 @foreach ($this->mediaTypes as $mediaType)
                     <template x-if="selectedMediaType === '{{ $mediaType->name }}'">
-                        <x-button>{{ $mediaType->name }}</x-button>
+                        <x-button class="whitespace-nowrap">{{ $mediaType->name }}</x-button>
                     </template>
 
                     <template x-if="selectedMediaType !== '{{ $mediaType->name }}'">
-                        <x-outlined-button x-on:click="selectedMediaType = '{{ $mediaType->name }}'">{{ $mediaType->name }}</x-outlined-button>
+                        <x-outlined-button class="whitespace-nowrap" x-on:click="selectedMediaType = '{{ $mediaType->name }}'">{{ $mediaType->name }}</x-outlined-button>
                     </template>
                 @endforeach
             </div>