MDL-56161 boost: alignment static form elements

Wrap the HTML from a static form element with "form-control-static" to apply correct padding.

Also use a span, not a label for unlabelable static form elements.
This commit is contained in:
Damyon Wiese 2016-10-28 12:34:11 +08:00
parent 577bd70d38
commit 9e2f13125a
3 changed files with 47 additions and 0 deletions

View File

@ -91,6 +91,7 @@ class MoodleQuickForm_static extends HTML_QuickForm_static implements templatabl
public function export_for_template(renderer_base $output) {
$context = $this->export_for_template_base($output);
$context['html'] = $this->toHtml();
$context['staticlabel'] = true;
return $context;
}
}

View File

@ -1,5 +1,44 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template core_form/element-static
Static form element template. A static form element is an element that just outputs raw HTML.
Classes required for JS:
* none
Data attributes required for JS:
* none
Context variables required for this template:
* element - A context exported from an mform element.
* element.html - The raw html to display.
Example context (json):
{
"label": "Example label",
"element": { "html": "Example HTML" }
}
}}
{{< core_form/element-template }}
{{$element}}
<div class="form-control-static">
{{{element.html}}}
</div>
{{/element}}
{{/ core_form/element-template }}

View File

@ -1,8 +1,15 @@
<div class="form-group row {{#error}}has-danger{{/error}} fitem {{#advanced}}advanced{{/advanced}} {{{element.extraclasses}}}">
<div class="col-md-3">
{{^element.staticlabel}}
<label class="col-form-label {{#element.hiddenlabel}}sr-only{{/element.hiddenlabel}}" for="{{element.id}}">
{{{label}}}
</label>
{{/element.staticlabel}}
{{#element.staticlabel}}
<span class="col-form-label d-inline-block {{#element.hiddenlabel}}sr-only{{/element.hiddenlabel}}">
{{{label}}}
</span>
{{/element.staticlabel}}
<span class="pull-xs-right">
{{#required}}<abbr class="initialism text-danger" title="{{#str}}required{{/str}}">✲</abbr>{{/required}}
{{#advanced}}<abbr class="initialism text-info" title="{{#str}}advanced{{/str}}">❗</abbr>{{/advanced}}