From 3dee4faec471d93ee373f4eed150d60ed5ca1945 Mon Sep 17 00:00:00 2001
From: Marina Glancy <marina@moodle.com>
Date: Thu, 10 Aug 2017 12:34:53 +0800
Subject: [PATCH] MDL-59775 forms: add option to display any form vertical

---
 lib/formslib.php                           | 10 +++++
 theme/boost/scss/moodle/forms.scss         | 18 +++++++++
 theme/bootstrapbase/less/moodle/forms.less | 14 +++++--
 theme/bootstrapbase/style/moodle.css       | 45 +++++++++++++++++++++-
 4 files changed, 81 insertions(+), 6 deletions(-)

diff --git a/lib/formslib.php b/lib/formslib.php
index 0a2293a6af9..6a320f1fbac 100644
--- a/lib/formslib.php
+++ b/lib/formslib.php
@@ -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'));
+    }
 }
 
 /**
diff --git a/theme/boost/scss/moodle/forms.scss b/theme/boost/scss/moodle/forms.scss
index d7f3701a9b9..acc3c0ccb49 100644
--- a/theme/boost/scss/moodle/forms.scss
+++ b/theme/boost/scss/moodle/forms.scss
@@ -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) {
diff --git a/theme/bootstrapbase/less/moodle/forms.less b/theme/bootstrapbase/less/moodle/forms.less
index 940a181b82d..a95021e3ea2 100644
--- a/theme/bootstrapbase/less/moodle/forms.less
+++ b/theme/bootstrapbase/less/moodle/forms.less
@@ -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;
     }
 }
diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
index b6f4cfd6caa..22a5f340131 100644
--- a/theme/bootstrapbase/style/moodle.css
+++ b/theme/bootstrapbase/style/moodle.css
@@ -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 {