tebogomas14/shell-leaderboard
1
0
Fork 0
generated from theradcoza/Laravel-Docker-Dev-Template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust leaderboard responsive spacing and hide STATUS/TIME columns on smaller screens

Browse Source
This commit is contained in:
ut-masekela
2026-03-25 08:51:32 +02:00
parent 6520926351
commit 3533bfc024
1 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/resources/views/leaderboard.blade.php
View File

@@ -101,30 +101,30 @@
<!-- Column Header --> <!-- Column Header -->
<div class="bg-[#111111] border-b border-gray-800"> <div class="bg-[#111111] border-b border-gray-800">
<div class="w-full px-3 sm:px-4 lg:px-6 flex items-center h-8 sm:h-9 lg:h-10"> <div class="w-full px-2 sm:px-4 lg:px-6 flex items-center h-8 sm:h-9 lg:h-10">
<!-- POS column --> <!-- POS column -->
<div class="w-14 sm:w-16 lg:w-20 flex-shrink-0 flex items-center justify-center"> <div class="w-12 sm:w-14 lg:w-20 flex-shrink-0 flex items-center justify-center">
<span class="text-xs sm:text-sm lg:text-base text-white/60 uppercase tracking-wider">POS</span> <span class="text-xs sm:text-sm lg:text-base text-white/60 uppercase tracking-wider">POS</span>
</div> </div>
<!-- DRIVER column --> <!-- DRIVER column -->
<div class="flex-1 flex items-center px-4 lg:px-6"> <div class="flex-1 flex items-center px-2 sm:px-4 lg:px-6">
<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 --> <!-- STATUS column - hidden on mobile -->
<div class="w-20 sm:w-24 lg:w-28 text-center"> <div class="hidden md:block w-20 lg:w-28 text-center">
<span class="text-xs sm:text-sm lg:text-base text-white/60 uppercase tracking-wider">STATUS</span> <span class="text-sm lg:text-base text-white/60 uppercase tracking-wider">STATUS</span>
</div> </div>
<!-- TIME column --> <!-- TIME column - hidden on mobile/tablet -->
<div class="w-24 sm:w-28 lg:w-36 text-right"> <div class="hidden lg:block w-32 text-right">
<span class="text-xs sm:text-sm lg:text-base text-white/60 uppercase tracking-wider">TIME</span> <span class="text-base text-white/60 uppercase tracking-wider">TIME</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Leaderboard --> <!-- Leaderboard -->
<main class="w-full px-3 sm:px-4 lg:px-6 py-3 lg:py-4"> <main class="w-full px-2 sm:px-4 lg:px-6 py-2 sm:py-3 lg:py-4">
@if($participants->isEmpty()) @if($participants->isEmpty())
<div class="text-center py-20 lg:py-32"> <div class="text-center py-20 lg:py-32">
@@ -168,32 +168,32 @@
}; };
@endphp @endphp
<div class="row-shadow flex items-stretch h-14 sm:h-16 lg:h-20"> <div class="row-shadow flex items-stretch h-12 sm:h-14 lg:h-18">
<!-- Position Cube --> <!-- Position Cube -->
<div class="{{ $posClass }} w-14 sm:w-16 lg:w-20 flex-shrink-0 flex items-center justify-center"> <div class="{{ $posClass }} w-12 sm:w-14 lg:w-20 flex-shrink-0 flex items-center justify-center">
<span class="tabular text-2xl sm:text-3xl lg:text-4xl text-white drop-shadow-md"> <span class="tabular text-xl sm:text-2xl lg:text-4xl text-white drop-shadow-md">
{{ $position }} {{ $position }}
</span> </span>
</div> </div>
<!-- Main Bar (Light) --> <!-- Main Bar (Light) -->
<div class="bar-light flex-1 flex items-center px-4 lg:px-6"> <div class="bar-light flex-1 flex items-center px-2 sm:px-4 lg:px-6 overflow-hidden">
<!-- Driver (Number + Name) --> <!-- Driver (Number + Name) -->
<div class="flex-1 min-w-0 flex items-center gap-2 lg:gap-4"> <div class="flex-1 min-w-0 flex items-center gap-1.5 sm:gap-2 lg:gap-4">
@if($participant->number) @if($participant->number)
<span class="tabular text-sm sm:text-base lg:text-xl text-gray-500"> <span class="tabular text-xs sm:text-sm lg:text-xl text-gray-500 flex-shrink-0">
#{{ $participant->number }} #{{ $participant->number }}
</span> </span>
@endif @endif
<span class="text-lg sm:text-xl lg:text-3xl text-gray-900 uppercase tracking-wide truncate"> <span class="text-sm sm:text-lg lg:text-2xl text-gray-900 uppercase tracking-wide truncate">
{{ $participant->name }} {{ $participant->name }}
</span> </span>
</div> </div>
<!-- Status --> <!-- Status - hidden on mobile -->
<div class="w-20 sm:w-24 lg:w-28 flex items-center justify-center flex-shrink-0"> <div class="hidden md:flex w-20 lg:w-28 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-2 py-0.5 lg:px-2.5 lg:py-1 {{ $statusBadge[0] }} text-xs lg:text-sm rounded">
{{ $statusBadge[1] }} {{ $statusBadge[1] }}
@@ -203,14 +203,14 @@
@endif @endif
</div> </div>
<!-- Time --> <!-- Time - hidden on mobile/tablet -->
<div class="w-24 sm:w-28 lg:w-36 flex-shrink-0 text-right"> <div class="hidden lg:block w-32 flex-shrink-0 text-right">
@if($timeDisplay) @if($timeDisplay)
<span class="tabular text-lg sm:text-xl lg:text-3xl text-gray-900"> <span class="tabular text-2xl text-gray-900">
{{ $timeDisplay }} {{ $timeDisplay }}
</span> </span>
@else @else
<span class="text-lg sm:text-xl lg:text-3xl text-gray-400">—</span> <span class="text-2xl text-gray-400">—</span>
@endif @endif
</div> </div>