MDL-69453 core_form: improve form UI icons and alignment
[moodle.git] / lib / form / templates / element-template.mustache
1 {{!
2     This file is part of Moodle - http://moodle.org/
4     Moodle is free software: you can redistribute it and/or modify
5     it under the terms of the GNU General Public License as published by
6     the Free Software Foundation, either version 3 of the License, or
7     (at your option) any later version.
9     Moodle is distributed in the hope that it will be useful,
10     but WITHOUT ANY WARRANTY; without even the implied warranty of
11     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
12     GNU General Public License for more details.
14     You should have received a copy of the GNU General Public License
15     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
16 }}
17 {{!
18     @template core_form/element-template
20     Template for the form element wrapper template.
22     Context variables required for this template:
23     * label
24     * required
25     * advanced
26     * helpbutton
27     * error
28     * element
29         * id
30         * name
32     Example context (json):
33     {
34         "label": "Course full name",
35         "required": true,
36         "advanced": false,
37         "error": null,
38         "element": {
39             "wrapperid": "fitem_id_fullname",
40             "id": "id_fullname",
41             "name": "fullname"
42         }
43     }
44 }}
45 <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}}>
46     <div class="col-md-3 col-form-label d-flex pb-0 pr-md-0">
47         {{# label}}{{$ label }}
48             {{^element.staticlabel}}
49                 <label class="d-inline word-break {{#element.hiddenlabel}}sr-only{{/element.hiddenlabel}}" for="{{element.id}}">
50                     {{{label}}}
51                 </label>
52             {{/element.staticlabel}}
53             {{#element.staticlabel}}
54                 <span class="d-inline-block {{#element.hiddenlabel}}sr-only{{/element.hiddenlabel}}">
55                     {{{label}}}
56                 </span>
57             {{/element.staticlabel}}
58         {{/ label }}{{/ label}}
59         <span class="ml-1 ml-md-auto d-flex align-items-center align-self-start">
60             {{#required}}
61                 <div class="text-danger" title="{{#str}}required{{/str}}">
62                 {{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}
63                 </div>
64             {{/required}}
65             {{{helpbutton}}}
66         </span>
67     </div>
68     <div class="col-md-9 form-inline align-items-start felement" data-fieldtype="{{element.type}}">
69         {{$ element }}
70             <!-- Element goes here -->
71         {{/ element }}
72         <div class="form-control-feedback invalid-feedback" id="{{element.iderror}}" {{#error}} style="display: block;"{{/error}}>
73             {{{error}}}
74         </div>
75     </div>
76 </div>
77 {{#js}}
78 require(['theme_boost/form-display-errors'], function(module) {
79     module.enhance({{#quote}}{{element.id}}{{/quote}});
80 });
81 {{/js}}