From 80aedcc551c9b906791dea98c34942c0c11b8c2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20Gro=C3=9Fe?= Date: Fri, 5 May 2017 12:14:44 +0200 Subject: [PATCH 1/4] Clean up z-indexes There have been some z-indexes that were removed and then reintroduced through strange merges. This is an attempt to remove all z-indexes that are unnecessary and to clearly state the purpose of the remaining z-indexes in a comment to each index. SPR-981 --- css/area_content.less | 2 -- css/area_footer.less | 1 - css/area_header.less | 1 - css/area_main-content-secedit.less | 1 - css/area_main-sidebar-nav.less | 5 ++--- css/area_main-sidebar-search.less | 3 +-- css/area_nav-metabox.less | 4 ++-- css/area_nav-pagetools.less | 2 +- css/area_togglelink.less | 1 - css/base_structure.less | 4 ++-- css/plugins/do_tasks.less | 2 +- css/plugins/magic-matcher.less | 1 - css/plugins/struct.less | 1 - css/plugins/tabinclude.less | 3 +-- css/template_detail.less | 3 +-- 15 files changed, 11 insertions(+), 23 deletions(-) diff --git a/css/area_content.less b/css/area_content.less index 76c8f30..8b83013 100755 --- a/css/area_content.less +++ b/css/area_content.less @@ -10,14 +10,12 @@ #dokuwiki__content { position: relative; - z-index: 10; &::before { content: ''; position: absolute; top: 0; left: 0; - z-index: -1; height: @page-header_height; box-sizing: border-box; width: 100%; diff --git a/css/area_footer.less b/css/area_footer.less index a76bb4b..3597b7f 100755 --- a/css/area_footer.less +++ b/css/area_footer.less @@ -38,7 +38,6 @@ #dokuwiki__footer { .main-footer { position: relative; - z-index: 2; box-sizing: border-box; background-color: @ini_background_site; } diff --git a/css/area_header.less b/css/area_header.less index 9a560ab..81eb17a 100755 --- a/css/area_header.less +++ b/css/area_header.less @@ -136,7 +136,6 @@ /* + + + mobile nav togglelink + + + */ .menu-togglelink { position: relative; - z-index: 1; margin: @headericons-margin-xxs -(@very-small-spacing) 0 0; a { diff --git a/css/area_main-content-secedit.less b/css/area_main-content-secedit.less index 3881c79..e9c25b6 100644 --- a/css/area_main-content-secedit.less +++ b/css/area_main-content-secedit.less @@ -6,7 +6,6 @@ #dokuwiki__content.main-content { .editbutton_section { position: relative; - z-index: 2; top: 0; float: right; margin-top: 0; // for best position of edit-tab beneeth table diff --git a/css/area_main-sidebar-nav.less b/css/area_main-sidebar-nav.less index f5688c0..dde68f5 100755 --- a/css/area_main-sidebar-nav.less +++ b/css/area_main-sidebar-nav.less @@ -119,7 +119,7 @@ &:focus, &:active { position: relative; // always show label, even with collapsed sidebar - z-index: 100; + z-index: 100; // show label/link above content on hover etc. width: 100%; background-color: @ini_nav_menu_hover_bg; border-color: @ini_nav_menu_hover_color; @@ -316,7 +316,7 @@ display: block !important; position: absolute; left: 1.25rem; // left margin of content container - z-index: 200; // above all + z-index: 200; // mobile sidebar above all box-shadow: @box-shadow-right-bottom; min-width: 45%; max-width: 90%; @@ -325,7 +325,6 @@ > nav { position: relative; - z-index: 2; &:first-child { margin-top: 1.2rem; diff --git a/css/area_main-sidebar-search.less b/css/area_main-sidebar-search.less index 45567e5..e2b4cb7 100644 --- a/css/area_main-sidebar-search.less +++ b/css/area_main-sidebar-search.less @@ -191,7 +191,7 @@ .search.main-sidebar { p.toggleSearch { position: relative; - z-index: 1; + z-index: 1; // put search-toggle-button above #dw__search display: block; float: left; width: auto; @@ -233,7 +233,6 @@ .search.main-sidebar { display: block !important; position: relative; - z-index: 1; margin-left: -1px; margin-right: -1px; diff --git a/css/area_nav-metabox.less b/css/area_nav-metabox.less index 4ee796b..caa55d4 100755 --- a/css/area_nav-metabox.less +++ b/css/area_nav-metabox.less @@ -12,7 +12,7 @@ .justify-content(flex-end); position: relative; - z-index: 10; + z-index: 1; // put meta-box above positioned content-elements such as aggregations, edit-buttons float: right; max-width: 40%; margin-top: -(@page_padding-top); // reverse padding-top of .page container @@ -158,7 +158,7 @@ } &.active { - z-index: 1; + z-index: 1; // put the active tab above the meta-content in .tab-pane.active > a { cursor: default; diff --git a/css/area_nav-pagetools.less b/css/area_nav-pagetools.less index 5a0dc24..b858140 100755 --- a/css/area_nav-pagetools.less +++ b/css/area_nav-pagetools.less @@ -32,7 +32,7 @@ nav#dokuwiki__pagetools { @toolbox-size: 30px; top: 3.05rem; - z-index: 100; + z-index: 100; // put labels of the pagetools above content on hover etc. @media @screen_min-md { right: -2.5rem; diff --git a/css/area_togglelink.less b/css/area_togglelink.less index 816799e..776dd5e 100755 --- a/css/area_togglelink.less +++ b/css/area_togglelink.less @@ -12,7 +12,6 @@ bottom: -1px; width: 2rem; left: -(@margin-default); - z-index: 1; @media @screen_max-md { display: none; diff --git a/css/base_structure.less b/css/base_structure.less index b1516bf..1bd2174 100755 --- a/css/base_structure.less +++ b/css/base_structure.less @@ -66,11 +66,11 @@ /* + + + + + z-indeces + + + + + */ @media @screen_min-md { .nav-direct p { - z-index: 1000; + z-index: 1000; // keyboard-navigation overlays } .top-header { - z-index: 900; + z-index: 1; // put MagicMatcher-Dropdowns above .content } .content .row > .col-xs-12 { diff --git a/css/plugins/do_tasks.less b/css/plugins/do_tasks.less index 02ae281..cc183a1 100755 --- a/css/plugins/do_tasks.less +++ b/css/plugins/do_tasks.less @@ -95,5 +95,5 @@ ul.page-attributes { } .plugin__do_usertasks_list { - z-index: 5; + z-index: 200; // put tasks-list above pagetools } diff --git a/css/plugins/magic-matcher.less b/css/plugins/magic-matcher.less index f341ede..72920d2 100755 --- a/css/plugins/magic-matcher.less +++ b/css/plugins/magic-matcher.less @@ -47,7 +47,6 @@ #magicmatcher__context { position: relative; - z-index: 100; width: 100%; min-height: @height-context-bar; box-sizing: border-box; diff --git a/css/plugins/struct.less b/css/plugins/struct.less index 0bbbed3..c4aaca7 100755 --- a/css/plugins/struct.less +++ b/css/plugins/struct.less @@ -101,7 +101,6 @@ /* + + + + + struct inline-editor + + + + + */ .dokuwiki { .struct_inlineditor { - z-index: 3; box-shadow: @box-shadow-bottom; p.hint { diff --git a/css/plugins/tabinclude.less b/css/plugins/tabinclude.less index c1f3b12..26c4298 100644 --- a/css/plugins/tabinclude.less +++ b/css/plugins/tabinclude.less @@ -34,7 +34,7 @@ div#dwpl-ti-container { &.selected { position: relative; - z-index: 1; + z-index: 1; // put .slected tab above div.dwpl-ti-content-box background-color: @ini_background; color: @ini_text; } @@ -45,7 +45,6 @@ div#dwpl-ti-container { /* + + + content box + + + */ div.dwpl-ti-content-box { position: relative; - z-index: 0; overflow: auto; box-shadow: @box-shadow; background-color: @ini_background; diff --git a/css/template_detail.less b/css/template_detail.less index d73eb28..9b46f56 100644 --- a/css/template_detail.less +++ b/css/template_detail.less @@ -24,7 +24,7 @@ position: absolute; top: 0; left: 0; - z-index: 2; + z-index: 2; // put 'view original file'-overlay above image display: block; width: 100%; box-sizing: border-box; @@ -38,7 +38,6 @@ display: block; border: 1px dotted @ini_background_site; position: relative; - z-index: 1; } &:hover, From be44ad7221b56d71b2a2b9b234b48869acfb16d9 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Fri, 5 May 2017 14:23:47 +0200 Subject: [PATCH 2/4] SPR-908: QS - content boxshadow --- css/area_footer.less | 1 + 1 file changed, 1 insertion(+) diff --git a/css/area_footer.less b/css/area_footer.less index 3597b7f..57114e3 100755 --- a/css/area_footer.less +++ b/css/area_footer.less @@ -40,6 +40,7 @@ position: relative; box-sizing: border-box; background-color: @ini_background_site; + margin-top: 5px; // for box-shadow of content } p { From 01b34ddbf2010867571d4f8fca047831b14acccc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20Gro=C3=9Fe?= Date: Fri, 5 May 2017 14:31:11 +0200 Subject: [PATCH 3/4] Put the suggestions-page above the metabox-tabs The tabs of the meta-box and the meta-box itself have z-indexes of 1, hence we need a z-index of 2 to ensure that the suggestions-page is above them. SPR-981 --- css/base_structure.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/base_structure.less b/css/base_structure.less index 1bd2174..d68dd7a 100755 --- a/css/base_structure.less +++ b/css/base_structure.less @@ -70,7 +70,7 @@ } .top-header { - z-index: 1; // put MagicMatcher-Dropdowns above .content + z-index: 2; // put MagicMatcher-Dropdowns above .content and metabox-tabs } .content .row > .col-xs-12 { From 3389cd60adb7616379179e8e1e22d5171a5e029a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jana=20Deutschla=CC=88nder?= Date: Wed, 10 May 2017 15:43:01 +0200 Subject: [PATCH 4/4] SPR-908: all z-indices are found in base_structure.less, SPR-908: Bugfix Direct-nav in Tableview should be above toggle button --- css/area_main-sidebar-nav.less | 2 -- css/area_main-sidebar-search.less | 1 - css/area_nav-metabox.less | 4 +-- css/area_nav-pagetools.less | 1 - css/base_structure.less | 58 +++++++++++++++++++++++++++++-- css/plugins/do_tasks.less | 4 --- css/plugins/edittable.less | 1 - css/plugins/tabinclude.less | 1 - css/template_detail.less | 1 - 9 files changed, 56 insertions(+), 17 deletions(-) diff --git a/css/area_main-sidebar-nav.less b/css/area_main-sidebar-nav.less index dde68f5..3de2ab3 100755 --- a/css/area_main-sidebar-nav.less +++ b/css/area_main-sidebar-nav.less @@ -119,7 +119,6 @@ &:focus, &:active { position: relative; // always show label, even with collapsed sidebar - z-index: 100; // show label/link above content on hover etc. width: 100%; background-color: @ini_nav_menu_hover_bg; border-color: @ini_nav_menu_hover_color; @@ -316,7 +315,6 @@ display: block !important; position: absolute; left: 1.25rem; // left margin of content container - z-index: 200; // mobile sidebar above all box-shadow: @box-shadow-right-bottom; min-width: 45%; max-width: 90%; diff --git a/css/area_main-sidebar-search.less b/css/area_main-sidebar-search.less index e2b4cb7..743b1b5 100644 --- a/css/area_main-sidebar-search.less +++ b/css/area_main-sidebar-search.less @@ -191,7 +191,6 @@ .search.main-sidebar { p.toggleSearch { position: relative; - z-index: 1; // put search-toggle-button above #dw__search display: block; float: left; width: auto; diff --git a/css/area_nav-metabox.less b/css/area_nav-metabox.less index caa55d4..9f97b85 100755 --- a/css/area_nav-metabox.less +++ b/css/area_nav-metabox.less @@ -12,7 +12,6 @@ .justify-content(flex-end); position: relative; - z-index: 1; // put meta-box above positioned content-elements such as aggregations, edit-buttons float: right; max-width: 40%; margin-top: -(@page_padding-top); // reverse padding-top of .page container @@ -158,7 +157,6 @@ } &.active { - z-index: 1; // put the active tab above the meta-content in .tab-pane.active > a { cursor: default; @@ -306,7 +304,7 @@ ul.mmissuelist { padding-left: 0; margin-top: 1rem; - + li { &.noissue { list-style-type: none; diff --git a/css/area_nav-pagetools.less b/css/area_nav-pagetools.less index b858140..56b1c5e 100755 --- a/css/area_nav-pagetools.less +++ b/css/area_nav-pagetools.less @@ -32,7 +32,6 @@ nav#dokuwiki__pagetools { @toolbox-size: 30px; top: 3.05rem; - z-index: 100; // put labels of the pagetools above content on hover etc. @media @screen_min-md { right: -2.5rem; diff --git a/css/base_structure.less b/css/base_structure.less index d68dd7a..4d88900 100755 --- a/css/base_structure.less +++ b/css/base_structure.less @@ -63,16 +63,68 @@ } } -/* + + + + + z-indeces + + + + + */ -@media @screen_min-md { +/* + + + + + z-indices + + + + + */ +@media screen { .nav-direct p { - z-index: 1000; // keyboard-navigation overlays + z-index: 1000; // keyboard-navigation overlays always on top } .top-header { z-index: 2; // put MagicMatcher-Dropdowns above .content and metabox-tabs } + #dokuwiki__aside div.nav a { + &:hover, &:focus, &:active { + z-index: 100; // show label/link above content on hover etc. + } + } + + #spr__meta-box { + z-index: 1; // put meta-box above positioned content-elements such as aggregations, edit-buttons + ul.meta-tabs > li.active { + z-index: 1; // put the active tab above the meta-content in .tab-pane.active + } + } + + nav#dokuwiki__pagetools { + z-index: 100; // put labels of the pagetools above content on hover etc. + } + + #dokuwiki__detail .img-link a::before { + z-index: 2; // put 'view original file'-overlay above image + } + + /* plug-in do_tasks */ + .plugin__do_usertasks_list { + z-index: 200; // put tasks-list above pagetools + } + + /* plug-in editable */ + #dokuwiki__content.main-content div.editbutton_table { + z-index: 1; // for IE + } + + /* plug-in tabinclude */ + div#dwpl-ti-container li.dwpl-ti-tab div.selected { + z-index: 1; // put .slected tab above div.dwpl-ti-content-box + } +} + +@media @screen_min-md { + .wide-content .search.main-sidebar p.toggleSearch { + z-index: 1; // put search-toggle-button above #dw__search + } +} + +@media @screen_max-md { + body.show-mobile-sidebar #dokuwiki__aside { + z-index: 200; // mobile sidebar above all except nav-direct + } +} +/* + + + + + end of z-indices + + + + + */ + +@media @screen_min-md { + .content .row > .col-xs-12 { border-radius: 0 @ini_default_border_radius @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius } diff --git a/css/plugins/do_tasks.less b/css/plugins/do_tasks.less index cc183a1..9154aed 100755 --- a/css/plugins/do_tasks.less +++ b/css/plugins/do_tasks.less @@ -93,7 +93,3 @@ ul.page-attributes { } // li } // ul } - -.plugin__do_usertasks_list { - z-index: 200; // put tasks-list above pagetools -} diff --git a/css/plugins/edittable.less b/css/plugins/edittable.less index 0a2c2e4..ef3069c 100644 --- a/css/plugins/edittable.less +++ b/css/plugins/edittable.less @@ -8,7 +8,6 @@ #dokuwiki__content.main-content { div.editbutton_table { position: relative; // for IE - z-index: 1; // for IE float: left; margin-top: -1.46rem !important; // overwrite inline stales diff --git a/css/plugins/tabinclude.less b/css/plugins/tabinclude.less index 26c4298..39cef9c 100644 --- a/css/plugins/tabinclude.less +++ b/css/plugins/tabinclude.less @@ -34,7 +34,6 @@ div#dwpl-ti-container { &.selected { position: relative; - z-index: 1; // put .slected tab above div.dwpl-ti-content-box background-color: @ini_background; color: @ini_text; } diff --git a/css/template_detail.less b/css/template_detail.less index 9b46f56..93f9c61 100644 --- a/css/template_detail.less +++ b/css/template_detail.less @@ -24,7 +24,6 @@ position: absolute; top: 0; left: 0; - z-index: 2; // put 'view original file'-overlay above image display: block; width: 100%; box-sizing: border-box;