table styling

main
Zynh0722 2023-11-05 10:46:46 -08:00
parent 0a8eb848ef
commit ba509400cb
1 changed files with 11 additions and 12 deletions

View File

@ -16,31 +16,30 @@
<div class="flex"> <div class="flex">
<table class="m-auto table-auto w-4/5"> <table class="m-auto table-auto w-4/5">
<thead> <thead class="text-xs text-gray-700 bg-gray-50">
<tr> <tr>
<th>Shift ID</th> <th scope="col" class="px-6 py-3">Shift ID</th>
<th>Shift Start</th> <th scope="col" class="px-6 py-3">Shift Start</th>
<th>Shift End</th> <th scope="col" class="px-6 py-3">Shift End</th>
<th></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@for shift in shifts { @for shift in shifts {
<tr class="odd:bg-neutral-200"> <tr class="bg-white odd:bg-neutral-50 border-b">
<td class="text-center">@shift.id</td> <td scope="row" class="text-center px-6 py-3">@shift.id</td>
<td class="text-center">@shift.start.format("%A, %b %m - %H:%M")</td> <td class="text-center px-6 py-3">@shift.start.format("%A, %b %m - %H:%M")</td>
<td class="text-center"> <td class="text-center px-6 py-3">
@if let Some(end) = shift.end { @if let Some(end) = shift.end {
@end.format("%A, %b %m - %H:%M") @end.format("%A, %b %m - %H:%M")
} else { } else {
Currently Open Currently Open
} }
</td> </td>
<td hx-boost="true" class="flex justify-end"> <td hx-boost="true" class="px-6 py-4">
<a href="/shifts/@shift.id/report"> <a href="/shifts/@shift.id/report" class="text-center font-medium text-blue-600 hover:underline">
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5">
View Shift View Shift
</button>
</a> </a>
</td> </td>
</tr> </tr>