From e027348c10c30ab00df0e496dfefbfb8a79727f4 Mon Sep 17 00:00:00 2001
From: luxick <git@luxick.de>
Date: Fri, 30 Jan 2026 13:45:26 +0100
Subject: [PATCH] pagetools footer

---
 css/mobile.less    |  34 +++++++---
 css/pagetools.less | 165 +++++++++++++++++++--------------------------
 detail.php         |  17 ++---
 main.php           |  15 ++---
 tpl_pagetools.php  |  53 +++++++++++++++
 5 files changed, 159 insertions(+), 125 deletions(-)
 create mode 100644 tpl_pagetools.php

diff --git a/css/mobile.less b/css/mobile.less
index a52c723..3d1315b 100755
--- a/css/mobile.less
+++ b/css/mobile.less
@@ -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 */
 }
 
 
diff --git a/css/pagetools.less b/css/pagetools.less
index 5473594..e9352b9 100755
--- a/css/pagetools.less
+++ b/css/pagetools.less
@@ -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);
+    /* Visual styling - status bar appearance */
+    background-color: @ini_background_alt;
+    border-top: 1px solid @ini_border;
+    padding: 0 0.5em;
 
-    position: absolute;
-    right: (-1 * @item-width);
-    /* on same vertical level as first headline, because .page has 2em padding */
-    top: 2em;
-    width: @item-width;
+    ul {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        gap: 0.25em;
 
-    div.tools {
-        position: fixed;
-        width: @item-width;
-
-        ul {
-            position: absolute;
-            right: 0;
-            text-align: right;
+        li {
+            display: inline-block;
             margin: 0;
             padding: 0;
-            /* add transparent border to prevent jumping when proper border is added on hover */
-            border: 1px solid transparent;
-            z-index: 10;
 
-            li {
-                padding: 0;
-                margin: 0;
-                list-style: none;
-                font-size: 0.875em;
+            a {
+                display: inline-flex;
+                align-items: center;
+                padding: 0.35em 0.5em;
+                text-decoration: none;
+                color: @ini_text;
+                white-space: nowrap;
+                border-radius: 2px;
+                transition: background-color 0.15s ease;
 
-                a {
+                &:hover,
+                &:focus {
+                    background-color: @ini_background_neu;
+                    text-decoration: none;
+                }
 
-                    display: block;
-                    /* add transparent border to prevent jumping when proper border is added on focus */
-                    border: 1px solid transparent;
-                    white-space: nowrap;
-                    line-height: @item-height;
-                    vertical-align: middle;
-                    height: @item-height;
+                &:active {
+                    background-color: @ini_link;
+                    color: @ini_background;
 
-                    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;
+                    .accesskey {
+                        background-color: @ini_background;
+                        color: @ini_link;
                     }
                 }
 
-                // on interaction show the full item
-                a:active,
-                a:focus,
-                a:hover {
-                    background-color: @ini_background_alt;
+                /* 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;
+                }
 
-                    span {
-                        display: inline-block;
-                    }
-
-                    svg {
-                        fill: @ini_link;
-                    }
+                .label {
+                    font-size: 0.9em;
                 }
             }
         }
     }
 
+    /* RTL support */
     [dir=rtl] & {
-        right: auto;
-        left: (-1 * @item-width);
-
-        div.tools {
-            ul {
-                right: auto;
-                left: 0;
-                text-align: left;
+        ul li a {
+            .accesskey {
+                margin-right: 0;
+                margin-left: 0.4em;
             }
         }
     }
 }
-
-// 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;
-
-        li a span {
-            display: inline-block;
-        }
-    }
-}
diff --git a/detail.php b/detail.php
index 9eaaad3..37b0b4e 100755
--- a/detail.php
+++ b/detail.php
@@ -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>
diff --git a/main.php b/main.php
index 24020a0..5769477 100755
--- a/main.php
+++ b/main.php
@@ -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 -->
 
diff --git a/tpl_pagetools.php b/tpl_pagetools.php
new file mode 100644
index 0000000..54653d7
--- /dev/null
+++ b/tpl_pagetools.php
@@ -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>