moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-05 08:56:36 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-59775 forms: add option to display any form vertical

Browse source
This commit is contained in:
Marina Glancy 2017-08-10 12:34:53 +08:00
parent 032674eebc
commit 3dee4faec4
4 changed files with 81 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

10
lib/formslib.php
View file

@ -1411,6 +1411,16 @@ abstract class moodleform {
return $data;
}
/**
* Set display mode for the form when labels take full width of the form and above the elements even on big screens
*
* Useful for forms displayed inside modals or in narrow containers
*/
public function set_display_vertical() {
$oldclass = $this->_form->getAttribute('class');
$this->_form->updateAttributes(array('class' => $oldclass . ' full-width-labels'));
}
}
/**

18
theme/boost/scss/moodle/forms.scss
View file

@ -334,6 +334,24 @@ textarea[data-auto-rows] {
overflow-x: hidden;
}
/** Display elements under labels in vertical forms regardless of the screen size. */
.mform.full-width-labels {
& > .row {
margin-left: 0;
margin-right: 0;
& > .col-md-3,
& > .col-md-9 {
float: none;
width: inherit;
padding-right: 0;
padding-left: 0;
}
&.femptylabel > .col-md-3 {
display: none;
}
}
}
/** Allow wrapping an mform in a div with the form-inline class to have an inline, responsive form. */
.form-inline {
@include media-breakpoint-up(md) {

14
theme/bootstrapbase/less/moodle/forms.less
View file

@ -279,7 +279,7 @@ fieldset.coursesearchbox label {
font-weight: bold;
}
.makeFormsVertical() {
#region-main .mform:not(.unresponsive) {
&:not(.unresponsive) {
.fitem {
.fitemtitle {
display: block;
@ -315,7 +315,6 @@ fieldset.coursesearchbox label {
display: inline-block;
margin-top: 4px;
padding-top: 5px;
width: auto;
}
}
.fitem_fcheckbox {
@ -331,11 +330,18 @@ fieldset.coursesearchbox label {
}
}
/**
* Forms marked as vertical always display this way;
*/
.mform.full-width-labels {
.makeFormsVertical;
}
/**
* Make forms vertical when the screen is less than 1200px;
*/
@media (max-width: 1199px) {
body {
body #region-main .mform {
.makeFormsVertical;
}
}
@ -354,7 +360,7 @@ fieldset.coursesearchbox label {
@maxWidthForVerticalForms: 1474px;
@media (max-width: @maxWidthForVerticalForms) {
.used-region-side-pre.used-region-side-post {
.used-region-side-pre.used-region-side-post #region-main .mform {
.makeFormsVertical;
}
}

45
theme/bootstrapbase/style/moodle.css
View file

@ -16745,6 +16745,49 @@ fieldset.coursesearchbox label {
#region-main .mform:not(.unresponsive) .fitem .fitemtitle label {
font-weight: bold;
}
/**
* Forms marked as vertical always display this way;
*/
.mform.full-width-labels:not(.unresponsive) .fitem .fitemtitle {
display: block;
margin-top: 4px;
margin-bottom: 4px;
text-align: left;
width: 100%;
}
.mform.full-width-labels:not(.unresponsive) .fitem .felement {
margin-left: 0;
width: 100%;
float: left;
padding-left: 0;
padding-right: 0;
}
.mform.full-width-labels:not(.unresponsive) .fitem .fstatic:empty {
display: none;
}
.mform.full-width-labels:not(.unresponsive) .fitem .fcheckbox > span,
.mform.full-width-labels:not(.unresponsive) .fitem .fradio > span,
.mform.full-width-labels:not(.unresponsive) .fitem .fgroup > span {
margin-top: 4px;
}
.mform.full-width-labels:not(.unresponsive) .femptylabel .fitemtitle {
display: inline-block;
width: auto;
margin-right: 8px;
}
.mform.full-width-labels:not(.unresponsive) .femptylabel .felement {
display: inline-block;
margin-top: 4px;
padding-top: 5px;
}
.mform.full-width-labels:not(.unresponsive) .fitem_fcheckbox .fitemtitle,
.mform.full-width-labels:not(.unresponsive) .fitem_fcheckbox .felement {
display: inline-block;
width: auto;
}
.mform.full-width-labels:not(.unresponsive) .fitem_fcheckbox .felement {
padding: 6px;
}
/**
* Make forms vertical when the screen is less than 1200px;
*/
@ -16780,7 +16823,6 @@ fieldset.coursesearchbox label {
display: inline-block;
margin-top: 4px;
padding-top: 5px;
width: auto;
}
body #region-main .mform:not(.unresponsive) .fitem_fcheckbox .fitemtitle,
body #region-main .mform:not(.unresponsive) .fitem_fcheckbox .felement {
@ -16833,7 +16875,6 @@ fieldset.coursesearchbox label {
display: inline-block;
margin-top: 4px;
padding-top: 5px;
width: auto;
}
.used-region-side-pre.used-region-side-post #region-main .mform:not(.unresponsive) .fitem_fcheckbox .fitemtitle,
.used-region-side-pre.used-region-side-post #region-main .mform:not(.unresponsive) .fitem_fcheckbox .felement {