mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-13 20:42:22 +02:00
Code Issues Projects Releases Wiki Activity

MDL-56826 questions: Add styling for boost theme

Browse Source 
Changes include:
* question: Add bootstrap classes to buttons and selects so they look consistent.

* mod_quiz: Add bootstrap styles to report form elements

* question: Add bootstrap classes to question form elements

* And remove the success/fail styles from boost because they conflict badly
with the quiz plugin styles (making unreadable text).

* quiz: nav block buttons had black background

* quiz: Add bootstrap styles to quiz navigation buttons

* qtype_ddmarker: Remove bullets from list

Edit form coordinates preview had list bullets for each coordinate.

* boost: Prevent menu scrolling on quiz edit

* mod_quiz: Add bootstrap styles to edit quiz fields

Pagination and max grades forms.

* quiz: Undo some custom styles on review options

These checkboxes were laid out in a fake grid with no responsiveness
that conflicts with the bootstrap form-inline templates. Reset the
custom style to bootstrap default.

* quiz: Fix unit tests for boost changes

* qtype_ddwtos: Accurate positioning of drop targets

* questions: Make the review page responsive

* question: bootstrap 4 compatibility

.alert in bs4 contains no colours by default, you need to mix it with
one of the context classes to get some change in colours, borders etc.
This commit is contained in:
Damyon Wiese 2016-11-08 15:14:02 +08:00
parent b4d6669dd0
commit 12d6dfc1ce
23 changed files with 101 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
lib/questionlib.php
View File

@ -984,7 +984,8 @@ function question_category_select_menu($contexts, $top = false, $currentcat = 0,
$options[] = array($group => $opts);
}
echo html_writer::label(get_string('questioncategory', 'core_question'), 'id_movetocategory', false, array('class' => 'accesshide'));
echo html_writer::select($options, 'category', $selected, $choose, array('id' => 'id_movetocategory'));
$attrs = array('id' => 'id_movetocategory', 'class' => 'custom-select');
echo html_writer::select($options, 'category', $selected, $choose, $attrs);
}
/**

17
mod/quiz/classes/output/edit_renderer.php
View File

@ -159,16 +159,17 @@ class edit_renderer extends \plugin_renderer_base {
$output = '';
$output .= html_writer::start_div('maxgrade');
$output .= html_writer::start_tag('form', array('method' => 'post', 'action' => 'edit.php',
'class' => 'quizsavegradesform'));
'class' => 'quizsavegradesform form-inline'));
$output .= html_writer::start_tag('fieldset', array('class' => 'invisiblefieldset'));
$output .= html_writer::empty_tag('input', array('type' => 'hidden', 'name' => 'sesskey', 'value' => sesskey()));
$output .= html_writer::input_hidden_params($pageurl);
$a = html_writer::empty_tag('input', array('type' => 'text', 'id' => 'inputmaxgrade',
'name' => 'maxgrade', 'size' => ($structure->get_decimal_places_for_grades() + 2),
'value' => $structure->formatted_quiz_grade()));
'value' => $structure->formatted_quiz_grade(),
'class' => 'form-control'));
$output .= html_writer::tag('label', get_string('maximumgradex', '', $a),
array('for' => 'inputmaxgrade'));
$output .= html_writer::empty_tag('input', array('type' => 'submit',
$output .= html_writer::empty_tag('input', array('type' => 'submit', 'class' => 'btn btn-secondary m-l-1',
'name' => 'savechanges', 'value' => get_string('save', 'quiz')));
$output .= html_writer::end_tag('fieldset');
$output .= html_writer::end_tag('form');
@ -198,6 +199,7 @@ class edit_renderer extends \plugin_renderer_base {
'name' => 'repaginate',
'id' => 'repaginatecommand',
'value' => get_string('repaginatecommand', 'quiz'),
'class' => 'btn btn-secondary m-b-1',
);
if (!$structure->can_be_repaginated()) {
$buttonoptions['disabled'] = 'disabled';
@ -226,9 +228,14 @@ class edit_renderer extends \plugin_renderer_base {
$hiddenurl->param('sesskey', sesskey());
$select = html_writer::select($perpage, 'questionsperpage',
$structure->get_questions_per_page(), false);
$structure->get_questions_per_page(), false, array('class' => 'custom-select'));
$buttonattributes = array('type' => 'submit', 'name' => 'repaginate', 'value' => get_string('go'));
$buttonattributes = array(
'type' => 'submit',
'name' => 'repaginate',
'value' => get_string('go'),
'class' => 'btn btn-secondary m-l-1'
);
$formcontent = html_writer::tag('form', html_writer::div(
html_writer::input_hidden_params($hiddenurl) .

10
mod/quiz/renderer.php
View File

@ -216,7 +216,7 @@ class mod_quiz_renderer extends plugin_renderer_base {
'value' => sesskey()));
$output .= html_writer::start_tag('div', array('class' => 'submitbtns'));
$output .= html_writer::empty_tag('input', array('type' => 'submit',
'class' => 'questionflagsavebutton', 'name' => 'savingflags',
'class' => 'questionflagsavebutton btn btn-secondary', 'name' => 'savingflags',
'value' => get_string('saveflags', 'question')));
$output .= html_writer::end_tag('div');
$output .= html_writer::end_tag('div');
@ -239,7 +239,7 @@ class mod_quiz_renderer extends plugin_renderer_base {
return html_writer::empty_tag('input', array('type' => 'button',
'value' => get_string('finishreview', 'quiz'),
'id' => 'secureclosebutton',
'class' => 'mod_quiz-next-nav'));
'class' => 'mod_quiz-next-nav btn btn-primary'));
} else {
return html_writer::link($url, get_string('finishreview', 'quiz'),
@ -351,7 +351,7 @@ class mod_quiz_renderer extends plugin_renderer_base {
* @return string HTML fragment.
*/
protected function render_quiz_nav_question_button(quiz_nav_question_button $button) {
$classes = array('qnbutton', $button->stateclass, $button->navmethod);
$classes = array('qnbutton', $button->stateclass, $button->navmethod, 'btn', 'btn-secondary');
$extrainfo = array();
if ($button->currentpage) {
@ -536,7 +536,7 @@ class mod_quiz_renderer extends plugin_renderer_base {
$output .= html_writer::start_tag('div', array('class' => 'submitbtns'));
if ($page > 0 && $navmethod == 'free') {
$output .= html_writer::empty_tag('input', array('type' => 'submit', 'name' => 'previous',
'value' => get_string('navigateprevious', 'quiz'), 'class' => 'mod_quiz-prev-nav'));
'value' => get_string('navigateprevious', 'quiz'), 'class' => 'mod_quiz-prev-nav btn btn-secondary'));
}
if ($lastpage) {
$nextlabel = get_string('endtest', 'quiz');
@ -544,7 +544,7 @@ class mod_quiz_renderer extends plugin_renderer_base {
$nextlabel = get_string('navigatenext', 'quiz');
}
$output .= html_writer::empty_tag('input', array('type' => 'submit', 'name' => 'next',
'value' => $nextlabel, 'class' => 'mod_quiz-next-nav'));
'value' => $nextlabel, 'class' => 'mod_quiz-next-nav btn btn-primary'));
$output .= html_writer::end_tag('div');
return $output;

2
mod/quiz/report/attemptsreport_table.php
View File

@ -593,7 +593,7 @@ abstract class quiz_attempts_report_table extends table_sql {
protected function submit_buttons() {
global $PAGE;
if (has_capability('mod/quiz:deleteattempts', $this->context)) {
echo '<input type="submit" id="deleteattemptsbutton" name="delete" value="' .
echo '<input type="submit" class="btn btn-secondary m-r-1" id="deleteattemptsbutton" name="delete" value="' .
get_string('deleteselected', 'quiz_overview') . '"/>';
$PAGE->requires->event_handler('#deleteattemptsbutton', 'click', 'M.util.show_confirm_dialog',
array('message' => get_string('deleteattemptcheck', 'quiz')));

2
mod/quiz/report/overview/overview_table.php
View File

@ -189,7 +189,7 @@ class quiz_overview_table extends quiz_attempts_report_table {
protected function submit_buttons() {
if (has_capability('mod/quiz:regrade', $this->context)) {
echo '<input type="submit" name="regrade" value="' .
echo '<input type="submit" class="btn btn-secondary m-r-1" name="regrade" value="' .
get_string('regradeselected', 'quiz_overview') . '"/>';
}
parent::submit_buttons();

6
mod/quiz/report/overview/report.php
View File

@ -184,11 +184,11 @@ class quiz_overview_report extends quiz_attempts_report {
echo '<form action="'.$displayurl->out_omit_querystring().'">';
echo '<div>';
echo html_writer::input_hidden_params($displayurl);
echo '<input type="submit" name="regradeall" value="'.$regradealllabel.'"/>';
echo '<input type="submit" name="regradealldry" value="' .
echo '<input type="submit" class="btn btn-secondary" name="regradeall" value="'.$regradealllabel.'"/>';
echo '<input type="submit" class="btn btn-secondary m-l-1" name="regradealldry" value="' .
$regradealldrylabel . '"/>';
if ($regradesneeded) {
echo '<input type="submit" name="regradealldrydo" value="' .
echo '<input type="submit" class="btn btn-secondary m-l-1" name="regradealldrydo" value="' .
$regradealldrydolabel . '"/>';
}
echo '</div>';

2
question/classes/bank/search/category_condition.php
View File

@ -135,7 +135,7 @@ class category_condition extends condition {
echo \html_writer::start_div('choosecategory');
$catmenu = question_category_options($contexts, false, 0, true);
echo \html_writer::label(get_string('selectacategory', 'question'), 'id_selectacategory');
echo \html_writer::select($catmenu, 'category', $current, array(), array('class' => 'searchoptions', 'id' => 'id_selectacategory'));
echo \html_writer::select($catmenu, 'category', $current, array(), array('class' => 'searchoptions custom-select', 'id' => 'id_selectacategory'));
echo \html_writer::end_div() . "\n";
}

4
question/classes/bank/view.php
View File

@ -756,11 +756,11 @@ class view {
// Print delete and move selected question.
if ($caneditall) {
echo '<input type="submit" name="deleteselected" value="' . get_string('delete') . "\" />\n";
echo '<input type="submit" class="btn btn-secondary" name="deleteselected" value="' . get_string('delete') . "\" />\n";
}
if ($canmoveall && count($addcontexts)) {
echo '<input type="submit" name="move" value="' . get_string('moveto', 'question') . "\" />\n";
echo '<input type="submit" class="btn btn-secondary" name="move" value="' . get_string('moveto', 'question') . "\" />\n";
question_category_select_menu($addcontexts, false, 0, "{$category->id},{$category->contextid}");
}
}

10
question/type/calculated/questiontype.php
View File

@ -760,19 +760,19 @@ class qtype_calculated extends question_type {
}
$menu1 = html_writer::label(get_string('lengthoption', 'qtype_calculated'),
'menucalclength', false, array('class' => 'accesshide'));
$menu1 .= html_writer::select($lengthoptions, 'calclength[]', $regs[4], null);
$menu1 .= html_writer::select($lengthoptions, 'calclength[]', $regs[4], null, array('class' => 'custom-select'));
$options = array('uniform' => get_string('uniformbit', 'qtype_calculated'),
'loguniform' => get_string('loguniformbit', 'qtype_calculated'));
$menu2 = html_writer::label(get_string('distributionoption', 'qtype_calculated'),
'menucalcdistribution', false, array('class' => 'accesshide'));
$menu2 .= html_writer::select($options, 'calcdistribution[]', $regs[1], null);
return '<input type="submit" onclick="'
$menu2 .= html_writer::select($options, 'calcdistribution[]', $regs[1], null, array('class' => 'custom-select'));
return '<input type="submit" class="btn btn-secondary" onclick="'
. "getElementById('addform').regenerateddefid.value='{$defid}'; return true;"
.'" value="'. get_string('generatevalue', 'qtype_calculated') . '"/><br/>'
. '<input type="text" size="3" name="calcmin[]" '
. '<input type="text" class="form-control" size="3" name="calcmin[]" '
. " value=\"{$regs[2]}\"/> &amp; <input name=\"calcmax[]\" "
. ' type="text" size="3" value="' . $regs[3] .'"/> '
. ' type="text" class="form-control" size="3" value="' . $regs[3] .'"/> '
. $menu1 . '<br/>'
. $menu2;
} else {

2
question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form-debug.js vendored
View File

@ -35,7 +35,7 @@ Y.extend(DDMARKER_FORM, M.qtype_ddmarker.dd_base_class, {
'<div class="markertexts"></div>' +
'<div class="droparea"></div>' +
'<div class="dropzones"></div>' +
'<ul class="pager">' +
'<ul class="pager unstyled list-unstyled">' +
'<li><span id="xcoordpreview">X = </span></li>' +
'<li><span id="ycoordpreview">Y = </span></li>' +
'</ul>' +

2
question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form-min.js vendored
View File

File diff suppressed because one or more lines are too long

2
question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form.js vendored
View File

@ -35,7 +35,7 @@ Y.extend(DDMARKER_FORM, M.qtype_ddmarker.dd_base_class, {
'<div class="markertexts"></div>' +
'<div class="droparea"></div>' +
'<div class="dropzones"></div>' +
'<ul class="pager">' +
'<ul class="pager unstyled list-unstyled">' +
'<li><span id="xcoordpreview">X = </span></li>' +
'<li><span id="ycoordpreview">Y = </span></li>' +
'</ul>' +

2
question/type/ddmarker/yui/src/form/js/form.js vendored
View File

@ -33,7 +33,7 @@ Y.extend(DDMARKER_FORM, M.qtype_ddmarker.dd_base_class, {
'<div class="markertexts"></div>' +
'<div class="droparea"></div>' +
'<div class="dropzones"></div>' +
'<ul class="pager">' +
'<ul class="pager unstyled list-unstyled">' +
'<li><span id="xcoordpreview">X = </span></li>' +
'<li><span id="ycoordpreview">Y = </span></li>' +
'</ul>' +

2
question/type/gapselect/renderer.php
View File

@ -46,7 +46,7 @@ class qtype_gapselect_renderer extends qtype_elements_embedded_in_question_text_
$attributes = array(
'id' => $this->box_id($qa, 'p' . $place),
'class' => 'place' . $place,
'class' => 'custom-select place' . $place,
);
$groupclass = 'group' . $group;

2
question/type/match/renderer.php
View File

@ -82,7 +82,7 @@ class qtype_match_renderer extends qtype_with_combined_feedback_renderer {
'menu' . $qa->get_qt_field_name('sub' . $key), false,
array('class' => 'accesshide')) .
html_writer::select($choices, $qa->get_qt_field_name('sub' . $key), $selected,
array('0' => 'choose'), array('disabled' => $options->readonly)) .
array('0' => 'choose'), array('disabled' => $options->readonly, 'class' => 'custom-select m-l-1')) .
' ' . $feedbackimage, array('class' => $classes));
$result .= html_writer::end_tag('tr');

5
question/type/multianswer/renderer.php
View File

@ -222,6 +222,7 @@ class qtype_multianswer_textfield_renderer extends qtype_multianswer_subq_render
'value' => $response,
'id' => $qa->get_qt_field_name($fieldname),
'size' => $size,
'class' => 'form-control',
);
if ($options->readonly) {
$inputattributes['readonly'] = 'readonly';
@ -229,7 +230,7 @@ class qtype_multianswer_textfield_renderer extends qtype_multianswer_subq_render
$feedbackimg = '';
if ($options->correctness) {
$inputattributes['class'] = $this->feedback_class($matchinganswer->fraction);
$inputattributes['class'] .= ' ' . $this->feedback_class($matchinganswer->fraction);
$feedbackimg = $this->feedback_image($matchinganswer->fraction);
}
@ -244,7 +245,7 @@ class qtype_multianswer_textfield_renderer extends qtype_multianswer_subq_render
$qa, 'question', 'answerfeedback', $matchinganswer->id),
s($correctanswer->answer), $options);
$output = html_writer::start_tag('span', array('class' => 'subquestion'));
$output = html_writer::start_tag('span', array('class' => 'subquestion form-inline'));
$output .= html_writer::tag('label', get_string('answer'),
array('class' => 'subq accesshide', 'for' => $inputattributes['id']));
$output .= html_writer::empty_tag('input', $inputattributes);

2
question/type/multianswer/tests/walkthrough_test.php
View File

@ -116,7 +116,7 @@ class qtype_multianswer_walkthrough_test extends qbehaviour_walkthrough_test_bas
$this->check_current_mark(null);
$this->check_current_output(
$this->get_contains_marked_out_of_summary(),
new question_pattern_expectation('~<input[^>]* class="incorrect" [^>]*/>~'),
new question_pattern_expectation('~<input[^>]* class="[^"]*incorrect[^"]*" [^>]*/>~'),
$this->get_contains_subq_status(question_state::$gaveup),
$this->get_does_not_contain_validation_error_expectation());
}

2
question/type/multichoice/renderer.php
View File

@ -97,7 +97,7 @@ abstract class qtype_multichoice_renderer_base extends qtype_with_combined_feedb
$question->make_html_inline($question->format_text(
$ans->answer, $ans->answerformat,
$qa, 'question', 'answer', $ansid)),
array('for' => $inputattributes['id']));
array('for' => $inputattributes['id'], 'class' => 'm-l-1'));
// Param $options->suppresschoicefeedback is a hack specific to the
// oumultiresponse question type. It would be good to refactor to

5
question/type/numerical/renderer.php
View File

@ -49,6 +49,7 @@ class qtype_numerical_renderer extends qtype_renderer {
'value' => $currentanswer,
'id' => $inputname,
'size' => 80,
'class' => 'form-control',
);
if ($options->readonly) {
@ -65,7 +66,7 @@ class qtype_numerical_renderer extends qtype_renderer {
} else {
$fraction = 0;
}
$inputattributes['class'] = $this->feedback_class($fraction);
$inputattributes['class'] .= ' ' . $this->feedback_class($fraction);
$feedbackimg = $this->feedback_image($fraction);
}
@ -123,7 +124,7 @@ class qtype_numerical_renderer extends qtype_renderer {
$result = html_writer::tag('div', $questiontext, array('class' => 'qtext'));
if (!$placeholder) {
$result .= html_writer::start_tag('div', array('class' => 'ablock'));
$result .= html_writer::start_tag('div', array('class' => 'ablock form-inline'));
$result .= html_writer::tag('label', get_string('answercolon', 'qtype_numerical'), array('for' => $inputattributes['id']));
$result .= html_writer::tag('span', $input, array('class' => 'answer'));
$result .= html_writer::end_tag('div');

5
question/type/shortanswer/renderer.php
View File

@ -47,6 +47,7 @@ class qtype_shortanswer_renderer extends qtype_renderer {
'value' => $currentanswer,
'id' => $inputname,
'size' => 80,
'class' => 'form-control',
);
if ($options->readonly) {
@ -61,7 +62,7 @@ class qtype_shortanswer_renderer extends qtype_renderer {
} else {
$fraction = 0;
}
$inputattributes['class'] = $this->feedback_class($fraction);
$inputattributes['class'] .= ' ' . $this->feedback_class($fraction);
$feedbackimg = $this->feedback_image($fraction);
}
@ -84,7 +85,7 @@ class qtype_shortanswer_renderer extends qtype_renderer {
$result = html_writer::tag('div', $questiontext, array('class' => 'qtext'));
if (!$placeholder) {
$result .= html_writer::start_tag('div', array('class' => 'ablock'));
$result .= html_writer::start_tag('div', array('class' => 'ablock form-inline'));
$result .= html_writer::tag('label', get_string('answer', 'qtype_shortanswer',
html_writer::tag('span', $input, array('class' => 'answer'))),
array('for' => $inputattributes['id']));

4
question/type/truefalse/renderer.php
View File

@ -90,10 +90,10 @@ class qtype_truefalse_renderer extends qtype_renderer {
$radiotrue = html_writer::empty_tag('input', $trueattributes) .
html_writer::tag('label', get_string('true', 'qtype_truefalse'),
array('for' => $trueattributes['id']));
array('for' => $trueattributes['id'], 'class' => 'm-l-1'));
$radiofalse = html_writer::empty_tag('input', $falseattributes) .
html_writer::tag('label', get_string('false', 'qtype_truefalse'),
array('for' => $falseattributes['id']));
array('for' => $falseattributes['id'], 'class' => 'm-l-1'));
$result = '';
$result .= html_writer::tag('div', $question->format_questiontext($qa),

34
theme/boost/scss/moodle/modules.scss
View File

@ -342,6 +342,34 @@ div#dock {
}
// Quiz module
.path-mod-quiz .mod-quiz-edit-content {
// Force the quiz edit page to always be large enough to prevent scrolling when accessing the menu.
margin-bottom: 10rem;
}
#page-mod-quiz-mod #id_reviewoptionshdr .col-md-3,
#page-mod-quiz-mod #id_reviewoptionshdr .col-md-9 {
width: auto;
}
#page-mod-quiz-mod #id_reviewoptionshdr .form-group {
float: left;
width: 20rem;
display: inline-block;
height: 12rem;
}
#page-mod-quiz-mod #id_reviewoptionshdr .btn-link {
line-height: 1.5;
vertical-align: bottom;
}
#page-mod-quiz-mod #id_reviewoptionshdr .form-inline {
float: left;
clear: left;
}
#page-mod-quiz-mod #id_reviewoptionshdr .form-check-inline {
width: 90%;
height: 22px;
}
// Question navigation block.
.path-mod-quiz #mod_quiz_navblock {
@ -350,7 +378,7 @@ div#dock {
font-size: 14px;
line-height: 20px;
font-weight: normal;
background-color: $body-color;
background-color: $card-bg;
background-image: none;
height: 40px;
width: 30px;
@ -392,7 +420,7 @@ div#dock {
.qnbutton .trafficlight {
border: 0;
background: $body-color none center / 10px no-repeat scroll;
background: $card-bg none center / 10px no-repeat scroll;
height: 20px;
margin-top: 20px;
border-radius: 0 0 3px 3px;
@ -400,7 +428,7 @@ div#dock {
.qnbutton.notyetanswered .trafficlight,
.qnbutton.invalidanswer .trafficlight {
background-color: $body-color;
background-color: $card-bg;
}
.qnbutton.invalidanswer .trafficlight {

78
theme/boost/scss/moodle/question.scss
View File

@ -285,6 +285,10 @@ body.path-question-type {
.que .comment {
@extend .alert;
}
.que .outcome,
.que .comment {
@extend .alert-warning;
}
.que .formulation {
@extend .alert-info;
@ -331,71 +335,12 @@ body.path-question-type {
margin-bottom: 1.5em;
}
.que .correctness {
@extend label;
&.correct {
@extend .text-success;
}
&.partiallycorrect {
@extend .text-warning;
}
&.notanswered,
&.incorrect {
@extend .text-danger;
}
}
.que .validationerror {
@extend .text-danger;
}
// copied from .formFieldState in mixin.less
// and made more specific
@mixin answerState($textColor, $backgroundColor) {
$borderColor: $textColor;
color: $textColor;
background-color: $backgroundColor;
border-color: $borderColor;
@include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075)); // Redeclare so transitions work
&:focus {
border-color: darken($borderColor, 10%);
$shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten($borderColor, 20%);
@include box-shadow($shadow);
}
}
.formulation .correct {
@extend .text-success;
}
.formulation .partiallycorrect {
@extend .text-warning;
}
.formulation .incorrect {
@extend .text-danger;
}
.formulation select.correct,
.formulation input.correct {
@include answerState($btn-success-color, $btn-success-bg);
}
.formulation select.partiallycorrect,
.formulation input.partiallycorrect {
@include answerState($btn-warning-color, $btn-warning-bg);
}
.formulation select.incorrect,
.formulation input.incorrect {
@include answerState($btn-danger-color, $btn-danger-bg);
}
.que .grading,
.que .comment,
.que .commentlink,
@ -648,3 +593,18 @@ body.path-question-type .mform fieldset.hidden {
padding: 0;
margin: 0.7em 0 0;
}
// Fix for accurate positioning of ddwtos drag and drop question types.
.que.ddwtos {
box-sizing: content-box;
}
@include media-breakpoint-down(sm) {
.que .info {
float: none;
width: auto;
}
.que .content {
margin: 0;
}
}