From de371c413ce2cb604aa20de729af1f9f49a4d322 Mon Sep 17 00:00:00 2001 From: luxick Date: Fri, 6 Mar 2026 09:02:11 +0100 Subject: [PATCH] Rework header bar --- README.md | 3 +- css/design.less | 248 ++++++++++++++++++++++++++++++++++----------- css/mobile.less | 13 +++ css/structure.less | 23 +++-- css/usertools.less | 56 ++++------ tpl_header.php | 129 ++++++++++++----------- 6 files changed, 303 insertions(+), 169 deletions(-) diff --git a/README.md b/README.md index b8ed41b..4f564ef 100644 --- a/README.md +++ b/README.md @@ -6,9 +6,10 @@ This is a fork of the original default dokuwiki template. ## Changes from the original template - Default font changed to "Perfect DOS VGA 437 Win" - Enhanced header search with DokuWiki quicksearch suggestions, keyboard navigation, and disabled browser autofill +- Desktop header condensed into a single status-bar-style row with inline breadcrumbs and a three-dot tools menu ## Icon theming (light/dark) -- Header tool icons (user tools and site tools) are rendered as inline SVG. +- Header tool icons (user tools and site tools inside the desktop three-dot menu) are rendered as inline SVG. - The pagetools footer is intentionally text-only (no icons). - Icon color is controlled through `@ini_icons` (placeholder `__icons__`) in [replacements] inside `style.ini`. - Hover/active icon color follows `@ini_link` to match link interaction color. diff --git a/css/design.less b/css/design.less index a5e8e4f..e72d485 100755 --- a/css/design.less +++ b/css/design.less @@ -15,45 +15,53 @@ ********************************************************************/ #dokuwiki__header { - padding: 2em 0 1.5em; + padding: 0; + border-bottom: 1px solid @ini_border; + margin-bottom: .35em; - .headings, - .tools { - margin-bottom: 1.5em; - width: 49%; + .pad { + padding-top: 0; + padding-bottom: 0; } - .tools { - margin-top: .2em; + + .header__bar { + height: 34px; + align-items: center; + } + + .headings { + display: flex; + align-items: center; + gap: 1em; + overflow: hidden; } .logo { margin: 0; - font-size: 1.5em; + font-size: 1em; font-weight: normal; - line-height: 1.2; + line-height: 1; + flex: 0 0 auto; + + a { + display: inline-flex; + align-items: center; + gap: .5em; + text-decoration: none; + color: @ini_text; + background-color: inherit; + white-space: nowrap; + } img { - float: left; - margin-right: .5em; - height: 64px; + display: block; + height: 1.5em; width: auto; } span { display: block; - padding-top: 10px; } - - a { - text-decoration: none; - color: @ini_text; - background-color: inherit; - } - } - - p.claim { - margin-bottom: 0; - font-size: 0.875em; } /* make all links in header (including breadcrumb and interwiki) same colour as the rest */ @@ -64,8 +72,7 @@ } [dir=rtl] #dokuwiki__header .logo img { - float: right; - margin-left: .5em; + margin-left: 0; margin-right: 0; } @@ -87,17 +94,15 @@ } #dokuwiki__header .tools { + display: flex; + align-items: center; + justify-content: flex-end; + gap: .5em; + min-width: 0; + ul { padding-left: 0; - margin-bottom: 0; - } - - li { - font-size: 0.875em; - margin-left: 1em; - list-style: none; - display: inline; - vertical-align: top; + margin: 0; } form.search div.ajax_qsearch li { @@ -109,9 +114,8 @@ } } -[dir=rtl] #dokuwiki__header .tools li { - margin-right: 1em; - margin-left: 0; +[dir=rtl] #dokuwiki__header .tools { + justify-content: flex-start; } #dokuwiki__header .mobileTools { @@ -122,9 +126,31 @@ #dokuwiki__sitetools { text-align: right; + position: relative; + white-space: nowrap; form.search { font-size: 0.875em; + margin: 0; + } + + > form.search { + flex: 0 1 auto; + } + + > form.search input { + width: 14em; + max-width: 100%; + height: 24px; + margin: 0; + padding-top: 0; + padding-bottom: 0; + box-sizing: border-box; + } + + > form.search div.ajax_qsearch { + min-width: 18em; + width: 100%; } } @@ -169,33 +195,137 @@ form.search { /*____________ breadcrumbs ____________*/ -.dokuwiki div.breadcrumbs { - border-top: 1px solid @ini_border; - border-bottom: 1px solid @ini_background; - margin-bottom: .5em; +.dokuwiki #dokuwiki__header div.breadcrumbs { + border: 0; + margin: 0; + padding: 0; font-size: 0.875em; - clear: both; + clear: none; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex: 1 1 auto; div { - padding: .1em .35em; - } - - div:only-child { - border-top: 1px solid @ini_background; - border-bottom: 1px solid @ini_border; - } - - div:first-child { - border-top: 1px solid @ini_background; - } - - div:last-child { - border-bottom: 1px solid @ini_border; + padding: 0; + display: inline; } .bcsep { font-size: 0.75em; } + + .bchead { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; + } +} + +#dokuwiki__header { + .header__menu { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + height: 24px; + margin: 0; + + summary { + list-style: none; + display: inline-flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + margin: 0; + padding: 0; + border: 1px solid @ini_border; + background-color: @ini_background; + color: @ini_text; + cursor: pointer; + user-select: none; + border-radius: 2px; + box-sizing: border-box; + line-height: 1; + vertical-align: middle; + } + + summary::-webkit-details-marker { + display: none; + } + + summary span { + font-size: 18px; + line-height: 1; + } + + &[open] summary, + summary:hover, + summary:focus { + border-color: @ini_link; + color: @ini_link; + } + } + + .header__menu-panel { + position: absolute; + top: calc(100% + .3em); + right: 0; + min-width: 14em; + padding: .35em 0; + background-color: @ini_background; + border: 1px solid @ini_border; + box-shadow: 0 .25em .75em fade(@ini_text, 15%); + z-index: 30; + white-space: normal; + text-align: left; + } + + .header__menu-list { + list-style: none; + margin: 0; + padding: 0; + + li { + margin: 0; + list-style: none; + } + + li.action a { + display: flex; + align-items: center; + gap: .5em; + padding: .35em .75em; + font-size: .875em; + color: @ini_text; + text-decoration: none; + } + + li.action a:hover, + li.action a:focus { + background-color: @ini_background_alt; + color: @ini_link; + } + } + + .header__menu-separator { + margin: .35em .75em; + border-top: 1px solid @ini_border; + } +} + +[dir=rtl] #dokuwiki__header .header__menu-panel { + left: 0; + right: auto; + text-align: right; } /* sidebar @@ -272,9 +402,9 @@ form.search { float: right; margin-right: -1em; margin-bottom: -1px; - margin-top: -1.5em; + margin-top: 0; overflow: hidden; - padding: 0.5em 1em 0; + padding: 0 1em 0; span { font-size: 0.875em; diff --git a/css/mobile.less b/css/mobile.less index 7f98717..8c2356b 100755 --- a/css/mobile.less +++ b/css/mobile.less @@ -200,18 +200,31 @@ body { width: auto; margin-bottom: .5em; } +#dokuwiki__header .header__bar { + display: block; + height: auto; +} [dir=rtl] #dokuwiki__header .headings, [dir=rtl] #dokuwiki__header .tools { float: none; text-align: right; width: auto; } +#dokuwiki__header .headings { + display: block; +} +#dokuwiki__header .headings .logo a { + display: inline-flex; +} #dokuwiki__sitetools { text-align: left; } [dir=rtl] #dokuwiki__sitetools { text-align: right; } +#dokuwiki__header .header__menu { + display: none; +} #dokuwiki__usertools, #dokuwiki__sitetools ul, #dokuwiki__sitetools h3, diff --git a/css/structure.less b/css/structure.less index 9a0e67c..b4f1935 100755 --- a/css/structure.less +++ b/css/structure.less @@ -20,25 +20,26 @@ body { #dokuwiki__header { width: 100%; + .header__bar { + display: flex; + align-items: center; + justify-content: space-between; + gap: .75em; + } + .headings { - float: left; + flex: 1 1 auto; + min-width: 0; } .tools { - float: right; - text-align: right; + flex: 0 0 auto; } } [dir=rtl] #dokuwiki__header { - .headings { - float: right; - text-align: right; - } - - .tools { - float: left; - text-align: left; + .header__bar { + flex-direction: row-reverse; } } diff --git a/css/usertools.less b/css/usertools.less index 07239cf..a039fda 100755 --- a/css/usertools.less +++ b/css/usertools.less @@ -1,49 +1,27 @@ -#dokuwiki__usertools { - position: absolute; - top: .5em; - right: 40px; // pagetool width - text-align: right; - width: 100%; - - ul { - margin: 0 auto; - padding: 0; +#dokuwiki__header { + #dokuwiki__usertools { + text-align: left; } - li.action a { - display: inline-flex; - flex-direction: row-reverse; - flex-wrap: nowrap; - + .header__menu-list li.action a { svg { - height: 1.4em; - width: 1.4em; + height: 1.1em; + width: 1.1em; + flex: 0 0 auto; vertical-align: middle; fill: @ini_icons; - margin-right: 0.2em; } } - li.action a:hover, - li.action a:active { - svg { - fill: @ini_link; - } - } - -} - -[dir=rtl] #dokuwiki__usertools { - text-align: left; - left: 40px; // pagetool width - right: auto; - - - li.action a { - - svg { - margin-right: 0; - margin-left: 0.2em; - } + .header__menu-list li.action a:hover svg, + .header__menu-list li.action a:focus svg, + .header__menu-list li.action a:active svg { + fill: @ini_link; + } +} + +[dir=rtl] #dokuwiki__header { + #dokuwiki__usertools { + text-align: right; } } diff --git a/tpl_header.php b/tpl_header.php index 7025d19..f663014 100755 --- a/tpl_header.php +++ b/tpl_header.php @@ -6,6 +6,20 @@ // must be run from within DokuWiki if (!defined('DOKU_INC')) die(); + +$siteToolsHtml = (new \dokuwiki\Menu\SiteMenu())->getListItems('action '); +$userToolsHtml = ''; +if ($conf['useacl']) { + $userToolsHtml = (new \dokuwiki\Menu\UserMenu())->getListItems('action '); +} + +$breadcrumbsHtml = ''; +if ($conf['youarehere']) { + $breadcrumbsHtml = tpl_youarehere(null, true); +} +if (!$breadcrumbsHtml && $conf['breadcrumbs']) { + $breadcrumbsHtml = tpl_breadcrumbs(null, true); +} ?> @@ -13,76 +27,73 @@ if (!defined('DOKU_INC')) die(); -
- + -

+
+

' . - '' . $conf['title'] . '', - 'accesskey="h" title="' . tpl_getLang('home') . ' [h]"' - ); - ?>

- -

- -
+ // display logo and wiki title in a link to the home page + tpl_link( + wl(), + '' . + '' . $conf['title'] . '', + 'accesskey="h" title="' . tpl_getLang('home') . ' [h]"' + ); + ?>

-
- - -
-

-
    - '; - tpl_userinfo(); /* 'Logged in as ...' */ - echo ''; - } - echo (new \dokuwiki\Menu\UserMenu())->getListItems('action '); - ?> -
-
- + +
+ +
- -
+

+ + +
+ + + + +
+ +
    + +
+ + + + + + + +
+

+
    + +
+
+ +
+
+ +
getDropdown($lang['tools']); ?>
-
    - getListItems('action '); ?> -
-
- - -
- -
- - -
- -
- -