responsive tables

This commit is contained in:
Benjamin Takats
2022-12-04 14:00:27 +01:00
parent f0eb27e3c1
commit d6ecebfb1b
6 changed files with 42 additions and 25 deletions

View File

@@ -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)

View File

@@ -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) => '<strong>'.$row->events_count.'</strong>'
)
->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)

View File

@@ -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) => '<strong>'.$row->registrations->count().'</strong>'
)
->html()
->sortable(),*/
Column::make('')
Column::make('Aktion')
->label(
fn($row, Column $column) => view('columns.events.action')->withRow($row)
),
)
->collapseOnMobile(),
];
}

View File

@@ -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)

View File

@@ -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)

View File

@@ -12,7 +12,7 @@
</style>
<section class="w-full">
<div class="max-w-screen-2xl mx-auto px-10">
<div class="flex flex-col flex-wrap items-center justify-between py-7 mx-auto md:flex-row max-w-screen-2xl">
<div class="relative sm:sticky sm:top-0 bg-21gray z-50 flex flex-col flex-wrap items-center justify-between py-7 mx-auto md:flex-row max-w-screen-2xl">
<div class="relative flex flex-col md:flex-row">
<a href="{{ route('search.city', ['country' => $c]) }}"
class="flex items-center mb-5 font-medium text-gray-900 lg:w-auto lg:items-center lg:justify-center md:mb-0">
@@ -37,11 +37,11 @@
@else
<div class="inline-flex items-center ml-5 my-2 text-lg space-x-6 lg:justify-end">
<a href="{{ route('login') }}"
class="text-base font-medium leading-6 text-gray-400 hover:text-gray-300 whitespace-no-wrap transition duration-150 ease-in-out">
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
</a>
<a href="{{ route('register') }}"
class="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">
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
</a>
</div>
@@ -82,7 +82,7 @@
};
@endphp
<a href="#table"
class="whitespace-nowrap bg-white px-12 lg:px-16 py-4 text-center lg:py-5 font-bold rounded text-lg md:text-xl lg:text-2xl mt-8 inline-block w-auto">
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 👇
</a>
<p class="text-gray-400 font-normal mt-4">{{-- TEXT --}}</p>
@@ -117,7 +117,7 @@
@endforeach
});
}
}" class="w-1/2">
}" class="hidden sm:inline-block w-1/2">
{{--<img src="https://cdn.devdojo.com/images/march2022/mesh-gradient1.png"
class="absolute lg:max-w-none max-w-3xl mx-auto mt-32 w-full h-full inset-0">--}}
<div x-ref="myearth" class="earth-container"></div>