Simplify page structure

2026-01-16 15:04:53 +01:00
parent 5544cb0228
commit decb19f5bd
6 changed files with 60 additions and 88 deletions
--- a/css/basic.css
+++ b/css/basic.css
@@ -45,6 +45,7 @@ h6 {
    font-family: "Perfect DOS VGA 437", Constantia, Utopia, Lucidabright, Lucida, Georgia, "Nimbus Roman No9 L", serif;
    font-weight: bold;
    color: __text_neu__;
+    text-align: left;
    background-color: inherit;
    padding: 0;
    line-height: 1.2;
--- a/css/mobile.css
+++ b/css/mobile.css
@@ -6,25 +6,18 @@

@media only screen and (max-width: 42em) {

-#dokuwiki__aside {
-    width: 100%;
-    float: none;
-    margin-bottom: 1.4em;
+#dokuwiki__site .wrapper {
+    flex-direction: column;
+    gap: 1.4em;
 }
-#dokuwiki__aside > .pad {
-    margin: 0;
+
+#dokuwiki__aside {
+    width: auto;
+    flex: 0 0 auto;
 }

 .hasSidebar #dokuwiki__content {
-    float: none;
-    margin-left: 0;
-    margin-right: 0;
-}
-.hasSidebar #dokuwiki__content > .pad {
-    margin-left: 0;
-}
-[dir=rtl] .hasSidebar #dokuwiki__content > .pad {
-    margin-right: 0;
+    margin: 0;
 }

 #dokuwiki__header .headings {
--- a/css/structure.css
+++ b/css/structure.css
@@ -16,8 +16,6 @@ body {
 }

 #dokuwiki__header {
-}
-#dokuwiki__header > .pad {
 }
    #dokuwiki__header .headings {
        float: left;
@@ -37,45 +35,27 @@ body {

 #dokuwiki__site .wrapper {
    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: 1.5em;
+}
+[dir=rtl] #dokuwiki__site .wrapper {
+    flex-direction: row-reverse;
 }

 #dokuwiki__aside {
+    flex: 0 0 __sidebar_width__;
    width: __sidebar_width__;
-        float: left;
    position: relative;
    display: block;
 }
-    [dir=rtl] #dokuwiki__aside {
-        float: right;
-    }
-    #dokuwiki__aside > .pad {
-        margin: 0 1.5em 0 0;
-    }
-    [dir=rtl] #dokuwiki__aside > .pad {
-        margin: 0 0 0 1.5em;
-    }

-    /* make content wider when there's no sidebar */
-    .hasSidebar #dokuwiki__content {
-        float: right;
-        margin-left: -__sidebar_width__;
-        width: 100%;
-    }
-    [dir=rtl] .hasSidebar #dokuwiki__content {
-        float: left;
-        margin-left: 0;
-        margin-right: -__sidebar_width__;
-    }
-    .hasSidebar #dokuwiki__content > .pad {
-        margin-left: __sidebar_width__;
-    }
-    [dir=rtl] .hasSidebar #dokuwiki__content > .pad {
-        margin-left: 0;
-        margin-right: __sidebar_width__;
+#dokuwiki__content {
+    flex: 1 1 auto;
+    min-width: 0;
 }

 #dokuwiki__footer {
    clear: both;
 }
-#dokuwiki__footer > .pad {
-}
+
--- a/css/tuivision.css
+++ b/css/tuivision.css
@@ -56,12 +56,8 @@ body.luxtools-tv .hasSidebar #dokuwiki__content {
    width: auto;
 }

-body.luxtools-tv .hasSidebar #dokuwiki__content > .pad {
-    margin-left: 0;
-}
-
 /* Let the page fieldset fill available vertical space */
-body.luxtools-tv #dokuwiki__content > .pad {
+body.luxtools-tv #dokuwiki__content {
    display: flex;
    flex-direction: column;
    height: 100%;
@@ -217,7 +213,7 @@ body.luxtools-tv .luxtools__page-fieldset > * {
 }

 /* Avoid double spacing from DokuWiki pads */
-#dokuwiki__content > .pad {
+#dokuwiki__content {
    padding-top: 0;
 }

@@ -261,3 +257,7 @@ body.luxtools-tv .luxtools__page-fieldset > * {
 .luxtools__hotkey {
    margin-right: 4px;
 }
+
+.tui-fieldset {
+    background-color: #0000a8;
+}
--- a/main.php
+++ b/main.php
@@ -99,7 +99,7 @@ $sidebarElement = tpl_getConf('sidebarIsNav') ? 'nav' : 'aside';
        echo ($showSidebar) ? 'hasSidebar' : ''; ?>">
        <?php html_msgarea() /* occasional error and info messages on top of the page */ ?>
        <!-- ********** HEADER ********** -->
-        <header id="dokuwiki__header"><div class="pad">
+        <header id="dokuwiki__header">
            <?php tpl_includeFile('header.html') ?>

            <ul class="a11y skip">
@@ -108,32 +108,32 @@ $sidebarElement = tpl_getConf('sidebarIsNav') ? 'nav' : 'aside';

            <div class="clearer"></div>
            <hr class="a11y" />
-        </div></header><!-- /header -->
+        </header><!-- /header -->


        <div class="wrapper">

            <!-- ********** ASIDE ********** -->
            <?php if ($showSidebar): ?>
-                <<?php echo $sidebarElement ?> id="dokuwiki__aside" aria-label="<?php echo $lang['sidebar'] ?>"><div class="pad aside include group">
-                    <fieldset class="tui-fieldset luxtools__sidebar-fieldset">
+                <<?php echo $sidebarElement ?> id="dokuwiki__aside" class="aside include group" aria-label="<?php echo $lang['sidebar'] ?>">
+                    <fieldset class="tui-fieldset tui-border-solid luxtools__sidebar-fieldset">
                        <legend><?php echo $lang['sidebar'] ?></legend>
                        <?php tpl_includeFile('sidebarheader.html') ?>
                        <?php tpl_include_page($conf['sidebar'], 1, 1) /* includes the nearest sidebar page */ ?>
                        <?php tpl_includeFile('sidebarfooter.html') ?>
                    </fieldset>
                    <div class="clearer"></div>
-                </div></<?php echo $sidebarElement ?>><!-- /aside -->
+                </<?php echo $sidebarElement ?>><!-- /aside -->
            <?php endif; ?>

            <!-- ********** CONTENT ********** -->
-            <main id="dokuwiki__content"><div class="pad">
+            <main id="dokuwiki__content">
                <?php tpl_flush() /* flush the output buffer */ ?>
                <?php tpl_includeFile('pageheader.html') ?>

                <div class="page">
                    <!-- wikipage start -->
-                    <fieldset class="tui-fieldset luxtools__page-fieldset">
+                    <fieldset class="tui-fieldset tui-border-solid luxtools__page-fieldset">
                        <legend class="center"><?php echo hsc($ID); ?></legend>
                        <?php tpl_content() /* the main content */ ?>
                    </fieldset>
@@ -143,10 +143,9 @@ $sidebarElement = tpl_getConf('sidebarIsNav') ? 'nav' : 'aside';

                <?php tpl_flush() ?>
                <?php tpl_includeFile('pagefooter.html') ?>
-            </div></main><!-- /content -->
+            </main><!-- /content -->

-            <div class="clearer"></div>
-            <hr class="a11y" />
+        </div><!-- /wrapper -->

        <!-- PAGE ACTIONS -->
        <?php if ($showTools): ?>
@@ -161,15 +160,14 @@ $sidebarElement = tpl_getConf('sidebarIsNav') ? 'nav' : 'aside';
                </ul>
            </nav>
        <?php endif; ?>
-        </div><!-- /wrapper -->

        <!-- ********** FOOTER ********** -->
-        <footer id="dokuwiki__footer"><div class="pad">
+        <footer id="dokuwiki__footer">
            <div class="doc"><?php tpl_pageinfo() /* 'Last modified' etc */ ?></div>
            <?php tpl_license('button') /* content license, parameters: img=*badge|button|0, imgonly=*0|1, return=*0|1 */ ?>

            <?php tpl_includeFile('footer.html') ?>
-        </div></footer><!-- /footer -->
+        </footer><!-- /footer -->
    </div></div><!-- /site -->

    <div class="no"><?php tpl_indexerWebBug() /* provide DokuWiki housekeeping, required in all templates */ ?></div>
--- a/mediamanager.php
+++ b/mediamanager.php
@@ -28,18 +28,18 @@ if (!defined('DOKU_INC')) die();
 <body>
    <div id="media__manager" class="<?php echo tpl_classes(); ?>">
        <?php html_msgarea() ?>
-        <nav id="mediamgr__aside"><div class="pad">
+        <nav id="mediamgr__aside" class="pad">
            <h1><?php echo hsc($lang['mediaselect'])?></h1>

            <?php /* keep the id! additional elements are inserted via JS here */?>
            <div id="media__opts"></div>

            <?php tpl_mediaTree() ?>
-        </div></nav>
+        </nav>

-        <main id="mediamgr__content"><div class="pad">
+        <main id="mediamgr__content" class="pad">
            <?php tpl_mediaContent() ?>
-        </div></main>
+        </main>
    </div>
 </body>
 </html>