Update Logo rendering

css/design.less

@@ -59,6 +59,21 @@
             width: auto;
         }
 
+        .logo__image {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            height: 1.5em;
+            width: 1.5em;
+            color: @ini_theme_color;
+
+            svg {
+                display: block;
+                width: 100%;
+                height: 100%;
+            }
+        }
+
         span {
             display: block;
         }
@@ -76,6 +91,11 @@
     margin-right: 0;
 }
 
+[dir=rtl] #dokuwiki__header .logo .logo__image {
+    margin-left: 0;
+    margin-right: 0;
+}
+
 /* tools
 ********************************************************************/
 
@@ -139,7 +159,7 @@
     }
 
     > form.search input {
-        width: 14em;
+        width: 24em;
         max-width: 100%;
         height: 24px;
         margin: 0;
@@ -262,9 +282,11 @@ form.search {
             display: none;
         }
 
-        summary span {
+        summary svg {
-            font-size: 18px;
+            width: 16px;
-            line-height: 1;
+            height: 16px;
+            display: block;
+            fill: @ini_icons;
         }
 
         &[open] summary,
@@ -273,6 +295,12 @@ form.search {
             border-color: @ini_link;
             color: @ini_link;
         }
+
+        &[open] summary svg,
+        summary:hover svg,
+        summary:focus svg {
+            fill: @ini_link;
+        }
     }
 
     .header__menu-panel {
@@ -398,27 +426,6 @@ form.search {
 /* content
 ********************************************************************/
 
-.dokuwiki .pageId {
-    float: right;
-    margin-right: -1em;
-    margin-bottom: -1px;
-    margin-top: 0;
-    overflow: hidden;
-    padding: 0 1em 0;
-
-    span {
-        font-size: 0.875em;
-        border: solid @ini_border;
-        border-width: 1px 1px 0;
-        background-color: @ini_background;
-        color: @ini_text_alt;
-        padding: .1em .35em;
-        border-top-left-radius: 2px;
-        border-top-right-radius: 2px;
-        display: block;
-    }
-}
-
 .dokuwiki div.page {
     clear: both;
     background: @ini_background;
@@ -446,12 +453,6 @@ form.search {
     text-align: left;
 }
 
-[dir=rtl] .dokuwiki .pageId {
-    float: left;
-    margin-left: -1em;
-    margin-right: 0;
-}
-
 /* footer
 ********************************************************************/
 

css/mobile.less

@@ -228,8 +228,7 @@ body {
 #dokuwiki__usertools,
 #dokuwiki__sitetools ul,
 #dokuwiki__sitetools h3,
-.dokuwiki div.breadcrumbs, /* @todo: maybe move breadcrumbs to the bottom? */
+.dokuwiki div.breadcrumbs { /* @todo: maybe move breadcrumbs to the bottom? */
-.dokuwiki .pageId {
     display: none;
 }
 

css/print.css

@@ -17,7 +17,6 @@ video,
 #dokuwiki__header .tools,
 #dokuwiki__aside,
 .dokuwiki .breadcrumbs,
-.dokuwiki .pageId,
 #dw__toc,
 h3.toggle,
 #dokuwiki__pagetools,

detail.php

@@ -35,10 +35,6 @@ if (!defined('DOKU_INC')) die();
             <main id="dokuwiki__content"><div class="pad group">
                 <?php html_msgarea() ?>
 
-                <?php if (!$ERROR) : ?>
-                    <div class="pageId"><span><?php echo hsc(tpl_img_getTag('IPTC.Headline', $IMG)); ?></span></div>
-                <?php endif; ?>
-
                 <div class="page group">
                     <?php tpl_flush() ?>
                     <?php tpl_includeFile('pageheader.html') ?>

images/logo.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 26.052269 26.052269" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-linejoin="miter" transform="matrix(0.05463483,8.1519706e-6,-8.1519706e-6,0.05463483,-64.560546,-24.6949)"><rect x="1188.537" y="457.92056" width="461.87488" height="462.15189" stroke-width="20.2288"/><path d="m1348.9955 456.59572.046 309.36839" stroke-width="19.6849"/><path d="m1200.3996 765.80237 441.8362-.0659" stroke-width="19.6849"/><path d="m1648.2897 620.244-299.2012.0446" stroke-width="20.5676"/><path d="m1491.6148 909.24806-.021-136.93117" stroke-width="19.6849"/><rect x="1191.6504" y="461.66092" width="457.09634" height="457.09634" stroke-width="19.6761"/></g></svg>

main.php

@@ -49,8 +49,6 @@ $showSidebar = $hasSidebar && ($ACT == 'show');
             <main id="dokuwiki__content"><div class="pad group">
                 <?php html_msgarea() ?>
 
-                <div class="pageId"><span><?php echo hsc($ID) ?></span></div>
-
                 <div class="page group">
                     <?php tpl_flush() ?>
                     <?php tpl_includeFile('pageheader.html') ?>

script.js

@@ -87,6 +87,30 @@ jQuery(function(){
         this.blur();
     });
 
+    (function enhanceHeaderMenu(){
+        var $menu = jQuery('#dokuwiki__header .header__menu');
+
+        if ($menu.length === 0) {
+            return;
+        }
+
+        function closeMenu() {
+            $menu.removeAttr('open');
+        }
+
+        jQuery(document).on('click', function (event) {
+            if (!jQuery(event.target).closest($menu).length) {
+                closeMenu();
+            }
+        });
+
+        jQuery(document).on('keydown', function (event) {
+            if (event.key === 'Escape') {
+                closeMenu();
+            }
+        });
+    })();
+
     // make edit toolbar icons themeable by converting img icons to CSS masks
     (function enhanceEditToolbarIcons() {
         function toMaskIcons() {

tpl_header.php

@@ -6,6 +6,23 @@
 
 // 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);
+}
+
+$templateLogoUrl = tpl_basedir() . 'images/logo.svg';
+$templateLogoPath = DOKU_TPLINC . 'images/logo.svg';
 ?>
 
 <!-- ********** HEADER ********** -->
@@ -13,13 +30,13 @@ if (!defined('DOKU_INC')) die();
 
     <?php tpl_includeFile('header.html') ?>
 
-    <div class="headings group">
     <ul class="a11y skip">
         <li><a href="#dokuwiki__content"><?php echo $lang['skip_to_content']; ?></a></li>
     </ul>
 
+    <div class="header__bar">
+        <div class="headings header__brand">
             <h1 class="logo"><?php
-            // get logo either out of the template images folder or data/media folder
                 $logoSize = [];
                 $logo = tpl_getMediaFile([
                     ':wiki:logo.svg', ':logo.svg',
@@ -27,62 +44,65 @@ if (!defined('DOKU_INC')) die();
                     'images/logo.svg', 'images/logo.png'
                 ], false, $logoSize);
 
-            // display logo and wiki title in a link to the home page
+                if ($logo === $templateLogoUrl) {
+                    $logoMarkup = '<span class="logo__image logo__image--svg" aria-hidden="true">' .
+                        inlineSVG($templateLogoPath) .
+                        '</span>';
+                } else {
+                    $logoMarkup = '<img src="' . $logo . '" ' . ($logoSize ? $logoSize[3] : '') . ' alt="" />';
+                }
+
                 tpl_link(
                     wl(),
-                '<img src="' . $logo . '" ' . ($logoSize ? $logoSize[3] : '') . ' alt="" />' .
+                    $logoMarkup .
                     '<span>' . $conf['title'] . '</span>',
                     'accesskey="h" title="' . tpl_getLang('home') . ' [h]"'
                 );
                 ?></h1>
-        <?php if ($conf['tagline']) : ?>
+
-            <p class="claim"><?php echo $conf['tagline']; ?></p>
+            <?php if ($breadcrumbsHtml) : ?>
+                <div class="breadcrumbs header__breadcrumbs"><?php echo $breadcrumbsHtml; ?></div>
             <?php endif ?>
         </div>
 
-    <div class="tools group">
+        <div id="dokuwiki__sitetools" class="tools header__actions">
-        <!-- USER TOOLS -->
+            <h3 class="a11y"><?php echo $lang['site_tools']; ?></h3>
-        <?php if ($conf['useacl']) : ?>
+            <?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']); ?>">
+                        <?php echo inlineSVG(DOKU_INC . 'lib/images/menu/settings.svg'); ?>
+                    </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>
+                                <ul class="header__menu-list header__menu-list--user">
-                    <?php
+                                    <?php echo $userToolsHtml; ?>
-                    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 ?>
+                    </div>
+                </details>
+            <?php endif ?>
 
-        <!-- SITE TOOLS -->
-        <div id="dokuwiki__sitetools">
-            <h3 class="a11y"><?php echo $lang['site_tools']; ?></h3>
-            <?php tpl_searchform(true, false); ?>
             <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 -->