add responsive table

This commit is contained in:
2024-04-28 16:26:02 +10:00
parent befebc44cb
commit e2fed71896

View File

@@ -17,18 +17,25 @@
<x-ui.table> <x-ui.table>
<x-slot:header> <x-slot:header>
<th>Title</th> <th>Title</th>
<th>Status</th> <th class="hidden lg:table-cell">Status</th>
<th>Location</th> <th class="hidden lg:table-cell">Location</th>
<th>Starts</th> <th class="hidden md:table-cell">Starts</th>
<th>Action</th> <th>Action</th>
</x-slot:header> </x-slot:header>
<x-slot:body> <x-slot:body>
@foreach ($workshops as $workshop) @foreach ($workshops as $workshop)
<tr> <tr>
<td>{{ $workshop->title }}</td> <td class="flex items-center">
<td>{{ ucwords($workshop->status) }}</td> <img src="{{ $workshop->hero->thumbnail }}" class="max-h-12 max-w-12 -ml-2 -my-3 mr-3 inline rounded" alt="{{ $workshop->hero->title }}" />
<td>{{ $workshop->location->name }}</td> <div>
<td>{{ \Carbon\Carbon::parse($workshop->starts_at)->format('M j Y, g:i a') }}</td> <div class="whitespace-normal">{{ $workshop->title }}</div>
<div class="lg:hidden text-xs text-gray-500">{{ $workshop->location->name }} ({{ ucwords($workshop->status) }})</div>
<div class="md:hidden text-xs text-gray-500">{{ \Carbon\Carbon::parse($workshop->starts_at)->format('j/m/Y g:i a') }}</div>
</div>
</td>
<td class="hidden lg:table-cell">{{ ucwords($workshop->status) }}</td>
<td class="hidden lg:table-cell">{{ $workshop->location->name }}</td>
<td class="hidden md:table-cell">{{ \Carbon\Carbon::parse($workshop->starts_at)->format('M j Y, g:i a') }}</td>
<td> <td>
<div class="flex justify-center gap-3"> <div class="flex justify-center gap-3">
<a href="{{ route('admin.workshop.edit', $workshop) }}" class="hover:text-primary-color"><i class="fa-solid fa-pen-to-square"></i></a> <a href="{{ route('admin.workshop.edit', $workshop) }}" class="hover:text-primary-color"><i class="fa-solid fa-pen-to-square"></i></a>