From 4055de39fa1d13689fd492775c7237dab417a8bd Mon Sep 17 00:00:00 2001 From: Andreas Gohr Date: Wed, 22 Feb 2017 14:58:43 +0100 Subject: [PATCH 1/6] mobile handling of the sidebar SPR-840 --- css/area_main-sidebar-nav.less | 36 +++++++++++++++++++++++++++++++- js/sidebar.js | 11 ++++++++++ tpl/main-sidebar-nav.php | 38 ++++++++++++++++++---------------- 3 files changed, 66 insertions(+), 19 deletions(-) diff --git a/css/area_main-sidebar-nav.less b/css/area_main-sidebar-nav.less index 43e1c53..997efc0 100755 --- a/css/area_main-sidebar-nav.less +++ b/css/area_main-sidebar-nav.less @@ -8,7 +8,9 @@ @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 { @@ -98,6 +100,36 @@ } } +/** + * Sidebar handling in mobile view + */ +@media @screen_max-md { + // hide on medium and smaller screens + #dokuwiki__aside { + display: none; + } + // show when toggled + #dokuwiki__aside.show { + display: block; + + position: absolute; + left: 0; + z-index: 200; // above all + + + 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 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ @@ -125,6 +157,8 @@ } } } + + } /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ diff --git a/js/sidebar.js b/js/sidebar.js index 60245bd..80d6e9a 100644 --- a/js/sidebar.js +++ b/js/sidebar.js @@ -150,11 +150,22 @@ jQuery(function () { }; + /** + * 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'); + }); + }; + // main initContentNav(); initSidebarToggling(); initMenuHandling(); initContentMinHeight(); initSearchToggling(); + initMobileToggling(); }); diff --git a/tpl/main-sidebar-nav.php b/tpl/main-sidebar-nav.php index 4c179b5..5ac9119 100644 --- a/tpl/main-sidebar-nav.php +++ b/tpl/main-sidebar-nav.php @@ -50,22 +50,24 @@ - - - - -
- -
+ From e35789fd1e5bd74a505e5f40b9fe78be00297174 Mon Sep 17 00:00:00 2001 From: Andreas Gohr Date: Wed, 22 Feb 2017 15:51:32 +0100 Subject: [PATCH 2/6] styled the menu button --- css/area_header.less | 42 +++++++++++++++++++++++++++++++++++++++ css/base_structure.less | 2 ++ img/menu.svg | 1 + tpl/main-sidebar-logo.php | 17 ++++++++++------ 4 files changed, 56 insertions(+), 6 deletions(-) create mode 100644 img/menu.svg diff --git a/css/area_header.less b/css/area_header.less index cec19b3..d2342fd 100755 --- a/css/area_header.less +++ b/css/area_header.less @@ -3,3 +3,45 @@ * * @author Jana Deutschlaender */ +#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; + } + } + + } + +} diff --git a/css/base_structure.less b/css/base_structure.less index 6ff66bc..b7bcae2 100755 --- a/css/base_structure.less +++ b/css/base_structure.less @@ -153,6 +153,8 @@ } } } + + } .showSidebar { diff --git a/img/menu.svg b/img/menu.svg new file mode 100644 index 0000000..db5d4df --- /dev/null +++ b/img/menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tpl/main-sidebar-logo.php b/tpl/main-sidebar-logo.php index ffdb206..6987875 100755 --- a/tpl/main-sidebar-logo.php +++ b/tpl/main-sidebar-logo.php @@ -1,9 +1,14 @@ MOB'; - echo '"; +echo ''; 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 3/6] 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" From d19c9b956a10733e19b591c2b923392cd41c27cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jana=20Deutschla=CC=88nder?= Date: Thu, 2 Mar 2017 17:11:45 +0100 Subject: [PATCH 4/6] SPR-840: debug IE10 (vendor extensions for flex) --- css/area_main-sidebar-nav.less | 3 ++- js/breadcrumb.js | 4 ++-- js/meta-box.js | 6 +++--- js/sidebar.js | 4 ++-- 4 files changed, 9 insertions(+), 8 deletions(-) diff --git a/css/area_main-sidebar-nav.less b/css/area_main-sidebar-nav.less index 7fc4562..35133f7 100755 --- a/css/area_main-sidebar-nav.less +++ b/css/area_main-sidebar-nav.less @@ -16,7 +16,6 @@ a.nav { font-size: @font-size-head6; margin: 0 0 @font-size-head6; - cursor: pointer; font-weight: normal; margin-left: (@menu-margin * -1); // moves the toggles back to the left @@ -27,7 +26,9 @@ height: @icon-size + @margin-small; display: flex; + display: -ms-flexbox; flex-direction: row; + -ms-flex-direction: row; align-items: center; span { diff --git a/js/breadcrumb.js b/js/breadcrumb.js index 4041fab..510c837 100644 --- a/js/breadcrumb.js +++ b/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 = ' : ' + mode + ''; $breadcrumb.find('p').append(markup); diff --git a/js/meta-box.js b/js/meta-box.js index 432146e..1b540cf 100755 --- a/js/meta-box.js +++ b/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); - const isopen = $tab.attr('aria-expanded') === 'true'; + var $tab = jQuery(this), + isopen = $tab.attr('aria-expanded') === 'true'; // disable all existing tabs $metaBox.find('.meta-tabs li') diff --git a/js/sidebar.js b/js/sidebar.js index 114c11a..18cf739 100644 --- a/js/sidebar.js +++ b/js/sidebar.js @@ -117,7 +117,7 @@ jQuery(function () { initContentMinHeight = function () { 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); } @@ -128,7 +128,7 @@ jQuery(function () { * Initialize the sidebar handle behaviour */ 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')) { From c7f2a9efdc0d6f6209de12686fe02b93953db21a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jana=20Deutschla=CC=88nder?= Date: Thu, 2 Mar 2017 17:56:06 +0100 Subject: [PATCH 5/6] validate template --- main.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/main.php b/main.php index 8a15db7..65b4546 100755 --- a/main.php +++ b/main.php @@ -363,7 +363,7 @@ $classWideContent = ($ACT === "show") ? "": "wide-content "; /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* copyright */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ - tpl_license(''); + tpl_license($img = false, $imgonly = false, $return = false, $wrap = false); ?>

From 40201e9c65aca443253a21405448c397ef9f4698 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jana=20Deutschla=CC=88nder?= Date: Thu, 2 Mar 2017 17:56:57 +0100 Subject: [PATCH 6/6] =?UTF-8?q?mobile=20devices=20portrait:=20don=E2=80=99?= =?UTF-8?q?t=20waste=20too=20much=20space=20on=20left=20/=20right=20margin?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/area_footer.less | 1 + css/base_structure.less | 27 +++++++++++++++++++++++++++ 2 files changed, 28 insertions(+) diff --git a/css/area_footer.less b/css/area_footer.less index cd49dcc..d1f887d 100755 --- a/css/area_footer.less +++ b/css/area_footer.less @@ -26,6 +26,7 @@ z-index: 2; box-sizing: border-box; background-color: @color-site-bg; + } p { font-size: @font-size-default; diff --git a/css/base_structure.less b/css/base_structure.less index b7bcae2..8daf866 100755 --- a/css/base_structure.less +++ b/css/base_structure.less @@ -245,3 +245,30 @@ } } } + +@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; + } + + } + } + .page-footer{ + + } + +} +