Rework header bar

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.

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,
+    .pad {
-    .tools {
+        padding-top: 0;
-        margin-bottom: 1.5em;
+        padding-bottom: 0;
-        width: 49%;
     }
-    .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;
+            display: block;
-            margin-right: .5em;
+            height: 1.5em;
-            height: 64px;
             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: 0;
-    margin-left: .5em;
     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;
+        margin: 0;
-    }
-
-    li {
-        font-size: 0.875em;
-        margin-left: 1em;
-        list-style: none;
-        display: inline;
-        vertical-align: top;
     }
 
     form.search div.ajax_qsearch li {
@@ -109,9 +114,8 @@
     }
 }
 
-[dir=rtl] #dokuwiki__header .tools li {
+[dir=rtl] #dokuwiki__header .tools {
-    margin-right: 1em;
+    justify-content: flex-start;
-    margin-left: 0;
 }
 
 #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 {
+.dokuwiki #dokuwiki__header div.breadcrumbs {
-    border-top: 1px solid @ini_border;
+    border: 0;
-    border-bottom: 1px solid @ini_background;
+    margin: 0;
-    margin-bottom: .5em;
+    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;
+        padding: 0;
-    }
+        display: inline;
-
-    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;
     }
 
     .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;

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,

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;
+        flex: 0 0 auto;
-        text-align: right;
     }
 }
 
 [dir=rtl] #dokuwiki__header {
-    .headings {
+    .header__bar {
-        float: right;
+        flex-direction: row-reverse;
-        text-align: right;
-    }
-
-    .tools {
-        float: left;
-        text-align: left;
     }
 }
 

css/usertools.less

@@ -1,49 +1,27 @@
-#dokuwiki__usertools {
+#dokuwiki__header {
-    position: absolute;
+    #dokuwiki__usertools {
-    top: .5em;
+        text-align: left;
-    right: 40px; // pagetool width
-    text-align: right;
-    width: 100%;
-
-    ul {
-        margin: 0 auto;
-        padding: 0;
     }
 
-    li.action a {
+    .header__menu-list li.action a {
-        display: inline-flex;
-        flex-direction: row-reverse;
-        flex-wrap: nowrap;
-
         svg {
-            height: 1.4em;
+            height: 1.1em;
-            width: 1.4em;
+            width: 1.1em;
+            flex: 0 0 auto;
             vertical-align: middle;
             fill: @ini_icons;
-            margin-right: 0.2em;
         }
     }
 
-    li.action a:hover,
+    .header__menu-list li.action a:hover svg,
-    li.action a:active {
+    .header__menu-list li.action a:focus svg,
-        svg {
+    .header__menu-list li.action a:active svg {
-            fill: @ini_link;
+        fill: @ini_link;
-        }
+    }
-    }
+}
-
+
-}
+[dir=rtl] #dokuwiki__header {
-
+    #dokuwiki__usertools {
-[dir=rtl] #dokuwiki__usertools {
+        text-align: right;
-    text-align: left;
-    left: 40px; // pagetool width
-    right: auto;
-
-
-    li.action a {
-
-        svg {
-            margin-right: 0;
-            margin-left: 0.2em;
-        }
     }
 }

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);
+}
 ?>
 
 <!-- ********** HEADER ********** -->
@@ -13,76 +27,73 @@ if (!defined('DOKU_INC')) die();
 
     <?php tpl_includeFile('header.html') ?>
 
-    <div class="headings group">
+    <ul class="a11y skip">
-        <ul class="a11y skip">
+        <li><a href="#dokuwiki__content"><?php echo $lang['skip_to_content']; ?></a></li>
-            <li><a href="#dokuwiki__content"><?php echo $lang['skip_to_content']; ?></a></li>
+    </ul>
-        </ul>
 
-        <h1 class="logo"><?php
+    <div class="header__bar">
-            // get logo either out of the template images folder or data/media folder
+        <div class="headings header__brand">
-            $logoSize = [];
+            <h1 class="logo"><?php
-            $logo = tpl_getMediaFile([
+                // get logo either out of the template images folder or data/media folder
-                ':wiki:logo.svg', ':logo.svg',
+                $logoSize = [];
-                ':wiki:logo.png', ':logo.png',
+                $logo = tpl_getMediaFile([
-                'images/logo.svg', 'images/logo.png'
+                    ':wiki:logo.svg', ':logo.svg',
-            ], false, $logoSize);
+                    ':wiki:logo.png', ':logo.png',
+                    'images/logo.svg', 'images/logo.png'
+                ], false, $logoSize);
 
-            // display logo and wiki title in a link to the home page
+                // display logo and wiki title in a link to the home page
-            tpl_link(
+                tpl_link(
-                wl(),
+                    wl(),
-                '<img src="' . $logo . '" ' . ($logoSize ? $logoSize[3] : '') . ' alt="" />' .
+                    '<img src="' . $logo . '" ' . ($logoSize ? $logoSize[3] : '') . ' alt="" />' .
-                '<span>' . $conf['title'] . '</span>',
+                    '<span>' . $conf['title'] . '</span>',
-                'accesskey="h" title="' . tpl_getLang('home') . ' [h]"'
+                    'accesskey="h" title="' . tpl_getLang('home') . ' [h]"'
-            );
+                );
-            ?></h1>
+                ?></h1>
-        <?php if ($conf['tagline']) : ?>
-            <p class="claim"><?php echo $conf['tagline']; ?></p>
-        <?php endif ?>
-    </div>
 
-    <div class="tools group">
+            <?php if ($breadcrumbsHtml) : ?>
-        <!-- USER TOOLS -->
+                <div class="breadcrumbs header__breadcrumbs"><?php echo $bread  crumbsHtml; ?></div>
-        <?php if ($conf['useacl']) : ?>
+            <?php endif ?>
-            <div id="dokuwiki__usertools">
+        </div>
-                <h3 class="a11y"><?php echo $lang['user_tools']; ?></h3>
-                <ul>
-                    <?php
-                    if (!empty($_SERVER['REMOTE_USER'])) {
-                        echo '<li class="user">';
-                        tpl_userinfo(); /* 'Logged in as ...' */
-                        echo '</li>';
-                    }
-                        echo (new \dokuwiki\Menu\UserMenu())->getListItems('action ');
-                    ?>
-                </ul>
-            </div>
-        <?php endif ?>
 
-        <!-- SITE TOOLS -->
+        <div id="dokuwiki__sitetools" class="tools header__actions">
-        <div id="dokuwiki__sitetools">
             <h3 class="a11y"><?php echo $lang['site_tools']; ?></h3>
             <?php tpl_searchform(true, false); ?>
+
+            <?php if ($siteToolsHtml || $userToolsHtml) : ?>
+                <details class="header__menu">
+                    <summary aria-label="<?php echo hsc($lang['tools']); ?>" title="<?php echo hsc($lang['tools']); ?>">
+                        <span aria-hidden="true">&#8942;</span>
+                    </summary>
+
+                    <div class="header__menu-panel">
+                        <?php if ($siteToolsHtml) : ?>
+                            <ul class="header__menu-list header__menu-list--site">
+                                <?php echo $siteToolsHtml; ?>
+                            </ul>
+                        <?php endif ?>
+
+                        <?php if ($siteToolsHtml && $userToolsHtml) : ?>
+                            <div class="header__menu-separator" role="separator"></div>
+                        <?php endif ?>
+
+                        <?php if ($userToolsHtml) : ?>
+                            <div id="dokuwiki__usertools">
+                                <h3 class="a11y"><?php echo $lang['user_tools']; ?></h3>
+                                <ul class="header__menu-list header__menu-list--user">
+                                    <?php echo $userToolsHtml; ?>
+                                </ul>
+                            </div>
+                        <?php endif ?>
+                    </div>
+                </details>
+            <?php endif ?>
+
             <div class="mobileTools">
                 <?php echo (new \dokuwiki\Menu\MobileMenu())->getDropdown($lang['tools']); ?>
             </div>
-            <ul>
-                <?php echo (new \dokuwiki\Menu\SiteMenu())->getListItems('action '); ?>
-            </ul>
         </div>
-
     </div>
 
-    <!-- BREADCRUMBS -->
-    <?php if ($conf['breadcrumbs'] || $conf['youarehere']) : ?>
-        <div class="breadcrumbs">
-            <?php if ($conf['youarehere']) : ?>
-                <div class="youarehere"><?php tpl_youarehere() ?></div>
-            <?php endif ?>
-            <?php if ($conf['breadcrumbs']) : ?>
-                <div class="trace"><?php tpl_breadcrumbs() ?></div>
-            <?php endif ?>
-        </div>
-    <?php endif ?>
-
     <hr class="a11y" />
 </div></header><!-- /header -->