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

Replace stat components with card-based layout for stats grid

Browse Source 
DaisyUI stat components have internal styles that conflict when used
as standalone grid items, causing vertical overlap. Switch to plain
card components with manual typography classes instead.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
shuki
2026-03-05 05:30:21 +02:00
parent 46edee9dc2
commit 325020338d
1 changed files with 37 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -116,40 +116,50 @@ print GnizaWHM::UI::render_flash();
# Card 1: cPanel Accounts # Card 1: cPanel Accounts
my $acct_count = scalar @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="card bg-white shadow-sm border border-base-300">\n};
print qq{ <div class="stat-title">cPanel Accounts</div>\n}; print qq{ <div class="card-body p-4">\n};
print qq{ <div class="stat-value text-primary">$acct_count</div>\n}; print qq{ <div class="text-sm text-base-content/60">cPanel Accounts</div>\n};
print qq{ <div class="stat-desc">on this server</div>\n}; print qq{ <div class="text-xl font-bold text-primary">$acct_count</div>\n};
print qq{ <div class="text-xs text-base-content/60">on this server</div>\n};
print qq{ </div>\n};
print qq{ </div>\n}; print qq{ </div>\n};
# Card 2: Backed Up Accounts # 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="card bg-white shadow-sm border border-base-300">\n};
print qq{ <div class="stat-title">Backed Up Accounts</div>\n}; print qq{ <div class="card-body p-4">\n};
print qq{ <div class="stat-value text-secondary">$backed_up</div>\n}; print qq{ <div class="text-sm text-base-content/60">Backed Up Accounts</div>\n};
print qq{ <div class="text-xl font-bold text-secondary">$backed_up</div>\n};
my $remote_count_desc = scalar @remotes; my $remote_count_desc = scalar @remotes;
print qq{ <div class="stat-desc">across $remote_count_desc remote(s)</div>\n}; print qq{ <div class="text-xs text-base-content/60">across $remote_count_desc remote(s)</div>\n};
print qq{ </div>\n};
print qq{ </div>\n}; print qq{ </div>\n};
# Card 3: Total Snapshots # Card 3: Total Snapshots
print qq{ <div class="stat bg-white shadow-sm border border-base-300 rounded-box">\n}; print qq{ <div class="card bg-white shadow-sm border border-base-300">\n};
print qq{ <div class="stat-title">Total Snapshots</div>\n}; print qq{ <div class="card-body p-4">\n};
print qq{ <div class="stat-value">$total_snaps</div>\n}; print qq{ <div class="text-sm text-base-content/60">Total Snapshots</div>\n};
print qq{ <div class="stat-desc">across all remotes</div>\n}; print qq{ <div class="text-xl font-bold">$total_snaps</div>\n};
print qq{ <div class="text-xs text-base-content/60">across all remotes</div>\n};
print qq{ </div>\n};
print qq{ </div>\n}; print qq{ </div>\n};
# Card 4: Remotes # Card 4: Remotes
my $rem_count = scalar @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="card bg-white shadow-sm border border-base-300">\n};
print qq{ <div class="stat-title">Remotes</div>\n}; print qq{ <div class="card-body p-4">\n};
print qq{ <div class="stat-value text-primary">$rem_count</div>\n}; print qq{ <div class="text-sm text-base-content/60">Remotes</div>\n};
print qq{ <div class="stat-desc">configured destinations</div>\n}; print qq{ <div class="text-xl font-bold text-primary">$rem_count</div>\n};
print qq{ <div class="text-xs text-base-content/60">configured destinations</div>\n};
print qq{ </div>\n};
print qq{ </div>\n}; print qq{ </div>\n};
# Card 5: Schedules # Card 5: Schedules
print qq{ <div class="stat bg-white shadow-sm border border-base-300 rounded-box">\n}; print qq{ <div class="card bg-white shadow-sm border border-base-300">\n};
print qq{ <div class="stat-title">Schedules</div>\n}; print qq{ <div class="card-body p-4">\n};
print qq{ <div class="stat-value text-secondary">$sched_count</div>\n}; print qq{ <div class="text-sm text-base-content/60">Schedules</div>\n};
print qq{ <div class="stat-desc">active cron jobs</div>\n}; print qq{ <div class="text-xl font-bold text-secondary">$sched_count</div>\n};
print qq{ <div class="text-xs text-base-content/60">active cron jobs</div>\n};
print qq{ </div>\n};
print qq{ </div>\n}; print qq{ </div>\n};
# Card 6: Last Backup # Card 6: Last Backup
@@ -164,16 +174,18 @@ print GnizaWHM::UI::render_flash();
$badge_class = 'badge-neutral'; $badge_class = 'badge-neutral';
$badge_text = $has_stats ? 'UNKNOWN' : 'N/A'; $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="card bg-white shadow-sm border border-base-300">\n};
print qq{ <div class="stat-title">Last Backup</div>\n}; print qq{ <div class="card-body p-4">\n};
print qq{ <div class="stat-value"><span class="badge $badge_class badge-lg">$badge_text</span></div>\n}; print qq{ <div class="text-sm text-base-content/60">Last Backup</div>\n};
print qq{ <div class="mt-1 mb-1"><span class="badge $badge_class">$badge_text</span></div>\n};
if ($last_log) { if ($last_log) {
my $esc_log = GnizaWHM::UI::esc($last_log); my $esc_log = GnizaWHM::UI::esc($last_log);
print qq{ <div class="stat-desc">$esc_log</div>\n}; print qq{ <div class="text-xs text-base-content/60">$esc_log</div>\n};
} else { } else {
print qq{ <div class="stat-desc">click Refresh to collect</div>\n}; print qq{ <div class="text-xs text-base-content/60">click Refresh to collect</div>\n};
} }
print qq{ </div>\n}; print qq{ </div>\n};
print qq{ </div>\n};
print qq{</div>\n}; print qq{</div>\n};
} }