diff --git a/css/area_main-content-secedit.less b/css/area_main-content-secedit.less index 56d7b72..3881c79 100644 --- a/css/area_main-content-secedit.less +++ b/css/area_main-content-secedit.less @@ -1,33 +1,24 @@ /** - * This styles the section editing buttons and highlighting + * This styles the "section editing button" */ #dokuwiki__content.main-content { - div.section_highlight { - clear: right; - background: repeating-linear-gradient( - -45deg, - @highlight-odd-ini_text, - @highlight-odd-ini_text 10px, - @highlight-even-ini_text 10px, - @highlight-even-ini_text 20px, - ); - border-color: @ini_background_page_header; - } - .editbutton_section { position: relative; z-index: 2; top: 0; float: right; + margin-top: 0; // for best position of edit-tab beneeth table form div.no { button { + margin-top: -.4rem; padding-right: 0; } } + // "section editing button" button { background-color: transparent; color: transparent; diff --git a/css/area_main-sidebar-content.less b/css/area_main-sidebar-content.less deleted file mode 100644 index 1797837..0000000 --- a/css/area_main-sidebar-content.less +++ /dev/null @@ -1,63 +0,0 @@ -/** - * This file provides the design styles the non-navigational elements in the sidebar - */ - - -#dokuwiki__aside { - ul, - ol { - margin-left: -.4rem; - padding-left: 0; - - ul, - ol { - padding-left: 1.8rem; - - @media @screen_md-lg { - padding-left: @menu-margin-lg; - } - - li { - margin-left: 0; - } - } - } -} - - -/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* max-width: 1023px */ - -@media @screen_max-md { - #dokuwiki__aside { - display: none; - } - - body.show-mobile-sidebar { - #dokuwiki__aside { - display: block !important; - 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_site; - background: -webkit-linear-gradient(left, @ini_background_site, @ini_background); - background: linear-gradient(left, @ini_background_site, @ini_background); - z-index: 0; - } - } - } -} diff --git a/css/area_main-sidebar-nav.less b/css/area_main-sidebar-nav.less index 0fac304..f5b4eea 100755 --- a/css/area_main-sidebar-nav.less +++ b/css/area_main-sidebar-nav.less @@ -10,19 +10,42 @@ @icon-size: @font-size-big; @menu-margin: @icon-size + @margin-small * 2; - nav > p { - color: @ini_nav_menu_color; + @media @screen_md-lg { + margin-left: -1.25rem; + } - &.noissue { - color: @ini_text_webframe; + @media @screen_max-md { + display: none; + } - * { - color: inherit; + > ul, + > ol, + > nav { + padding-left: 0; + + ul, + ol { + padding-left: 0; + + li { + margin-left: 0; } } } nav { + > p { + color: @ini_nav_menu_color; + + &.noissue { + color: @ini_text_webframe; + + * { + color: inherit; + } + } + } + li { color: @ini_nav_menu_color; @@ -39,14 +62,12 @@ li:not([class]), .li { padding: .15em 0; - } - } - > * { - margin-left: @menu-margin; // moves *all* sidebar content to the right - @media @screen_md-lg { - margin-left: @menu-margin-lg; +/* + + + + + active + + + + + */ + span.curid { + font-weight: bold; + } } } @@ -62,59 +83,147 @@ } } - // the wrapper around the toggle to reserve space + +/* + + + the wrapper around the toggle to reserve space + + + */ div.nav { - height: @icon-size + @margin-small; - border: 1px solid transparent; - } - - // the toggle element - div.nav a { - .display-flex(); - .align-items(); - - cursor: pointer; min-height: @icon-size + @margin-small; - opacity: 1; border: 1px solid transparent; - border-radius: @fix_border-radius; - color: @ini_nav_menu_color; - font-size: @font-size-head6; - font-weight: normal; - margin: -1px 0 (@font-size-head6 / 2) -(@menu-margin - .4); // moves the toggles back to the left (.4 from li margin) - transition: @transition color, @transition background-color, @transition border-color; - @media @screen_md-lg { - margin-left: -(@menu-margin-lg + .8); - } + // the toggle element + a { + display: table; + width: 100%; - span { - display: inline-block; - vertical-align: middle; - color: inherit; - } + cursor: pointer; + min-height: @icon-size + @margin-small; + opacity: 1; + border: 1px solid transparent; + border-radius: @fix_border-radius; + color: @ini_nav_menu_color; + font-size: @font-size-head6; + font-weight: normal; + margin: -1px 0 (@font-size-head6 / 2); // moves the toggles back to the left (.4 from li margin) + transition: @transition color, @transition background-color, @transition border-color; - span.lbl { - flex-grow: 1; + span { + display: inline-block; + vertical-align: middle; + color: inherit; + } - // wordbreak too late in IE 10 - @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + &:hover, + &:focus, + &:active { + position: relative; // always show label, even with collapsed sidebar + z-index: 100; width: 100%; - box-sizing: border-box; - padding-right: 13px; + background-color: @ini_nav_menu_hover_bg; + border-color: @ini_nav_menu_hover_color; + color: @ini_nav_menu_hover_color; + text-decoration: none; + + span.ico { + &:after { + background-color: @ini_nav_menu_hover_color; + } + + strong { + border-color: inherit; + } + + svg { + path { + fill: @ini_nav_menu_hover_color; + } + } + } + } + +/* + + + submenu entry is active + + + */ + &.is-active { + font-weight: bold; + } + + +/* + + + toggle: open + + + */ + &.is-open { + background-color: @ini_nav_menu_hover_color; + border-color: @ini_nav_menu_hover_color; + color: @ini_nav_menu_hover_bg; + + span.ico { + &:after { + background-color: @ini_nav_menu_hover_bg; + } + + strong { + border-color: @ini_nav_menu_hover_bg; + } + + svg { + path { + fill: @ini_nav_menu_hover_bg; + } + } + } + + &:hover, + &:focus, + &:active { + background-color: @ini_nav_menu_hover_bg; + border-color: @ini_nav_menu_hover_color; + color: @ini_nav_menu_hover_color; + + span.ico { + &:after { + background-color: @ini_nav_menu_hover_color; + } + + strong { + border-color: inherit; + } + + svg { + path { + fill: @ini_nav_menu_hover_color; + } + } + } + } } } span.ico { - .flex(0 0 auto); - + position: relative; + display: table-cell; width: @menu-margin; + min-width: @menu-margin; height: @icon-size; - border-right: 1px solid @ini_nav_menu_color; text-align: center; - margin-right: 4%; color: inherit; + &::after { + @border-height: 1.5rem; + + content: ''; + position: absolute; + right: 0; + top: 50%; + bottom: auto; + height: @border-height; + width: 1px; + background-color: @ini_nav_menu_color; + margin-top: -(@border-height / 2); + + // wordbreak too late in IE 10 + @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + top: .5rem; + bottom: .5rem; + height: 100%; + margin: 0; + } + } + // simple fake icon strong { display: inline-block; @@ -143,55 +252,18 @@ } } - &:hover, - &:focus, - &:active { - background-color: @ini_nav_menu_hover_bg; - border-color: @ini_nav_menu_hover_color; - color: @ini_nav_menu_hover_color; - text-decoration: none; - - // always show label, even with collapsed sidebar - position: absolute; - z-index: 100; - width: 100%; - - span.ico { - border-color: inherit; - - strong { - border-color: inherit; - } - - svg { - path { - fill: @ini_nav_menu_hover_color; - } - } - } + span.lbl { + display: table-cell; + padding-left: .5rem; } } - // without wrapping UL - nav > a.nav { - margin-left: -3.5rem; - - @media @screen_md-lg { - margin-left: -2.5rem; - } - } - - -/* + + + + + active + + + + + */ - span.curid a { - font-weight: bold; - } - /* + + + + + the panel (hidden by default) + + + + + */ div.nav-panel { display: none; margin-top: .5rem; + margin-left: @menu-margin; ul { margin-bottom: 1rem; @@ -204,34 +276,6 @@ } -/* + + + + + + wide page content border-bottom between a.nav (short width) + + + + + -.wide-content { - #dokuwiki__aside { - a.nav { - position: relative; - - &::after { - content: ''; - position: absolute; - bottom: -1px; - left: 0; - width: 100%; - height: 1px; - border-bottom: solid 1px @ini_border; - } - - &:hover, - &:focus, - &:active { - &::after { - display: none; - } - } - } - } -} */ - - /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* min-width: 1440px */ @@ -282,6 +326,16 @@ @media @screen_max-md { body.show-mobile-sidebar { #dokuwiki__aside { + display: block !important; + 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; + background: @ini_background_site; + > nav { position: relative; z-index: 2; @@ -297,7 +351,7 @@ border-left-width: 0; } - .nav-panel, + div.nav-panel, a.nav { padding-right: .8em; } @@ -323,4 +377,3 @@ } } } - diff --git a/css/area_main-sidebar-search.less b/css/area_main-sidebar-search.less index 3440215..337ef5b 100644 --- a/css/area_main-sidebar-search.less +++ b/css/area_main-sidebar-search.less @@ -184,12 +184,14 @@ @media @screen_min-md { .wide-content { .search.main-sidebar { + display: block; + p.toggleSearch { position: relative; z-index: 1; display: block; float: left; - width: 100%; + width: auto; } form { @@ -212,3 +214,12 @@ } } } + + +@media @screen_max-md { + .show-mobile-sidebar { + .search.main-sidebar { + display: block; + } + } +} diff --git a/css/base.less b/css/base.less index ea343b1..766cc31 100755 --- a/css/base.less +++ b/css/base.less @@ -43,7 +43,7 @@ @fix_border-radius: 3px; // inputs, editbox (textarea), buttons, content, code, quicksearch, msg -@toggle-showsidebar_width: 3.07rem; // shown sidebar after toggle +@toggle-showsidebar_width: 3.47rem; // shown sidebar after toggle @headericons-margin-xxs: .45rem; // screen xxs margin-top for header icons diff --git a/css/base_structure.less b/css/base_structure.less index f9ba184..b1516bf 100755 --- a/css/base_structure.less +++ b/css/base_structure.less @@ -166,7 +166,7 @@ .wide-content.showSidebar { .content { .row > .col-xs-12 { - margin-left: 2.1rem; + margin-left: 2.3rem; } } } diff --git a/css/plugins/do_tasks.less b/css/plugins/do_tasks.less index f9fbe34..ef1ae59 100755 --- a/css/plugins/do_tasks.less +++ b/css/plugins/do_tasks.less @@ -59,9 +59,15 @@ ul.page-attributes { } .noopentasks { - background-color: @ini_background; + span { + background-color: @ini_background_site; border-color: @noopentasks-border; color: @ini_text_webframe; + } + + svg path { + fill: @ini_text_webframe; + } .num { background-color: @noopentasks-border; // fix diff --git a/css/plugins/edit.less b/css/plugins/edit.less index a07fe4a..ee99b30 100644 --- a/css/plugins/edit.less +++ b/css/plugins/edit.less @@ -1,6 +1,6 @@ /** * This file provides styles for the edit view (?do=edit), preview - * and section edit buttons. + * and "section edit button" and "editbutton_table edit button". */ @@ -9,9 +9,18 @@ #dokuwiki__content { div.section_highlight { clear: right; + background: repeating-linear-gradient( + -45deg, + @highlight-odd-ini_text, + @highlight-odd-ini_text 10px, + @highlight-even-ini_text 10px, + @highlight-even-ini_text 20px, + ); + border-color: @ini_background_page_header; padding-top: 0 !important; // heredity } + // "section edit button" and "editbutton_table edit button" .secedit button { clear: both; font-size: 100%; diff --git a/css/plugins/edittable.less b/css/plugins/edittable.less index ea979c7..487c003 100644 --- a/css/plugins/edittable.less +++ b/css/plugins/edittable.less @@ -22,7 +22,7 @@ border-radius: 0 0 @fix_border-radius @fix_border-radius; color: @ini_existing; font-size: @font-size-small; - margin-top: 0; + margin-top: 0; // for best position of edit-tab beneeth table padding-right: .3em; transition: @transition background-color, @transition border-color, @transition color; diff --git a/css/plugins/starred.less b/css/plugins/starred.less index 057a04c..fcc8c4d 100644 --- a/css/plugins/starred.less +++ b/css/plugins/starred.less @@ -29,6 +29,9 @@ nav.nav-starred { ul { list-style: none; + &#sidebar-menu-starred { + margin-left: 0; + } li { margin-left: 0; svg { diff --git a/js/sidebar.js b/js/sidebar.js index 73bcf83..ca9e8ca 100644 --- a/js/sidebar.js +++ b/js/sidebar.js @@ -24,7 +24,7 @@ jQuery(function () { if (!item) { continue; } - window.sessionStorage.removeItem('sidebar-section-' + index + '-open'); + window.sessionStorage.setItem('sidebar-section-' + index + '-open', 'false'); } }, @@ -45,6 +45,10 @@ jQuery(function () { $elem.find('a').first().focus(); }, + removeOpenStates = function() { + $nav.find('.is-open').removeClass('is-open'); + }, + /** * Toggle a navigation panel * @@ -59,6 +63,9 @@ jQuery(function () { $panel.dw_toggle(!isOpen, function () { if (!isOpen) { focusFirstSubLink($panel); + $toggler.addClass('is-open'); + } else { + $toggler.removeClass('is-open'); } }); window.sessionStorage.setItem('sidebar-section-' + $toggler.data('index') + '-open', !isOpen); @@ -106,14 +113,17 @@ jQuery(function () { ; $toggler = jQuery('
').prepend($toggler); + // 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); + addContentMenuCurrentStates($sib, $toggler); } $wrap.insertAfter($me); @@ -126,6 +136,7 @@ jQuery(function () { if (window.sessionStorage.getItem('sidebar-section-' + index + '-open') === 'true') { $wrap.css('display', 'block'); + setTogglerClass($toggler,'is-open'); } }); @@ -141,6 +152,30 @@ jQuery(function () { }); }, + /** + * adds a given class to the toggler link + * @param $toggler link or parent of link to whom the class is added + * @param classVal class to be added + */ + setTogglerClass = function ($toggler, classVal) { + if($toggler.is('a')) { + $toggler.addClass(classVal); + } else { + $toggler.find('a').addClass(classVal); + } + }, + + /** + * marks a $toggler link as active if the following menu has an active state + * @param $menuObj jQuery Object of the menu / container + * @param $toggler + */ + addContentMenuCurrentStates = function ($menuObj, $toggler) { + if($menuObj[0] && String($menuObj[0].innerHTML).indexOf('curid') > 0) { + setTogglerClass($toggler,'is-active'); + } + }, + /** * Make sure the content area is always as high as the sidebar */ @@ -165,6 +200,7 @@ jQuery(function () { setDefaultContent(); } else { setWideContent(); + removeOpenStates(); } }); @@ -194,11 +230,79 @@ jQuery(function () { var $body = jQuery('body'); $body.toggleClass('show-mobile-sidebar'); }); + }, + + /** + * set is-active class if body has at least one of the given selectors + * @param selectorArray Array of selectors + * @param $nav container in which the $toggler is situated + */ + setActive = function(selectorArray, $nav) { + for(var i=0; i< selectorArray.length; i++) { + var mode = selectorArray[i]; + if(jQuery('body').is('.do-'+mode)){ + setTogglerClass($nav.find('.nav'),'is-active'); + $nav.find('a[href*="do='+mode+'"]').wrapAll(''); + } + } + }, + + /** + * sets active states in site tool menu and user tool menu for certain modes + * adds sessionStorage behaviour equivalent approach to content menus + * + */ + initTemplateMenues = function () { + var $body = jQuery('body'), + $siteTools = $nav.find('> .nav-sitetools'), + $userTools = $nav.find('> .nav-usermenu'), + $templateMenus = $nav.find('> nav:not(.nav-main)'), + + stModes = ['recent', 'media', 'index'], + utModes = ['profile','admin'], + isWideContent = false; + + /* set active states for site tool menu and user tool menu */ + setActive(stModes,$siteTools); + setActive(utModes,$userTools); + + if(jQuery('body').is('.wide-content')) { + window.sessionStorage.setItem('wide-content', true); + isWideContent = true; + } + + + + /* set data attributes for sessionStorage and check onload if one of the template menus should be opened */ + $templateMenus.each(function( index ) { + var $t = jQuery(this).find('.nav'), + y = $nav.find('.nav-main').find('.nav').length, + $toggler = ($t.is('a')) ? $t : $t.find('a:last'), + tIndex = y + index; + $toggler.data('index', tIndex); + + var item = window.sessionStorage.getItem('sidebar-section-' + tIndex + '-open'); + if (item) { + if(isWideContent) { + window.sessionStorage.setItem('sidebar-section-' + tIndex + '-open', 'false'); + } else { + if (item === 'true') { + jQuery(this).find('.nav-panel').css('display', 'block'); + setTogglerClass($toggler, 'is-open'); + } + } + } + //console.log(window.sessionStorage); + + }); + }; + // main initContentNav(); initSidebarToggling(); + initTemplateMenues(); initMenuHandling(); initContentMinHeight(); initSearchToggling(); diff --git a/style.ini b/style.ini index 4dc2e5d..4ecc0b5 100755 --- a/style.ini +++ b/style.ini @@ -72,7 +72,6 @@ css/area_nav-pagetools.less = all css/area_nav-metabox.less = all css/area_main-sidebar-nav.less = all css/area_main-sidebar-search.less = all -css/area_main-sidebar-content.less = all css/area_main-content.less = all css/area_main-content-secedit.less = all css/area_togglelink.less = all