Move logo inline with nav tabs instead of above them
Place the SVG icon next to the tab bar in a flex row instead of rendering it as a separate centered block above the navigation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -20,6 +20,7 @@ my $SCHEDULE_EXAMPLE = '/usr/local/gniza/etc/schedule.conf.example';
|
|||||||
my $SSH_DIR = '/root/.ssh';
|
my $SSH_DIR = '/root/.ssh';
|
||||||
my $CSS_FILE = '/usr/local/cpanel/whostmgr/docroot/cgi/gniza-whm/assets/gniza-whm.css';
|
my $CSS_FILE = '/usr/local/cpanel/whostmgr/docroot/cgi/gniza-whm/assets/gniza-whm.css';
|
||||||
my $LOGO_FILE = '/usr/local/cpanel/whostmgr/docroot/cgi/gniza-whm/assets/gniza-logo.svg';
|
my $LOGO_FILE = '/usr/local/cpanel/whostmgr/docroot/cgi/gniza-whm/assets/gniza-logo.svg';
|
||||||
|
my $_logo_data_uri = ''; # populated by page_header(), used by render_nav()
|
||||||
|
|
||||||
# ── HTML Escaping ─────────────────────────────────────────────
|
# ── HTML Escaping ─────────────────────────────────────────────
|
||||||
|
|
||||||
@@ -47,12 +48,19 @@ my @NAV_ITEMS = (
|
|||||||
|
|
||||||
sub render_nav {
|
sub render_nav {
|
||||||
my ($current_page) = @_;
|
my ($current_page) = @_;
|
||||||
my $html = qq{<div role="tablist" class="tabs tabs-box tabs-lg mb-5 mx-auto w-fit">\n};
|
my $logo = '';
|
||||||
|
if ($_logo_data_uri) {
|
||||||
|
$logo = qq{<img src="$_logo_data_uri" alt="GNIZA" style="height:32px;width:auto">};
|
||||||
|
}
|
||||||
|
my $html = qq{<div class="flex items-center justify-center gap-3 mb-5">\n};
|
||||||
|
$html .= qq{ $logo\n} if $logo;
|
||||||
|
$html .= qq{ <div role="tablist" class="tabs tabs-box tabs-lg">\n};
|
||||||
for my $item (@NAV_ITEMS) {
|
for my $item (@NAV_ITEMS) {
|
||||||
my $active = ($item->{url} eq $current_page) ? ' tab-active' : '';
|
my $active = ($item->{url} eq $current_page) ? ' tab-active' : '';
|
||||||
my $label = esc($item->{label});
|
my $label = esc($item->{label});
|
||||||
$html .= qq{ <a role="tab" class="tab no-underline$active" href="$item->{url}">$label</a>\n};
|
$html .= qq{ <a role="tab" class="tab no-underline$active" href="$item->{url}">$label</a>\n};
|
||||||
}
|
}
|
||||||
|
$html .= qq{ </div>\n};
|
||||||
$html .= qq{</div>\n};
|
$html .= qq{</div>\n};
|
||||||
return $html;
|
return $html;
|
||||||
}
|
}
|
||||||
@@ -681,19 +689,16 @@ sub page_header {
|
|||||||
# Scope :root/:host to our container so DaisyUI base styles
|
# Scope :root/:host to our container so DaisyUI base styles
|
||||||
# (background, color, overflow, scrollbar) don't leak into WHM.
|
# (background, color, overflow, scrollbar) don't leak into WHM.
|
||||||
$css = _scope_to_container($css);
|
$css = _scope_to_container($css);
|
||||||
# Inline logo as base64 data URI
|
# Pre-compute logo data URI for render_nav()
|
||||||
my $logo_html = '';
|
if (!$_logo_data_uri && open my $lfh, '<', $LOGO_FILE) {
|
||||||
if (open my $lfh, '<', $LOGO_FILE) {
|
|
||||||
local $/;
|
local $/;
|
||||||
my $svg_data = <$lfh>;
|
my $svg_data = <$lfh>;
|
||||||
close $lfh;
|
close $lfh;
|
||||||
require MIME::Base64;
|
require MIME::Base64;
|
||||||
my $b64 = MIME::Base64::encode_base64($svg_data, '');
|
$_logo_data_uri = 'data:image/svg+xml;base64,' . MIME::Base64::encode_base64($svg_data, '');
|
||||||
$logo_html = qq{<div class="flex items-center justify-center gap-3 mb-4"><img src="data:image/svg+xml;base64,$b64" alt="GNIZA" style="height:48px;width:auto"></div>\n};
|
|
||||||
}
|
}
|
||||||
return qq{<style>$css</style>\n}
|
return qq{<style>$css</style>\n}
|
||||||
. qq{<div data-theme="gniza" class="font-sans text-[1.6rem]" style="padding:30px 10px 10px 10px">\n}
|
. qq{<div data-theme="gniza" class="font-sans text-[1.6rem]" style="padding:30px 10px 10px 10px">\n};
|
||||||
. $logo_html;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
sub _unwrap_layers {
|
sub _unwrap_layers {
|
||||||
|
|||||||
Reference in New Issue
Block a user