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

Merge branch 'spis-master' into 'master'

Browse source 
better content-togglelink

See merge request !10
This commit is contained in:
Jana Deutschländer 2017-01-10 16:05:21 +01:00
commit 43d4ee93fa
6 changed files with 996 additions and 941 deletions
Download patch file Download diff file Expand all files Collapse all files

46
css/area_main-sidebar.less
View file

@ -8,14 +8,13 @@
#dokuwiki__aside.main-sidebar { #dokuwiki__aside.main-sidebar {
counter-reset: nav-counter; counter-reset: nav-counter;
/* + + + + + nav main + + + + + */ /* + + + + + nav main + + + + + */
.nav-main { .nav-main {
padding-bottom: 1.8rem;
> ul { > ul {
@icon-size: 2rem; @icon-size: 2rem;
margin: 0; margin: 0 0 1.8rem;
padding: 0; padding: 0;
ul { ul {
@ -80,18 +79,16 @@
} }
&::before { &::before {
.display-flex();
.flex-direction();
.justify-content();
content: counter(nav-counter); content: counter(nav-counter);
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
justify-content: center;
-webkit-justify-content: center;
height: 100%; height: 100%;
width: @icon-size; width: 2.5rem;
overflow: hidden; overflow: hidden;
color: @color-nav; color: @color-nav;
text-align: center; text-align: center;
@ -128,24 +125,23 @@
transition: @transition color, @transition background-color, @transition border-color; transition: @transition color, @transition background-color, @transition border-color;
&::before { &::before {
.display-flex();
.flex-direction();
.justify-content();
content: counter(nav-counter); content: counter(nav-counter);
position: absolute; position: absolute;
top: -.1em; top: 1px;
bottom: 1px;
left: 0; left: 0;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
justify-content: center;
-webkit-justify-content: center;
height: 100%; height: 100%;
width: @icon-size; width: 2.5rem;
overflow: hidden; overflow: hidden;
color: @color-nav; color: @color-nav;
text-align: center; text-align: center;
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
transition: @transition color; transition: @transition color, @transition background-color;
} }
&::after { &::after {
@ -184,7 +180,11 @@
color: @button_color; color: @button_color;
&::before { &::before {
color: @button_color; background-color: @color-site-bg;
}
&::after {
display: none;
} }
&:hover, &:hover,
@ -196,8 +196,14 @@
text-decoration: none; text-decoration: none;
&::before { &::before {
background-color: @button_color;
color: @button_background; color: @button_background;
} }
&::after {
display: block;
background-color: @button_background;
}
} }
} }

5
css/area_nav-breadcrumb.less
View file

@ -5,8 +5,9 @@
*/ */
.breadcrumbs { .breadcrumbs {
padding: (@margin-small + .2) 1.8rem @margin-small; position: relative;
border-bottom: 1px solid @color-border; border-bottom: 1px solid @color-border;
padding: .8rem 1.8rem .4rem;
> p { > p {
font-size: .83rem; font-size: .83rem;
@ -61,7 +62,7 @@
float: right; float: right;
display: inline-block; display: inline-block;
max-width: 30%; max-width: 30%;
margin: -.2em 0 0; margin: -.4em 0 0;
padding: 0; padding: 0;
> li { > li {

39
css/area_sidetools.less
View file

@ -79,18 +79,16 @@
/* + + + icon + + + */ /* + + + icon + + + */
&::before { &::before {
.display-flex();
.flex-direction();
.justify-content();
content: counter(bar-counter, lower-alpha); content: counter(bar-counter, lower-alpha);
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
justify-content: center;
-webkit-justify-content: center;
height: 100%; height: 100%;
width: @icon-size; width: 2.5rem;
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
margin-top: auto; margin-top: auto;
@ -136,18 +134,17 @@
transition: @transition color, @transition background-color, @transition border-color; transition: @transition color, @transition background-color, @transition border-color;
&::before { &::before {
.display-flex();
.flex-direction();
.justify-content();
content: counter(bar-counter, lower-alpha); content: counter(bar-counter, lower-alpha);
position: absolute; position: absolute;
top: -.1em; top: 1px;
bottom: 1px;
left: 0; left: 0;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
justify-content: center;
-webkit-justify-content: center;
height: 100%; height: 100%;
width: @icon-size; width: 2.5rem;
overflow: hidden; overflow: hidden;
color: @color-nav; color: @color-nav;
text-align: center; text-align: center;
@ -192,7 +189,11 @@
color: @button_color; color: @button_color;
&::before { &::before {
color: @button_color; background-color: @color-site-bg;
}
&::after {
display: none;
} }
&:hover, &:hover,
@ -204,8 +205,14 @@
text-decoration: none; text-decoration: none;
&::before { &::before {
background-color: @button_color;
color: @button_background; color: @button_background;
} }
&::after {
display: block;
background-color: @button_background;
}
} }
} }

42
css/area_togglelink.less
View file

@ -5,34 +5,35 @@
*/ */
#dokuwiki__content {
overflow: visible;
.togglelink { .togglelink {
&.page_main-content { &.page_main-content {
position: absolute; position: absolute;
top: -1px; top: -1px;
bottom: -1px;
left: -2rem; left: -2rem;
z-index: 1; z-index: 1;
a { a {
display: block; .display-flex();
.flex-direction();
.justify-content();
width: 2rem; width: 2rem;
height: 3.1rem; height: 100%;
background-color: #F6F6F6; background-color: @button_background;
border: solid 1px @color-border; border: solid 1px @button_background;
border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px;
color: @button_color;
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
padding-top: .9em;
transition: @transition color, @transition background-color, @transition border-color; transition: @transition color, @transition background-color, @transition border-color;
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background-color: @button_background; background-color: @button_color;
border-color: @button_background; border-color: @button_background;
color: @button_color; color: @button_background;
text-decoration: none; text-decoration: none;
* { * {
@ -41,15 +42,32 @@
} }
} }
} }
/* + + + toggle out + + + */
.wide-content & {
left: -1px;
a {
background-color: @button_background;
border-color: @button_background;
&:hover,
&:focus,
&:active {
background-color: @button_color;
} }
} }
} }
}
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* min-width: 1440px */ /* min-width: 1440px */
@media @screen_min-xlg { @media @screen_min-xlg {
#dokuwiki__content .togglelink { .togglelink {
} }
} }
@ -59,7 +77,7 @@
/* max-width: 1199px */ /* max-width: 1199px */
@media @screen_max-xlg { @media @screen_max-xlg {
#dokuwiki__content .togglelink { .togglelink {
} }
} }

23
css/base_mixins.less
View file

@ -244,6 +244,29 @@
} }
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* flex-box */
.display-flex() {
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
}
.flex-direction(@elem:column) {
flex-direction: @elem;
-ms-flex-direction: @elem;
-webkit-flex-direction: @elem;
}
// default "center"
.justify-content(@elem:center) {
justify-content: @elem;
-ms-justify-content: @elem;
-webkit-justify-content: @elem;
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* Screenreader / Hide */ /* Screenreader / Hide */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */

10
main.php
View file

@ -299,6 +299,11 @@ $classWideContent = ($ACT === "show") ? "": "wide-content ";
?> ?>
<div class="breadcrumbs"> <div class="breadcrumbs">
<div class="togglelink page_main-content">
<a href="#">&lt; &gt;<span class="sr-out">auf/zu</span></a>
</div>
<h6 class="sr-only" role="heading" aria-level="2"><?php echo tpl_getLang('head_menu_status') ?></h6> <h6 class="sr-only" role="heading" aria-level="2"><?php echo tpl_getLang('head_menu_status') ?></h6>
<?php <?php
@ -330,11 +335,6 @@ $classWideContent = ($ACT === "show") ? "": "wide-content ";
</div> </div>
<div id="dokuwiki__content" class="page main-content"> <div id="dokuwiki__content" class="page main-content">
<div class="togglelink page_main-content">
<a href="#">&lt; &gt;<span class="sr-out">auf/zu</span></a>
</div>
<div id="meta-box"> <div id="meta-box">
<h6 class="sr-only" role="heading" aria-level="2"><?php echo tpl_getLang('head_meta_box') ?></h6> <h6 class="sr-only" role="heading" aria-level="2"><?php echo tpl_getLang('head_meta_box') ?></h6>