mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-03-14 12:40:01 +01:00
Code Issues Projects Releases Wiki Activity

MDL-73607 theme: hide drawers when they are not visible

Browse Source 
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).
This commit is contained in:
Shamim Rezaie 2022-02-16 13:30:13 +11:00
parent d24a4ab56f
commit cb3ccf14b2
3 changed files with 62 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
theme/boost/scss/moodle/drawer.scss
View File

@ -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 {

44
theme/boost/style/moodle.css
View File

@ -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; }

44
theme/classic/style/moodle.css
View File

@ -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; }