shukivaknin/gniza4cp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix stats cards overlap and make grid responsive

Browse Source 
Remove stat-figure emoji icons that caused content overflow and
switch from fixed grid-cols-3 to responsive grid-cols-2 sm:grid-cols-3.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
shuki
2026-03-05 05:26:54 +02:00
parent 7404e88cd9
commit 46edee9dc2
3 changed files with 4 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
whm/gniza-whm/assets/gniza-whm.css
View File

File diff suppressed because one or more lines are too long

2
whm/gniza-whm/assets/src/safelist.html
View File

@@ -1,2 +1,2 @@
<!-- Tailwind/DaisyUI class safelist for gniza WHM plugin -->
<div class="alert alert-error alert-info alert-success alert-warning badge badge-error badge-sm badge-success badge-warning bg-base-100 bg-base-200 bg-neutral bg-primary/10 border border-base-300 border-base-content/5 breadcrumbs btn btn-error btn-ghost btn-info btn-primary btn-secondary btn-sm btn-xs card card-body card-title checkbox checkbox-sm collapse collapse-arrow collapse-content collapse-title cursor-pointer flex flex-1 flex-col flex-wrap font-bold font-medium font-mono font-semibold gap-1 gap-2 gap-3 hidden inline input input-bordered input-sm items-center items-start mx-auto join join-item link list-disc loading loading-spinner loading-xs max-h-48 max-w-2xl max-w-xs mb-1 mb-2.5 mb-3 mb-4 mb-5 mb-6 ml-2 modal modal-action modal-backdrop modal-box mt-2 mt-3 mt-4 mt-5 my-2 my-4 overflow-x-auto overflow-y-auto p-3 p-4 pt-1 pt-2 pl-5 px-4 py-1 py-3 py-4 radio radio-sm rounded-box rounded-lg select select-bordered select-sm shadow-sm steps tab tab-content table hover tabs tabs-box tabs-lg tab-active text-center text-error text-lg textarea textarea-bordered textarea-sm text-base-content/60 text-neutral-content text-sm text-xl text-xs toggle toggle-sm toggle-success w-11/12 w-44 w-full whitespace-pre-wrap font-sans text-[1.6rem] text-warning badge-info badge-neutral btn-active leading-relaxed inline-flex items-stretch w-fit bg-[#fafafa] px-5 max-h-[360px] m-0 no-underline bg-white p-2.5 animate-pulse badge-outline btn-warning btn-circle mt-1 h-40 tooltip tooltip-top w-52 whitespace-nowrap navbar navbar-start navbar-end menu menu-horizontal h-12 w-auto text-3xl leading-none text-secondary active stat stat-title stat-value stat-desc stat-figure grid-cols-3 grid-cols-2 badge-lg grid"></div>
<div class="alert alert-error alert-info alert-success alert-warning badge badge-error badge-sm badge-success badge-warning bg-base-100 bg-base-200 bg-neutral bg-primary/10 border border-base-300 border-base-content/5 breadcrumbs btn btn-error btn-ghost btn-info btn-primary btn-secondary btn-sm btn-xs card card-body card-title checkbox checkbox-sm collapse collapse-arrow collapse-content collapse-title cursor-pointer flex flex-1 flex-col flex-wrap font-bold font-medium font-mono font-semibold gap-1 gap-2 gap-3 hidden inline input input-bordered input-sm items-center items-start mx-auto join join-item link list-disc loading loading-spinner loading-xs max-h-48 max-w-2xl max-w-xs mb-1 mb-2.5 mb-3 mb-4 mb-5 mb-6 ml-2 modal modal-action modal-backdrop modal-box mt-2 mt-3 mt-4 mt-5 my-2 my-4 overflow-x-auto overflow-y-auto p-3 p-4 pt-1 pt-2 pl-5 px-4 py-1 py-3 py-4 radio radio-sm rounded-box rounded-lg select select-bordered select-sm shadow-sm steps tab tab-content table hover tabs tabs-box tabs-lg tab-active text-center text-error text-lg textarea textarea-bordered textarea-sm text-base-content/60 text-neutral-content text-sm text-xl text-xs toggle toggle-sm toggle-success w-11/12 w-44 w-full whitespace-pre-wrap font-sans text-[1.6rem] text-warning badge-info badge-neutral btn-active leading-relaxed inline-flex items-stretch w-fit bg-[#fafafa] px-5 max-h-[360px] m-0 no-underline bg-white p-2.5 animate-pulse badge-outline btn-warning btn-circle mt-1 h-40 tooltip tooltip-top w-52 whitespace-nowrap navbar navbar-start navbar-end menu menu-horizontal h-12 w-auto text-3xl leading-none text-secondary active stat stat-title stat-value stat-desc stat-figure grid-cols-3 grid-cols-2 sm:grid-cols-3 badge-lg grid gap-4"></div>

10
whm/gniza-whm/index.cgi
View File

@@ -111,13 +111,12 @@ print GnizaWHM::UI::render_flash();
print qq{ </form>\n};
print qq{</div>\n};
# 6 stat cards in 3-column grid
print qq{<div class="grid grid-cols-3 gap-4 mb-6">\n};
# 6 stat cards in responsive grid
print qq{<div class="grid grid-cols-2 sm:grid-cols-3 gap-4 mb-6">\n};
# Card 1: cPanel Accounts
my $acct_count = scalar @cpanel_accounts;
print qq{ <div class="stat bg-white shadow-sm border border-base-300 rounded-box">\n};
print qq{ <div class="stat-figure text-primary text-3xl">&#x1F465;</div>\n};
print qq{ <div class="stat-title">cPanel Accounts</div>\n};
print qq{ <div class="stat-value text-primary">$acct_count</div>\n};
print qq{ <div class="stat-desc">on this server</div>\n};
@@ -125,7 +124,6 @@ print GnizaWHM::UI::render_flash();
# Card 2: Backed Up Accounts
print qq{ <div class="stat bg-white shadow-sm border border-base-300 rounded-box">\n};
print qq{ <div class="stat-figure text-secondary text-3xl">&#x2601;</div>\n};
print qq{ <div class="stat-title">Backed Up Accounts</div>\n};
print qq{ <div class="stat-value text-secondary">$backed_up</div>\n};
my $remote_count_desc = scalar @remotes;
@@ -134,7 +132,6 @@ print GnizaWHM::UI::render_flash();
# Card 3: Total Snapshots
print qq{ <div class="stat bg-white shadow-sm border border-base-300 rounded-box">\n};
print qq{ <div class="stat-figure text-primary text-3xl">&#x1F4BE;</div>\n};
print qq{ <div class="stat-title">Total Snapshots</div>\n};
print qq{ <div class="stat-value">$total_snaps</div>\n};
print qq{ <div class="stat-desc">across all remotes</div>\n};
@@ -143,7 +140,6 @@ print GnizaWHM::UI::render_flash();
# Card 4: Remotes
my $rem_count = scalar @remotes;
print qq{ <div class="stat bg-white shadow-sm border border-base-300 rounded-box">\n};
print qq{ <div class="stat-figure text-primary text-3xl">&#x1F4E1;</div>\n};
print qq{ <div class="stat-title">Remotes</div>\n};
print qq{ <div class="stat-value text-primary">$rem_count</div>\n};
print qq{ <div class="stat-desc">configured destinations</div>\n};
@@ -151,7 +147,6 @@ print GnizaWHM::UI::render_flash();
# Card 5: Schedules
print qq{ <div class="stat bg-white shadow-sm border border-base-300 rounded-box">\n};
print qq{ <div class="stat-figure text-secondary text-3xl">&#x23F0;</div>\n};
print qq{ <div class="stat-title">Schedules</div>\n};
print qq{ <div class="stat-value text-secondary">$sched_count</div>\n};
print qq{ <div class="stat-desc">active cron jobs</div>\n};
@@ -170,7 +165,6 @@ print GnizaWHM::UI::render_flash();
$badge_text = $has_stats ? 'UNKNOWN' : 'N/A';
}
print qq{ <div class="stat bg-white shadow-sm border border-base-300 rounded-box">\n};
print qq{ <div class="stat-figure text-primary text-3xl">&#x1F4CB;</div>\n};
print qq{ <div class="stat-title">Last Backup</div>\n};
print qq{ <div class="stat-value"><span class="badge $badge_class badge-lg">$badge_text</span></div>\n};
if ($last_log) {