luxick/luxtools-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pagetools footer

Browse Source
This commit is contained in:
luxick
2026-01-30 13:45:26 +01:00
parent c35da0e9a3
commit e027348c10
5 changed files with 159 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
css/mobile.less
View File

@@ -106,12 +106,9 @@
overflow: auto;
}
/* push pagetools closer to content */
#dokuwiki__pagetools {
top: 0;
}
.showSidebar #dokuwiki__pagetools {
top: 3.5em;
/* pagetools status bar adjustments for tablet */
#dokuwiki__pagetools.pagetools-statusbar {
/* status bar remains sticky at tablet width */
}
@@ -220,12 +217,30 @@ body {
#dokuwiki__usertools,
#dokuwiki__sitetools ul,
#dokuwiki__sitetools h3,
#dokuwiki__pagetools,
.dokuwiki div.breadcrumbs, /* @todo: maybe move breadcrumbs to the bottom? */
.dokuwiki .pageId {
display: none;
}
/* pagetools status bar on mobile - compact display */
#dokuwiki__pagetools.pagetools-statusbar {
ul {
justify-content: center;
gap: 0.15em;
li a {
padding: 0.25em 0.35em;
font-size: 0.85em;
.accesskey {
font-size: 0.8em;
padding: 0.05em 0.3em;
margin-right: 0.25em;
}
}
}
}
/* search form */
#dokuwiki__sitetools form.search {
float: left;
@@ -324,8 +339,9 @@ body {
@media only screen and (max-height: 400px) {
// 400px is only roughly the required value, this may be wrong under non-standard circumstances
#dokuwiki__pagetools div.tools {
position: static;
/* With sticky status bar, no special handling needed for short screens */
#dokuwiki__pagetools.pagetools-statusbar {
/* sticky positioning still works well */
}

177
css/pagetools.less
View File

@@ -1,124 +1,97 @@
/**
* This file provides the styles for the page tools
* (fly out navigation beside the page to edit, etc).
* This file provides the styles for the page tools as a sticky status bar
* at the bottom of the page (TurboVision-style).
*
* @author Anika Henke <anika@selfthinker.org>
* @author Andreas Gohr <andi@splitbrain.org>
* @author luxick <git@luxick.de>
*/
#dokuwiki__site > .site {
/* give space to the right so the tools won't disappear on smaller screens */
/* it's 40px because the 30px wide icons will have 5px more spacing to the left and right */
padding-right: 40px;
/* give the same space to the left to balance it out */
padding-left: 40px;
}
/*
* Status bar styling (inspired by TuiCSS turbo-vision example)
* The page tools are displayed as a sticky bar at the bottom of the viewport
*/
.dokuwiki div.page {
height: 190px;
min-height: 190px; /* 30 (= height of icons) x 6 (= maximum number of possible tools) + 2x5 */
height: auto;
}
#dokuwiki__pagetools.pagetools-statusbar {
/* Sticky positioning at bottom of viewport */
position: sticky;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
#dokuwiki__pagetools {
@ico-width: 28px;
@ico-margin: 8px;
@item-width: (@ico-width + @ico-margin + @ico-margin);
@item-height: (@ico-width + @ico-margin);
position: absolute;
right: (-1 * @item-width);
/* on same vertical level as first headline, because .page has 2em padding */
top: 2em;
width: @item-width;
div.tools {
position: fixed;
width: @item-width;
/* Visual styling - status bar appearance */
background-color: @ini_background_alt;
border-top: 1px solid @ini_border;
padding: 0 0.5em;
ul {
position: absolute;
right: 0;
text-align: right;
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
/* add transparent border to prevent jumping when proper border is added on hover */
border: 1px solid transparent;
z-index: 10;
gap: 0.25em;
li {
padding: 0;
display: inline-block;
margin: 0;
list-style: none;
font-size: 0.875em;
padding: 0;
a {
display: block;
/* add transparent border to prevent jumping when proper border is added on focus */
border: 1px solid transparent;
display: inline-flex;
align-items: center;
padding: 0.35em 0.5em;
text-decoration: none;
color: @ini_text;
white-space: nowrap;
line-height: @item-height;
vertical-align: middle;
height: @item-height;
span {
display: none; // hide label until hover
margin: 0 @ico-margin;
}
svg {
width: @ico-width;
height: @ico-width;
margin: 0 @ico-margin;
display: inline-block;
vertical-align: middle;
fill: @ini_border;
}
}
// on interaction show the full item
a:active,
a:focus,
a:hover {
background-color: @ini_background_alt;
span {
display: inline-block;
}
svg {
fill: @ini_link;
}
}
}
}
}
[dir=rtl] & {
right: auto;
left: (-1 * @item-width);
div.tools {
ul {
right: auto;
left: 0;
text-align: left;
}
}
}
}
// on hover or focus show all items
#dokuwiki__pagetools:hover, #dokuwiki__pagetools:focus-within {
div.tools ul {
background-color: @ini_background;
border-color: @ini_border;
border-radius: 2px;
box-shadow: 2px 2px 2px @ini_text_alt;
transition: background-color 0.15s ease;
li a span {
&:hover,
&:focus {
background-color: @ini_background_neu;
text-decoration: none;
}
&:active {
background-color: @ini_link;
color: @ini_background;
.accesskey {
background-color: @ini_background;
color: @ini_link;
}
}
/* Accesskey badge - prominent display like F1, F2 shortcuts */
.accesskey {
display: inline-block;
background-color: @ini_link;
color: @ini_background;
font-weight: bold;
font-size: 0.85em;
padding: 0.1em 0.4em;
margin-right: 0.4em;
border-radius: 2px;
min-width: 1.2em;
text-align: center;
text-transform: uppercase;
}
.label {
font-size: 0.9em;
}
}
}
}
/* RTL support */
[dir=rtl] & {
ul li a {
.accesskey {
margin-right: 0;
margin-left: 0.4em;
}
}
}
}

17
detail.php
View File

@@ -85,19 +85,14 @@ if (!defined('DOKU_INC')) die();
<hr class="a11y" />
<!-- PAGE ACTIONS -->
<?php if (!$ERROR) : ?>
<nav id="dokuwiki__pagetools" aria-labelledby="dokuwiki__pagetools__heading">
<h3 class="a11y" id="dokuwiki__pagetools__heading"><?php echo $lang['page_tools']; ?></h3>
<div class="tools">
<ul>
<?php echo (new \dokuwiki\Menu\DetailMenu())->getListItems(); ?>
</ul>
</div>
</nav>
<?php endif; ?>
</div><!-- /wrapper -->
<!-- PAGE ACTIONS (Status Bar) -->
<?php if (!$ERROR) :
$menuClass = \dokuwiki\Menu\DetailMenu::class;
include(__DIR__ . '/tpl_pagetools.php');
endif; ?>
<?php include(__DIR__ . '/tpl_footer.php') ?>
</div></div><!-- /site -->
</body>

15
main.php
View File

@@ -68,17 +68,14 @@ $showSidebar = $hasSidebar && ($ACT == 'show');
<hr class="a11y" />
</div></main><!-- /content -->
<!-- PAGE ACTIONS -->
<nav id="dokuwiki__pagetools" aria-labelledby="dokuwiki__pagetools__heading">
<h3 class="a11y" id="dokuwiki__pagetools__heading"><?php echo $lang['page_tools']; ?></h3>
<div class="tools">
<ul>
<?php echo (new \dokuwiki\Menu\PageMenu())->getListItems(); ?>
</ul>
</div>
</nav>
</div><!-- /wrapper -->
<!-- PAGE ACTIONS (Status Bar) -->
<?php
$menuClass = \dokuwiki\Menu\PageMenu::class;
include(__DIR__ . '/tpl_pagetools.php');
?>
<?php include(__DIR__ . '/tpl_footer.php') ?>
</div></div><!-- /site -->

53
tpl_pagetools.php Normal file
View File

@@ -0,0 +1,53 @@
<?php
/**
* Template partial for rendering page tools as a status bar
*
* This displays the page menu items in a TurboVision-style status bar
* at the bottom of the page with prominent accesskey display.
*
* @var string $menuClass The menu class to use (defaults to \dokuwiki\Menu\PageMenu)
*/
// must be run from within DokuWiki
if (!defined('DOKU_INC')) die();
// Determine which menu to use (PageMenu for main.php, DetailMenu for detail.php)
$menuClass = $menuClass ?? \dokuwiki\Menu\PageMenu::class;
try {
$menu = new $menuClass();
$items = $menu->getItems();
} catch (Exception $e) {
$items = [];
}
if (empty($items)) return;
?>
<nav id="dokuwiki__pagetools" class="pagetools-statusbar" aria-labelledby="dokuwiki__pagetools__heading">
<h3 class="a11y" id="dokuwiki__pagetools__heading"><?php echo $lang['page_tools']; ?></h3>
<ul>
<?php foreach ($items as $item): ?>
<?php
$accesskey = $item->getAccesskey();
$label = hsc($item->getLabel());
$title = hsc($item->getTitle());
$link = $item->getLink();
$type = $item->getType();
$nofollow = $item->isNofollow() ? ' rel="nofollow"' : '';
?>
<li class="action <?php echo $type; ?>">
<a href="<?php echo $link; ?>"
title="<?php echo $title; ?><?php echo $accesskey ? ' [' . $accesskey . ']' : ''; ?>"
<?php echo $accesskey ? 'accesskey="' . $accesskey . '"' : ''; ?>
<?php echo $nofollow; ?>>
<?php if ($accesskey): ?>
<span class="accesskey"><?php echo strtoupper(hsc($accesskey)); ?></span>
<?php endif; ?>
<span class="label"><?php echo $label; ?></span>
</a>
</li>
<?php endforeach; ?>
</ul>
</nav>