From b10c27f3f2de59dea07d66003716084250e9a6b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jana=20Deutschla=CC=88nder?= Date: Thu, 2 Mar 2017 16:45:22 +0100 Subject: [PATCH] SPR-840: debug sidebar script IE10, styling for mobile menu debug background-color: qc --- css/area_main-sidebar-nav.less | 65 +++++-- css/area_nav-breadcrumb.less | 5 +- css/base.less | 2 + js/sidebar.js | 298 +++++++++++++++++---------------- script.js | 1 + style.ini | 2 + 6 files changed, 208 insertions(+), 165 deletions(-) diff --git a/css/area_main-sidebar-nav.less b/css/area_main-sidebar-nav.less index 997efc0..7fc4562 100755 --- a/css/area_main-sidebar-nav.less +++ b/css/area_main-sidebar-nav.less @@ -108,28 +108,62 @@ #dokuwiki__aside { display: none; } + // show when toggled - #dokuwiki__aside.show { - display: block; + body.show-mobile-sidebar { - position: absolute; - left: 0; - z-index: 200; // above all + #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; + } + } - border-right: @ini_border 1px solid; - box-shadow: @box-shadow;; - - max-width: 100%; - min-width: 45%; - height: 100%; - - background-color: @ini_background; } + } - - // FIXME check if the stuff below is still relevant /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ @@ -158,7 +192,6 @@ } } - } /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ diff --git a/css/area_nav-breadcrumb.less b/css/area_nav-breadcrumb.less index 32835e0..cd3f5b6 100755 --- a/css/area_nav-breadcrumb.less +++ b/css/area_nav-breadcrumb.less @@ -151,7 +151,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{ diff --git a/css/base.less b/css/base.less index 84a8874..9b9ed35 100755 --- a/css/base.less +++ b/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__; diff --git a/js/sidebar.js b/js/sidebar.js index 3d60b44..114c11a 100644 --- a/js/sidebar.js +++ b/js/sidebar.js @@ -2,163 +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 - */ - const setWideContent = function () { - $nav.find('div.nav-panel').hide(); // close all panels - jQuery('body').addClass('wide-content'); - }; + /** + * closes sidebar + */ + var setWideContent = function () { + $nav.find('div.nav-panel').hide(); // close all panels + jQuery('body').addClass('wide-content'); + }, - /** - * opens the sidebar - */ - const setDefaultContent = function () { - jQuery('body').removeClass('wide-content'); + /** + * opens the sidebar + */ + setDefaultContent = function () { + jQuery('body').removeClass('wide-content'); - }; + }; - /** - * Accessibility helper, focuses the first link witih the given element - * - * @param {jQuery} $elem - */ - const focusFirstSubLink = function ($elem) { - $elem.find('a').first().focus(); - }; + /** + * Accessibility helper, focuses the first link witih the given element + * + * @param {jQuery} $elem + */ + focusFirstSubLink = function ($elem) { + $elem.find('a').first().focus(); + }, - /** - * Toggle a navigation panel - * - * @param {jQuery} $toggler The h6 toggler - */ - const toggleNav = function ($toggler) { - const $panel = $toggler.next('div.nav-panel'); - const isOpen = $panel.is(':visible'); - // 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('') - .text(text.substr(0, 1).toUpperCase() + text.substr(1, 1).toLowerCase()) - .wrapInner(''); - 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('') - .addClass('nav') - .attr('href', '#') - .attr('role', 'heading') - .attr('aria-level', '2') - .text(text) - .wrapInner('') - .prepend($icon) - ; - - // wrap all following siblings til the next element in a wrapper - const $wrap = jQuery('
') - .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) { + /** + * Toggle a navigation panel + * + * @param {jQuery} $toggler The h6 toggler + */ + toggleNav = function ($toggler) { + var $panel = $toggler.next('div.nav-panel'); + var isOpen = $panel.is(':visible'); + // open sidebar on interaction setDefaultContent(); - e.preventDefault(); - jQuery('#qsearch__in').focus(); - }); + // 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 + */ + initContentNav = function () { + var $main = $nav.find('nav.nav-main'); + if (!$main.length) return; - /** - * Open and close the sidebar in mobile view - */ - const initMobileToggling = function () { - jQuery('.menu-togglelink').find('a').click(function (e) { - e.preventDefault(); - jQuery('#dokuwiki__aside').toggleClass('show'); - }); - }; + 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('') + .text(text.substr(0, 1).toUpperCase() + text.substr(1, 1).toLowerCase()) + .wrapInner(''); + 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('') + .addClass('nav') + .attr('href', '#') + .attr('role', 'heading') + .attr('aria-level', '2') + .text(text) + .wrapInner('') + .prepend($icon) + ; + + // wrap all following siblings til the next element in a wrapper + var $wrap = jQuery('
') + .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) { + const num = parseFloat($sidebar.height()); + if (!isNaN(num)) { + jQuery('#dokuwiki__content').css('minHeight', num + 100); + } + } + }, + + /** + * Initialize the sidebar handle behaviour + */ + 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 + */ + 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(); diff --git a/script.js b/script.js index 0a2e1a0..0636fe1 100755 --- a/script.js +++ b/script.js @@ -6,3 +6,4 @@ /* DOKUWIKI:include js/meta-box.js */ /* DOKUWIKI:include js/sidebar.js */ /* DOKUWIKI:include js/breadcrumb.js */ + diff --git a/style.ini b/style.ini index 40702f8..d29dc7e 100755 --- a/style.ini +++ b/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"