EH22/dokuwiki-template-sprintdoc-modified
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'sidebarMenuzustaende' into 'master'

Browse source 
SPR-953: additional sidebar menu states

See merge request !64
This commit is contained in:
Jana Deutschländer 2017-05-02 11:04:08 +02:00
commit 43fed43e03
12 changed files with 316 additions and 203 deletions
Download patch file Download diff file Expand all files Collapse all files

17
css/area_main-content-secedit.less
View file

@ -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;

63
css/area_main-sidebar-content.less
View file

@ -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;
}
}
}
}

291
css/area_main-sidebar-nav.less
View file

@ -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 @@
}
}
}

13
css/area_main-sidebar-search.less
View file

@ -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;
}
}
}

2
css/base.less
View file

@ -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

2
css/base_structure.less
View file

@ -166,7 +166,7 @@
.wide-content.showSidebar {
.content {
.row > .col-xs-12 {
margin-left: 2.1rem;
margin-left: 2.3rem;
}
}
}

8
css/plugins/do_tasks.less
View file

@ -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

11
css/plugins/edit.less
View file

@ -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%;

2
css/plugins/edittable.less
View file

@ -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;

3
css/plugins/starred.less
View file

@ -29,6 +29,9 @@
nav.nav-starred {
ul {
list-style: none;
&#sidebar-menu-starred {
margin-left: 0;
}
li {
margin-left: 0;
svg {