From 5b904688321728a653f7c6a42bd3a5f906443e3a Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Fri, 21 Apr 2017 14:43:56 +0200 Subject: [PATCH 1/3] SPR-950: optimate Headerstyling in Mobile --- css/area_header.less | 37 +++++++++++++++++++++++++++++-------- css/area_nav-usertools.less | 16 ++++++++++++++++ css/base.less | 3 +++ 3 files changed, 48 insertions(+), 8 deletions(-) diff --git a/css/area_header.less b/css/area_header.less index 0225a71..651edd7 100755 --- a/css/area_header.less +++ b/css/area_header.less @@ -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(); diff --git a/css/area_nav-usertools.less b/css/area_nav-usertools.less index 70d07c2..224c235 100755 --- a/css/area_nav-usertools.less +++ b/css/area_nav-usertools.less @@ -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(); diff --git a/css/base.less b/css/base.less index 4b8c3b9..d6361c1 100755 --- a/css/base.less +++ b/css/base.less @@ -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; From de3c42a7e3f6ec2681d1063924e9fd3d7738c489 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Fri, 21 Apr 2017 15:00:44 +0200 Subject: [PATCH 2/3] SPR-950: mobile - magicmatcher additional class makes wrong padding in usertoolicons --- css/area_nav-usertools.less | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/css/area_nav-usertools.less b/css/area_nav-usertools.less index 224c235..d64ae87 100755 --- a/css/area_nav-usertools.less +++ b/css/area_nav-usertools.less @@ -7,8 +7,10 @@ .nav-usertools { &.has-bar { - margin-top: @height-context-bar; - padding-top: .5em; + @media @screen_min-md { + margin-top: @height-context-bar; + padding-top: .5em; + } } From 80134fae3c93426ff81c6e09df1b7d3db57e8c42 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Mon, 24 Apr 2017 13:03:01 +0200 Subject: [PATCH 3/3] SPR-950: optimate Headerstyling in Mobile --- css/area_header.less | 8 ++++---- css/area_nav-usertools.less | 35 ++++++++++++++++++++++++++++------- css/base_structure.less | 13 ------------- 3 files changed, 32 insertions(+), 24 deletions(-) diff --git a/css/area_header.less b/css/area_header.less index 651edd7..5fe8549 100755 --- a/css/area_header.less +++ b/css/area_header.less @@ -8,7 +8,7 @@ #dokuwiki__header { @header-font-opacity: 1; - @media @screen_max-xxs { + @media @screen_max-xs { min-height: 120px; } @@ -70,7 +70,7 @@ padding-bottom: 1rem; } - @media @screen_max-xxs { + @media @screen_max-xs { padding-right: (@toggle-size + @headericons-margin-xxs); } } @@ -84,7 +84,7 @@ vertical-align: middle; } - @media @screen_max-xxs { + @media @screen_max-xs { padding-right: (@toggle-size + @headericons-margin-xxs); } } @@ -177,7 +177,7 @@ &.has-magicmatcher { .logo { @media @screen_min-md { - padding-top: 2rem; + padding-top: 3rem; } } diff --git a/css/area_nav-usertools.less b/css/area_nav-usertools.less index d64ae87..42666aa 100755 --- a/css/area_nav-usertools.less +++ b/css/area_nav-usertools.less @@ -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 { @media @screen_min-md { margin-top: @height-context-bar; @@ -27,7 +40,7 @@ float: right; min-height: 28px; - @media @screen_max-xxs { + @media @screen_max-xs { display: block; float: none; margin-bottom: @headericons-margin-xxs; @@ -66,7 +79,7 @@ position: relative; display: table-cell; 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 color: @ini_text_webframe; padding-right: .3rem; @@ -88,16 +101,20 @@ padding-top: @space-max-md; } - @media @screen_max-xxs { + @media @screen_max-xs { position: absolute; top: @headericons-margin-xxs; right: (@toggle-size + @headericons-margin-xxs); - max-width: 225px; - overflow-x: hidden; + overflow: hidden; white-space: nowrap; margin: -1px 0 0; } + @media @screen_max-xxs { + left: -10px; + width: auto; + } + > a { .display-flex(); .align-items(); @@ -135,6 +152,10 @@ margin-top: -(@space-max-md); } + @media @screen_max-xxs { + min-height: (@toggle-size - .15); + } + &::before { content: ''; top: -1px; @@ -194,7 +215,7 @@ top: -.2rem; } - @media @screen_max-xxs { + @media @screen_max-xs { top: -.25rem; } diff --git a/css/base_structure.less b/css/base_structure.less index a2dfedd..1725630 100755 --- a/css/base_structure.less +++ b/css/base_structure.less @@ -194,15 +194,6 @@ margin: 0 1.25rem; } - #dokuwiki__usertools { - margin-top: 0; - max-width: 75%; - position: absolute; - top: 0; - margin-right: 0; - right: 1.25rem; - } - .content { position: relative; @@ -233,10 +224,6 @@ left: @mobileMargin; } - #dokuwiki__usertools { - right: @mobileMargin; - } - #dokuwiki__footer { .main-footer { > * {