From ad14d58dc5166493c477e61d3fd18b28be82b1da Mon Sep 17 00:00:00 2001 From: =?utf8?q?Mikel=20Mart=C3=ADn?= Date: Tue, 8 Apr 2025 12:30:48 +0200 Subject: [PATCH] MDL-85077 theme_boost: Fix responsive tables after BS5 upgrade - Replace class 'no-overflow' with 'table-responsive' for responsive tables. - Fix dropdown positioning inside responsive tables. - Fix visually-hidden elements inside tables generating incorrect page scrolling. --- lib/classes/output/html_writer.php | 2 +- lib/table/classes/flexible_table.php | 2 +- lib/tests/output/html_writer_test.php | 4 +- mod/assign/gradingtable.php | 2 +- mod/data/index.php | 2 +- mod/forum/templates/discussion_list.mustache | 492 +++++++++--------- mod/wiki/pagelib.php | 2 +- .../classes/table/base_report_table.php | 2 +- theme/boost/scss/moodle/core.scss | 16 - theme/boost/scss/moodle/tables.scss | 16 + theme/boost/style/moodle.css | 24 +- theme/classic/style/moodle.css | 24 +- 12 files changed, 293 insertions(+), 295 deletions(-) diff --git a/lib/classes/output/html_writer.php b/lib/classes/output/html_writer.php index 166c44b1bb9..b1e185c415d 100644 --- a/lib/classes/output/html_writer.php +++ b/lib/classes/output/html_writer.php @@ -561,7 +561,7 @@ class html_writer { } } if (empty($table->attributes['class'])) { - $table->attributes['class'] = 'generaltable'; + $table->attributes['class'] = 'generaltable table'; } if (!empty($table->tablealign)) { $table->attributes['class'] .= ' boxalign' . $table->tablealign; diff --git a/lib/table/classes/flexible_table.php b/lib/table/classes/flexible_table.php index 7546419fb5b..8b2a955e835 100644 --- a/lib/table/classes/flexible_table.php +++ b/lib/table/classes/flexible_table.php @@ -1866,7 +1866,7 @@ class flexible_table { // Start of main data table. if ($this->responsive) { - echo html_writer::start_tag('div', ['class' => 'no-overflow']); + echo html_writer::start_tag('div', ['class' => 'table-responsive']); } echo html_writer::start_tag('table', $this->attributes) . $this->render_caption(); } diff --git a/lib/tests/output/html_writer_test.php b/lib/tests/output/html_writer_test.php index afb88b4915e..29e34fd6765 100644 --- a/lib/tests/output/html_writer_test.php +++ b/lib/tests/output/html_writer_test.php @@ -315,7 +315,7 @@ final class html_writer_test extends \basic_testcase { $output = html_writer::table($table); $expected = << + @@ -344,7 +344,7 @@ EOF; $output = html_writer::table($table); $expected = << +
A table of meaningless data.
diff --git a/mod/assign/gradingtable.php b/mod/assign/gradingtable.php index 24b3b0b7b92..b81ee619e01 100644 --- a/mod/assign/gradingtable.php +++ b/mod/assign/gradingtable.php @@ -1934,7 +1934,7 @@ class assign_grading_table extends table_sql implements renderable { // Start of main data table. if ($this->responsive) { - echo html_writer::start_tag('div', ['class' => 'no-overflow']); + echo html_writer::start_tag('div', ['class' => 'table-responsive']); } echo html_writer::start_tag('table', $this->attributes) . $this->render_caption(); } diff --git a/mod/data/index.php b/mod/data/index.php index 8cbf07dad72..a3b273aaa50 100644 --- a/mod/data/index.php +++ b/mod/data/index.php @@ -147,5 +147,5 @@ foreach ($datas as $data) { } echo "
"; -echo html_writer::tag('div', html_writer::table($table), array('class'=>'no-overflow')); +echo html_writer::tag('div', html_writer::table($table), ['class' => 'table-responsive']); echo $OUTPUT->footer(); diff --git a/mod/forum/templates/discussion_list.mustache b/mod/forum/templates/discussion_list.mustache index 3097bfa05e7..50146a73bcf 100644 --- a/mod/forum/templates/discussion_list.mustache +++ b/mod/forum/templates/discussion_list.mustache @@ -93,271 +93,269 @@ {{{ pagination }}} {{/discussion_top_pagination}} {{$discussion_list_output}} -
-
-
Who even knows?
fred MDK
- - {{$discussion_list_header}} - - - - + + {{/summaries}} + + {{/discussion_list_body}} +
- {{#str}}status{{/str}} - - {{#state.sortorder.isdiscussiondesc}} - {{#str}}discussion, mod_forum{{/str}} {{#pix}}t/downlong, core, {{#str}}desc, core{{/str}}{{/pix}} - {{/state.sortorder.isdiscussiondesc}} - {{#state.sortorder.isdiscussionasc}} - {{#str}}discussion, mod_forum{{/str}} {{#pix}}t/uplong, core, {{#str}}asc, core{{/str}}{{/pix}} +
+ + + {{$discussion_list_header}} + + + + - {{#forum.state.groupmode}} - + {{#forum.state.groupmode}} + - {{/forum.state.groupmode}} - + {{/forum.state.groupmode}} + - + - {{#forum.capabilities.viewdiscussions}} - + {{#forum.capabilities.viewdiscussions}} + - {{/forum.capabilities.viewdiscussions}} - {{#forum.capabilities.subscribe}} - - {{/forum.capabilities.subscribe}} - - - - {{/discussion_list_header}} - {{$discussion_list_body}} - - {{#summaries}} - {{! The discussion class is only required for behat tests to identify the row. }} - - - + {{/forum.capabilities.subscribe}} + + + + {{/discussion_list_header}} + {{$discussion_list_body}} + + {{#summaries}} + {{! The discussion class is only required for behat tests to identify the row. }} + + + + {{#forum.state.groupmode}} + + {{/forum.state.groupmode}} + - {{/forum.state.groupmode}} - + - + {{#forum.capabilities.viewdiscussions}} + - {{#forum.capabilities.viewdiscussions}} - - {{/forum.capabilities.viewdiscussions}} - {{#forum.capabilities.subscribe}} - - {{/forum.capabilities.subscribe}} - - - {{/summaries}} - - {{/discussion_list_body}} -
+ {{#str}}status{{/str}} + + {{#state.sortorder.isdiscussiondesc}} + {{#str}}discussion, mod_forum{{/str}} {{#pix}}t/downlong, core, {{#str}}desc, core{{/str}}{{/pix}} + {{/state.sortorder.isdiscussiondesc}} + {{#state.sortorder.isdiscussionasc}} + {{#str}}discussion, mod_forum{{/str}} {{#pix}}t/uplong, core, {{#str}}asc, core{{/str}}{{/pix}} + {{/state.sortorder.isdiscussionasc}} + {{^state.sortorder.isdiscussiondesc}} + {{^state.sortorder.isdiscussionasc}} + {{#str}}discussion, mod_forum{{/str}} {{/state.sortorder.isdiscussionasc}} - {{^state.sortorder.isdiscussiondesc}} - {{^state.sortorder.isdiscussionasc}} - {{#str}}discussion, mod_forum{{/str}} - {{/state.sortorder.isdiscussionasc}} - {{/state.sortorder.isdiscussiondesc}} - - {{#state.sortorder.isgroupdesc}} - {{#str}}group{{/str}} {{#pix}}t/downlong, core, {{#str}}desc, core{{/str}}{{/pix}} - {{/state.sortorder.isgroupdesc}} - {{#state.sortorder.isgroupasc}} - {{#str}}group{{/str}} {{#pix}}t/uplong, core, {{#str}}asc, core{{/str}}{{/pix}} + {{/state.sortorder.isdiscussiondesc}} + + {{#state.sortorder.isgroupdesc}} + {{#str}}group{{/str}} {{#pix}}t/downlong, core, {{#str}}desc, core{{/str}}{{/pix}} + {{/state.sortorder.isgroupdesc}} + {{#state.sortorder.isgroupasc}} + {{#str}}group{{/str}} {{#pix}}t/uplong, core, {{#str}}asc, core{{/str}}{{/pix}} + {{/state.sortorder.isgroupasc}} + {{^state.sortorder.isgroupdesc}} + {{^state.sortorder.isgroupasc}} + {{#str}}group{{/str}} {{/state.sortorder.isgroupasc}} - {{^state.sortorder.isgroupdesc}} - {{^state.sortorder.isgroupasc}} - {{#str}}group{{/str}} - {{/state.sortorder.isgroupasc}} - {{/state.sortorder.isgroupdesc}} - - {{#state.sortorder.isstarterdesc}} - {{#str}}startedby, mod_forum{{/str}} {{#pix}}t/downlong, core, {{#str}}desc, core{{/str}}{{/pix}} - {{/state.sortorder.isstarterdesc}} - {{#state.sortorder.isstarterasc}} - {{#str}}startedby, mod_forum{{/str}} {{#pix}}t/uplong, core, {{#str}}asc, core{{/str}}{{/pix}} + {{/state.sortorder.isgroupdesc}} + + {{#state.sortorder.isstarterdesc}} + {{#str}}startedby, mod_forum{{/str}} {{#pix}}t/downlong, core, {{#str}}desc, core{{/str}}{{/pix}} + {{/state.sortorder.isstarterdesc}} + {{#state.sortorder.isstarterasc}} + {{#str}}startedby, mod_forum{{/str}} {{#pix}}t/uplong, core, {{#str}}asc, core{{/str}}{{/pix}} + {{/state.sortorder.isstarterasc}} + {{^state.sortorder.isstarterdesc}} + {{^state.sortorder.isstarterasc}} + {{#str}}startedby, mod_forum{{/str}} {{/state.sortorder.isstarterasc}} - {{^state.sortorder.isstarterdesc}} - {{^state.sortorder.isstarterasc}} - {{#str}}startedby, mod_forum{{/str}} - {{/state.sortorder.isstarterasc}} - {{/state.sortorder.isstarterdesc}} - - {{#state.sortorder.islastpostdesc}} - {{#str}}lastpost, mod_forum{{/str}} {{#pix}}t/downlong, core, {{#str}}desc, core{{/str}}{{/pix}} - {{/state.sortorder.islastpostdesc}} - {{#state.sortorder.islastpostasc}} - {{#str}}lastpost, mod_forum{{/str}} {{#pix}}t/uplong, core, {{#str}}asc, core{{/str}}{{/pix}} + {{/state.sortorder.isstarterdesc}} + + {{#state.sortorder.islastpostdesc}} + {{#str}}lastpost, mod_forum{{/str}} {{#pix}}t/downlong, core, {{#str}}desc, core{{/str}}{{/pix}} + {{/state.sortorder.islastpostdesc}} + {{#state.sortorder.islastpostasc}} + {{#str}}lastpost, mod_forum{{/str}} {{#pix}}t/uplong, core, {{#str}}asc, core{{/str}}{{/pix}} + {{/state.sortorder.islastpostasc}} + {{^state.sortorder.islastpostdesc}} + {{^state.sortorder.islastpostasc}} + {{#str}}lastpost, mod_forum{{/str}} {{/state.sortorder.islastpostasc}} - {{^state.sortorder.islastpostdesc}} - {{^state.sortorder.islastpostasc}} - {{#str}}lastpost, mod_forum{{/str}} - {{/state.sortorder.islastpostasc}} - {{/state.sortorder.islastpostdesc}} - - {{#state.sortorder.isrepliesdesc}} - {{#str}}replies, mod_forum{{/str}} {{#pix}}t/downlong, core, {{#str}}desc, core{{/str}}{{/pix}} - {{/state.sortorder.isrepliesdesc}} - {{#state.sortorder.isrepliesasc}} - {{#str}}replies, mod_forum{{/str}} {{#pix}}t/uplong, core, {{#str}}asc, core{{/str}}{{/pix}} + {{/state.sortorder.islastpostdesc}} + + {{#state.sortorder.isrepliesdesc}} + {{#str}}replies, mod_forum{{/str}} {{#pix}}t/downlong, core, {{#str}}desc, core{{/str}}{{/pix}} + {{/state.sortorder.isrepliesdesc}} + {{#state.sortorder.isrepliesasc}} + {{#str}}replies, mod_forum{{/str}} {{#pix}}t/uplong, core, {{#str}}asc, core{{/str}}{{/pix}} + {{/state.sortorder.isrepliesasc}} + {{^state.sortorder.isrepliesdesc}} + {{^state.sortorder.isrepliesasc}} + {{#str}}replies, mod_forum{{/str}} {{/state.sortorder.isrepliesasc}} - {{^state.sortorder.isrepliesdesc}} - {{^state.sortorder.isrepliesasc}} - {{#str}}replies, mod_forum{{/str}} - {{/state.sortorder.isrepliesasc}} - {{/state.sortorder.isrepliesdesc}} - {{#forum.userstate.tracked}} - {{#pix}}t/markasread, core, {{#str}}markallread, mod_forum{{/str}}{{/pix}} - {{/forum.userstate.tracked}} - {{#str}} notsubscribed, mod_forum {{/str}} - {{#str}}actions{{/str}} + {{/state.sortorder.isrepliesdesc}} + {{#forum.userstate.tracked}} + {{#pix}}t/markasread, core, {{#str}}markallread, mod_forum{{/str}}{{/pix}} + {{/forum.userstate.tracked}}
- {{#discussion}} - {{> mod_forum/forum_discussion_favourite_toggle}} - {{/discussion}} - -
-
- {{#discussion.pinned}} - {{#pix}}i/pinned, mod_forum, {{#str}}discussionpinned, mod_forum{{/str}}{{/pix}} - {{/discussion.pinned}} - - {{#shortentext}}100, {{{discussion.name}}}{{/shortentext}} + {{/forum.capabilities.viewdiscussions}} + {{#forum.capabilities.subscribe}} +
{{#str}} notsubscribed, mod_forum {{/str}} + {{#str}}actions{{/str}} +
+ {{#discussion}} + {{> mod_forum/forum_discussion_favourite_toggle}} + {{/discussion}} + +
+
+ {{#discussion.pinned}} + {{#pix}}i/pinned, mod_forum, {{#str}}discussionpinned, mod_forum{{/str}}{{/pix}} + {{/discussion.pinned}} + + {{#shortentext}}100, {{{discussion.name}}}{{/shortentext}} + +
+
+ + {{#str}}locked, forum{{/str}} + + {{#discussion.timed.istimed}} + + + + {{/discussion.timed.istimed}} +
+
+ 		+ {{#discussion.group}} + {{#str}} pictureof, core, {{name}} {{/str}} + {{#urls.userlist}} + + {{#shortentext}}30, {{name}}{{/shortentext}} + {{/urls.userlist}} + {{^urls.userlist}} + {{name}} + {{/urls.userlist}} + {{/discussion.group}} + + {{#firstpostauthor}} +
+
+ {{#str}}pictureof, moodle, {{fullname}}{{/str}}
-
- - {{#str}}locked, forum{{/str}} - - {{#discussion.timed.istimed}} - - - - {{/discussion.timed.istimed}} +
+
{{fullname}}
+
+ {{< core/time_element }} + {{$elementid}}created-{{discussion.id}}{{/elementid}} + {{$timestampval}}{{discussion.times.created}}{{/timestampval}} + {{$userdateformatval}}{{#str}}strftimedatemonthabbr, langconfig{{/str}}{{/userdateformatval}} + {{/core/time_element}} +
- - {{#forum.state.groupmode}} -
- {{#discussion.group}} - {{#str}} pictureof, core, {{name}} {{/str}} - {{#urls.userlist}} - - {{#shortentext}}30, {{name}}{{/shortentext}} - - {{/urls.userlist}} - {{^urls.userlist}} - {{name}} - {{/urls.userlist}} - {{/discussion.group}} - - {{#firstpostauthor}} -
-
- {{#str}}pictureof, moodle, {{fullname}}{{/str}} -
-
-
{{fullname}}
-
- {{< core/time_element }} - {{$elementid}}created-{{discussion.id}}{{/elementid}} - {{$timestampval}}{{discussion.times.created}}{{/timestampval}} - {{$userdateformatval}}{{#str}}strftimedatemonthabbr, langconfig{{/str}}{{/userdateformatval}} - {{/core/time_element}} -
-
+ {{/firstpostauthor}} +
+ {{! TODO Check q&a, eachuser }} + {{#latestpostauthor}} +
+
+ {{#str}}pictureof, moodle, {{fullname}}{{/str}}
- {{/firstpostauthor}} -
- {{! TODO Check q&a, eachuser }} - {{#latestpostauthor}} -
-
- {{#str}}pictureof, moodle, {{fullname}}{{/str}} -
-
-
{{fullname}}
-
- {{#latestpostid}} - - {{< core/time_element }} - {{$elementid}}modified-{{discussion.id}}{{/elementid}} - {{$timestampval}}{{discussion.times.modified}}{{/timestampval}} - {{$userdateformatval}}{{#str}}strftimedatemonthabbr, langconfig{{/str}}{{/userdateformatval}} - {{/ core/time_element }} - - {{/latestpostid}} -
+
+
{{fullname}}
+
+ {{#latestpostid}} + + {{< core/time_element }} + {{$elementid}}modified-{{discussion.id}}{{/elementid}} + {{$timestampval}}{{discussion.times.modified}}{{/timestampval}} + {{$userdateformatval}}{{#str}}strftimedatemonthabbr, langconfig{{/str}}{{/userdateformatval}} + {{/ core/time_element }} + + {{/latestpostid}}
- {{/latestpostauthor}} +
+ {{/latestpostauthor}} +
+ {{replies}} + {{#forum.userstate.tracked}} + {{#unread}} + {{! TODO Rewrite as AJAX}} + + + {{unread}} + + + {{/unread}} + {{/forum.userstate.tracked}} - {{replies}} - {{#forum.userstate.tracked}} - {{#unread}} - {{! TODO Rewrite as AJAX}} - - - {{unread}} - - - {{/unread}} - {{/forum.userstate.tracked}} - - {{#discussion}} -
- - -
- {{/discussion}} - 		+ {{/forum.capabilities.viewdiscussions}} + {{#forum.capabilities.subscribe}} + {{#discussion}} -
- {{#hasanyactions}} -
- {{> mod_forum/forum_action_menu}} -
- {{/hasanyactions}} +
+ +
{{/discussion}}
-
+ {{/forum.capabilities.subscribe}} + 		+ {{#discussion}} +
+ {{#hasanyactions}} +
+ {{> mod_forum/forum_action_menu}} +
+ {{/hasanyactions}} +
+ {{/discussion}} +
{{/discussion_list_output}} {{$discussion_bottom_pagination}} diff --git a/mod/wiki/pagelib.php b/mod/wiki/pagelib.php index c12d376f35e..af159a5edb6 100644 --- a/mod/wiki/pagelib.php +++ b/mod/wiki/pagelib.php @@ -715,7 +715,7 @@ class page_wiki_comments extends page_wiki { $t->data[] = $row3; } - echo html_writer::tag('div', html_writer::table($t), array('class'=>'no-overflow')); + echo html_writer::tag('div', html_writer::table($t), ['class' => 'table-responsive']); } } diff --git a/reportbuilder/classes/table/base_report_table.php b/reportbuilder/classes/table/base_report_table.php index 4d4734d4b6d..f4dfe6d488b 100644 --- a/reportbuilder/classes/table/base_report_table.php +++ b/reportbuilder/classes/table/base_report_table.php @@ -317,7 +317,7 @@ abstract class base_report_table extends table_sql implements dynamic, renderabl $this->set_caption($this->report::get_name(), ['class' => 'visually-hidden']); - echo html_writer::start_tag('div'); + echo html_writer::start_tag('div', ['class' => 'table-responsive']); echo html_writer::start_tag('table', $this->attributes) . $this->render_caption(); } } diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss index ce58c6f9e2c..1c03a712db7 100644 --- a/theme/boost/scss/moodle/core.scss +++ b/theme/boost/scss/moodle/core.scss @@ -405,22 +405,6 @@ form.popupform div { overflow: auto; } -// Position required for table sizing inside a flex container. -.no-overflow > .generaltable { - margin-bottom: 0; -} - -.no-overflow, -.table-responsive { - .generaltable { - .visually-hidden, - .accesshide { - position: relative; - display: block; - } - } -} - // Accessibility features // Accessibility: text 'seen' by screen readers but not visual users. diff --git a/theme/boost/scss/moodle/tables.scss b/theme/boost/scss/moodle/tables.scss index 1591c63254d..e8627f08dcc 100644 --- a/theme/boost/scss/moodle/tables.scss +++ b/theme/boost/scss/moodle/tables.scss @@ -77,3 +77,19 @@ table { font-size: 3rem; } } + +.table-responsive { + // Fix dropdown menu position inside responsive tables. + .dropdown { + position: static !important; /* stylelint-disable-line declaration-no-important */ + } + // Fix visually hidden text in responsive tables. + .table { + margin-bottom: 0; + .visually-hidden, + .accesshide { + position: relative !important; /* stylelint-disable-line declaration-no-important */ + display: block; + } + } +} diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index 8dd69739ada..d8d33342ab3 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -25968,18 +25968,6 @@ form.popupform div { overflow: auto; } -.no-overflow > .generaltable { - margin-bottom: 0; -} - -.no-overflow .generaltable .visually-hidden, -.no-overflow .generaltable .accesshide, -.table-responsive .generaltable .visually-hidden, -.table-responsive .generaltable .accesshide { - position: relative; - display: block; -} - .accesshide { width: 1px !important; height: 1px !important; @@ -37126,6 +37114,18 @@ table .sticky-column { font-size: 3rem; } +.table-responsive .dropdown { + position: static !important; /* stylelint-disable-line declaration-no-important */ +} +.table-responsive .table { + margin-bottom: 0; +} +.table-responsive .table .visually-hidden, +.table-responsive .table .accesshide { + position: relative !important; /* stylelint-disable-line declaration-no-important */ + display: block; +} + /** * File buttons.scss. * Contains styles for buttons. diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index ab4598b41dd..f187802fec7 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -25968,18 +25968,6 @@ form.popupform div { overflow: auto; } -.no-overflow > .generaltable { - margin-bottom: 0; -} - -.no-overflow .generaltable .visually-hidden, -.no-overflow .generaltable .accesshide, -.table-responsive .generaltable .visually-hidden, -.table-responsive .generaltable .accesshide { - position: relative; - display: block; -} - .accesshide { width: 1px !important; height: 1px !important; @@ -37126,6 +37114,18 @@ table .sticky-column { font-size: 3rem; } +.table-responsive .dropdown { + position: static !important; /* stylelint-disable-line declaration-no-important */ +} +.table-responsive .table { + margin-bottom: 0; +} +.table-responsive .table .visually-hidden, +.table-responsive .table .accesshide { + position: relative !important; /* stylelint-disable-line declaration-no-important */ + display: block; +} + /** * File buttons.scss. * Contains styles for buttons. -- 2.43.0