From cb3ccf14b2c46e32750c32463514baf028e2d62b Mon Sep 17 00:00:00 2001 From: Shamim Rezaie Date: Wed, 16 Feb 2022 13:30:13 +1100 Subject: [PATCH] MDL-73607 theme: hide drawers when they are not visible This is to prevent browser search find texts that are not visible on the page. As part of this change, I deleted $drawer-transition that I had added ats part of MDL-72910. It was a master only change and I deleted it because customising it would only create problems (because of the many other hardcoded values in other files). --- theme/boost/scss/moodle/drawer.scss | 9 ++++-- theme/boost/style/moodle.css | 44 ++++++++++++++++++----------- theme/classic/style/moodle.css | 44 ++++++++++++++++++----------- 3 files changed, 62 insertions(+), 35 deletions(-) diff --git a/theme/boost/scss/moodle/drawer.scss b/theme/boost/scss/moodle/drawer.scss index f96cdeb9d22..0c585afdcd8 100644 --- a/theme/boost/scss/moodle/drawer.scss +++ b/theme/boost/scss/moodle/drawer.scss @@ -10,7 +10,6 @@ $drawer-offscreen-gutter: 20px !default; $drawer-bg-color: $gray-100 !default; $drawer-scroll-bg-track: $gray-100 !default; $drawer-shadow-color: rgba(0, 0, 0, .25) !default; -$drawer-transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease !default; :target { scroll-margin-top: $fixed-header-y + 10px; @@ -49,7 +48,7 @@ $drawer-bg: darken($body-bg, 5%) !default; padding: $drawer-padding-x $drawer-padding-y; } .jsenabled .btn-footer-popover { - @include transition($drawer-transition); + @include transition(0.2s); } } #nav-drawer { @@ -165,7 +164,7 @@ $right-drawer-width: 320px; } @mixin drawer() { - @include transition($drawer-transition); + @include transition(left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease); background-color: $drawer-bg-color; z-index: $zindex-modal; position: fixed; @@ -182,10 +181,12 @@ $right-drawer-width: 320px; width: $drawer-right-width; max-width: $drawer-right-width; right: calc(-#{$drawer-right-width} + -10px); + visibility: hidden; @include box-shadow($box-shadow-drawer-right); &.show { right: 0; + visibility: visible; } .drawertoggle { @@ -197,10 +198,12 @@ $right-drawer-width: 320px; width: $drawer-left-width; max-width: $drawer-left-width; left: calc(-#{$drawer-left-width} + -10px); + visibility: hidden; @include box-shadow($box-shadow-drawer-left); &.show { left: 0; + visibility: visible; } .drawertoggle { diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index 75e798e952f..991edffd94d 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -14860,7 +14860,7 @@ span.editinstructions { [data-region="drawer"] { padding: 20px 20px; } .jsenabled .btn-footer-popover { - transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease; } } + transition: 0.2s; } } @media (min-width: 576px) and (prefers-reduced-motion: reduce) { .jsenabled .btn-footer-popover { transition: none; } } @@ -14951,7 +14951,7 @@ body.drawer-ease { box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); } .drawer { - transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease; + transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease; background-color: #f8f9fa; z-index: 1050; position: fixed; @@ -14965,18 +14965,22 @@ body.drawer-ease { .drawer.drawer-right { width: 315px; max-width: 315px; - right: calc(-315px + -10px); } + right: calc(-315px + -10px); + visibility: hidden; } .drawer.drawer-right.show { - right: 0; } + right: 0; + visibility: visible; } .drawer.drawer-right .drawertoggle { margin-left: auto; margin-right: 5px; } .drawer.drawer-left { width: 285px; max-width: 285px; - left: calc(-285px + -10px); } + left: calc(-285px + -10px); + visibility: hidden; } .drawer.drawer-left.show { - left: 0; } + left: 0; + visibility: visible; } .drawer.drawer-left .drawertoggle { margin-right: auto; margin-left: 5px; } @@ -15007,7 +15011,7 @@ body.drawer-ease { @media (max-width: 991.98px) { .drawer-md { display: block; - transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease; + transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease; background-color: #f8f9fa; z-index: 1050; position: fixed; @@ -15023,18 +15027,22 @@ body.drawer-ease { .drawer-md.drawer-right { width: 315px; max-width: 315px; - right: calc(-315px + -10px); } + right: calc(-315px + -10px); + visibility: hidden; } .drawer-md.drawer-right.show { - right: 0; } + right: 0; + visibility: visible; } .drawer-md.drawer-right .drawertoggle { margin-left: auto; margin-right: 5px; } .drawer-md.drawer-left { width: 285px; max-width: 285px; - left: calc(-285px + -10px); } + left: calc(-285px + -10px); + visibility: hidden; } .drawer-md.drawer-left.show { - left: 0; } + left: 0; + visibility: visible; } .drawer-md.drawer-left .drawertoggle { margin-right: auto; margin-left: 5px; } @@ -15046,7 +15054,7 @@ body.drawer-ease { @media (max-width: 767.98px) { .drawer-sm { display: block; - transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease; + transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease; background-color: #f8f9fa; z-index: 1050; position: fixed; @@ -15062,18 +15070,22 @@ body.drawer-ease { .drawer-sm.drawer-right { width: 315px; max-width: 315px; - right: calc(-315px + -10px); } + right: calc(-315px + -10px); + visibility: hidden; } .drawer-sm.drawer-right.show { - right: 0; } + right: 0; + visibility: visible; } .drawer-sm.drawer-right .drawertoggle { margin-left: auto; margin-right: 5px; } .drawer-sm.drawer-left { width: 285px; max-width: 285px; - left: calc(-285px + -10px); } + left: calc(-285px + -10px); + visibility: hidden; } .drawer-sm.drawer-left.show { - left: 0; } + left: 0; + visibility: visible; } .drawer-sm.drawer-left .drawertoggle { margin-right: auto; margin-left: 5px; } diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index e162bbc2b86..f947a9094fc 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -14860,7 +14860,7 @@ span.editinstructions { [data-region="drawer"] { padding: 20px 20px; } .jsenabled .btn-footer-popover { - transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease; } } + transition: 0.2s; } } @media (min-width: 576px) and (prefers-reduced-motion: reduce) { .jsenabled .btn-footer-popover { transition: none; } } @@ -14951,7 +14951,7 @@ body.drawer-ease { box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); } .drawer { - transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease; + transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease; background-color: #f8f9fa; z-index: 1050; position: fixed; @@ -14965,18 +14965,22 @@ body.drawer-ease { .drawer.drawer-right { width: 315px; max-width: 315px; - right: calc(-315px + -10px); } + right: calc(-315px + -10px); + visibility: hidden; } .drawer.drawer-right.show { - right: 0; } + right: 0; + visibility: visible; } .drawer.drawer-right .drawertoggle { margin-left: auto; margin-right: 5px; } .drawer.drawer-left { width: 285px; max-width: 285px; - left: calc(-285px + -10px); } + left: calc(-285px + -10px); + visibility: hidden; } .drawer.drawer-left.show { - left: 0; } + left: 0; + visibility: visible; } .drawer.drawer-left .drawertoggle { margin-right: auto; margin-left: 5px; } @@ -15007,7 +15011,7 @@ body.drawer-ease { @media (max-width: 991.98px) { .drawer-md { display: block; - transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease; + transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease; background-color: #f8f9fa; z-index: 1050; position: fixed; @@ -15023,18 +15027,22 @@ body.drawer-ease { .drawer-md.drawer-right { width: 315px; max-width: 315px; - right: calc(-315px + -10px); } + right: calc(-315px + -10px); + visibility: hidden; } .drawer-md.drawer-right.show { - right: 0; } + right: 0; + visibility: visible; } .drawer-md.drawer-right .drawertoggle { margin-left: auto; margin-right: 5px; } .drawer-md.drawer-left { width: 285px; max-width: 285px; - left: calc(-285px + -10px); } + left: calc(-285px + -10px); + visibility: hidden; } .drawer-md.drawer-left.show { - left: 0; } + left: 0; + visibility: visible; } .drawer-md.drawer-left .drawertoggle { margin-right: auto; margin-left: 5px; } @@ -15046,7 +15054,7 @@ body.drawer-ease { @media (max-width: 767.98px) { .drawer-sm { display: block; - transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease; + transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease; background-color: #f8f9fa; z-index: 1050; position: fixed; @@ -15062,18 +15070,22 @@ body.drawer-ease { .drawer-sm.drawer-right { width: 315px; max-width: 315px; - right: calc(-315px + -10px); } + right: calc(-315px + -10px); + visibility: hidden; } .drawer-sm.drawer-right.show { - right: 0; } + right: 0; + visibility: visible; } .drawer-sm.drawer-right .drawertoggle { margin-left: auto; margin-right: 5px; } .drawer-sm.drawer-left { width: 285px; max-width: 285px; - left: calc(-285px + -10px); } + left: calc(-285px + -10px); + visibility: hidden; } .drawer-sm.drawer-left.show { - left: 0; } + left: 0; + visibility: visible; } .drawer-sm.drawer-left .drawertoggle { margin-right: auto; margin-left: 5px; }