generated from theradcoza/Laravel-Docker-Dev-Template
Show STATUS/TIME columns on all screen sizes with responsive font sizing and adjusted column widths
This commit is contained in:
@@ -111,13 +111,13 @@
|
|||||||
<div class="flex-1">
|
<div class="flex-1">
|
||||||
<span class="text-xs sm:text-sm lg:text-base text-white/60 uppercase tracking-wider">DRIVER</span>
|
<span class="text-xs sm:text-sm lg:text-base text-white/60 uppercase tracking-wider">DRIVER</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- STATUS column - hidden on mobile -->
|
<!-- STATUS column -->
|
||||||
<div class="hidden md:block w-20 lg:w-28 text-center">
|
<div class="w-14 sm:w-20 md:w-24 text-center flex-shrink-0">
|
||||||
<span class="text-sm lg:text-base text-white/60 uppercase tracking-wider">STATUS</span>
|
<span class="text-[10px] sm:text-xs md:text-sm text-white/60 uppercase tracking-wider">STATUS</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- TIME column - hidden on mobile/tablet -->
|
<!-- TIME column -->
|
||||||
<div class="hidden lg:block w-32 text-right">
|
<div class="w-16 sm:w-20 lg:w-28 text-right flex-shrink-0">
|
||||||
<span class="text-base text-white/60 uppercase tracking-wider">TIME</span>
|
<span class="text-[10px] sm:text-xs md:text-sm text-white/60 uppercase tracking-wider">TIME</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -192,25 +192,25 @@
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Status - hidden on mobile -->
|
<!-- Status -->
|
||||||
<div class="hidden md:flex w-20 lg:w-28 items-center justify-center flex-shrink-0">
|
<div class="w-14 sm:w-20 md:w-24 flex items-center justify-center flex-shrink-0">
|
||||||
@if($statusBadge)
|
@if($statusBadge)
|
||||||
<span class="px-2 py-0.5 lg:px-2.5 lg:py-1 {{ $statusBadge[0] }} text-xs lg:text-sm rounded">
|
<span class="px-1 py-0.5 sm:px-2 {{ $statusBadge[0] }} text-[8px] sm:text-[10px] md:text-xs rounded">
|
||||||
{{ $statusBadge[1] }}
|
{{ $statusBadge[1] }}
|
||||||
</span>
|
</span>
|
||||||
@else
|
@else
|
||||||
<span class="text-xs lg:text-sm text-gray-400">READY</span>
|
<span class="text-[8px] sm:text-[10px] md:text-xs text-gray-400">READY</span>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Time - hidden on mobile/tablet -->
|
<!-- Time -->
|
||||||
<div class="hidden lg:block w-32 flex-shrink-0 text-right">
|
<div class="w-16 sm:w-20 lg:w-28 flex-shrink-0 text-right">
|
||||||
@if($timeDisplay)
|
@if($timeDisplay)
|
||||||
<span class="tabular text-2xl text-gray-900">
|
<span class="tabular text-[10px] sm:text-xs lg:text-lg text-gray-900">
|
||||||
{{ $timeDisplay }}
|
{{ $timeDisplay }}
|
||||||
</span>
|
</span>
|
||||||
@else
|
@else
|
||||||
<span class="text-2xl text-gray-400">—</span>
|
<span class="text-[10px] sm:text-xs lg:text-lg text-gray-400">—</span>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user