Merge branch 'sidebarMenuzustaende' into 'master'
SPR-953: additional sidebar menu states See merge request !64
This commit is contained in:
Jana Deutschländer
commit
43fed43e03
12 changed files with 316 additions and 203 deletions
|
|
@ -1,33 +1,24 @@
|
||||||
/**
|
/**
|
||||||
* This styles the section editing buttons and highlighting
|
* This styles the "section editing button"
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
#dokuwiki__content.main-content {
|
#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 {
|
.editbutton_section {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
top: 0;
|
top: 0;
|
||||||
float: right;
|
float: right;
|
||||||
|
margin-top: 0; // for best position of edit-tab beneeth table
|
||||||
|
|
||||||
form div.no {
|
form div.no {
|
||||||
button {
|
button {
|
||||||
|
margin-top: -.4rem;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// "section editing button"
|
||||||
button {
|
button {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: transparent;
|
color: transparent;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -10,19 +10,42 @@
|
||||||
@icon-size: @font-size-big;
|
@icon-size: @font-size-big;
|
||||||
@menu-margin: @icon-size + @margin-small * 2;
|
@menu-margin: @icon-size + @margin-small * 2;
|
||||||
|
|
||||||
nav > p {
|
@media @screen_md-lg {
|
||||||
color: @ini_nav_menu_color;
|
margin-left: -1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
&.noissue {
|
@media @screen_max-md {
|
||||||
color: @ini_text_webframe;
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
* {
|
> ul,
|
||||||
color: inherit;
|
> ol,
|
||||||
|
> nav {
|
||||||
|
padding-left: 0;
|
||||||
|
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
padding-left: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
|
> p {
|
||||||
|
color: @ini_nav_menu_color;
|
||||||
|
|
||||||
|
&.noissue {
|
||||||
|
color: @ini_text_webframe;
|
||||||
|
|
||||||
|
* {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
color: @ini_nav_menu_color;
|
color: @ini_nav_menu_color;
|
||||||
|
|
||||||
|
|
@ -39,14 +62,12 @@
|
||||||
li:not([class]),
|
li:not([class]),
|
||||||
.li {
|
.li {
|
||||||
padding: .15em 0;
|
padding: .15em 0;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> * {
|
|
||||||
margin-left: @menu-margin; // moves *all* sidebar content to the right
|
|
||||||
|
|
||||||
@media @screen_md-lg {
|
/* + + + + + active + + + + + */
|
||||||
margin-left: @menu-margin-lg;
|
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 {
|
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;
|
min-height: @icon-size + @margin-small;
|
||||||
opacity: 1;
|
|
||||||
border: 1px solid transparent;
|
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 {
|
// the toggle element
|
||||||
margin-left: -(@menu-margin-lg + .8);
|
a {
|
||||||
}
|
display: table;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
span {
|
cursor: pointer;
|
||||||
display: inline-block;
|
min-height: @icon-size + @margin-small;
|
||||||
vertical-align: middle;
|
opacity: 1;
|
||||||
color: inherit;
|
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 {
|
span {
|
||||||
flex-grow: 1;
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
// wordbreak too late in IE 10
|
&:hover,
|
||||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
position: relative; // always show label, even with collapsed sidebar
|
||||||
|
z-index: 100;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
background-color: @ini_nav_menu_hover_bg;
|
||||||
padding-right: 13px;
|
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 {
|
span.ico {
|
||||||
.flex(0 0 auto);
|
position: relative;
|
||||||
|
display: table-cell;
|
||||||
width: @menu-margin;
|
width: @menu-margin;
|
||||||
|
min-width: @menu-margin;
|
||||||
height: @icon-size;
|
height: @icon-size;
|
||||||
border-right: 1px solid @ini_nav_menu_color;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-right: 4%;
|
|
||||||
color: inherit;
|
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
|
// simple fake icon
|
||||||
strong {
|
strong {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -143,55 +252,18 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover,
|
span.lbl {
|
||||||
&:focus,
|
display: table-cell;
|
||||||
&:active {
|
padding-left: .5rem;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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) + + + + + */
|
/* + + + + + the panel (hidden by default) + + + + + */
|
||||||
div.nav-panel {
|
div.nav-panel {
|
||||||
display: none;
|
display: none;
|
||||||
margin-top: .5rem;
|
margin-top: .5rem;
|
||||||
|
margin-left: @menu-margin;
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
margin-bottom: 1rem;
|
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 */
|
/* min-width: 1440px */
|
||||||
|
|
||||||
|
|
@ -282,6 +326,16 @@
|
||||||
@media @screen_max-md {
|
@media @screen_max-md {
|
||||||
body.show-mobile-sidebar {
|
body.show-mobile-sidebar {
|
||||||
#dokuwiki__aside {
|
#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 {
|
> nav {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
@ -297,7 +351,7 @@
|
||||||
border-left-width: 0;
|
border-left-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-panel,
|
div.nav-panel,
|
||||||
a.nav {
|
a.nav {
|
||||||
padding-right: .8em;
|
padding-right: .8em;
|
||||||
}
|
}
|
||||||
|
|
@ -323,4 +377,3 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -184,12 +184,14 @@
|
||||||
@media @screen_min-md {
|
@media @screen_min-md {
|
||||||
.wide-content {
|
.wide-content {
|
||||||
.search.main-sidebar {
|
.search.main-sidebar {
|
||||||
|
display: block;
|
||||||
|
|
||||||
p.toggleSearch {
|
p.toggleSearch {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
display: block;
|
display: block;
|
||||||
float: left;
|
float: left;
|
||||||
width: 100%;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
form {
|
form {
|
||||||
|
|
@ -212,3 +214,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media @screen_max-md {
|
||||||
|
.show-mobile-sidebar {
|
||||||
|
.search.main-sidebar {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -43,7 +43,7 @@
|
||||||
|
|
||||||
@fix_border-radius: 3px; // inputs, editbox (textarea), buttons, content, code, quicksearch, msg
|
@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
|
@headericons-margin-xxs: .45rem; // screen xxs margin-top for header icons
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -166,7 +166,7 @@
|
||||||
.wide-content.showSidebar {
|
.wide-content.showSidebar {
|
||||||
.content {
|
.content {
|
||||||
.row > .col-xs-12 {
|
.row > .col-xs-12 {
|
||||||
margin-left: 2.1rem;
|
margin-left: 2.3rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -59,9 +59,15 @@ ul.page-attributes {
|
||||||
}
|
}
|
||||||
|
|
||||||
.noopentasks {
|
.noopentasks {
|
||||||
background-color: @ini_background;
|
span {
|
||||||
|
background-color: @ini_background_site;
|
||||||
border-color: @noopentasks-border;
|
border-color: @noopentasks-border;
|
||||||
color: @ini_text_webframe;
|
color: @ini_text_webframe;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg path {
|
||||||
|
fill: @ini_text_webframe;
|
||||||
|
}
|
||||||
|
|
||||||
.num {
|
.num {
|
||||||
background-color: @noopentasks-border; // fix
|
background-color: @noopentasks-border; // fix
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
/**
|
/**
|
||||||
* This file provides styles for the edit view (?do=edit), preview
|
* 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 {
|
#dokuwiki__content {
|
||||||
div.section_highlight {
|
div.section_highlight {
|
||||||
clear: right;
|
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
|
padding-top: 0 !important; // heredity
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// "section edit button" and "editbutton_table edit button"
|
||||||
.secedit button {
|
.secedit button {
|
||||||
clear: both;
|
clear: both;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
border-radius: 0 0 @fix_border-radius @fix_border-radius;
|
border-radius: 0 0 @fix_border-radius @fix_border-radius;
|
||||||
color: @ini_existing;
|
color: @ini_existing;
|
||||||
font-size: @font-size-small;
|
font-size: @font-size-small;
|
||||||
margin-top: 0;
|
margin-top: 0; // for best position of edit-tab beneeth table
|
||||||
padding-right: .3em;
|
padding-right: .3em;
|
||||||
transition: @transition background-color, @transition border-color, @transition color;
|
transition: @transition background-color, @transition border-color, @transition color;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -29,6 +29,9 @@
|
||||||
nav.nav-starred {
|
nav.nav-starred {
|
||||||
ul {
|
ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
&#sidebar-menu-starred {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
li {
|
li {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
svg {
|
svg {
|
||||||
|
|
|
||||||
106
js/sidebar.js
106
js/sidebar.js
|
|
@ -24,7 +24,7 @@ jQuery(function () {
|
||||||
if (!item) {
|
if (!item) {
|
||||||
continue;
|
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();
|
$elem.find('a').first().focus();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
removeOpenStates = function() {
|
||||||
|
$nav.find('.is-open').removeClass('is-open');
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Toggle a navigation panel
|
* Toggle a navigation panel
|
||||||
*
|
*
|
||||||
|
|
@ -59,6 +63,9 @@ jQuery(function () {
|
||||||
$panel.dw_toggle(!isOpen, function () {
|
$panel.dw_toggle(!isOpen, function () {
|
||||||
if (!isOpen) {
|
if (!isOpen) {
|
||||||
focusFirstSubLink($panel);
|
focusFirstSubLink($panel);
|
||||||
|
$toggler.addClass('is-open');
|
||||||
|
} else {
|
||||||
|
$toggler.removeClass('is-open');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
window.sessionStorage.setItem('sidebar-section-' + $toggler.data('index') + '-open', !isOpen);
|
window.sessionStorage.setItem('sidebar-section-' + $toggler.data('index') + '-open', !isOpen);
|
||||||
|
|
@ -106,14 +113,17 @@ jQuery(function () {
|
||||||
;
|
;
|
||||||
$toggler = jQuery('<div class="nav">').prepend($toggler);
|
$toggler = jQuery('<div class="nav">').prepend($toggler);
|
||||||
|
|
||||||
|
|
||||||
// wrap all following siblings til the next element in a wrapper
|
// wrap all following siblings til the next element in a wrapper
|
||||||
var $wrap = jQuery('<div>')
|
var $wrap = jQuery('<div>')
|
||||||
.addClass('nav-panel');
|
.addClass('nav-panel');
|
||||||
var $sibs = $me.nextAll();
|
var $sibs = $me.nextAll();
|
||||||
|
|
||||||
for (var i = 0; i < $sibs.length; i++) {
|
for (var i = 0; i < $sibs.length; i++) {
|
||||||
var $sib = jQuery($sibs[i]);
|
var $sib = jQuery($sibs[i]);
|
||||||
if ($sib.is(ELEMENT)) break;
|
if ($sib.is(ELEMENT)) break;
|
||||||
$sib.detach().appendTo($wrap);
|
$sib.detach().appendTo($wrap);
|
||||||
|
addContentMenuCurrentStates($sib, $toggler);
|
||||||
}
|
}
|
||||||
$wrap.insertAfter($me);
|
$wrap.insertAfter($me);
|
||||||
|
|
||||||
|
|
@ -126,6 +136,7 @@ jQuery(function () {
|
||||||
|
|
||||||
if (window.sessionStorage.getItem('sidebar-section-' + index + '-open') === 'true') {
|
if (window.sessionStorage.getItem('sidebar-section-' + index + '-open') === 'true') {
|
||||||
$wrap.css('display', 'block');
|
$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
|
* Make sure the content area is always as high as the sidebar
|
||||||
*/
|
*/
|
||||||
|
|
@ -165,6 +200,7 @@ jQuery(function () {
|
||||||
setDefaultContent();
|
setDefaultContent();
|
||||||
} else {
|
} else {
|
||||||
setWideContent();
|
setWideContent();
|
||||||
|
removeOpenStates();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -194,11 +230,79 @@ jQuery(function () {
|
||||||
var $body = jQuery('body');
|
var $body = jQuery('body');
|
||||||
$body.toggleClass('show-mobile-sidebar');
|
$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('<span class="curid"></span>');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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
|
// main
|
||||||
initContentNav();
|
initContentNav();
|
||||||
initSidebarToggling();
|
initSidebarToggling();
|
||||||
|
initTemplateMenues();
|
||||||
initMenuHandling();
|
initMenuHandling();
|
||||||
initContentMinHeight();
|
initContentMinHeight();
|
||||||
initSearchToggling();
|
initSearchToggling();
|
||||||
|
|
|
||||||
|
|
@ -72,7 +72,6 @@ css/area_nav-pagetools.less = all
|
||||||
css/area_nav-metabox.less = all
|
css/area_nav-metabox.less = all
|
||||||
css/area_main-sidebar-nav.less = all
|
css/area_main-sidebar-nav.less = all
|
||||||
css/area_main-sidebar-search.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.less = all
|
||||||
css/area_main-content-secedit.less = all
|
css/area_main-content-secedit.less = all
|
||||||
css/area_togglelink.less = all
|
css/area_togglelink.less = all
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue