[TikiWiki-commits] [Git][tikiwiki/tiki][master] [REF][UI] Refactor navbar HTML/CSS and logo handling
Benoit Grégoire (@benoitg) via TikiWiki-cvs <[email protected]>
| Newsgroups | gmane.comp.cms.tiki.cvs |
|---|---|
| Message-ID | <69fb9eb4e87f1_3819034857459@gitlab-sidekiq-low-urgency-cpu-bound-v2-69779547b7-xfdwp.mail> |
Benoit Grégoire pushed to branch master at Tiki Wiki CMS Groupware / Tiki
Commits:
ec7f7054 by Sandeep D at 2026-05-06T19:46:57+00:00
[REF][UI] Refactor navbar HTML/CSS and logo handling
---
* [DOC] themes/base_files/scss/_tiki-modules.scss: Add initial content of hijacked thread https://gitlab.com/tikiwiki/tiki/-/merge_requests/9398#note_3204713313 as code comment so we can merge this
* [FIX][UI] Give header element the class sticky-top, remove its vertical margins, and finish adding the maximum height parameter for the site logo.
* [FIX] Fix smartylint failing check
* [REF][UI] Add fixed positioning for #page-header in admin layout
* [REF][UI] Remove site header styles from _tiki-modules.scss
* [REF][UI] Revert spacing _tiki-modules.scss
* [REF][UI] Update header structure and styles for layout
* [REF][UI] Refactor modulelist class in classic template
* [REF][UI] Refactor layout structure for headers and navigation across templates
* [REF][UI] Enhance navbar structure and styles for improved layout consistency
* [REF][UI] Remove unused navbar modules styles
* [REF][UI] Clean up site header comments
* [REF][UI] Refactor navbar HTML/CSS and logo handling
See merge request tikiwiki/tiki!9398
- - - - -
10 changed files:
- lib/modules/modlib.php
- lib/prefs/theme.php
- modules/mod-func-logo.php
- templates/admin/include_look.tpl
- templates/layouts/basic/layout_view.tpl
- templates/layouts/classic/layout_view.tpl
- templates/layouts/social/layout_view.tpl
- templates/modules/mod-logo.tpl
- themes/base_files/css/feature/adminui.scss
- themes/base_files/scss/_tiki-modules.scss
Changes:
=====================================
lib/modules/modlib.php
=====================================
@@ -549,6 +549,7 @@ class ModLib extends TikiLib
}
// Load only Unified Admin Interface specific modules for admins on admin panels.
$topLogin = $module['name'] === 'login_box' && $module['position'] === 'top';
+ $topLogo = $module['name'] === 'logo' && $module['position'] === 'top';
$topQA = $module['name'] === 'quickadmin' && $module['position'] === 'top';
$footer = $module['position'] === 'bottom';
$isControlPanel = Sections::isCurrentSection(Sections::SECTION_ADMIN_LAYOUT);
@@ -559,6 +560,7 @@ class ModLib extends TikiLib
&& ! $this->isModuleAssignmentMode()
&& $module['position'] !== 'admin'
&& ! $topLogin
+ && ! $topLogo
&& ! $footer
&& ! $topQA
) {
=====================================
lib/prefs/theme.php
=====================================
@@ -113,19 +113,6 @@ function prefs_theme_list($partial = false)
'description' => tra('Select a dark or light navbar (containing horizontal menu, etc.), as styled by the theme.'),
'default' => 'light',
],
- 'theme_navbar_fixed_topbar_offset' => [
- 'name' => tra('Fixed-top navbar height'),
- 'type' => 'text',
- 'size' => '4',
- 'filter' => 'digits',
- 'units' => 'px',
- 'help' => 'Themes',
- 'description' => tra('For the Classic Bootstrap or equivalent layout, specify the height of the navbar in fixed position at the top of the page. The logo module image assigned to the top module zone will scale to display correctly here.'),
- 'hint' => tra('Clear the Tiki system cache for this change to take effect.'),
- 'default' => '90',
- 'keywords' => tra('top navbar offset, page-top padding, fixed-top navbar, site logo size'),
- 'tags' => ['basic'],
- ],
'theme_iconset' => [
'name' => tr('Icons'),
'description' => tr('Icon set used by the site.'),
=====================================
modules/mod-func-logo.php
=====================================
@@ -54,6 +54,13 @@ function module_logo_info()
'description' => tra('CSS class for the title text container div. Defaults to sitetitles.'),
'filter' => 'text',
],
+ 'max_height' => [
+ 'name' => tra('Logo maximum height'),
+ 'description' => tra('Maximum height in pixels for the logo image. Leave empty for automatic sizing based on navbar content.'),
+ 'filter' => 'digits',
+ 'default' => '',
+ 'units' => 'px',
+ ],
],
];
}
@@ -76,6 +83,7 @@ function module_logo($mod_reference, &$module_params)
'sitesubtitle' => $prefs['sitesubtitle'],
'class_image' => 'sitelogo',
'class_titles' => 'sitetitles',
+ 'max_height' => '',
],
$module_params
);
=====================================
templates/admin/include_look.tpl
=====================================
@@ -131,7 +131,6 @@
</div>
{preference name=site_layout}
{preference name=site_layout_per_object}
- {preference name=theme_navbar_fixed_topbar_offset}
{preference name=theme_header_and_address_bar_color}
{preference name=theme_default_color_mode}
=====================================
templates/layouts/basic/layout_view.tpl
=====================================
@@ -20,8 +20,15 @@
<div class="container{if isset($smarty.session.fullscreen) && $smarty.session.fullscreen eq 'y'}-fluid{/if} container-std d-flex min-vh-100 flex-column my-0">
{if !isset($smarty.session.fullscreen) || $smarty.session.fullscreen ne 'y'}
<div class="row">
- <header class="page-header w-100 navbar-{$navbar_color_variant}-parent bg-{$navbar_color_variant}-parent tiki-top-nav-{$navbar_color_variant}" id="page-header" role=banner>
- {modulelist zone=top class="top_modules navbar-{$navbar_color_variant}-parent bg-{$navbar_color_variant}-parent tiki-top-nav-{$navbar_color_variant}" heading_text='{tr}Site identity, navigation, etc.{/tr}'}
+ {******************************************************************* SITE HEADER STRUCTURE******************************************************************}
+ <header class="site-header" id="site-header" role="banner">
+ <nav class="{block name=navClasses}navbar w-100 navbar-{$navbar_color_variant} bg-{$navbar_color_variant} tiki-main-navbar{/block}"
+ id="main-navbar"
+ role="navigation"
+ aria-label="{tr}Main navigation{/tr}">
+
+ {modulelist zone=top class="top_modules bg-{$navbar_color_variant}-parent tiki-top-nav-{$navbar_color_variant} container-fluid" heading_text='{tr}Site identity, navigation, etc.{/tr}' role=banner}
+ </nav>
</header>
</div>
{/if}
=====================================
templates/layouts/classic/layout_view.tpl
=====================================
@@ -16,19 +16,26 @@
<div id="main-shadow">{eval var=$prefs.main_shadow_start}{/if}
{if !isset($smarty.session.fullscreen) || $smarty.session.fullscreen ne 'y'}
- {if $prefs.feature_layoutshadows eq 'y'}
- <div id="header-shadow">{eval var=$prefs.header_shadow_start}{/if}
- <div class="header_outer bg-{$navbar_color_variant}-parent navbar-{$navbar_color_variant} tiki-top-nav-{$navbar_color_variant}" id="header_outer">
- <div class="header_container">
- <div class="container{* {if $smarty.session.fullscreen eq 'y'}*}-fluid{*{/if}*} container-std">
- <header class="header page-header row" id="page-header" role="banner">
- {modulelist zone=top class="top_modules w-100 navbar-{$navbar_color_variant}-parent bg-{$navbar_color_variant}-parent tiki-top-nav-{$navbar_color_variant}" heading_text='{tr}Site identity, navigation, etc.{/tr}'}
- </header>
+ {if $prefs.feature_layoutshadows eq 'y'}
+ <div id="header-shadow">{eval var=$prefs.header_shadow_start}
+ {/if}
+ {******************************************************************* SITE HEADER STRUCTURE Same pattern as social layout for consistency ******************************************************************}
+ <header class="site-header" id="site-header" role="banner">
+
+ <nav class="{block name=navClasses}navbar navbar-expand-md navbar-{$navbar_color_variant} bg-{$navbar_color_variant} tiki-main-navbar{/block}"
+ id="main-navbar"
+ role="navigation"
+ aria-label="{tr}Main navigation{/tr}">
+
+ <div class="container-fluid container-std">
+ {modulelist zone=top class="top_modules w-100 bg-{$navbar_color_variant}-parent tiki-top-nav-{$navbar_color_variant} container-fluid" heading_text='{tr}Site identity, navigation, etc.{/tr}' role=banner}
</div>
- </div>
- </div>
+
+ </nav>
+
+ </header>
{if $prefs.feature_layoutshadows eq 'y'}{eval var=$prefs.header_shadow_end}</div>{/if}
-{/if}
+ {/if}
<div class="middle_outer" id="middle_outer" >
{block name=module_header}{/block}
=====================================
templates/layouts/social/layout_view.tpl
=====================================
@@ -2,26 +2,6 @@
<html lang="{if !empty($pageLang)}{$pageLang}{else}{$prefs.language}{/if}"{if Language::isRTL()} dir="rtl"{/if}{if !empty($page_id)} id="page_{$page_id}"{/if}>
<head>
{include file='header.tpl'}
- {* The following style block makes sense to be used only with this fixed top bar layout so lets put it here only *}
- {if $prefs.theme_navbar_fixed_topbar_offset ne ''}<style>
- {literal}
- /* Prevent target anchors from being covered by fixed top navbar */
- h1:target:before,
- h2:target:before,
- h3:target:before,
- h4:target:before,
- h5:target:before,
- h6:target:before {
- content: "";
- display: block;
- height: {/literal}{$prefs.theme_navbar_fixed_topbar_offset}{literal}px; /* fixed header height*/
- margin: -{/literal}{$prefs.theme_navbar_fixed_topbar_offset}{literal}px 0 0; /* negative fixed header height */
- }
- #middle_outer {
- margin-top: {/literal}{$prefs.theme_navbar_fixed_topbar_offset}{literal}px;
- }
- {/literal}
- </style>{/if}
</head>
<body{html_body_attributes class="navbar-padding"}>
{$cookie_consent_html}
@@ -33,12 +13,18 @@
{/if}
<a class="btn btn-info btn-lg skipnav" href="#col1" role="button">{tr}Skip to main content{/tr}</a>
{if !isset($smarty.session.fullscreen) || isset($smarty.session.fullscreen) && $smarty.session.fullscreen ne 'y'}
- {if $prefs.theme_unified_admin_backend neq 'y' or $smarty.server.SCRIPT_NAME|strpos:'tiki-admin.php' === false}
- <header
- class="navbar navbar-expand-md tiki-top-nav-{$navbar_color_variant} navbar-{$navbar_color_variant} bg-{$navbar_color_variant} tiki-header-top fixed-top p-0">
- <div class="container{if $prefs.feature_fixed_width eq 'y' and $prefs.layout_fixed_width_header neq 'y'}-fluid{/if}">
- {modulelist zone=top class="top_modules w-100 tiki-top-nav-{$navbar_color_variant} navbar-{$navbar_color_variant}-parent bg-{$navbar_color_variant}-parent" heading_text='{tr}Site identity, navigation, etc.{/tr}' role=banner}
- </div>
+ {if $prefs.theme_unified_admin_backend neq 'y' or $smarty.server.SCRIPT_NAME|strpos:'tiki-admin.php' === false}
+ <header class="page-header w-100 sticky-top my-0" id="page-header" role=banner>
+ {* Main navigation - uses block for theme customization *}
+ <nav class="{block name=navClasses}navbar navbar-expand-md navbar-{$navbar_color_variant} bg-{$navbar_color_variant} tiki-main-navbar{/block}"
+ id="main-navbar"
+ role="navigation"
+ aria-label="{tr}Main navigation{/tr}">
+
+ <div class="container{if $prefs.feature_fixed_width eq 'y' and $prefs.layout_fixed_width_header neq 'y'}-fluid{/if}">
+ {modulelist zone=top class="top_modules w-100 tiki-top-nav-{$navbar_color_variant} bg-{$navbar_color_variant}-parent" heading_text='{tr}Site identity, navigation, etc.{/tr}' role=banner}
+ </div>
+ </nav>
</header>
{/if}
{/if}
@@ -218,32 +204,6 @@
</footer>
{/if}
- {* Manage top margin of middle_outer dynamically in case header height changes due to content changes (ex. Module added on Top position) or responsive design *}
- {jq}
- (function ($) {
- var $header = $('header.tiki-header-top');
- var $middle = $('#middle_outer');
-
- function adjustMargin() {
- if ($header.length && $middle.length) {
- $middle.css('margin-top', $header.outerHeight() + 'px');
- }
- }
-
- // Initial adjust
- adjustMargin();
-
- // Update on window resize
- $(window).on('resize', adjustMargin);
-
- // Update if header size changes
- if (typeof ResizeObserver !== 'undefined') {
- var ro = new ResizeObserver(adjustMargin);
- $header.each(function () { ro.observe(this); });
- }
- })(jQuery);
- {/jq}
-
{include file='footer.tpl'}
</body>
</html>
=====================================
templates/modules/mod-logo.tpl
=====================================
@@ -3,7 +3,7 @@
<div class="sitelogo" class="d-flex align-items-center">
<a class="navbar-brand d-flex flex-row w-100 align-self-center align-items-center p-0 {$module_params.class_image|escape}" href="{$module_params.link}" title="{$module_params.title_attr|escape}">
{if !empty($module_params.src)}
- <img class="{$module_params.class_image|escape} sitelogo-img img-fluid align-self-center me-3" src="{$module_params.src}" alt="{$module_params.alt_attr|escape}" {if $prefs.site_layout eq 'social' && $prefs.theme_navbar_fixed_topbar_offset ne ''} style="height: calc({$prefs.theme_navbar_fixed_topbar_offset}px - ( 2 * var(--bs-navbar-padding-y)) - var(--tiki-fixed-top-border-top-width) - var(--tiki-fixed-top-border-bottom-width) ); width: auto; vertical-align: inherit;"{/if}>
+ <img class="{$module_params.class_image|escape} sitelogo-img img-fluid align-self-center me-3" src="{$module_params.src}" alt="{$module_params.alt_attr|escape}" {if !empty($module_params.max_height)} style="max-height: {$module_params.max_height}px; width: auto; object-fit: contain;"{/if}>
{/if}
{if !empty($module_params.sitetitle) or !empty($module_params.sitesubtitle)}
{if $prefs.site_layout neq 'social'}
=====================================
themes/base_files/css/feature/adminui.scss
=====================================
@@ -138,13 +138,34 @@ body.tiki-admin {
}
}
-.tiki-admin aside.admin-nav>nav,
-.tiki-admin .top_modules {
+.tiki-admin aside.admin-nav > nav {
position: fixed;
left: 0;
top: 0;
}
+/* Admin navbar must be fixed to span full width over the sidebar */
+.tiki-admin #main-navbar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 1050;
+}
+
+/* Admin layout uses #page-header */
+.tiki-admin.layout_admin #page-header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 1050;
+}
+
+.tiki-admin .top_modules {
+ justify-content: flex-end !important;
+}
+
.tiki-admin aside.admin-nav .navbar-light,
.tiki-admin aside.admin-nav .navbar-dark {
z-index: 1049;
=====================================
themes/base_files/scss/_tiki-modules.scss
=====================================
@@ -47,6 +47,89 @@ header.container,
//}
//***** Site Header & Identity *****/
+
+//==================================================
+// NAVBAR - SEMANTIC STRUCTURE
+// Clean navbar using Bootstrap 5 utilities
+// No JavaScript needed!
+//==================================================
+
+// Main navbar
+#main-navbar {
+ padding-top: 0;
+ padding-bottom: 0;
+
+ // Logo sizing
+ .sitelogo-img {
+ max-height: 65px; // Default fallback if not set in module
+ width: auto;
+ height: auto;
+ object-fit: contain;
+
+ // Responsive: smaller on mobile
+ @media (max-width: 767px) {
+ max-height: 45px;
+ }
+ }
+
+ // Navbar brand (logo + title container)
+ .navbar-brand {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding: 0.5rem 0;
+
+ .sitetitle {
+ font-size: 1.25rem;
+ font-weight: 500;
+ }
+
+ .sitesubtitle {
+ font-size: 0.875rem;
+ opacity: 0.8;
+ }
+ }
+}
+
+// Sticky navbar specific styles
+.navbar.sticky-top {
+ top: 0;
+ z-index: 1020; // Bootstrap default
+
+ // Optional: Shadow when stuck
+ &.is-stuck {
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ }
+}
+
+// Fixed navbar anchor offset
+// Prevent target anchors from being covered by fixed/sticky navbar
+.navbar.fixed-top,
+.navbar.sticky-top {
+ ~ * {
+ h1:target:before,
+ h2:target:before,
+ h3:target:before,
+ h4:target:before,
+ h5:target:before,
+ h6:target:before {
+ content: "";
+ display: block;
+ /**
+ @luciash Rightly pointed out on matrix that we shouldn't rely on such a magic string.
+ This is however well documented and proves that @sandy-12 thought about corner cases (in this case incoming links with an # anchor in the url).
+ I initially thought he didn't know about:
+ https://css-tricks.com/almanac/properties/s/scroll-margin/
+ But I think he actually wanted to avoid triggering scroll anchoring supression triggers since scroll anchoring is such a useful feature.
+ Since our header isn't fixed size (different modules can be added to it), probably the best solution is to target a height of half the viewport (ex: height: 50vh;). If the headers cover more than half the viewport, we have other problems to deal with.
+ benoitg - 2026-05-06
+ */
+ height: 80px; // Approximate navbar height
+ margin: -80px 0 0;
+ }
+ }
+}
+
.box-quickadmin li {
font-size: 0.9em;
}
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/ec7f705447c499d817ca1bbadf9660d511e826eb
--
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/ec7f705447c499d817ca1bbadf9660d511e826eb
You're receiving this email because of your account on gitlab.com. Manage all notifications: https://gitlab.com/-/profile/notifications | Help: https://gitlab.com/help
_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs