MDL-69453 core_form: improve form UI icons and alignment

diff --git a/lib/form/templates/element-advcheckbox.mustache b/lib/form/templates/element-advcheckbox.mustache
index e775939..d64ad69 100644 (file)
--- a/lib/form/templates/element-advcheckbox.mustache
+++ b/lib/form/templates/element-advcheckbox.mustache
@@ -7,7 +7,7 @@
         {{/text}}
     </div>
     <div class="col-md-9 checkbox">
         {{/text}}
     </div>
     <div class="col-md-9 checkbox">

-        <div class="form-check">
+        <div class="form-check d-flex">

             <label>
             {{^element.hardfrozen}}
                 {{^element.frozen}}
             <label>
             {{^element.hardfrozen}}
                 {{^element.frozen}}


@@ -38,8 +38,12 @@
                     {{{label}}}
                 {{/text}}
             </label>
                     {{{label}}}
                 {{/text}}
             </label>

-            <span class="text-nowrap">
-                {{#advanced}}<abbr class="initialism text-info" title="{{#str}}advanced{{/str}}">!</abbr>{{/advanced}}
+            <span class="ml-2 d-flex align-items-center align-self-start">
+                {{#required}}
+                    <div class="text-danger" title="{{#str}}required{{/str}}">
+                    {{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}
+                    </div>
+                {{/required}}

                 {{{helpbutton}}}
             </span>
         </div>
                 {{{helpbutton}}}
             </span>
         </div>

diff --git a/lib/form/templates/element-checkbox.mustache b/lib/form/templates/element-checkbox.mustache
index 0e5e186..4aacd4f 100644 (file)
--- a/lib/form/templates/element-checkbox.mustache
+++ b/lib/form/templates/element-checkbox.mustache
@@ -1,8 +1,5 @@
 <div class="form-group row {{#error}}has-danger{{/error}} fitem {{#advanced}}advanced{{/advanced}} {{{element.extraclasses}}}">
     <div class="col-md-3">
 <div class="form-group row {{#error}}has-danger{{/error}} fitem {{#advanced}}advanced{{/advanced}} {{{element.extraclasses}}}">
     <div class="col-md-3">

-        <span class="float-sm-right text-nowrap">
-            {{#required}}<abbr class="initialism text-danger" title="{{#str}}required{{/str}}">{{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}</abbr>{{/required}}
-        </span>

         {{#text}}
             <label for="{{element.id}}">
                 {{{label}}}
         {{#text}}
             <label for="{{element.id}}">
                 {{{label}}}


@@ -10,7 +7,7 @@
         {{/text}}
     </div>
     <div class="col-md-9 checkbox">
         {{/text}}
     </div>
     <div class="col-md-9 checkbox">

-        <div class="form-check">
+        <div class="form-check d-flex">

             <label>
             {{^element.hardfrozen}}
                 {{#element.frozen}}
             <label>
             {{^element.hardfrozen}}
                 {{#element.frozen}}


@@ -41,8 +38,12 @@
                     {{{label}}}
                 {{/text}}
             </label>
                     {{{label}}}
                 {{/text}}
             </label>

-            <span class="text-nowrap">
-                {{#advanced}}<abbr class="initialism text-info" title="{{#str}}advanced{{/str}}">!</abbr>{{/advanced}}
+            <span class="ml-2 d-flex align-items-center align-self-start">
+                {{#required}}
+                    <div class="text-danger" title="{{#str}}required{{/str}}">
+                    {{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}
+                    </div>
+                {{/required}}

                 {{{helpbutton}}}
             </span>
         </div>
                 {{{helpbutton}}}
             </span>
         </div>


@@ -52,6 +53,7 @@
     </div>
 </div>
 {{^element.frozen}}
     </div>
 </div>
 {{^element.frozen}}

+

 {{#js}}
 require(['theme_boost/form-display-errors'], function(module) {
     module.enhance({{#quote}}{{element.id}}{{/quote}});
 {{#js}}
 require(['theme_boost/form-display-errors'], function(module) {
     module.enhance({{#quote}}{{element.id}}{{/quote}});

diff --git a/lib/form/templates/element-date_selector.mustache b/lib/form/templates/element-date_selector.mustache
index 1f3897d..a7176b1 100644 (file)
--- a/lib/form/templates/element-date_selector.mustache
+++ b/lib/form/templates/element-date_selector.mustache
@@ -2,7 +2,7 @@
     {{$element}}
         <fieldset class="m-0 p-0 border-0" id="{{element.id}}">
             <legend class="sr-only">{{label}}</legend>
     {{$element}}
         <fieldset class="m-0 p-0 border-0" id="{{element.id}}">
             <legend class="sr-only">{{label}}</legend>

-            <span class="fdate_selector d-flex">
+            <span class="fdate_selector d-flex align-items-center">

             {{#element.elements}}
                 {{{separator}}}
                 {{{html}}}
             {{#element.elements}}
                 {{{separator}}}
                 {{{html}}}

diff --git a/lib/form/templates/element-filemanager.mustache b/lib/form/templates/element-filemanager.mustache
index f2607eb..23dd271 100644 (file)
--- a/lib/form/templates/element-filemanager.mustache
+++ b/lib/form/templates/element-filemanager.mustache
@@ -1,7 +1,7 @@
 {{< core_form/element-template }}
     {{$label}}
         {{^element.hiddenlabel}}
 {{< core_form/element-template }}
     {{$label}}
         {{^element.hiddenlabel}}

-            <p id="{{element.id}}_label" class="col-form-label d-inline" aria-hidden="true">
+            <p id="{{element.id}}_label" class="mb-0 d-inline" aria-hidden="true">

                 {{{label}}}
             </p>
         {{/element.hiddenlabel}}
                 {{{label}}}
             </p>
         {{/element.hiddenlabel}}

diff --git a/lib/form/templates/element-filepicker.mustache b/lib/form/templates/element-filepicker.mustache
index 579cf20..9d6ff8b 100644 (file)
--- a/lib/form/templates/element-filepicker.mustache
+++ b/lib/form/templates/element-filepicker.mustache
@@ -1,7 +1,7 @@
 {{< core_form/element-template }}
     {{$label}}
         {{^element.hiddenlabel}}
 {{< core_form/element-template }}
     {{$label}}
         {{^element.hiddenlabel}}

-            <p id="{{element.id}}_label" class="col-form-label d-inline" aria-hidden="true">
+            <p id="{{element.id}}_label" class="mb-0 d-inline" aria-hidden="true">

                 {{{label}}}
             </p>
         {{/element.hiddenlabel}}
                 {{{label}}}
             </p>
         {{/element.hiddenlabel}}

diff --git a/lib/form/templates/element-group.mustache b/lib/form/templates/element-group.mustache
index d5cca77..af36dc0 100644 (file)
--- a/lib/form/templates/element-group.mustache
+++ b/lib/form/templates/element-group.mustache
@@ -1,7 +1,7 @@
 {{< core_form/element-template }}
     {{$label}}
         {{^element.hiddenlabel}}
 {{< core_form/element-template }}
     {{$label}}
         {{^element.hiddenlabel}}

-            <p id="{{element.id}}_label" class="col-form-label d-inline" aria-hidden="true">
+            <p id="{{element.id}}_label" class="mb-0 word-break" aria-hidden="true">

                 {{{label}}}
             </p>
         {{/element.hiddenlabel}}
                 {{{label}}}
             </p>
         {{/element.hiddenlabel}}

diff --git a/lib/form/templates/element-passwordunmask.mustache b/lib/form/templates/element-passwordunmask.mustache
index 999ee72..918f7a4 100644 (file)
--- a/lib/form/templates/element-passwordunmask.mustache
+++ b/lib/form/templates/element-passwordunmask.mustache
@@ -63,7 +63,7 @@
                         >
             </span>
             {{^ element.frozen }}
                         >
             </span>
             {{^ element.frozen }}

-            <a href="#" data-passwordunmask="edit" title="{{ edithint }}">
+            <a href="#" class="form-control" data-passwordunmask="edit" title="{{ edithint }}">

             {{/ element.frozen }}
                 <span data-passwordunmask="displayvalue">{{> core_form/element-passwordunmask-fill }}</span>
             {{^ element.frozen }}
             {{/ element.frozen }}
                 <span data-passwordunmask="displayvalue">{{> core_form/element-passwordunmask-fill }}</span>
             {{^ element.frozen }}

diff --git a/lib/form/templates/element-radio.mustache b/lib/form/templates/element-radio.mustache
index b0d5d73..17e557e 100644 (file)
--- a/lib/form/templates/element-radio.mustache
+++ b/lib/form/templates/element-radio.mustache
@@ -19,30 +19,33 @@
         {{/text}}
     </div>
     <div class="col-md-9 checkbox">
         {{/text}}
     </div>
     <div class="col-md-9 checkbox">

-        <div class="form-check">
-        <span>
-            <label class="form-check-label">
-                {{^element.hardfrozen}}{{#element.frozen}}{{#element.checked}}
-                    <input type="hidden" name="{{element.name}}" value="{{element.value}}">
-                {{/element.checked}}{{/element.frozen}}{{/element.hardfrozen}}
-                <input type="radio" class="form-check-input" {{^element.frozen}}name="{{element.name}}"{{/element.frozen}}
-                    id="{{element.id}}" value="{{element.value}}"
-                    {{#element.checked}}checked{{/element.checked}}
-                    {{#element.frozen}}disabled{{/element.frozen}}
-                    {{#error}}
-                        autofocus aria-describedby="{{element.iderror}}"
-                    {{/error}} {{{element.attributes}}} >
-                {{#text}}
-                    {{{.}}}
-                {{/text}}
-                {{^text}}
-                    {{{label}}}
-                {{/text}}
-            </label>
-            {{#required}}<abbr class="initialism text-danger" title="{{#str}}required{{/str}}">{{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}</abbr>{{/required}}
-            {{#advanced}}<abbr class="initialism text-info" title="{{#str}}advanced{{/str}}">!</abbr>{{/advanced}}
-            {{{helpbutton}}}
-            </span>
+        <div class="form-check d-flex">
+                <label class="form-check-label">
+                    {{^element.hardfrozen}}{{#element.frozen}}{{#element.checked}}
+                        <input type="hidden" name="{{element.name}}" value="{{element.value}}">
+                    {{/element.checked}}{{/element.frozen}}{{/element.hardfrozen}}
+                    <input type="radio" class="form-check-input" {{^element.frozen}}name="{{element.name}}"{{/element.frozen}}
+                        id="{{element.id}}" value="{{element.value}}"
+                        {{#element.checked}}checked{{/element.checked}}
+                        {{#element.frozen}}disabled{{/element.frozen}}
+                        {{#error}}
+                            autofocus aria-describedby="{{element.iderror}}"
+                        {{/error}} {{{element.attributes}}} >
+                    {{#text}}
+                        {{{.}}}
+                    {{/text}}
+                    {{^text}}
+                        {{{label}}}
+                    {{/text}}
+                </label>
+                <span class="ml-2 d-flex align-items-center align-self-start">
+                    {{#required}}
+                        <div class="text-danger" title="{{#str}}required{{/str}}">
+                        {{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}
+                        </div>
+                    {{/required}}
+                    {{{helpbutton}}}
+                </span>

         </div>
         <div class="form-control-feedback invalid-feedback" id="{{element.iderror}}" {{#error}} style="display: block;"{{/error}}>
             {{{error}}}
         </div>
         <div class="form-control-feedback invalid-feedback" id="{{element.iderror}}" {{#error}} style="display: block;"{{/error}}>
             {{{error}}}

diff --git a/lib/form/templates/element-template-inline.mustache b/lib/form/templates/element-template-inline.mustache
index b8f3c48..b7b61a0 100644 (file)
--- a/lib/form/templates/element-template-inline.mustache
+++ b/lib/form/templates/element-template-inline.mustache
@@ -4,11 +4,6 @@
             {{{label}}}
         </label>
     {{/label}}
             {{{label}}}
         </label>
     {{/label}}

-    <span>
-        {{{helpbutton}}}
-        {{#required}}<abbr class="initialism text-danger" title="{{#str}}required{{/str}}">{{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}</abbr>{{/required}}
-        {{#advanced}}<abbr class="initialism text-info" title="{{#str}}advanced{{/str}}">!</abbr>{{/advanced}}
-    </span>

     <span data-fieldtype="{{element.type}}">
         {{$ element }}
             <!-- Element goes here -->
     <span data-fieldtype="{{element.type}}">
         {{$ element }}
             <!-- Element goes here -->

diff --git a/lib/form/templates/element-template.mustache b/lib/form/templates/element-template.mustache
index d9528fa..afa6576 100644 (file)
--- a/lib/form/templates/element-template.mustache
+++ b/lib/form/templates/element-template.mustache
@@ -43,26 +43,29 @@
     }
 }}
 <div id="{{element.wrapperid}}" class="form-group row {{#error}}has-danger{{/error}} fitem {{#element.emptylabel}}femptylabel{{/element.emptylabel}} {{#advanced}}advanced{{/advanced}} {{{element.extraclasses}}}" {{#element.groupname}}data-groupname="{{.}}"{{/element.groupname}}>
     }
 }}
 <div id="{{element.wrapperid}}" class="form-group row {{#error}}has-danger{{/error}} fitem {{#element.emptylabel}}femptylabel{{/element.emptylabel}} {{#advanced}}advanced{{/advanced}} {{{element.extraclasses}}}" {{#element.groupname}}data-groupname="{{.}}"{{/element.groupname}}>

-    <div class="col-md-3">
-        <span class="float-sm-right text-nowrap">
-            {{#required}}<abbr class="initialism text-danger" title="{{#str}}required{{/str}}">{{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}</abbr>{{/required}}
-            {{#advanced}}<abbr class="initialism text-info" title="{{#str}}advanced{{/str}}">!</abbr>{{/advanced}}
-            {{{helpbutton}}}
-        </span>
+    <div class="col-md-3 col-form-label d-flex pb-0 pr-md-0">

         {{# label}}{{$ label }}
             {{^element.staticlabel}}
         {{# label}}{{$ label }}
             {{^element.staticlabel}}

-                <label class="col-form-label d-inline {{#element.hiddenlabel}}sr-only{{/element.hiddenlabel}}" for="{{element.id}}">
+                <label class="d-inline word-break {{#element.hiddenlabel}}sr-only{{/element.hiddenlabel}}" for="{{element.id}}">

                     {{{label}}}
                 </label>
             {{/element.staticlabel}}
             {{#element.staticlabel}}
                     {{{label}}}
                 </label>
             {{/element.staticlabel}}
             {{#element.staticlabel}}

-                <span class="col-form-label d-inline-block {{#element.hiddenlabel}}sr-only{{/element.hiddenlabel}}">
+                <span class="d-inline-block {{#element.hiddenlabel}}sr-only{{/element.hiddenlabel}}">

                     {{{label}}}
                 </span>
             {{/element.staticlabel}}
         {{/ label }}{{/ label}}
                     {{{label}}}
                 </span>
             {{/element.staticlabel}}
         {{/ label }}{{/ label}}

+        <span class="ml-1 ml-md-auto d-flex align-items-center align-self-start">
+            {{#required}}
+                <div class="text-danger" title="{{#str}}required{{/str}}">
+                {{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}
+                </div>
+            {{/required}}
+            {{{helpbutton}}}
+        </span>

     </div>
     </div>

-    <div class="col-md-9 form-inline felement" data-fieldtype="{{element.type}}">
+    <div class="col-md-9 form-inline align-items-start felement" data-fieldtype="{{element.type}}">

         {{$ element }}
             <!-- Element goes here -->
         {{/ element }}
         {{$ element }}
             <!-- Element goes here -->
         {{/ element }}

diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index bf6f07a..ca67117 100644 (file)
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -2486,6 +2486,10 @@ body.h5p-embed {
     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
 }
 
     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
 }
 

+.word-break {
+    word-break: break-word !important; /* stylelint-disable-line declaration-no-important */
+}
+

 .z-index-0 {
     z-index: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .z-index-0 {
     z-index: 0 !important; /* stylelint-disable-line declaration-no-important */
 }

diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 59f212a..7d30429 100644 (file)
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -11661,6 +11661,10 @@ body.h5p-embed .h5pmessages {
   overflow-wrap: break-word !important;
   /* stylelint-disable-line declaration-no-important */ }
 
   overflow-wrap: break-word !important;
   /* stylelint-disable-line declaration-no-important */ }
 

+.word-break {
+  word-break: break-word !important;
+  /* stylelint-disable-line declaration-no-important */ }
+

 .z-index-0 {
   z-index: 0 !important;
   /* stylelint-disable-line declaration-no-important */ }
 .z-index-0 {
   z-index: 0 !important;
   /* stylelint-disable-line declaration-no-important */ }

diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index cf7cc90..69a3252 100644 (file)
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -11871,6 +11871,10 @@ body.h5p-embed .h5pmessages {
   overflow-wrap: break-word !important;
   /* stylelint-disable-line declaration-no-important */ }
 
   overflow-wrap: break-word !important;
   /* stylelint-disable-line declaration-no-important */ }
 

+.word-break {
+  word-break: break-word !important;
+  /* stylelint-disable-line declaration-no-important */ }
+

 .z-index-0 {
   z-index: 0 !important;
   /* stylelint-disable-line declaration-no-important */ }
 .z-index-0 {
   z-index: 0 !important;
   /* stylelint-disable-line declaration-no-important */ }