SPR-840: debug sidebar script IE10, styling for mobile menu
debug background-color: qc
This commit is contained in:
Jana Deutschländer
parent
75a1a114df
commit
b10c27f3f2
6 changed files with 208 additions and 165 deletions
|
|
@ -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 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
|
|
|
|||
|
|
@ -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{
|
||||
|
|
|
|||
|
|
@ -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__;
|
||||
|
||||
|
|
|
|||
298
js/sidebar.js
298
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('<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) {
|
||||
/**
|
||||
* 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('<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) {
|
||||
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();
|
||||
|
|
|
|||
|
|
@ -6,3 +6,4 @@
|
|||
/* DOKUWIKI:include js/meta-box.js */
|
||||
/* DOKUWIKI:include js/sidebar.js */
|
||||
/* DOKUWIKI:include js/breadcrumb.js */
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue