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 {
@header-font-opacity: 1;
@media @screen_max-xxs {
min-height: 120px;
}
/* + + + wiki logo + + + */
@media @screen_min-md {
div.claim {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.logo {
padding: 1rem 0 .3rem;
@ -48,7 +47,7 @@
}
/* + + + wiki title + claim + + + */
/* + + + + + DESKTOP - wiki title + claim + + + + + */
.main-title.desktop-only {
@media @screen_min-md {
display: table-cell;
@ -70,14 +69,24 @@
display: block;
padding-bottom: 1rem;
}
@media @screen_max-xxs {
padding-right: (@toggle-size + @headericons-margin-xxs);
}
}
}
/* + + + + + MOBILE - wiki title wrapper + + + + + */
.main-title:not([class*="desktop-only"]) {
@media @screen_max-md {
display: table-cell;
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 + + + */
p.claim {
opacity: @header-font-opacity;
@ -116,7 +135,9 @@
/* + + + mobile nav 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 {
.fontello();

16
css/area_nav-usertools.less
View file

@ -25,6 +25,12 @@
float: right;
min-height: 28px;
@media @screen_max-xxs {
display: block;
float: none;
margin-bottom: @headericons-margin-xxs;
}
> strong,
> a {
display: block;
@ -80,6 +86,16 @@
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 {
.display-flex();
.align-items();

3
css/base.less
View file

@ -44,6 +44,8 @@
@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-header_height: 2.8rem; // minimum: 2.8rem (height for breadcrumb, page-header, page-footer)
@meta-box_height: (@page-header_height - @page_padding-top);
@ -61,6 +63,7 @@
@wikiicons-border: #CCC; /* usertools, breadcrumbs icons, pagetools box-hover */
/* navigation left */
@menu-margin-lg: 1.3rem;