mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-01-18 05:58:34 +01:00
Code Issues Projects Releases Wiki Activity

MDL-80856 theme_boost: Improve sticky footer styles with drawers

Browse Source
This commit is contained in:
Mikel Martín 2024-02-23 14:09:02 +01:00
parent e567c21d6e
commit 30a71b2b44
5 changed files with 125 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
theme/boost/scss/moodle/sticky-footer.scss
View File

@ -18,6 +18,38 @@ body {
overflow: hidden;
box-shadow: 0 0 1rem rgba($black, .15);
font-size: calc(#{$font-size-base} * 1.10);
// Adjust sticky footer width to the main content area.
.sticky-footer-content {
@include media-breakpoint-up(md) {
.pagelayout-standard &,
body.limitedwidth.uses-drawers & {
max-width: $course-content-maxwidth;
}
body.mediumwidth.uses-drawers & {
max-width: $medium-content-maxwidth;
}
}
}
// Adjust sticky footer width when drawers are open.
.sticky-footer-content-wrapper {
@include transition(0.2s);
@include media-breakpoint-up(lg) {
.drawers {
padding: 0 3rem;
}
.show-drawer-left & {
margin-left: $drawer-left-width;
padding: 0 3rem 0 1rem;
}
.show-drawer-right & {
margin-right: $drawer-right-width;
padding: 0 1rem 0 3rem;
}
.show-drawer-right.show-drawer-left & {
padding: 0 1rem;
}
}
}
}
.hasstickyfooter .stickyfooter {

2
theme/boost/scss/moodle/variables.scss
View File

@ -23,7 +23,7 @@ $primary-nav-padding-y: ($spacer * 0.25) !default;
$primary-nav-padding-x: ($spacer * 0.5) !default;
$navbar-height: 60px !default;
$stickyfooter-height: calc(max(96px, calc(#{$font-size-base} * 3))) !default;
$stickyfooter-height: calc(max(80px, calc(#{$font-size-base} * 3))) !default;
$course-content-maxwidth: 830px !default;
$medium-content-maxwidth: 1120px !default;
$h5p-content-maxwidth: 960px !default;

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

@ -25134,11 +25134,11 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
}
.hasstickyfooter .btn-footer-popover {
bottom: calc(1rem + max(96px, 0.9375rem * 3));
bottom: calc(1rem + max(80px, 0.9375rem * 3));
}
.hasstickyfooter .btn-footer-communication {
bottom: calc(4rem + max(96px, 0.9375rem * 3));
bottom: calc(4rem + max(80px, 0.9375rem * 3));
}
.popover.footer .popover-body {
@ -35765,7 +35765,7 @@ p.arrow_button {
border-right: transparent;
}
.path-grade-report-grader.hasstickyfooter .gradeparent tr.lastrow {
bottom: calc(max(96px, 0.9375rem * 3) - 1px);
bottom: calc(max(80px, 0.9375rem * 3) - 1px);
}
/**
@ -36179,14 +36179,46 @@ body {
position: fixed;
right: 0;
left: 0;
height: max(96px, 0.9375rem * 3);
bottom: calc(max(96px, 0.9375rem * 3) * -1);
height: max(80px, 0.9375rem * 3);
bottom: calc(max(80px, 0.9375rem * 3) * -1);
transition: bottom 0.5s;
z-index: 1030;
overflow: hidden;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
font-size: calc(0.9375rem * 1.10);
}
@media (min-width: 768px) {
.pagelayout-standard .stickyfooter .sticky-footer-content, body.limitedwidth.uses-drawers .stickyfooter .sticky-footer-content {
max-width: 830px;
}
body.mediumwidth.uses-drawers .stickyfooter .sticky-footer-content {
max-width: 1120px;
}
}
.stickyfooter .sticky-footer-content-wrapper {
transition: 0.2s;
}
@media (prefers-reduced-motion: reduce) {
.stickyfooter .sticky-footer-content-wrapper {
transition: none;
}
}
@media (min-width: 992px) {
.stickyfooter .sticky-footer-content-wrapper .drawers {
padding: 0 3rem;
}
.show-drawer-left .stickyfooter .sticky-footer-content-wrapper {
margin-left: 285px;
padding: 0 3rem 0 1rem;
}
.show-drawer-right .stickyfooter .sticky-footer-content-wrapper {
margin-right: 315px;
padding: 0 1rem 0 3rem;
}
.show-drawer-right.show-drawer-left .stickyfooter .sticky-footer-content-wrapper {
padding: 0 1rem;
}
}
.hasstickyfooter .stickyfooter {
bottom: 0;
@ -36965,7 +36997,7 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
.hasstickyfooter .drawer-left,
.hasstickyfooter .drawer-right {
top: 60px;
height: calc(100vh - 60px - max(96px, 0.9375rem * 3));
height: calc(100vh - 60px - max(80px, 0.9375rem * 3));
}
#page.drawers {
position: relative;
@ -37005,7 +37037,7 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
}
@media (min-width: 992px) {
#page.drawers.hasstickyfooter {
margin-bottom: max(96px, 0.9375rem * 3);
margin-bottom: max(80px, 0.9375rem * 3);
}
}
.drawercontrolbuttons {

21
theme/boost/templates/core/sticky_footer.mustache
View File

@ -43,11 +43,7 @@
}}
<div
id="sticky-footer"
class="d-flex flex-row align-items-center stickyfooter px-3 py-2 fixed-bottom bg-white border-top {{!
}} {{$ stickyclasses }}{{!
}}{{# stickyclasses }}{{ stickyclasses }}{{/ stickyclasses }}{{!
}}{{^ stickyclasses }}justify-content-end{{/ stickyclasses }}{{!
}}{{/ stickyclasses }}"
class="stickyfooter bg-white border-top"
{{$ disable }}
{{#disable}} data-disable="true" {{/disable}}
{{/ disable }}
@ -57,9 +53,18 @@
{{/extras}}
{{/ extradata }}
>
{{$ stickycontent }}
{{{stickycontent}}}
{{/ stickycontent }}
<div class="sticky-footer-content-wrapper h-100 d-flex justify-content-center">
<div class="sticky-footer-content w-100 d-flex align-items-center px-3 py-2 {{!
}} {{$ stickyclasses }}{{!
}}{{# stickyclasses }}{{ stickyclasses }}{{/ stickyclasses }}{{!
}}{{^ stickyclasses }}justify-content-end{{/ stickyclasses }}{{!
}}{{/ stickyclasses }}"
>
{{$ stickycontent }}
{{{stickycontent}}}
{{/ stickycontent }}
</div>
</div>
</div>
{{#js}}
require(['theme_boost/sticky-footer'], function(footer) {

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

@ -25134,11 +25134,11 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
}
.hasstickyfooter .btn-footer-popover {
bottom: calc(1rem + max(96px, 0.9375rem * 3));
bottom: calc(1rem + max(80px, 0.9375rem * 3));
}
.hasstickyfooter .btn-footer-communication {
bottom: calc(4rem + max(96px, 0.9375rem * 3));
bottom: calc(4rem + max(80px, 0.9375rem * 3));
}
.popover.footer .popover-body {
@ -35765,7 +35765,7 @@ p.arrow_button {
border-right: transparent;
}
.path-grade-report-grader.hasstickyfooter .gradeparent tr.lastrow {
bottom: calc(max(96px, 0.9375rem * 3) - 1px);
bottom: calc(max(80px, 0.9375rem * 3) - 1px);
}
/**
@ -36113,14 +36113,46 @@ body {
position: fixed;
right: 0;
left: 0;
height: max(96px, 0.9375rem * 3);
bottom: calc(max(96px, 0.9375rem * 3) * -1);
height: max(80px, 0.9375rem * 3);
bottom: calc(max(80px, 0.9375rem * 3) * -1);
transition: bottom 0.5s;
z-index: 1030;
overflow: hidden;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
font-size: calc(0.9375rem * 1.10);
}
@media (min-width: 768px) {
.pagelayout-standard .stickyfooter .sticky-footer-content, body.limitedwidth.uses-drawers .stickyfooter .sticky-footer-content {
max-width: 830px;
}
body.mediumwidth.uses-drawers .stickyfooter .sticky-footer-content {
max-width: 1120px;
}
}
.stickyfooter .sticky-footer-content-wrapper {
transition: 0.2s;
}
@media (prefers-reduced-motion: reduce) {
.stickyfooter .sticky-footer-content-wrapper {
transition: none;
}
}
@media (min-width: 992px) {
.stickyfooter .sticky-footer-content-wrapper .drawers {
padding: 0 3rem;
}
.show-drawer-left .stickyfooter .sticky-footer-content-wrapper {
margin-left: 285px;
padding: 0 3rem 0 1rem;
}
.show-drawer-right .stickyfooter .sticky-footer-content-wrapper {
margin-right: 315px;
padding: 0 1rem 0 3rem;
}
.show-drawer-right.show-drawer-left .stickyfooter .sticky-footer-content-wrapper {
padding: 0 1rem;
}
}
.hasstickyfooter .stickyfooter {
bottom: 0;
@ -36899,7 +36931,7 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
.hasstickyfooter .drawer-left,
.hasstickyfooter .drawer-right {
top: 50px;
height: calc(100vh - 50px - max(96px, 0.9375rem * 3));
height: calc(100vh - 50px - max(80px, 0.9375rem * 3));
}
#page.drawers {
position: relative;
@ -36939,7 +36971,7 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
}
@media (min-width: 992px) {
#page.drawers.hasstickyfooter {
margin-bottom: max(96px, 0.9375rem * 3);
margin-bottom: max(80px, 0.9375rem * 3);
}
}
.drawercontrolbuttons {
@ -39115,5 +39147,5 @@ body {
}
body.hasstickyfooter #page-footer {
padding-bottom: calc(1rem * .5 + max(96px, 0.9375rem * 3));
padding-bottom: calc(1rem * .5 + max(80px, 0.9375rem * 3));
}