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
+    }
 
     // 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;
@@ -165,13 +165,13 @@
     }
 
     .wide-content {
-        .logo{ }
         .content {
             .row > .col-xs-12 {
                 width: auto;
                 float: none;
             }
         }
+
         &.showSidebar {
             .content {
                 .row > .col-xs-12 {
@@ -179,7 +179,6 @@
                 }
             }
         }
-
     }
 
     .main-sidebar {
@@ -236,6 +235,7 @@
 @media @screen_max-md {
     .claim {
         min-height: 3rem;
+
         .logo {
             .mobile-only {
                 margin: .8rem 1rem .6rem 0;
@@ -243,3 +243,28 @@
         }
     }
 }
+
+@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,21 +2,21 @@
  * Sets up the sidebar behaviour
  */
 jQuery(function () {
-    const $nav = jQuery('#dokuwiki__aside');
+    var $nav = jQuery('#dokuwiki__aside');
     if (!$nav.length) return;
 
         /**
          * closes sidebar
          */
-    const setWideContent = function () {
+    var setWideContent = function () {
             $nav.find('div.nav-panel').hide(); // close all panels
             jQuery('body').addClass('wide-content');
-    };
+        },
 
         /**
          * opens the sidebar
          */
-    const setDefaultContent = function () {
+        setDefaultContent = function () {
             jQuery('body').removeClass('wide-content');
 
         };
@@ -26,18 +26,18 @@ jQuery(function () {
          *
          * @param {jQuery} $elem
          */
-    const focusFirstSubLink = function ($elem) {
+        focusFirstSubLink = function ($elem) {
             $elem.find('a').first().focus();
-    };
+        },
 
         /**
          * Toggle a navigation panel
          *
          * @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
             setDefaultContent();
             // toggle the panel, focus first link after opening
@@ -46,35 +46,36 @@ jQuery(function () {
                     focusFirstSubLink($panel);
                 }
             });
-    };
+        },
 
         /**
          * Initialize the content navigation
          *
          * It mangles the sidebar content and handles inline Icon configuration
          */
-    const initContentNav = function () {
+        initContentNav = function () {
-        const $main = $nav.find('nav.nav-main');
+            var $main = $nav.find('nav.nav-main');
             if (!$main.length) return;
 
-        const ELEMENT = 'h1,h2,h3,h4,h5'; // FIXME move to config
+            var ELEMENT = 'h1,h2,h3,h4,h5'; // FIXME move to config
-        const $elements = $main.find(ELEMENT);
+            var $elements = $main.find(ELEMENT);
             $elements.each(function () {
-            const $me = jQuery(this);
+                var $me = jQuery(this),
 
                 // prepare text and the optional icon
-            const data = $me.text().split('@', 2);
+                    data = $me.text().split('@', 2),
-            const text = data[0].trim();
+                    text = data[0].trim();
-            const $icon = jQuery('<span class="ico">')
+
+                var $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();
+                    var 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>')
+                var $toggler = jQuery('<a>')
                         .addClass('nav')
                         .attr('href', '#')
                         .attr('role', 'heading')
@@ -85,11 +86,11 @@ jQuery(function () {
                     ;
 
                 // wrap all following siblings til the next element in a wrapper
-            const $wrap = jQuery('<div>')
+                var $wrap = jQuery('<div>')
                     .addClass('nav-panel');
-            const $sibs = $me.nextAll();
+                var $sibs = $me.nextAll();
-            for (let i = 0; i < $sibs.length; i++) {
+                for (var i = 0; i < $sibs.length; i++) {
-                const $sib = jQuery($sibs[i]);
+                    var $sib = jQuery($sibs[i]);
                     if ($sib.is(ELEMENT)) break;
                     $sib.detach().appendTo($wrap);
                 }
@@ -98,36 +99,36 @@ jQuery(function () {
                 // replace element with toggler
                 $me.replaceWith($toggler);
             });
-    };
+        },
 
         /**
          * Initialize the open/close toggling of menu entries
          */
-    const initMenuHandling = function () {
+        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 () {
+        initContentMinHeight = function () {
-        const $sidebar = jQuery('.page-wrapper').find('> .tools').find('.col-xs-12');
+            var $sidebar = jQuery('.page-wrapper').find('> .tools').find('.col-xs-12');
             if ($sidebar.length == 1) {
-            const num = parseFloat($sidebar.height());
+                var num = parseFloat($sidebar.height());
                 if (!isNaN(num)) {
                     jQuery('#dokuwiki__content').css('minHeight', num + 100);
                 }
             }
-    };
+        },
 
         /**
          * Initialize the sidebar handle behaviour
          */
-    const initSidebarToggling = function () {
+        initSidebarToggling = function () {
-        const $toggler = jQuery('.togglelink.page_main-content').find('a');
+            var $toggler = jQuery('.togglelink.page_main-content').find('a');
             $toggler.click(function (e) {
                 e.preventDefault();
                 if (jQuery('body').hasClass('wide-content')) {
@@ -136,18 +137,29 @@ jQuery(function () {
                     setWideContent();
                 }
             });
-    };
+        },
 
         /**
          * Show sidebar when accessing the search
          */
-    const initSearchToggling = function () {
+        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
@@ -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();
 
-    echo '<div class="menu-togglelink mobile-only"><a href=\'#\'>MOB</a></div>';
+echo '<div class="menu-togglelink mobile-only">';
+echo '<a href="#">';
+echo inlineSVG(__DIR__ . '/../img/menu.svg');
+echo '<span class="sr-out">'.tpl_getLang('a11y_sidebartoggle').'</span>';
+echo '</a>';
+echo '</div>';
+
 echo '<div class="logo">';
-
 \dokuwiki\template\sprintdoc\Template::getInstance()->mainLogo();
-
+echo '<hr class="structure" />';
-    echo "<hr class=\"structure\" /></div>";
+echo '</div>';

tpl/main-sidebar-nav.php

@@ -50,6 +50,7 @@
 
 
 <?php if($conf['breadcrumbs']): ?>
+    <nav class="nav-trace">
         <a class="nav" role="heading" aria-level="2">
             <span class="ico"><?php echo inlineSVG(__DIR__ . '/../img/apple-safari.svg') ?></span>
             <span class="lbl"><?php echo tpl_getLang('head_menu_trace'); ?></span>
@@ -68,4 +69,5 @@
                 ?>
             </ul>
         </div>
+    </nav>
 <?php endif ?>