Merge branch 'master' of gitlab.cosmocode.de:deutschlaender/sprintdoc-template into spis-master

css/area_footer.less

@@ -16,10 +16,12 @@
         font-size: @font-size-default;
         text-align: right;
         padding: @margin-small @margin-default;
+
         bdi {
             font-weight: bold;
         }
     }
+
     #dokuwiki__footer {
         .main-footer {
             position: relative;
@@ -27,24 +29,30 @@
             box-sizing: border-box;
             background-color: @color-site-bg;
         }
+
         p {
             font-size: @font-size-default;
             margin: 0;
         }
     }
 }
+
+
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* min-width: 1024px */
+
 @media @screen_min-md {
     #dokuwiki__footer {
         .col-xs-12 {
             float: right;
             width: 100%;
         }
+
         .main-footer {
             padding: @margin-default 0;
         }
     }
+
     .showSidebar {
         #dokuwiki__footer {
             .col-xs-12 {
@@ -52,6 +60,7 @@
             }
         }
     }
+
     .wide-content {
         &.showSidebar {
             #dokuwiki__footer {
@@ -62,8 +71,11 @@
         }
     }
 }
+
+
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 1023px */
+
 @media @screen_max-md {
     #dokuwiki__footer {
         .main-footer {

css/area_header.less

@@ -3,3 +3,45 @@
  *
  * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
+
+
+#dokuwiki__header {
+    .menu-togglelink {
+        border: 1px solid @color-border;
+        border-radius: @border-radius;
+        text-align: center;
+        margin: @very-small-spacing -(@very-small-spacing) 0 0;
+
+        font-size: @font-size-small;
+        min-height: 2em;
+        min-width: 2em;
+        box-sizing: border-box;
+        line-height: 2em;
+
+        cursor: pointer;
+        background-color: #fff;
+        text-decoration: none;
+        transition: @transition color, @transition background-color, @transition border-color;
+
+        svg {
+            height: @font-size-default + (@font-scale-factor * 4);
+            width: @font-size-default + (@font-scale-factor * 4);
+            vertical-align: middle;
+
+            path {
+                fill: @color-nav
+            }
+        }
+
+        &:hover,
+        &:active,
+        &:focus {
+            background-color: @button_color;
+            border-color: @button_background;
+
+            svg path {
+                fill: @button_background;
+            }
+        }
+    }
+}

css/area_main-sidebar-nav.less

@@ -4,28 +4,32 @@
  * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  * @author Andreas Gohr <gohr@cosmocode.de>
  */
+
 #dokuwiki__aside {
     @icon-size: @font-size-big;
     @menu-margin: @icon-size + @margin-small*2; // FIXME this is still wrong
 
-    margin-left: @menu-margin; // moves *all* sidebar content to the right
+    > * {
+        margin-left: @menu-margin; // moves *all* sidebar content to the right
+    }
 
     // the toggle element
     a.nav {
-        font-size: @font-size-head6;
-        margin: 0 0 @font-size-head6;
-
         cursor: pointer;
-        font-weight: normal;
+        margin: 0 0 @font-size-head6;
         margin-left: (@menu-margin * -1); // moves the toggles back to the left
         color: @color-nav;
+        font-size: @font-size-head6;
+        font-weight: normal;
         border: 1px solid transparent;
         border-radius: @fix_border-radius;
         transition: @transition color, @transition background-color, @transition border-color;
 
         height: @icon-size + @margin-small;
         display: flex;
+        display: -ms-flexbox;
         flex-direction: row;
+        -ms-flex-direction: row;
         align-items: center;
 
         span {
@@ -60,13 +64,13 @@
                 border: 2px solid @color-nav;
                 border-top-right-radius: 50%;
                 border-bottom-left-radius: 50%;
-
             }
 
             // real icon
             svg {
                 width: @icon-size;
                 height: @icon-size;
+
                 path {
                     fill: @color-nav;
                 }
@@ -98,6 +102,69 @@
     }
 }
 
+
+/**
+ * Sidebar handling in mobile view
+ */
+
+@media @screen_max-md {
+    // hide on medium and smaller screens
+    #dokuwiki__aside {
+        display: none;
+    }
+
+    // show when toggled
+    body.show-mobile-sidebar {
+
+        #dokuwiki__aside {
+            display: block;
+            position: absolute;
+            left: 1.25rem; //left margin of content container
+            z-index: 200; // above all
+            box-shadow: @box-shadow-right-bottom;
+            min-width: 45%;
+            max-width: 90%;
+            height: auto;
+
+            &:after {
+                content: "";
+                position: absolute;
+                top: 0;
+                left: 0;
+                bottom: 0;
+                right: 0;
+                width: 100%;
+                height: 100%;
+                background: @ini_background;
+                background: -webkit-linear-gradient(left, @ini_background, @color-content-bg);
+                background: linear-gradient(left, @ini_background, @color-content-bg);
+                z-index: 0;
+            }
+
+            > nav {
+                position: relative;
+                //display: block;
+                z-index: 2;
+
+                &:first-child {
+                    margin-top: 1.2rem;
+                }
+            }
+
+            a.nav {
+                border-radius: 0;
+                border-right-width: 0;
+                border-left-width: 0;
+            }
+
+            .nav-panel,
+            a.nav {
+                padding-right: .8em;
+            }
+        }
+    }
+}
+
 // FIXME check if the stuff below is still relevant
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
@@ -127,6 +194,7 @@
     }
 }
 
+
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 1199px */
 

css/area_nav-breadcrumb.less

@@ -159,7 +159,10 @@
             right: 0;
             width: auto;
             border: 0 none;
-            background: @color-site-bg;
+            background: @background_page-header;
+            background: -webkit-linear-gradient(top, @background_page-header, @color-content-bg);
+            background: linear-gradient(top, @background_page-header, @color-content-bg);
+            box-shadow: @box-shadow-bottom;
             z-index: 2000;
 
             #plugin__qc__out{

css/base.less

@@ -34,6 +34,8 @@
 @box-shadow-offset:      __box_shadow_offset__;
 @box-shadow:             __box_shadow__;
 @box-shadow-colored:     __box_shadow_colored__;
+@box-shadow-right-bottom:__box_shadow_right_bottom__;
+@box-shadow-bottom:      __box_shadow_bottom__;
 
 @th_background:          __background_alt__;
 

css/base_structure.less

@@ -130,13 +130,13 @@
         display: table-cell;
         height: 100%;
         vertical-align: middle;
+
         .logo {
             /*position: absolute;
             bottom: 1em;
             overflow: visible;*/
             padding: 1rem 0 .3rem;
 
-
             img {
                 height: 4.6rem;
                 width: auto;
@@ -164,22 +164,21 @@
         }
     }
 
-    .wide-content{
+    .wide-content {
-        .logo{ }
         .content {
             .row > .col-xs-12 {
                 width: auto;
                 float: none;
             }
         }
-        &.showSidebar{
+
+        &.showSidebar {
             .content {
                 .row > .col-xs-12 {
                     margin-left: @toggle-showsidebar_width;
                 }
             }
         }
-
     }
 
     .main-sidebar {
@@ -233,13 +232,39 @@
     }
 }
 
-@media @screen_max-md{
+@media @screen_max-md {
-    .claim{
+    .claim {
         min-height: 3rem;
-        .logo{
+
-            .mobile-only{
+        .logo {
+            .mobile-only {
                 margin: .8rem 1rem .6rem 0;
             }
         }
     }
 }
+
+@media @screen_max-xxs {
+    @mobileMargin: 4px;
+
+    .container {
+        margin: 0 @mobileMargin;
+    }
+
+    body.show-mobile-sidebar #dokuwiki__aside {
+        left: @mobileMargin;
+    }
+
+    #dokuwiki__usertools {
+        right: @mobileMargin;
+    }
+
+    #dokuwiki__footer {
+        .main-footer {
+            > * {
+                padding-left: 2rem;
+                padding-right: 2rem;
+            }
+        }
+    }
+}

img/menu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>

js/breadcrumb.js

@@ -2,14 +2,14 @@
  * Sets up the breadcrumb behaviour (adds do / ACT status information)
  */
 jQuery(function () {
-    const $breadcrumb = jQuery('.breadcrumbs');
+    var $breadcrumb = jQuery('.breadcrumbs');
     if (!$breadcrumb.length) return;
 
     /**
      * add ACT status to breadcrumb (if not show)
      *
      */
-    const mode = $breadcrumb.attr('data-do');
+    var mode = $breadcrumb.attr('data-do');
     if(mode && mode.indexOf('show') !== 0){
         var markup = '<bdi lang="en"><span class="curid"> : <strong>' + mode + '</strong></span></bdi>';
         $breadcrumb.find('p').append(markup);

js/meta-box.js

@@ -1,5 +1,5 @@
 jQuery(function () {
-    const $metaBox = jQuery('#spr__meta-box');
+    var $metaBox = jQuery('#spr__meta-box');
     if (!$metaBox.length) return;
 
     /**
@@ -10,8 +10,8 @@ jQuery(function () {
      */
     $metaBox.on('click', '.meta-tabs a', function (e) {
         e.preventDefault();
-        const $tab = jQuery(this);
+        var $tab = jQuery(this),
-        const isopen = $tab.attr('aria-expanded') === 'true';
+            isopen = $tab.attr('aria-expanded') === 'true';
 
         // disable all existing tabs
         $metaBox.find('.meta-tabs li')

js/sidebar.js

@@ -2,153 +2,165 @@
  * Sets up the sidebar behaviour
  */
 jQuery(function () {
-    const $nav = jQuery('#dokuwiki__aside');
+    var $nav = jQuery('#dokuwiki__aside');
     if (!$nav.length) return;
 
-    /**
+        /**
-     * closes sidebar
+         * closes sidebar
-     */
+         */
-    const setWideContent = function () {
+    var setWideContent = function () {
-        $nav.find('div.nav-panel').hide(); // close all panels
+            $nav.find('div.nav-panel').hide(); // close all panels
-        jQuery('body').addClass('wide-content');
+            jQuery('body').addClass('wide-content');
-    };
+        },
 
-    /**
+        /**
-     * opens the sidebar
+         * opens the sidebar
-     */
+         */
-    const setDefaultContent = function () {
+        setDefaultContent = function () {
-        jQuery('body').removeClass('wide-content');
+            jQuery('body').removeClass('wide-content');
 
-    };
+        };
 
-    /**
+        /**
-     * Accessibility helper, focuses the first link witih the given element
+         * Accessibility helper, focuses the first link witih the given element
-     *
+         *
-     * @param {jQuery} $elem
+         * @param {jQuery} $elem
-     */
+         */
-    const focusFirstSubLink = function ($elem) {
+        focusFirstSubLink = function ($elem) {
-        $elem.find('a').first().focus();
+            $elem.find('a').first().focus();
-    };
+        },
 
-    /**
+        /**
-     * Toggle a navigation panel
+         * Toggle a navigation panel
-     *
+         *
-     * @param {jQuery} $toggler The h6 toggler
+         * @param {jQuery} $toggler The h6 toggler
-     */
+         */
-    const toggleNav = function ($toggler) {
+         toggleNav = function ($toggler) {
-        const $panel = $toggler.next('div.nav-panel');
+            var $panel = $toggler.next('div.nav-panel');
-        const isOpen = $panel.is(':visible');
+            var isOpen = $panel.is(':visible');
-        // open sidebar on interaction
+            // open sidebar on interaction
-        setDefaultContent();
-        // toggle the panel, focus first link after opening
-        $panel.dw_toggle(!isOpen, function () {
-            if (!isOpen) {
-                focusFirstSubLink($panel);
-            }
-        });
-    };
-
-    /**
-     * Initialize the content navigation
-     *
-     * It mangles the sidebar content and handles inline Icon configuration
-     */
-    const initContentNav = function () {
-        const $main = $nav.find('nav.nav-main');
-        if (!$main.length) return;
-
-        const ELEMENT = 'h1,h2,h3,h4,h5'; // FIXME move to config
-        const $elements = $main.find(ELEMENT);
-        $elements.each(function () {
-            const $me = jQuery(this);
-
-            // prepare text and the optional icon
-            const data = $me.text().split('@', 2);
-            const text = data[0].trim();
-            const $icon = jQuery('<span class="ico">')
-                .text(text.substr(0, 1).toUpperCase() + text.substr(1, 1).toLowerCase())
-                .wrapInner('<strong>');
-            if (data[1]) {
-                const src = data[1].trim();
-                $icon.load(DOKU_BASE + 'lib/tpl/sprintdoc/svg.php?svg=' + src + '&e=1'); // directly embed
-            }
-
-            // make the new toggler
-            const $toggler = jQuery('<a>')
-                    .addClass('nav')
-                    .attr('href', '#')
-                    .attr('role', 'heading')
-                    .attr('aria-level', '2')
-                    .text(text)
-                    .wrapInner('<span class="lbl">')
-                    .prepend($icon)
-                ;
-
-            // wrap all following siblings til the next element in a wrapper
-            const $wrap = jQuery('<div>')
-                .addClass('nav-panel');
-            const $sibs = $me.nextAll();
-            for (let i = 0; i < $sibs.length; i++) {
-                const $sib = jQuery($sibs[i]);
-                if ($sib.is(ELEMENT)) break;
-                $sib.detach().appendTo($wrap);
-            }
-            $wrap.insertAfter($me);
-
-            // replace element with toggler
-            $me.replaceWith($toggler);
-        });
-    };
-
-    /**
-     * Initialize the open/close toggling of menu entries
-     */
-    const initMenuHandling = function () {
-        $nav.on('click', 'a.nav', function (e) {
-            toggleNav(jQuery(this));
-            e.preventDefault();
-        });
-    };
-
-    /**
-     * Make sure the content area is always as high as the sidebar
-     */
-    const initContentMinHeight = function () {
-        const $sidebar = jQuery('.page-wrapper').find('> .tools').find('.col-xs-12');
-        if ($sidebar.length == 1) {
-            const num = parseFloat($sidebar.height());
-            if (!isNaN(num)) {
-                jQuery('#dokuwiki__content').css('minHeight', num + 100);
-            }
-        }
-    };
-
-    /**
-     * Initialize the sidebar handle behaviour
-     */
-    const initSidebarToggling = function () {
-        const $toggler = jQuery('.togglelink.page_main-content').find('a');
-        $toggler.click(function (e) {
-            e.preventDefault();
-            if (jQuery('body').hasClass('wide-content')) {
-                setDefaultContent();
-            } else {
-                setWideContent();
-            }
-        });
-    };
-
-    /**
-     * Show sidebar when accessing the search
-     */
-    const initSearchToggling = function () {
-        jQuery('.toggleSearch').find('a').click(function (e) {
             setDefaultContent();
-            e.preventDefault();
+            // toggle the panel, focus first link after opening
-            jQuery('#qsearch__in').focus();
+            $panel.dw_toggle(!isOpen, function () {
-        });
+                if (!isOpen) {
+                    focusFirstSubLink($panel);
+                }
+            });
+        },
 
-    };
+        /**
+         * Initialize the content navigation
+         *
+         * It mangles the sidebar content and handles inline Icon configuration
+         */
+        initContentNav = function () {
+            var $main = $nav.find('nav.nav-main');
+            if (!$main.length) return;
+
+            var ELEMENT = 'h1,h2,h3,h4,h5'; // FIXME move to config
+            var $elements = $main.find(ELEMENT);
+            $elements.each(function () {
+                var $me = jQuery(this),
+
+                // prepare text and the optional icon
+                    data = $me.text().split('@', 2),
+                    text = data[0].trim();
+
+                var $icon = jQuery('<span class="ico">')
+                    .text(text.substr(0, 1).toUpperCase() + text.substr(1, 1).toLowerCase())
+                    .wrapInner('<strong>');
+                if (data[1]) {
+                    var src = data[1].trim();
+                    $icon.load(DOKU_BASE + 'lib/tpl/sprintdoc/svg.php?svg=' + src + '&e=1'); // directly embed
+                }
+
+                // make the new toggler
+                var $toggler = jQuery('<a>')
+                        .addClass('nav')
+                        .attr('href', '#')
+                        .attr('role', 'heading')
+                        .attr('aria-level', '2')
+                        .text(text)
+                        .wrapInner('<span class="lbl">')
+                        .prepend($icon)
+                    ;
+
+                // wrap all following siblings til the next element in a wrapper
+                var $wrap = jQuery('<div>')
+                    .addClass('nav-panel');
+                var $sibs = $me.nextAll();
+                for (var i = 0; i < $sibs.length; i++) {
+                    var $sib = jQuery($sibs[i]);
+                    if ($sib.is(ELEMENT)) break;
+                    $sib.detach().appendTo($wrap);
+                }
+                $wrap.insertAfter($me);
+
+                // replace element with toggler
+                $me.replaceWith($toggler);
+            });
+        },
+
+        /**
+         * Initialize the open/close toggling of menu entries
+         */
+        initMenuHandling = function () {
+            $nav.on('click', 'a.nav', function (e) {
+                toggleNav(jQuery(this));
+                e.preventDefault();
+            });
+        },
+
+        /**
+         * Make sure the content area is always as high as the sidebar
+         */
+        initContentMinHeight = function () {
+            var $sidebar = jQuery('.page-wrapper').find('> .tools').find('.col-xs-12');
+            if ($sidebar.length == 1) {
+                var num = parseFloat($sidebar.height());
+                if (!isNaN(num)) {
+                    jQuery('#dokuwiki__content').css('minHeight', num + 100);
+                }
+            }
+        },
+
+        /**
+         * Initialize the sidebar handle behaviour
+         */
+        initSidebarToggling = function () {
+            var $toggler = jQuery('.togglelink.page_main-content').find('a');
+            $toggler.click(function (e) {
+                e.preventDefault();
+                if (jQuery('body').hasClass('wide-content')) {
+                    setDefaultContent();
+                } else {
+                    setWideContent();
+                }
+            });
+        },
+
+        /**
+         * Show sidebar when accessing the search
+         */
+        initSearchToggling = function () {
+            jQuery('.toggleSearch').find('a').click(function (e) {
+                setDefaultContent();
+                e.preventDefault();
+                jQuery('#qsearch__in').focus();
+            });
+
+        },
+
+        /**
+         * Open and close the sidebar in mobile view
+         */
+        initMobileToggling = function () {
+            jQuery('.menu-togglelink').find('a').click(function (e) {
+                e.preventDefault();
+                var $body = jQuery('body');
+                $body.toggleClass('show-mobile-sidebar');
+            });
+        };
 
     // main
     initContentNav();
@@ -156,5 +168,6 @@ jQuery(function () {
     initMenuHandling();
     initContentMinHeight();
     initSearchToggling();
+    initMobileToggling();
 });
 

main.php

@@ -363,7 +363,7 @@ $classWideContent = ($ACT === "show") ? "": "wide-content ";
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* copyright */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-                            tpl_license('');
+                            tpl_license($img = false, $imgonly = false, $return = false, $wrap = false);
                             ?>
                         </p>
                     </div>

script.js

@@ -6,3 +6,4 @@
 /* DOKUWIKI:include js/meta-box.js */
 /* DOKUWIKI:include js/sidebar.js */
 /* DOKUWIKI:include js/breadcrumb.js */
+

style.ini

@@ -160,6 +160,8 @@ __nav_direct_background__   = "#FFF"
 __nav_direct_color__        = "#286da8"
 __box_shadow_colored__      = "0 0 .5em rgba(40,109,168,.5)"
 __box_shadow__              = "0 0 .5em rgb(153,153,153,.5)"
+__box_shadow_right_bottom__ = "0.1em 0.3rem 0.5em rgb(153,153,153,.5)"
+__box_shadow_bottom__       = "0 0.1em 0.5em rgb(153,153,153,.5)"
 __box_shadow_offset__       = ".1em .1em .1em rgb(153,153,153,.5)"
 __nav_menu_color__          = "#696969"
 __nav_menu_hover_color__    = "#286da8"

tpl/main-sidebar-logo.php

@@ -1,9 +1,14 @@
 <?php
-    if (!defined('DOKU_INC')) die();
+if(!defined('DOKU_INC')) die();
 
-    echo '<div class="menu-togglelink mobile-only"><a href=\'#\'>MOB</a></div>';
+echo '<div class="menu-togglelink mobile-only">';
-    echo '<div class="logo">';
+echo '<a href="#">';
+echo inlineSVG(__DIR__ . '/../img/menu.svg');
+echo '<span class="sr-out">'.tpl_getLang('a11y_sidebartoggle').'</span>';
+echo '</a>';
+echo '</div>';
 
-    \dokuwiki\template\sprintdoc\Template::getInstance()->mainLogo();
+echo '<div class="logo">';
-
+\dokuwiki\template\sprintdoc\Template::getInstance()->mainLogo();
-    echo "<hr class=\"structure\" /></div>";
+echo '<hr class="structure" />';
+echo '</div>';

tpl/main-sidebar-nav.php

@@ -50,22 +50,24 @@
 
 
 <?php if($conf['breadcrumbs']): ?>
-    <a class="nav" role="heading" aria-level="2">
+    <nav class="nav-trace">
-        <span class="ico"><?php echo inlineSVG(__DIR__ . '/../img/apple-safari.svg') ?></span>
+        <a class="nav" role="heading" aria-level="2">
-        <span class="lbl"><?php echo tpl_getLang('head_menu_trace'); ?></span>
+            <span class="ico"><?php echo inlineSVG(__DIR__ . '/../img/apple-safari.svg') ?></span>
-    </a>
+            <span class="lbl"><?php echo tpl_getLang('head_menu_trace'); ?></span>
-    <div class="nav-panel level1">
+        </a>
-        <ul>
+        <div class="nav-panel level1">
-            <?php /* trace breadcrumbs as list */
+            <ul>
-            // FIXME move to helper class
+                <?php /* trace breadcrumbs as list */
-            $crumbs = breadcrumbs();
+                // FIXME move to helper class
-            $crumbs = array_reverse($crumbs, true);
+                $crumbs = breadcrumbs();
-            foreach($crumbs as $id => $name) {
+                $crumbs = array_reverse($crumbs, true);
-                echo '<li>';
+                foreach($crumbs as $id => $name) {
-                tpl_link(wl($id), hsc($name), 'title="' . $id . '"');
+                    echo '<li>';
-                echo '</li>';
+                    tpl_link(wl($id), hsc($name), 'title="' . $id . '"');
-            }
+                    echo '</li>';
-            ?>
+                }
-        </ul>
+                ?>
-    </div>
+            </ul>
+        </div>
+    </nav>
 <?php endif ?>