mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-21 00:12:56 +02:00
Code Issues Projects Releases Wiki Activity

MDL-76357 theme: Make sticky footer more prominent

Browse Source
This commit is contained in:
Amaia Anabitarte 2022-12-27 16:06:18 +01:00
parent 880462a168
commit a58ea07a41
13 changed files with 45 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
mod/data/classes/output/view_footer.php
View File

@ -124,12 +124,12 @@ class view_footer extends sticky_footer {
'name' => $selectallid,
'value' => 1,
'label' => get_string('selectall'),
'classes' => 'btn-secondary mr-1',
'classes' => 'btn-secondary mx-1',
], true);
$data['selectall'] = $output->render($mastercheckbox);
$data['deleteselected'] = html_writer::empty_tag('input', [
'class' => 'btn btn-secondary',
'class' => 'btn btn-secondary mx-1',
'type' => 'submit',
'value' => get_string('deleteselected'),
'disabled' => true,
@ -147,7 +147,7 @@ class view_footer extends sticky_footer {
$addentrylink,
get_string('add', 'mod_data'),
null,
['class' => 'btn btn-primary', 'role' => 'button']
['class' => 'btn btn-primary mx-1', 'role' => 'button']
);
$data['addentrybutton'] = $addentrybutton->export_for_template($output);
}

6
mod/data/edit.php
View File

@ -200,13 +200,13 @@ if (empty($redirectbackto)) {
$actionbuttons = html_writer::link(
$redirectbackto,
get_string('cancel'),
['class' => 'btn btn-secondary', 'role' => 'button']
['class' => 'btn btn-secondary mx-1', 'role' => 'button']
);
$actionbuttons .= html_writer::empty_tag('input', [
'type' => 'submit',
'name' => 'saveandview',
'value' => get_string('save'),
'class' => 'btn btn-primary ml-2'
'class' => 'btn btn-primary mx-1'
]);
if (!$rid && ((!$data->maxentries) ||
@ -214,7 +214,7 @@ if (!$rid && ((!$data->maxentries) ||
(data_numentries($data) < ($data->maxentries - 1)))) {
$actionbuttons .= html_writer::empty_tag('input', [
'type' => 'submit', 'name' => 'saveandadd',
'value' => get_string('saveandadd', 'data'), 'class' => 'btn btn-primary ml-2'
'value' => get_string('saveandadd', 'data'), 'class' => 'btn btn-primary mx-1'
]);
}

4
mod/data/lib.php
View File

@ -434,12 +434,12 @@ class data_field_base { // Base class for Database Field Types (see field/*/
'type' => 'submit',
'name' => 'cancel',
'value' => get_string('cancel'),
'class' => 'btn btn-secondary mr-2'
'class' => 'btn btn-secondary mx-1'
]);
$actionbuttons .= html_writer::tag('input', null, [
'type' => 'submit',
'value' => get_string('save'),
'class' => 'btn btn-primary'
'class' => 'btn btn-primary mx-1'
]);
$actionbuttons .= html_writer::end_div();

4
mod/data/renderer.php
View File

@ -131,12 +131,12 @@ class mod_data_renderer extends plugin_renderer_base {
$cancelurl = new moodle_url('/mod/data/field.php', ['d' => $datamodule->id]);
$actionbuttons .= html_writer::tag('a', get_string('cancel') , [
'href' => $cancelurl->out(false),
'class' => 'btn btn-secondary mr-2',
'class' => 'btn btn-secondary mx-1',
'role' => 'button',
]);
$actionbuttons .= html_writer::empty_tag('input', [
'type' => 'submit',
'class' => 'btn btn-primary',
'class' => 'btn btn-primary mx-1',
'value' => get_string('continue'),
]);
$actionbuttons .= html_writer::end_div();

4
mod/data/templates/template_editor.mustache
View File

@ -114,13 +114,13 @@
{{$ stickycontent }}
<div>
<input
class="btn btn-secondary"
class="btn btn-secondary mx-1"
type="button"
name="resetbutton"
value="{{#str}} reset {{/str}}"
/>
<input
class="btn btn-primary"
class="btn btn-primary mx-1"
type="submit"
value="{{#str}} save {{/str}}"
/>

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

@ -2327,7 +2327,7 @@ $footer-link-color: $bg-inverse-link-color !default;
}
.hasstickyfooter .btn-footer-popover {
bottom: calc(2rem + #{$navbar-height});
bottom: calc(1rem + #{$stickyfooter-height});
}
.popover.footer {

4
theme/boost/scss/moodle/layout.scss
View File

@ -209,7 +209,7 @@
.drawer-left,
.drawer-right {
top: $navbar-height;
height: calc(100vh - #{$navbar-height} - #{$navbar-height});
height: calc(100vh - #{$navbar-height} - #{$stickyfooter-height});
}
}
@ -238,7 +238,7 @@
margin-right: $drawer-right-width;
}
&.hasstickyfooter {
height: calc(100vh - #{$navbar-height} - #{$navbar-height});
height: calc(100vh - #{$navbar-height} - #{$stickyfooter-height});
}
}
}

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

@ -11,12 +11,13 @@ body {
position: fixed;
right: 0;
left: 0;
height: $navbar-height + 1px;
bottom: -$navbar-height;
height: $stickyfooter-height;
bottom: calc(#{$stickyfooter-height} * -1);
transition: bottom .5s;
z-index: $zindex-dropdown;
overflow: hidden;
box-shadow: 0 0 1rem rgba($black, .15);
font-size: calc(#{$font-size-base} * 1.10);
}
.hasstickyfooter .stickyfooter {
@ -29,6 +30,9 @@ body {
margin-bottom: map-get($spacers, 1);
}
.stickyfooter .btn {
font-size: calc(#{$font-size-base} * 1.10);
}
/* Breakpoints fixes. */

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

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

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

@ -11732,7 +11732,7 @@ ul {
right: 2rem; }
.hasstickyfooter .btn-footer-popover {
bottom: calc(2rem + 60px); }
bottom: calc(1rem + clamp(96px, calc(0.9375rem * 3), calc(0.9375rem * 3))); }
.popover.footer .popover-body {
padding: 0; }
@ -20136,12 +20136,13 @@ body {
position: fixed;
right: 0;
left: 0;
height: 61px;
bottom: -60px;
height: clamp(96px, calc(0.9375rem * 3), calc(0.9375rem * 3));
bottom: calc(clamp(96px, calc(0.9375rem * 3), calc(0.9375rem * 3)) * -1);
transition: bottom .5s;
z-index: 1000;
overflow: hidden;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15); }
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
font-size: calc(0.9375rem * 1.10); }
.hasstickyfooter .stickyfooter {
bottom: 0; }
@ -20150,6 +20151,9 @@ body {
.stickyfooter ul.pagination {
margin-bottom: 0.25rem; }
.stickyfooter .btn {
font-size: calc(0.9375rem * 1.10); }
/* Breakpoints fixes. */
@media (min-width: 576px) {
#page-wrapper {
@ -20784,7 +20788,7 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
.hasstickyfooter .drawer-left,
.hasstickyfooter .drawer-right {
top: 60px;
height: calc(100vh - 60px - 60px); }
height: calc(100vh - 60px - clamp(96px, calc(0.9375rem * 3), calc(0.9375rem * 3))); }
#page.drawers {
position: relative;
overflow-y: auto;
@ -20811,7 +20815,7 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
margin-left: 285px;
margin-right: 315px; }
#page.drawers.hasstickyfooter {
height: calc(100vh - 60px - 60px); } }
height: calc(100vh - 60px - clamp(96px, calc(0.9375rem * 3), calc(0.9375rem * 3))); } }
.drawercontrolbuttons {
margin-top: 92px; }

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

@ -33,7 +33,7 @@
}}
<div
id="sticky-footer"
class="d-flex flex-row align-items-center stickyfooter p-2 fixed-bottom bg-white border-top {{!
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 }}{{!

2
theme/classic/scss/classic/post.scss
View File

@ -270,5 +270,5 @@
}
body.hasstickyfooter #page-footer {
padding-bottom: calc(#{$spacer} * .5 + #{$navbar-height});
padding-bottom: calc(#{$spacer} * .5 + #{$stickyfooter-height});
}

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

@ -11732,7 +11732,7 @@ ul {
right: 2rem; }
.hasstickyfooter .btn-footer-popover {
bottom: calc(2rem + 50px); }
bottom: calc(1rem + clamp(96px, calc(0.9375rem * 3), calc(0.9375rem * 3))); }
.popover.footer .popover-body {
padding: 0; }
@ -20082,12 +20082,13 @@ body {
position: fixed;
right: 0;
left: 0;
height: 51px;
bottom: -50px;
height: clamp(96px, calc(0.9375rem * 3), calc(0.9375rem * 3));
bottom: calc(clamp(96px, calc(0.9375rem * 3), calc(0.9375rem * 3)) * -1);
transition: bottom .5s;
z-index: 1000;
overflow: hidden;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15); }
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
font-size: calc(0.9375rem * 1.10); }
.hasstickyfooter .stickyfooter {
bottom: 0; }
@ -20096,6 +20097,9 @@ body {
.stickyfooter ul.pagination {
margin-bottom: 0.25rem; }
.stickyfooter .btn {
font-size: calc(0.9375rem * 1.10); }
/* Breakpoints fixes. */
@media (min-width: 576px) {
#page-wrapper {
@ -20730,7 +20734,7 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
.hasstickyfooter .drawer-left,
.hasstickyfooter .drawer-right {
top: 50px;
height: calc(100vh - 50px - 50px); }
height: calc(100vh - 50px - clamp(96px, calc(0.9375rem * 3), calc(0.9375rem * 3))); }
#page.drawers {
position: relative;
overflow-y: auto;
@ -20757,7 +20761,7 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
margin-left: 285px;
margin-right: 315px; }
#page.drawers.hasstickyfooter {
height: calc(100vh - 50px - 50px); } }
height: calc(100vh - 50px - clamp(96px, calc(0.9375rem * 3), calc(0.9375rem * 3))); } }
.drawercontrolbuttons {
margin-top: 92px; }
@ -22343,4 +22347,4 @@ body {
padding-bottom: 0.5rem; }
body.hasstickyfooter #page-footer {
padding-bottom: calc(1rem * .5 + 50px); }
padding-bottom: calc(1rem * .5 + clamp(96px, calc(0.9375rem * 3), calc(0.9375rem * 3))); }