isaacclad/ladill-qr-plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Let hero stats cards auto-expand to fit long values.
Deploy Ladill QR Plus / deploy (push) Successful in 35s
Details

Browse Source 
Replace fixed mobile widths and equal grid columns with content-sized cards so figures like GHS balances and storage sizes are never clipped.
This commit is contained in:
isaacclad
2026-07-24 14:53:42 +00:00
parent 90aef0c3f4
commit 190a092808
3 changed files with 16 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+8 -2
View File
@@ -68,12 +68,18 @@ html.qr-mobile-page body {
} }
.mobile-stats-card { .mobile-stats-card {
width: calc(66.666667% - 0.5rem); width: max-content;
min-width: 9rem;
max-width: none;
box-sizing: border-box;
} }
@media (min-width: 640px) { @media (min-width: 640px) {
.mobile-stats-card { .mobile-stats-card {
width: auto; width: max-content;
min-width: 9rem;
max-width: none;
flex: 1 1 auto;
} }
} }
resources/views/qr-codes/index.blade.php
+4 -4
View File
@@ -39,16 +39,16 @@
</div> </div>
</div> </div>
<div class="scrollbar-hide flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 sm:flex-wrap sm:justify-end sm:overflow-visible sm:pb-0 lg:gap-4" style="-ms-overflow-style:none;scrollbar-width:none;"> <div class="scrollbar-hide flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 sm:flex sm:flex-wrap sm:justify-end sm:overflow-visible sm:pb-0 lg:gap-4" style="-ms-overflow-style:none;scrollbar-width:none;">
<div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm"> <div class="mobile-stats-card w-max min-w-[9rem] shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
<p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">GHS {{ number_format($wallet->spendableBalance(), 2) }}</p> <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">GHS {{ number_format($wallet->spendableBalance(), 2) }}</p>
<p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">QR balance</p> <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">QR balance</p>
</div> </div>
<div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm"> <div class="mobile-stats-card w-max min-w-[9rem] shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
<p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ $qrCodes->count() }}</p> <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ $qrCodes->count() }}</p>
<p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">QR codes</p> <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">QR codes</p>
</div> </div>
<div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm"> <div class="mobile-stats-card w-max min-w-[9rem] shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
<p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ number_format($wallet->scans_total) }}</p> <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ number_format($wallet->scans_total) }}</p>
<p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Total scans</p> <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Total scans</p>
</div> </div>
resources/views/qr/campaigns/index.blade.php
+4 -4
View File
@@ -37,16 +37,16 @@
</div> </div>
</div> </div>
<div class="scrollbar-hide flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 sm:grid sm:grid-cols-3 sm:overflow-visible sm:pb-0 lg:gap-4" style="-ms-overflow-style:none;scrollbar-width:none;"> <div class="scrollbar-hide flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 sm:flex sm:flex-wrap sm:justify-end sm:overflow-visible sm:pb-0 lg:gap-4" style="-ms-overflow-style:none;scrollbar-width:none;">
<div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm"> <div class="mobile-stats-card w-max min-w-[9rem] shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
<p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ number_format($campaignCount) }}</p> <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ number_format($campaignCount) }}</p>
<p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Campaigns</p> <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Campaigns</p>
</div> </div>
<div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm"> <div class="mobile-stats-card w-max min-w-[9rem] shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
<p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ number_format($activeCount) }}</p> <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ number_format($activeCount) }}</p>
<p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Active</p> <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Active</p>
</div> </div>
<div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm"> <div class="mobile-stats-card w-max min-w-[9rem] shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
<p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ number_format($codesInCampaigns) }}</p> <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ number_format($codesInCampaigns) }}</p>
<p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Codes assigned</p> <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Codes assigned</p>
</div> </div>