Refactored index pages to be mobile first

troccoli · Oct 2, 2024 · 128f3f3 · 128f3f3
1 parent 39dbec6
commit 128f3f3
Show file tree

Hide file tree

Showing 14 changed files with 161 additions and 39 deletions.
diff --git a/app/Livewire/Fixtures/Create.php b/app/Livewire/Fixtures/Create.php
@@ -38,7 +38,7 @@ public function save(): void
         $divisionId = $this->form->fixtureModel->division_id;
 
         $this->redirectRoute(
-            name: 'divisions.index',
+            name: 'fixtures.index',
             parameters: array_merge(
                 SeasonsFilter::buildQueryParam($seasonId),
                 CompetitionsFilter::buildQueryParam($competitionId),

diff --git a/app/Livewire/Fixtures/Edit.php b/app/Livewire/Fixtures/Edit.php
@@ -32,7 +32,7 @@ public function save(): void
         $divisionId = $this->form->fixtureModel->division_id;
 
         $this->redirectRoute(
-            name: 'divisions.index',
+            name: 'fixtures.index',
             parameters: array_merge(
                 SeasonsFilter::buildQueryParam($seasonId),
                 CompetitionsFilter::buildQueryParam($competitionId),

diff --git a/app/Livewire/Forms/FixtureForm.php b/app/Livewire/Forms/FixtureForm.php
@@ -39,7 +39,7 @@ public function rules(): array
             'home_team_id' => 'required|uuid|exists:teams,id',
             'away_team_id' => 'required|uuid|exists:teams,id',
             'match_date' => 'required|date',
-            'start_time' => 'required|time',
+            'start_time' => 'required|date_format:H:i',
             'venue_id' => 'required|uuid|exists:venues,id',
         ];
     }

diff --git a/app/Models/Fixture.php b/app/Models/Fixture.php
@@ -20,7 +20,7 @@
  * @property string home_team_id
  * @property string away_team_id
  * @property CarbonImmutable $match_date
- * @property-read CarbonImmutable $match_datetime
+ * @property-read CarbonImmutable $matchDateTime
  * @property string venue_id
  * @property-read Division $division
  * @property-read Team homeTeam

diff --git a/resources/views/components/crud/content.blade.php b/resources/views/components/crud/content.blade.php
@@ -1,4 +1,4 @@
-<div {{ $attributes->merge(['class' => 'px-1 overflow-x-auto']) }}>
+<div {{ $attributes->merge(['class' => 'mx-1 flex w-full items-center overflow-x-auto']) }}>
     <div class="inline-block min-w-full align-middle">
         {{ $slot }}
     </div>

diff --git a/resources/views/components/crud/index/cell.blade.php b/resources/views/components/crud/index/cell.blade.php
@@ -1 +1 @@
-<td {{ $attributes->merge(['class' => 'whitespace-nowrap py-2 pr-3 text-sm']) }}>{{ $slot }}</td>
+<td {{ $attributes->merge(['class' => 'whitespace-nowrap py-2 pr-3 text-sm grow']) }}>{{ $slot }}</td>
diff --git a/resources/views/components/crud/index/table.blade.php b/resources/views/components/crud/index/table.blade.php
@@ -1,24 +1,14 @@
-@props([
-'columns',
-])
+@props(['columns'])
 
-@php
-$columns = explode(',', $columns)
-@endphp
-<table class="w-full divide-y divide-gray-100 dark:divide-gray-700">
+<table {{ $attributes->merge(['class' => 'w-full divide-y divide-gray-100 dark:divide-gray-700']) }}>
     <thead>
     <tr>
-        @foreach($columns as $column)
+        @foreach(explode(',', $columns) as $column)
         <th scope="col"
             class="py-2 pr-3 text-left text-xs font-semibold uppercase tracking-wide">
             {{ $column }}
         </th>
         @endforeach
-
-        <th scope="col"
-            class="py-2 pl-3 text-left text-xs font-semibold uppercase tracking-wide">
-            Actions
-        </th>
     </tr>
     </thead>
     <tbody class="divide-y divide-gray-100 dark:divide-gray-700">

diff --git a/resources/views/livewire/club/index.blade.php b/resources/views/livewire/club/index.blade.php
@@ -5,7 +5,26 @@
     </x-crud.subheader>
 
     <x-crud.content class="mt-4">
-        <x-crud.index.table columns="name,venue">
+        <x-crud.index.table class="md:hidden" columns="">
+            @foreach ($clubs as $club)
+                <x-crud.index.row row-key="{{ $club->getKey() }}">
+                    <x-crud.index.cell>
+                        {{ $club->name }}
+                        <br />
+                        at {{ $club->venue->name }}
+                        <br/>
+                        <div class="flex gap-1 mt-2 pr-0 font-medium">
+                            <x-crud.index.show-button route="clubs.show" :model="$club" />
+                            <x-crud.index.edit-button route="clubs.edit" :model="$club" />
+                            <x-crud.index.delete-button :model="$club">
+                                Are you sure you want to delete the {{ $club->name }} club?
+                            </x-crud.index.delete-button>
+                        </div>
+                    </x-crud.index.cell>
+                </x-crud.index.row>
+            @endforeach
+        </x-crud.index.table>
+        <x-crud.index.table class="hidden md:block" columns="name,venue,actions">
             @foreach ($clubs as $club)
                 <x-crud.index.row row-key="{{ $club->getKey() }}">
                     <x-crud.index.cell>{{ $club->name }}</x-crud.index.cell>
@@ -21,7 +40,7 @@
             @endforeach
         </x-crud.index.table>
 
-        <div class="mt-4 px-4">
+        <div class="mt-4">
             {!! $clubs->withQueryString()->links() !!}
         </div>
     </x-crud.content>

diff --git a/resources/views/livewire/competition/index.blade.php b/resources/views/livewire/competition/index.blade.php
@@ -9,7 +9,24 @@
     </x-filters-section>
 
     <x-crud.content>
-        <x-crud.index.table columns="name">
+        <x-crud.index.table class="md:hidden" columns="">
+            @foreach ($competitions as $competition)
+                <x-crud.index.row row-key="{{ $competition->getKey() }}">
+                    <x-crud.index.cell>
+                        {{ $competition->name }}
+                        <br/>
+                        <div class="flex gap-1 mt-2 pr-0 font-medium">
+                            <x-crud.index.show-button route="competitions.show" :model="$competition" />
+                            <x-crud.index.edit-button route="competitions.edit" :model="$competition" />
+                            <x-crud.index.delete-button :model="$competition">
+                                Are you sure you want to delete the {{ $competition->name }} competition in
+                                the {{ $competition->season->name }} season?
+                            </x-crud.index.delete-button>
+                        </div>                    </x-crud.index.cell>
+                </x-crud.index.row>
+            @endforeach
+        </x-crud.index.table>
+        <x-crud.index.table class="hidden md:block" columns="name,actions">
             @foreach ($competitions as $competition)
                 <x-crud.index.row row-key="{{ $competition->getKey() }}">
                     <x-crud.index.cell>{{ $competition->name }}</x-crud.index.cell>

diff --git a/resources/views/livewire/division/index.blade.php b/resources/views/livewire/division/index.blade.php
@@ -5,28 +5,48 @@
     </x-crud.subheader>
 
     <x-filters-section>
-        <livewire:seasons.filter/>
-        <livewire:competitions.filter/>
+        <livewire:seasons.filter />
+        <livewire:competitions.filter />
     </x-filters-section>
 
     <x-crud.content>
-        <x-crud.index.table columns="name">
+        <x-crud.index.table class="md:hidden" columns="">
+            @foreach ($divisions as $division)
+                <x-crud.index.row row-key="{{ $division->getKey() }}">
+                    <x-crud.index.cell>
+                        {{ $division->name }}
+                        <br />
+                        <div class="flex gap-1 mt-2 pr-0 font-medium">
+                            <x-crud.index.show-button route="divisions.show" :model="$division" />
+                            <x-crud.index.edit-button route="divisions.edit" :model="$division" />
+                            <x-crud.index.delete-button :model="$division">
+                                Are you sure you want to delete the {{ $division->name }} divisions in
+                                the {{ $division->competition->name }}
+                                competition in the {{ $division->competition->season->name }} season?
+                            </x-crud.index.delete-button>
+                        </div>
+                    </x-crud.index.cell>
+                </x-crud.index.row>
+            @endforeach
+        </x-crud.index.table>
+        <x-crud.index.table class="hidden md:block" columns="name,actions">
             @foreach ($divisions as $division)
                 <x-crud.index.row row-key="{{ $division->getKey() }}">
                     <x-crud.index.cell>{{ $division->name }}</x-crud.index.cell>
                     <x-crud.index.cell class="flex gap-1 pl-2 pr-0 font-medium">
                         <x-crud.index.show-button route="divisions.show" :model="$division" />
                         <x-crud.index.edit-button route="divisions.edit" :model="$division" />
                         <x-crud.index.delete-button :model="$division">
-                            Are you sure you want to delete the {{ $division->name }} divisions in the {{ $division->competition->name }}
+                            Are you sure you want to delete the {{ $division->name }} divisions in
+                            the {{ $division->competition->name }}
                             competition in the {{ $division->competition->season->name }} season?
                         </x-crud.index.delete-button>
                     </x-crud.index.cell>
                 </x-crud.index.row>
             @endforeach
         </x-crud.index.table>
 
-        <div class="mt-4 px-4">
+        <div class="mt-4">
             {!! $divisions->withQueryString()->links() !!}
         </div>
     </x-crud.content>

diff --git a/resources/views/livewire/fixture/index.blade.php b/resources/views/livewire/fixture/index.blade.php
@@ -5,13 +5,36 @@
     </x-crud.subheader>
 
     <x-filters-section>
-        <livewire:seasons.filter/>
-        <livewire:competitions.filter/>
-        <livewire:divisions.filter/>
+        <livewire:seasons.filter />
+        <livewire:competitions.filter />
+        <livewire:divisions.filter />
     </x-filters-section>
 
     <x-crud.content>
-        <x-crud.index.table columns="#,home team, away team, date, start time, venue">
+        <x-crud.index.table class="md:hidden" columns="">
+            @foreach ($fixtures as $fixture)
+                <x-crud.index.row row-key="{{ $fixture->getKey() }}">
+                    <x-crud.index.cell>
+                        <span class="font-bold">Match # {{ $fixture->match_number }}</span>
+                        <br />
+                        {{ $fixture->homeTeam->name }} v {{ $fixture->awayTeam->name }}
+                        <br />
+                        on {{ $fixture->matchDateTime->isoFormat('LLLL') }}
+                        <br />
+                        at {{ $fixture->venue->name }}
+                        <br />
+                        <div class="flex gap-1 mt-2 pr-0 font-medium">
+                            <x-crud.index.show-button route="fixtures.show" :model="$fixture" />
+                            <x-crud.index.edit-button route="fixtures.edit" :model="$fixture" />
+                            <x-crud.index.delete-button :model="$fixture">
+                                Are you sure?
+                            </x-crud.index.delete-button>
+                        </div>
+                    </x-crud.index.cell>
+                </x-crud.index.row>
+            @endforeach
+        </x-crud.index.table>
+        <x-crud.index.table class="hidden md:block" columns="#,home team,away team,date,start time,venue,actions">
             @foreach ($fixtures as $fixture)
                 <x-crud.index.row row-key="{{ $fixture->getKey() }}">
                     <x-crud.index.cell>{{ $fixture->match_number }}</x-crud.index.cell>
@@ -20,7 +43,7 @@
                     <x-crud.index.cell>{{ $fixture->matchDatetime->toDateString() }}</x-crud.index.cell>
                     <x-crud.index.cell>{{ $fixture->matchDatetime->toTimeString() }}</x-crud.index.cell>
                     <x-crud.index.cell>{{ $fixture->venue->name }}</x-crud.index.cell>
-                    <x-crud.index.cell class="flex gap-1 pl-2 pr-0 font-medium">
+                    <x-crud.index.cell class="flex gap-1 pr-0 font-medium">
                         <x-crud.index.show-button route="fixtures.show" :model="$fixture" />
                         <x-crud.index.edit-button route="fixtures.edit" :model="$fixture" />
                         <x-crud.index.delete-button :model="$fixture">
@@ -31,7 +54,7 @@
             @endforeach
         </x-crud.index.table>
 
-        <div class="mt-4 px-4">
+        <div class="mt-4">
             {!! $fixtures->withQueryString()->links() !!}
         </div>
     </x-crud.content>

diff --git a/resources/views/livewire/season/index.blade.php b/resources/views/livewire/season/index.blade.php
@@ -5,7 +5,24 @@
     </x-crud.subheader>
 
     <x-crud.content class="mt-4">
-        <x-crud.index.table columns="name">
+        <x-crud.index.table class="md:hidden" columns="">
+            @foreach ($seasons as $season)
+                <x-crud.index.row row-key="{{ $season->getKey() }}">
+                    <x-crud.index.cell>
+                        {{ $season->name }}
+                        <br />
+                        <div class="flex gap-1 mt-2 pr-0 font-medium">
+                            <x-crud.index.show-button route="seasons.show" :model="$season" />
+                            <x-crud.index.edit-button route="seasons.edit" :model="$season" />
+                            <x-crud.index.delete-button :model="$season">
+                                Are you sure you want to delete season {{ $season->name }}?"
+                            </x-crud.index.delete-button>
+                        </div>
+                    </x-crud.index.cell>
+                </x-crud.index.row>
+            @endforeach
+        </x-crud.index.table>
+        <x-crud.index.table class="hidden md:block" columns="name,actions">
             @foreach ($seasons as $season)
                 <x-crud.index.row row-key="{{ $season->getKey() }}">
                     <x-crud.index.cell>{{ $season->name }}</x-crud.index.cell>
@@ -20,7 +37,7 @@
             @endforeach
         </x-crud.index.table>
 
-        <div class="mt-4 px-4">
+        <div class="mt-4">
             {!! $seasons->withQueryString()->links() !!}
         </div>
     </x-crud.content>

diff --git a/resources/views/livewire/team/index.blade.php b/resources/views/livewire/team/index.blade.php
@@ -9,7 +9,26 @@
     </x-filters-section>
 
     <x-crud.content>
-        <x-crud.index.table columns="name,venue">
+        <x-crud.index.table class="md:hidden" columns="">
+            @foreach ($teams as $team)
+                <x-crud.index.row row-key="{{ $team->getKey() }}">
+                    <x-crud.index.cell>
+                        {{ $team->name }}
+                        <br />
+                        at {{ $team->venue->name }}
+                        <br />
+                        <div class="flex gap-1 mt-2 pr-0 font-medium">
+                            <x-crud.index.show-button route="teams.show" :model="$team" />
+                            <x-crud.index.edit-button route="teams.edit" :model="$team" />
+                            <x-crud.index.delete-button :model="$team">
+                                Are you sure you want to delete team {{ $team->name }}?"
+                            </x-crud.index.delete-button>
+                        </div>
+                    </x-crud.index.cell>
+                </x-crud.index.row>
+            @endforeach
+        </x-crud.index.table>
+        <x-crud.index.table class="hidden md:block" columns="name,venue,actions">
             @foreach ($teams as $team)
                 <x-crud.index.row row-key="{{ $team->getKey() }}">
                     <x-crud.index.cell>{{ $team->name }}</x-crud.index.cell>
@@ -25,7 +44,7 @@
             @endforeach
         </x-crud.index.table>
 
-        <div class="mt-4 px-4">
+        <div class="mt-4">
             {!! $teams->withQueryString()->links() !!}
         </div>
     </x-crud.content>

diff --git a/resources/views/livewire/venue/index.blade.php b/resources/views/livewire/venue/index.blade.php
@@ -5,7 +5,24 @@
     </x-crud.subheader>
 
     <x-crud.content class="mt-4">
-        <x-crud.index.table columns="name">
+        <x-crud.index.table class="md:hidden" columns="">
+            @foreach ($venues as $venue)
+                <x-crud.index.row row-key="{{ $venue->getKey() }}">
+                    <x-crud.index.cell>
+                        {{ $venue->name }}
+                        <br/>
+                        <div class="flex gap-1 mt-2 pr-0 font-medium">
+                            <x-crud.index.show-button route="venues.show" :model="$venue" />
+                            <x-crud.index.edit-button route="venues.edit" :model="$venue" />
+                            <x-crud.index.delete-button :model="$venue">
+                                Are you sure you want to delete venue {{ $venue->name }}?"
+                            </x-crud.index.delete-button>
+                        </div>
+                    </x-crud.index.cell>
+                </x-crud.index.row>
+            @endforeach
+        </x-crud.index.table>
+        <x-crud.index.table class="hidden md:block" columns="name,actions">
             @foreach ($venues as $venue)
                 <x-crud.index.row row-key="{{ $venue->getKey() }}">
                     <x-crud.index.cell>{{ $venue->name }}</x-crud.index.cell>
@@ -20,7 +37,7 @@
             @endforeach
         </x-crud.index.table>
 
-        <div class="mt-4 px-4">
+        <div class="mt-4">
             {!! $venues->withQueryString()->links() !!}
         </div>
     </x-crud.content>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<td {{ $attributes->merge(['class' => 'whitespace-nowrap py-2 pr-3 text-sm']) }}>{{ $slot }}</td>
		<td {{ $attributes->merge(['class' => 'whitespace-nowrap py-2 pr-3 text-sm grow']) }}>{{ $slot }}</td>