Update Logo rendering

This commit is contained in:
2026-03-06 09:34:09 +01:00
parent 27a4ac604f
commit 79a31340a8
9 changed files with 137 additions and 99 deletions

View File

@@ -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 {
font-size: 18px;
line-height: 1;
summary svg {
width: 16px;
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
********************************************************************/

View File

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

View File

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

View File

@@ -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') ?>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.7 KiB

1
images/logo.svg Normal file
View File

@@ -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>

After

Width:  |  Height:  |  Size: 700 B

View File

@@ -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') ?>

View File

@@ -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() {

View File

@@ -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,76 +30,79 @@ 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>
<ul class="a11y skip">
<li><a href="#dokuwiki__content"><?php echo $lang['skip_to_content']; ?></a></li>
</ul>
<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',
':wiki:logo.png', ':logo.png',
'images/logo.svg', 'images/logo.png'
], false, $logoSize);
<div class="header__bar">
<div class="headings header__brand">
<h1 class="logo"><?php
$logoSize = [];
$logo = tpl_getMediaFile([
':wiki:logo.svg', ':logo.svg',
':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
tpl_link(
wl(),
'<img src="' . $logo . '" ' . ($logoSize ? $logoSize[3] : '') . ' alt="" />' .
'<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 endif ?>
</div>
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="" />';
}
<div class="tools group">
<!-- USER TOOLS -->
<?php if ($conf['useacl']) : ?>
<div id="dokuwiki__usertools">
<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 ?>
tpl_link(
wl(),
$logoMarkup .
'<span>' . $conf['title'] . '</span>',
'accesskey="h" title="' . tpl_getLang('home') . ' [h]"'
);
?></h1>
<!-- SITE TOOLS -->
<div id="dokuwiki__sitetools">
<?php if ($breadcrumbsHtml) : ?>
<div class="breadcrumbs header__breadcrumbs"><?php echo $breadcrumbsHtml; ?></div>
<?php endif ?>
</div>
<div id="dokuwiki__sitetools" class="tools header__actions">
<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']); ?>">
<?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 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 -->