MDL-69453 core_form: improve form UI icons and alignment
authorBas Brands <bas@moodle.com>
Tue, 27 Oct 2020 12:44:02 +0000 (13:44 +0100)
committerBas Brands <bas@moodle.com>
Wed, 11 Nov 2020 12:46:00 +0000 (13:46 +0100)
13 files changed:
lib/form/templates/element-advcheckbox.mustache
lib/form/templates/element-checkbox.mustache
lib/form/templates/element-date_selector.mustache
lib/form/templates/element-filemanager.mustache
lib/form/templates/element-filepicker.mustache
lib/form/templates/element-group.mustache
lib/form/templates/element-passwordunmask.mustache
lib/form/templates/element-radio.mustache
lib/form/templates/element-template-inline.mustache
lib/form/templates/element-template.mustache
theme/boost/scss/moodle/core.scss
theme/boost/style/moodle.css
theme/classic/style/moodle.css

index e775939..d64ad69 100644 (file)
@@ -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}}
                     {{{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>
index 0e5e186..4aacd4f 100644 (file)
@@ -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}}
                     {{{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}});
index 1f3897d..a7176b1 100644 (file)
@@ -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}}}
index f2607eb..23dd271 100644 (file)
@@ -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}}
index 579cf20..9d6ff8b 100644 (file)
@@ -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}}
index d5cca77..af36dc0 100644 (file)
@@ -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}}
index 999ee72..918f7a4 100644 (file)
@@ -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 }}
index b0d5d73..17e557e 100644 (file)
         {{/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}}}
index b8f3c48..b7b61a0 100644 (file)
@@ -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 -->
index d9528fa..afa6576 100644 (file)
     }
 }}
 <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 }}
index bf6f07a..ca67117 100644 (file)
@@ -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 */
 }
index 59f212a..7d30429 100644 (file)
@@ -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 */ }
index cf7cc90..69a3252 100644 (file)
@@ -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 */ }