From 9440c9fb376079b210b9a920d07e6f1c178fa9e0 Mon Sep 17 00:00:00 2001 From: Benjamin Takats Date: Sun, 4 Dec 2022 14:00:27 +0100 Subject: [PATCH] responsive tables --- app/Http/Livewire/Tables/CityTable.php | 6 ++++-- app/Http/Livewire/Tables/CourseTable.php | 9 ++++++--- app/Http/Livewire/Tables/EventTable.php | 20 ++++++++++++------- app/Http/Livewire/Tables/LecturerTable.php | 11 ++++++---- app/Http/Livewire/Tables/VenueTable.php | 11 ++++++---- .../views/livewire/frontend/header.blade.php | 10 +++++----- 6 files changed, 42 insertions(+), 25 deletions(-) diff --git a/app/Http/Livewire/Tables/CityTable.php b/app/Http/Livewire/Tables/CityTable.php index b5d1b2d2..e5658b1f 100644 --- a/app/Http/Livewire/Tables/CityTable.php +++ b/app/Http/Livewire/Tables/CityTable.php @@ -45,11 +45,13 @@ class CityTable extends DataTableComponent Column::make('Veranstaltungs-Orte') ->label( fn($row, Column $column) => $row->venues_count - ), + ) + ->collapseOnMobile(), Column::make('Termine') ->label( fn($row, Column $column) => $row->events_count - ), + ) + ->collapseOnMobile(), Column::make('') ->label( fn($row, Column $column) => view('columns.cities.action')->withRow($row) diff --git a/app/Http/Livewire/Tables/CourseTable.php b/app/Http/Livewire/Tables/CourseTable.php index aeaea3f2..358044c9 100644 --- a/app/Http/Livewire/Tables/CourseTable.php +++ b/app/Http/Livewire/Tables/CourseTable.php @@ -39,7 +39,8 @@ class CourseTable extends DataTableComponent ->label( fn($row, Column $column) => view('columns.courses.lecturer')->withRow($row) ) - ->sortable(), + ->sortable() + ->collapseOnMobile(), Column::make("Name", "name") ->sortable(), Column::make("Termine") @@ -47,9 +48,11 @@ class CourseTable extends DataTableComponent fn($row, Column $column) => ''.$row->events_count.'' ) ->html() - ->sortable(), + ->sortable() + ->collapseOnMobile(), Column::make("Erstellt am", "created_at") - ->sortable(), + ->sortable() + ->collapseOnMobile(), Column::make('') ->label( fn($row, Column $column) => view('columns.courses.action')->withRow($row) diff --git a/app/Http/Livewire/Tables/EventTable.php b/app/Http/Livewire/Tables/EventTable.php index 9b63a516..f1263810 100644 --- a/app/Http/Livewire/Tables/EventTable.php +++ b/app/Http/Livewire/Tables/EventTable.php @@ -112,20 +112,24 @@ class EventTable extends DataTableComponent { return [ Column::make("Stadt", "venue.city.name") - ->sortable(), + ->sortable() + ->collapseOnMobile(), Column::make("Veranstaltungs-Ort", "venue.name") - ->sortable(), + ->sortable() + ->collapseOnMobile(), Column::make('Dozent', "course.lecturer.name") ->label( fn($row, Column $column) => view('columns.events.lecturer')->withRow($row) ) - ->sortable(), + ->sortable() + ->collapseOnMobile(), Column::make("Kurs", "course.name") ->sortable(), Column::make("Art") ->label( fn($row, Column $column) => view('columns.events.categories')->withRow($row) - ), + ) + ->collapseOnMobile(), Column::make("Von", "from") ->format( fn($value, $row, Column $column) => $value->asDateTime() @@ -135,17 +139,19 @@ class EventTable extends DataTableComponent ->format( fn($value, $row, Column $column) => $value->asDateTime() ) - ->sortable(), + ->sortable() + ->collapseOnMobile(), /*Column::make("Teilnehmer") ->label( fn($row, Column $column) => ''.$row->registrations->count().'' ) ->html() ->sortable(),*/ - Column::make('') + Column::make('Aktion') ->label( fn($row, Column $column) => view('columns.events.action')->withRow($row) - ), + ) + ->collapseOnMobile(), ]; } diff --git a/app/Http/Livewire/Tables/LecturerTable.php b/app/Http/Livewire/Tables/LecturerTable.php index 25024762..fc1c6423 100644 --- a/app/Http/Livewire/Tables/LecturerTable.php +++ b/app/Http/Livewire/Tables/LecturerTable.php @@ -36,22 +36,25 @@ class LecturerTable extends DataTableComponent public function columns(): array { return [ - ImageColumn::make('') + ImageColumn::make('Bild') ->location( fn($row) => $row->getFirstMediaUrl('avatar', 'thumb') ) ->attributes(fn($row) => [ 'class' => 'rounded h-16 w-16', 'alt' => $row->name.' Avatar', - ]), + ]) + ->collapseOnMobile(), Column::make("Name", "name") ->sortable(), BooleanColumn::make("Aktiv", 'active') - ->sortable(), + ->sortable() + ->collapseOnMobile(), Column::make('Kurse') ->label( fn($row, Column $column) => $row->courses_count - ), + ) + ->collapseOnMobile(), Column::make('') ->label( fn($row, Column $column) => view('columns.lectures.action')->withRow($row) diff --git a/app/Http/Livewire/Tables/VenueTable.php b/app/Http/Livewire/Tables/VenueTable.php index b2be5e36..e63e27ff 100644 --- a/app/Http/Livewire/Tables/VenueTable.php +++ b/app/Http/Livewire/Tables/VenueTable.php @@ -36,22 +36,25 @@ class VenueTable extends DataTableComponent public function columns(): array { return [ - ImageColumn::make('') + ImageColumn::make('Bild') ->location( fn($row) => $row->getFirstMediaUrl('images', 'thumb') ) ->attributes(fn($row) => [ 'class' => 'rounded h-16 w-16', 'alt' => $row->name.' Avatar', - ]), + ]) + ->collapseOnMobile(), Column::make("Name", "name") ->sortable(), Column::make("Street", "street") - ->sortable(), + ->sortable() + ->collapseOnMobile(), Column::make('Termine') ->label( fn($row, Column $column) => $row->events_count - ), + ) + ->collapseOnMobile(), Column::make('') ->label( fn($row, Column $column) => view('columns.venues.action')->withRow($row) diff --git a/resources/views/livewire/frontend/header.blade.php b/resources/views/livewire/frontend/header.blade.php index df87db71..48ecd7d9 100644 --- a/resources/views/livewire/frontend/header.blade.php +++ b/resources/views/livewire/frontend/header.blade.php @@ -12,7 +12,7 @@
-
+
@@ -37,11 +37,11 @@ @else
+ class="text-xs sm:text-base font-medium leading-6 text-gray-400 hover:text-gray-300 whitespace-no-wrap transition duration-150 ease-in-out"> Login + class="text-xs sm:text-base inline-flex items-center justify-center px-4 py-2 font-medium leading-6 text-gray-200 hover:text-white whitespace-no-wrap bg-gray-800 border border-transparent rounded shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-800"> Registrieren
@@ -82,7 +82,7 @@ }; @endphp + class="whitespace-nowrap bg-white px-4 lg:px-16 py-2 text-center lg:py-5 font-bold rounded text-xs md:text-xl lg:text-2xl mt-8 inline-block w-auto"> 👇 {{ $searchTitle }} finden 👇

{{-- TEXT --}}

@@ -117,7 +117,7 @@ @endforeach }); } - }" class="w-1/2"> + }" class="hidden sm:inline-block w-1/2"> {{----}}