Commit 560a43f2 authored by Damyon Wiese's avatar Damyon Wiese
Browse files

MDL-56190 availability: Styling on boost and clean

Update the HTML coming from the JS to include bootstrap classes.
Delete as many styles from boost scss as possible.
Regression test on clean and do final tweaks in less.
parent 77cfc19a
......@@ -23,9 +23,10 @@ M.availability_completion.form.initInner = function(cms) {
M.availability_completion.form.getNode = function(json) {
// Create HTML structure.
var html = M.util.get_string('title', 'availability_completion') + ' <span class="availability-group"><label>' +
var html = '<span class="col-form-label p-r-1"> ' + M.util.get_string('title', 'availability_completion') + '</span>' +
' <span class="availability-group form-group"><label>' +
'<span class="accesshide">' + M.util.get_string('label_cm', 'availability_completion') + ' </span>' +
'<select name="cm" title="' + M.util.get_string('label_cm', 'availability_completion') + '">' +
'<select class="custom-select" name="cm" title="' + M.util.get_string('label_cm', 'availability_completion') + '">' +
'<option value="0">' + M.util.get_string('choosedots', 'moodle') + '</option>';
for (var i = 0; i < this.cms.length; i++) {
var cm = this.cms[i];
......@@ -34,13 +35,14 @@ M.availability_completion.form.getNode = function(json) {
}
html += '</select></label> <label><span class="accesshide">' +
M.util.get_string('label_completion', 'availability_completion') +
' </span><select name="e" title="' + M.util.get_string('label_completion', 'availability_completion') + '">' +
' </span><select class="custom-select" ' +
'name="e" title="' + M.util.get_string('label_completion', 'availability_completion') + '">' +
'<option value="1">' + M.util.get_string('option_complete', 'availability_completion') + '</option>' +
'<option value="0">' + M.util.get_string('option_incomplete', 'availability_completion') + '</option>' +
'<option value="2">' + M.util.get_string('option_pass', 'availability_completion') + '</option>' +
'<option value="3">' + M.util.get_string('option_fail', 'availability_completion') + '</option>' +
'</select></label></span>';
var node = Y.Node.create('<span>' + html + '</span>');
var node = Y.Node.create('<span class="form-inline">' + html + '</span>');
// Set initial values.
if (json.cm !== undefined &&
......
......@@ -151,7 +151,7 @@ class frontend extends \core_availability\frontend {
// NOTE: The fields need to have these weird names in order that they
// match the standard Moodle form control, otherwise the date selector
// won't find them.
$html .= \html_writer::start_tag('select', array('name' => 'x[' . $field . ']'));
$html .= \html_writer::start_tag('select', array('name' => 'x[' . $field . ']', 'class' => 'custom-select'));
foreach ($options as $key => $value) {
$params = array('value' => $key);
if ($current[$field] == $key) {
......
......@@ -27,9 +27,10 @@ M.availability_date.form.initInner = function(html, defaultTime) {
};
M.availability_date.form.getNode = function(json) {
var html = M.util.get_string('direction_before', 'availability_date') + ' <span class="availability-group">' +
var html = '<span class="col-form-label p-r-1">' +
M.util.get_string('direction_before', 'availability_date') + '</span> <span class="availability-group">' +
'<label><span class="accesshide">' + M.util.get_string('direction_label', 'availability_date') + ' </span>' +
'<select name="direction">' +
'<select name="direction" class="custom-select">' +
'<option value="&gt;=">' + M.util.get_string('direction_from', 'availability_date') + '</option>' +
'<option value="&lt;">' + M.util.get_string('direction_until', 'availability_date') + '</option>' +
'</select></label></span> ' + this.html;
......
......@@ -35,24 +35,27 @@ M.availability_grade.form.getNode = function(json) {
this.nodesSoFar++;
// Create HTML structure.
var html = '<label>' + M.util.get_string('title', 'availability_grade') + ' <span class="availability-group">' +
'<select name="id"><option value="0">' + M.util.get_string('choosedots', 'moodle') + '</option>';
var html = '<label class="form-group"><span class="p-r-1">' + M.util.get_string('title', 'availability_grade') + '</span> ' +
'<span class="availability-group">' +
'<select name="id" class="custom-select"><option value="0">' + M.util.get_string('choosedots', 'moodle') + '</option>';
for (var i = 0; i < this.grades.length; i++) {
var grade = this.grades[i];
// String has already been escaped using format_string.
html += '<option value="' + grade.id + '">' + grade.name + '</option>';
}
html += '</select></span></label> <span class="availability-group">' +
'<label><input type="checkbox" name="min"/>' + M.util.get_string('option_min', 'availability_grade') +
html += '</select></span></label> <br><span class="availability-group form-group">' +
'<label><input type="checkbox" class="form-check-input m-x-1" name="min"/>' +
M.util.get_string('option_min', 'availability_grade') +
'</label> <label><span class="accesshide">' + M.util.get_string('label_min', 'availability_grade') +
'</span><input type="text" name="minval" title="' +
M.util.get_string('label_min', 'availability_grade') + '"/></label>%</span>' +
'<span class="availability-group">' +
'<label><input type="checkbox" name="max"/>' + M.util.get_string('option_max', 'availability_grade') +
'</span><input type="text" class="form-control m-x-1" name="minval" title="' +
M.util.get_string('label_min', 'availability_grade') + '"/></label>%</span><br>' +
'<span class="availability-group form-group">' +
'<label><input type="checkbox" class="form-check-input m-x-1" name="max"/>' +
M.util.get_string('option_max', 'availability_grade') +
'</label> <label><span class="accesshide">' + M.util.get_string('label_max', 'availability_grade') +
'</span><input type="text" name="maxval" title="' +
'</span><input type="text" class="form-control m-x-1" name="maxval" title="' +
M.util.get_string('label_max', 'availability_grade') + '"/></label>%</span>';
var node = Y.Node.create('<span>' + html + '</span>');
var node = Y.Node.create('<div class="d-inline-block form-inline">' + html + '</div>');
// Set initial values.
if (json.id !== undefined &&
......
......@@ -31,8 +31,9 @@ M.availability_group.form.initInner = function(groups) {
M.availability_group.form.getNode = function(json) {
// Create HTML structure.
var html = '<label>' + M.util.get_string('title', 'availability_group') + ' <span class="availability-group">' +
'<select name="id">' +
var html = '<label><span class="p-r-1">' + M.util.get_string('title', 'availability_group') + '</span> ' +
'<span class="availability-group">' +
'<select name="id" class="custom-select">' +
'<option value="choose">' + M.util.get_string('choosedots', 'moodle') + '</option>' +
'<option value="any">' + M.util.get_string('anygroup', 'availability_group') + '</option>';
for (var i = 0; i < this.groups.length; i++) {
......@@ -41,7 +42,7 @@ M.availability_group.form.getNode = function(json) {
html += '<option value="' + group.id + '">' + group.name + '</option>';
}
html += '</select></span></label>';
var node = Y.Node.create('<span>' + html + '</span>');
var node = Y.Node.create('<span class="form-inline">' + html + '</span>');
// Set initial values (leave default 'choose' if creating afresh).
if (json.creating === undefined) {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment