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-21 14:43:56 +02:00
commit 5b90468832
3 changed files with 48 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

37
css/area_header.less
View file

@ -8,14 +8,13 @@
#dokuwiki__header { #dokuwiki__header {
@header-font-opacity: 1; @header-font-opacity: 1;
/* + + + wiki logo + + + */ @media @screen_max-xxs {
@media @screen_min-md { min-height: 120px;
div.claim {
display: table-cell;
height: 100%;
vertical-align: middle;
} }
/* + + + wiki logo + + + */
@media @screen_min-md {
.logo { .logo {
padding: 1rem 0 .3rem; padding: 1rem 0 .3rem;
@ -48,7 +47,7 @@
} }
/* + + + wiki title + claim + + + */ /* + + + + + DESKTOP - wiki title + claim + + + + + */
.main-title.desktop-only { .main-title.desktop-only {
@media @screen_min-md { @media @screen_min-md {
display: table-cell; display: table-cell;
@ -70,14 +69,24 @@
display: block; display: block;
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@media @screen_max-xxs {
padding-right: (@toggle-size + @headericons-margin-xxs);
}
} }
} }
/* + + + + + MOBILE - wiki title wrapper + + + + + */
.main-title:not([class*="desktop-only"]) { .main-title:not([class*="desktop-only"]) {
@media @screen_max-md { @media @screen_max-md {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
} }
@media @screen_max-xxs {
padding-right: (@toggle-size + @headericons-margin-xxs);
}
} }
@ -101,6 +110,16 @@
} }
/* + + + + + DESKTOP - wiki claim, logo, title wrapper + + + + + */
@media @screen_min-md {
div.claim {
display: table-cell;
height: 100%;
vertical-align: middle;
}
}
/* + + + wiki claim + + + */ /* + + + wiki claim + + + */
p.claim { p.claim {
opacity: @header-font-opacity; opacity: @header-font-opacity;
@ -116,7 +135,9 @@
/* + + + mobile nav togglelink + + + */ /* + + + mobile nav togglelink + + + */
.menu-togglelink { .menu-togglelink {
margin: .45rem -(@very-small-spacing) 0 0; position: relative;
z-index: 1;
margin: @headericons-margin-xxs -(@very-small-spacing) 0 0;
a { a {
.fontello(); .fontello();

16
css/area_nav-usertools.less
View file

@ -25,6 +25,12 @@
float: right; float: right;
min-height: 28px; min-height: 28px;
@media @screen_max-xxs {
display: block;
float: none;
margin-bottom: @headericons-margin-xxs;
}
> strong, > strong,
> a { > a {
display: block; display: block;
@ -80,6 +86,16 @@
padding-top: @space-max-md; padding-top: @space-max-md;
} }
@media @screen_max-xxs {
position: absolute;
top: @headericons-margin-xxs;
right: (@toggle-size + @headericons-margin-xxs);
max-width: 225px;
overflow-x: hidden;
white-space: nowrap;
margin: -1px 0 0;
}
> a { > a {
.display-flex(); .display-flex();
.align-items(); .align-items();

3
css/base.less
View file

@ -44,6 +44,8 @@
@toggle-showsidebar_width: 3.07rem; // shown sidebar after toggle @toggle-showsidebar_width: 3.07rem; // shown sidebar after toggle
@headericons-margin-xxs: .45rem; // screen xxs margin-top for header icons
@page_padding-top: @margin-small; // padding-top for 'dokuwiki__content' @page_padding-top: @margin-small; // padding-top for 'dokuwiki__content'
@page-header_height: 2.8rem; // minimum: 2.8rem (height for breadcrumb, page-header, page-footer) @page-header_height: 2.8rem; // minimum: 2.8rem (height for breadcrumb, page-header, page-footer)
@meta-box_height: (@page-header_height - @page_padding-top); @meta-box_height: (@page-header_height - @page_padding-top);
@ -61,6 +63,7 @@
@wikiicons-border: #CCC; /* usertools, breadcrumbs icons, pagetools box-hover */ @wikiicons-border: #CCC; /* usertools, breadcrumbs icons, pagetools box-hover */
/* navigation left */ /* navigation left */
@menu-margin-lg: 1.3rem; @menu-margin-lg: 1.3rem;