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

SPR-950: optimate Headerstyling in Mobile

Browse source
This commit is contained in:
Silke Pisulla 2017-04-24 13:03:01 +02:00
commit 80134fae3c
3 changed files with 32 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

8
css/area_header.less
View file

@ -8,7 +8,7 @@
#dokuwiki__header { #dokuwiki__header {
@header-font-opacity: 1; @header-font-opacity: 1;
@media @screen_max-xxs { @media @screen_max-xs {
min-height: 120px; min-height: 120px;
} }
@ -70,7 +70,7 @@
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@media @screen_max-xxs { @media @screen_max-xs {
padding-right: (@toggle-size + @headericons-margin-xxs); padding-right: (@toggle-size + @headericons-margin-xxs);
} }
} }
@ -84,7 +84,7 @@
vertical-align: middle; vertical-align: middle;
} }
@media @screen_max-xxs { @media @screen_max-xs {
padding-right: (@toggle-size + @headericons-margin-xxs); padding-right: (@toggle-size + @headericons-margin-xxs);
} }
} }
@ -177,7 +177,7 @@
&.has-magicmatcher { &.has-magicmatcher {
.logo { .logo {
@media @screen_min-md { @media @screen_min-md {
padding-top: 2rem; padding-top: 3rem;
} }
} }

35
css/area_nav-usertools.less
View file

@ -5,7 +5,20 @@
*/ */
.nav-usertools { #dokuwiki__usertools.nav-usertools {
@media @screen_min-md {
right: 1.25rem;
}
@media @screen_max-md {
position: absolute;
top: 0;
left: (@toggle-size + 1.25); // margin-left content
right: @headericons-margin-xxs;
margin-top: 0;
margin-right: 0;
}
&.has-bar { &.has-bar {
@media @screen_min-md { @media @screen_min-md {
margin-top: @height-context-bar; margin-top: @height-context-bar;
@ -27,7 +40,7 @@
float: right; float: right;
min-height: 28px; min-height: 28px;
@media @screen_max-xxs { @media @screen_max-xs {
display: block; display: block;
float: none; float: none;
margin-bottom: @headericons-margin-xxs; margin-bottom: @headericons-margin-xxs;
@ -66,7 +79,7 @@
position: relative; position: relative;
display: table-cell; display: table-cell;
background-color: @ini_background; background-color: @ini_background;
border: solid 1px @noopentasks-border;//@ini_border_light; border: solid 1px @wikiicons-border; // @ini_border_light;
border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
color: @ini_text_webframe; color: @ini_text_webframe;
padding-right: .3rem; padding-right: .3rem;
@ -88,16 +101,20 @@
padding-top: @space-max-md; padding-top: @space-max-md;
} }
@media @screen_max-xxs { @media @screen_max-xs {
position: absolute; position: absolute;
top: @headericons-margin-xxs; top: @headericons-margin-xxs;
right: (@toggle-size + @headericons-margin-xxs); right: (@toggle-size + @headericons-margin-xxs);
max-width: 225px; overflow: hidden;
overflow-x: hidden;
white-space: nowrap; white-space: nowrap;
margin: -1px 0 0; margin: -1px 0 0;
} }
@media @screen_max-xxs {
left: -10px;
width: auto;
}
> a { > a {
.display-flex(); .display-flex();
.align-items(); .align-items();
@ -135,6 +152,10 @@
margin-top: -(@space-max-md); margin-top: -(@space-max-md);
} }
@media @screen_max-xxs {
min-height: (@toggle-size - .15);
}
&::before { &::before {
content: ''; content: '';
top: -1px; top: -1px;
@ -194,7 +215,7 @@
top: -.2rem; top: -.2rem;
} }
@media @screen_max-xxs { @media @screen_max-xs {
top: -.25rem; top: -.25rem;
} }

13
css/base_structure.less
View file

@ -194,15 +194,6 @@
margin: 0 1.25rem; margin: 0 1.25rem;
} }
#dokuwiki__usertools {
margin-top: 0;
max-width: 75%;
position: absolute;
top: 0;
margin-right: 0;
right: 1.25rem;
}
.content { .content {
position: relative; position: relative;
@ -233,10 +224,6 @@
left: @mobileMargin; left: @mobileMargin;
} }
#dokuwiki__usertools {
right: @mobileMargin;
}
#dokuwiki__footer { #dokuwiki__footer {
.main-footer { .main-footer {
> * { > * {