diff --git a/css/area_footer.less b/css/area_footer.less index cd49dcc..9dec28a 100755 --- a/css/area_footer.less +++ b/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 { diff --git a/css/area_header.less b/css/area_header.less index cec19b3..d207d80 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/area_main-sidebar-nav.less b/css/area_main-sidebar-nav.less index 43e1c53..d22a3ff 100755 --- a/css/area_main-sidebar-nav.less +++ b/css/area_main-sidebar-nav.less @@ -4,28 +4,32 @@ * @author Jana Deutschlaender * @author Andreas Gohr */ + #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 */ diff --git a/css/area_nav-breadcrumb.less b/css/area_nav-breadcrumb.less index 046fa19..1c64090 100755 --- a/css/area_nav-breadcrumb.less +++ b/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{ diff --git a/css/base.less b/css/base.less index 12d52e7..d6435a7 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/css/base_structure.less b/css/base_structure.less index 6ff66bc..ee6299a 100755 --- a/css/base_structure.less +++ b/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{ - .logo{ } + .wide-content { .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{ - .claim{ +@media @screen_max-md { + .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; + } + } + } +} 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/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 62e4d7e..18cf739 100644 --- a/js/sidebar.js +++ b/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 - */ - 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; + + 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) { + 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(); }); 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); ?>

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 139ede2..2eba60e 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" 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 ''; diff --git a/tpl/main-sidebar-nav.php b/tpl/main-sidebar-nav.php index dccc309..4fe6344 100644 --- a/tpl/main-sidebar-nav.php +++ b/tpl/main-sidebar-nav.php @@ -50,22 +50,24 @@ - - - - -
-
    - $name) { - echo '
  • '; - tpl_link(wl($id), hsc($name), 'title="' . $id . '"'); - echo '
    • '; - } - ?> -
-
+