From 93ca1cdc323794e5df292981727cb4ab24b12c70 Mon Sep 17 00:00:00 2001 From: Mark Johnson Date: Fri, 11 Aug 2023 17:01:53 +0100 Subject: [PATCH] MDL-74054 theme: Style changes to support question bank UI cusomisation --- question/upgrade.txt | 4 +++ theme/boost/scss/moodle/question.scss | 32 ++++++++++++----- theme/boost/style/moodle.css | 50 +++++++++++++++++---------- theme/classic/style/moodle.css | 50 +++++++++++++++++---------- theme/upgrade.txt | 1 + 5 files changed, 93 insertions(+), 44 deletions(-) diff --git a/question/upgrade.txt b/question/upgrade.txt index 0b39c2dd903..168ba1cf922 100644 --- a/question/upgrade.txt +++ b/question/upgrade.txt @@ -42,6 +42,10 @@ This files describes API changes for code that uses the question API. Plugins can also define `plugin_features::get_question_bank_controls()` returning a list of renderables that will be displayed above the question bank table, to provide additional functionality on the question bank page. +9) CSS selectors using #categoryquestions to address the table on the question bank page have now been changed to use + .question-bank-table. This applies to the same styles to preview on the qbank_columnsortorder admin screen. It is important + that the styles match on these pages so that the defaults have the expected result in the question bank. + === 4.2 === 1) The question/qengine.js has been deprecated. We create core_question/question_engine diff --git a/theme/boost/scss/moodle/question.scss b/theme/boost/scss/moodle/question.scss index 29ba706c934..5b368abbddc 100644 --- a/theme/boost/scss/moodle/question.scss +++ b/theme/boost/scss/moodle/question.scss @@ -141,18 +141,21 @@ display: block; } -#categoryquestions { +table.question-bank-table { margin: 0; + background-color: $white; + table-layout: fixed; + overflow-x: scroll; + width: min-content; td, th { - padding: 0 0.2em; max-width: 40vw; + width: max-content; } th { text-align: left; - font-weight: normal; } & > tbody > tr.r1 { @@ -163,10 +166,6 @@ border: $border-width solid $info; } - .checkbox { - padding-left: 5px; - } - .checkbox input[type="checkbox"] { margin-left: 0; float: none; @@ -190,6 +189,23 @@ .header { text-align: left; + min-width: min-content; + + &.sortable-list-current-position { + background-color: lighten($primary, 40%); + } + &.sortable-list-is-dragged { + background-color: $white; + opacity: 0.85; + } + + .header-text > div { + display: inline-block; + } + + .dropdown-toggle::after { + margin-left: 0; + } } } @@ -666,7 +682,7 @@ body.path-question-type .mform fieldset.hidden { } @include media-breakpoint-down(md) { - #categoryquestions { + .question-bank-table { td, th { max-width: 75vw; diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index a6937acb0c8..6b08eca85f4 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -32007,46 +32007,60 @@ a.ygtvspacer:hover { display: block; } -#categoryquestions { +table.question-bank-table { margin: 0; + background-color: #fff; + table-layout: fixed; + overflow-x: scroll; + width: min-content; } -#categoryquestions td, -#categoryquestions th { - padding: 0 0.2em; +table.question-bank-table td, +table.question-bank-table th { max-width: 40vw; + width: max-content; } -#categoryquestions th { +table.question-bank-table th { text-align: left; - font-weight: normal; } -#categoryquestions > tbody > tr.r1 { +table.question-bank-table > tbody > tr.r1 { background-color: rgba(0, 0, 0, 0.03); } -#categoryquestions > tbody > tr.highlight { +table.question-bank-table > tbody > tr.highlight { border: 1px solid #008196; } -#categoryquestions .checkbox { - padding-left: 5px; -} -#categoryquestions .checkbox input[type=checkbox] { +table.question-bank-table .checkbox input[type=checkbox] { margin-left: 0; float: none; } -#categoryquestions .iconcol { +table.question-bank-table .iconcol { padding: 3px; box-sizing: content-box; } -#categoryquestions .iconcol .icon { +table.question-bank-table .iconcol .icon { margin: 0; width: 12px; height: 12px; } -#categoryquestions label { +table.question-bank-table label { margin: 0; display: block; } -#categoryquestions .header { +table.question-bank-table .header { text-align: left; + min-width: min-content; +} +table.question-bank-table .header.sortable-list-current-position { + background-color: #a2cff8; +} +table.question-bank-table .header.sortable-list-is-dragged { + background-color: #fff; + opacity: 0.85; +} +table.question-bank-table .header .header-text > div { + display: inline-block; +} +table.question-bank-table .header .dropdown-toggle::after { + margin-left: 0; } #page-mod-quiz-edit div.questionbankwindow div.header { @@ -32553,8 +32567,8 @@ body.path-question-type .mform fieldset.hidden { } } @media (max-width: 991.98px) { - #categoryquestions td, - #categoryquestions th { + .question-bank-table td, + .question-bank-table th { max-width: 75vw; } } diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index e9bbe18974d..78f09c94fd0 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -32007,46 +32007,60 @@ a.ygtvspacer:hover { display: block; } -#categoryquestions { +table.question-bank-table { margin: 0; + background-color: #fff; + table-layout: fixed; + overflow-x: scroll; + width: min-content; } -#categoryquestions td, -#categoryquestions th { - padding: 0 0.2em; +table.question-bank-table td, +table.question-bank-table th { max-width: 40vw; + width: max-content; } -#categoryquestions th { +table.question-bank-table th { text-align: left; - font-weight: normal; } -#categoryquestions > tbody > tr.r1 { +table.question-bank-table > tbody > tr.r1 { background-color: rgba(0, 0, 0, 0.03); } -#categoryquestions > tbody > tr.highlight { +table.question-bank-table > tbody > tr.highlight { border: 1px solid #008196; } -#categoryquestions .checkbox { - padding-left: 5px; -} -#categoryquestions .checkbox input[type=checkbox] { +table.question-bank-table .checkbox input[type=checkbox] { margin-left: 0; float: none; } -#categoryquestions .iconcol { +table.question-bank-table .iconcol { padding: 3px; box-sizing: content-box; } -#categoryquestions .iconcol .icon { +table.question-bank-table .iconcol .icon { margin: 0; width: 12px; height: 12px; } -#categoryquestions label { +table.question-bank-table label { margin: 0; display: block; } -#categoryquestions .header { +table.question-bank-table .header { text-align: left; + min-width: min-content; +} +table.question-bank-table .header.sortable-list-current-position { + background-color: #a2cff8; +} +table.question-bank-table .header.sortable-list-is-dragged { + background-color: #fff; + opacity: 0.85; +} +table.question-bank-table .header .header-text > div { + display: inline-block; +} +table.question-bank-table .header .dropdown-toggle::after { + margin-left: 0; } #page-mod-quiz-edit div.questionbankwindow div.header { @@ -32553,8 +32567,8 @@ body.path-question-type .mform fieldset.hidden { } } @media (max-width: 991.98px) { - #categoryquestions td, - #categoryquestions th { + .question-bank-table td, + .question-bank-table th { max-width: 75vw; } } diff --git a/theme/upgrade.txt b/theme/upgrade.txt index adaab2ef94e..593d81e31e5 100644 --- a/theme/upgrade.txt +++ b/theme/upgrade.txt @@ -3,6 +3,7 @@ information provided here is intended especially for theme designer. === 4.3 === * The core_renderer::htmllize_file_tree method has been deprecated. This was missed before Moodle 2.0. +* CSS selectors using #categoryquestions have been changed to use .question-bank-table, see question/upgrade.txt === 4.2 === * The moodle-core-popuphelp YUI modal has been removed. It has not been actively used in Moodle since 3.3. It should be replaced with appropriate ESM/AMD JavaScript.