From e2fed718964c855a152c2ec4951b55ff3fa133ac Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Sun, 28 Apr 2024 16:26:02 +1000
Subject: [PATCH] add responsive table

---
 .../views/admin/workshop/index.blade.php      | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/resources/views/admin/workshop/index.blade.php b/resources/views/admin/workshop/index.blade.php
index ecc37da..85e5568 100644
--- a/resources/views/admin/workshop/index.blade.php
+++ b/resources/views/admin/workshop/index.blade.php
@@ -17,18 +17,25 @@
             <x-ui.table>
                 <x-slot:header>
                     <th>Title</th>
-                    <th>Status</th>
-                    <th>Location</th>
-                    <th>Starts</th>
+                    <th class="hidden lg:table-cell">Status</th>
+                    <th class="hidden lg:table-cell">Location</th>
+                    <th class="hidden md:table-cell">Starts</th>
                     <th>Action</th>
                 </x-slot:header>
                 <x-slot:body>
                     @foreach ($workshops as $workshop)
                         <tr>
-                            <td>{{ $workshop->title }}</td>
-                            <td>{{ ucwords($workshop->status) }}</td>
-                            <td>{{ $workshop->location->name }}</td>
-                            <td>{{ \Carbon\Carbon::parse($workshop->starts_at)->format('M j Y, g:i a') }}</td>
+                            <td class="flex items-center">
+                                <img src="{{ $workshop->hero->thumbnail }}" class="max-h-12 max-w-12 -ml-2 -my-3 mr-3 inline rounded" alt="{{ $workshop->hero->title }}" />
+                                <div>
+                                    <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>
                                 <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>