From c312a9871c7583bb97579ade8d80a3085d60378f Mon Sep 17 00:00:00 2001 From: Tasio Date: Thu, 8 May 2025 09:08:46 +0200 Subject: [PATCH] MDL-85397 theme: update reports to use container queries With container queries, responsive design is no longer limited to the full browser width. For example, we can now display the report in a compact side panel, and it will automatically adapt its styling to suit smaller spaces. --- theme/boost/scss/moodle/reportbuilder.scss | 13 ++- theme/boost/style/moodle.css | 123 +++++++++++---------- theme/classic/style/moodle.css | 123 +++++++++++---------- 3 files changed, 133 insertions(+), 126 deletions(-) diff --git a/theme/boost/scss/moodle/reportbuilder.scss b/theme/boost/scss/moodle/reportbuilder.scss index 9b68b3d04c2..afa686e6e38 100644 --- a/theme/boost/scss/moodle/reportbuilder.scss +++ b/theme/boost/scss/moodle/reportbuilder.scss @@ -435,18 +435,19 @@ $rb-sortable-list-drag-color: lighten($primary, 40%); } // Logic to apply card-view mixin when necessary +.reportbuilder-report { + container-type: inline-size; /* stylelint-disable-line */ +} .reportbuilder-report[data-report-type="0"]:not([data-editing]) { - // Report card view for small screens (if not forcing table). - @include media-breakpoint-down(sm) { + // Report card view for small containers (if not forcing table). + @container (width < #{map-get($grid-breakpoints, sm)}) { /* stylelint-disable-line */ &:not([data-force-table]) { @include table-cards; } } // Report card view for bigger screens (if forcing card). - @include media-breakpoint-up(sm) { - &[data-force-card] { - @include table-cards; - } + &[data-force-card] { + @include table-cards; } } diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index bdf32041baa..dda56ba5bb8 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -40174,7 +40174,12 @@ div.editor_atto_toolbar button .icon { margin-right: 0; } -@media (max-width: 575.98px) { +.reportbuilder-report { + container-type: inline-size; /* stylelint-disable-line */ +} + +@container (width < 576px) { + .reportbuilder-report[data-report-type="0"]:not([data-editing]) { /* stylelint-disable-line */ } .reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) table.reportbuilder-table { --bs-table-striped-bg: var(--bs-body-bg); --bs-table-hover-bg: var(--bs-body-bg); @@ -40234,65 +40239,63 @@ div.editor_atto_toolbar button .icon { font-weight: bold; } } -@media (min-width: 576px) { - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table { - --bs-table-striped-bg: var(--bs-body-bg); - --bs-table-hover-bg: var(--bs-body-bg); - } - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table thead { - display: none; - } - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr { - display: flex; - flex-direction: column; - margin: 0.5rem 0; - padding: 0.25rem 0.5rem 0 0.5rem; - word-wrap: break-word; - background-clip: border-box; - border: var(--bs-border-width) solid var(--bs-border-color-translucent); - border-radius: var(--bs-border-radius); - } - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr.emptyrow { - display: none; - } - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr:not(.show) td[data-cardviewhidden] { - display: none; - } - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td { - display: block; - min-height: 3.6rem; - padding: 0.5rem 0.25rem; - border: none; - } - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td::before { - content: attr(data-cardtitle); - display: block; - text-transform: uppercase; - font-size: 70%; - color: #343a40; - } - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td:not([data-cardtitle]) { - min-height: 3rem; - } - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td:not(:first-child):not(.card-toggle) { - border-top: var(--bs-border-width) solid var(--bs-border-color-translucent); - } - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td:first-child { - padding-right: 2rem; - } - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td.card-toggle { - display: block !important; /* stylelint-disable-line declaration-no-important */ - position: absolute; - right: 10px; - } - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td.card-toggle button { - padding: 0 0.5rem; - color: #6a737b; - } - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td.card-toggle button i { - font-size: 1.5em; - font-weight: bold; - } +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table { + --bs-table-striped-bg: var(--bs-body-bg); + --bs-table-hover-bg: var(--bs-body-bg); +} +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table thead { + display: none; +} +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr { + display: flex; + flex-direction: column; + margin: 0.5rem 0; + padding: 0.25rem 0.5rem 0 0.5rem; + word-wrap: break-word; + background-clip: border-box; + border: var(--bs-border-width) solid var(--bs-border-color-translucent); + border-radius: var(--bs-border-radius); +} +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr.emptyrow { + display: none; +} +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr:not(.show) td[data-cardviewhidden] { + display: none; +} +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td { + display: block; + min-height: 3.6rem; + padding: 0.5rem 0.25rem; + border: none; +} +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td::before { + content: attr(data-cardtitle); + display: block; + text-transform: uppercase; + font-size: 70%; + color: #343a40; +} +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td:not([data-cardtitle]) { + min-height: 3rem; +} +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td:not(:first-child):not(.card-toggle) { + border-top: var(--bs-border-width) solid var(--bs-border-color-translucent); +} +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td:first-child { + padding-right: 2rem; +} +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td.card-toggle { + display: block !important; /* stylelint-disable-line declaration-no-important */ + position: absolute; + right: 10px; +} +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td.card-toggle button { + padding: 0 0.5rem; + color: #6a737b; +} +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td.card-toggle button i { + font-size: 1.5em; + font-weight: bold; } .courseindex .courseindex-item { diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index 494f73a49f0..59d7ce073fd 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -40108,7 +40108,12 @@ div.editor_atto_toolbar button .icon { margin-right: 0; } -@media (max-width: 575.98px) { +.reportbuilder-report { + container-type: inline-size; /* stylelint-disable-line */ +} + +@container (width < 576px) { + .reportbuilder-report[data-report-type="0"]:not([data-editing]) { /* stylelint-disable-line */ } .reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) table.reportbuilder-table { --bs-table-striped-bg: var(--bs-body-bg); --bs-table-hover-bg: var(--bs-body-bg); @@ -40168,65 +40173,63 @@ div.editor_atto_toolbar button .icon { font-weight: bold; } } -@media (min-width: 576px) { - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table { - --bs-table-striped-bg: var(--bs-body-bg); - --bs-table-hover-bg: var(--bs-body-bg); - } - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table thead { - display: none; - } - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr { - display: flex; - flex-direction: column; - margin: 0.5rem 0; - padding: 0.25rem 0.5rem 0 0.5rem; - word-wrap: break-word; - background-clip: border-box; - border: var(--bs-border-width) solid var(--bs-border-color-translucent); - border-radius: var(--bs-border-radius); - } - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr.emptyrow { - display: none; - } - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr:not(.show) td[data-cardviewhidden] { - display: none; - } - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td { - display: block; - min-height: 3.6rem; - padding: 0.5rem 0.25rem; - border: none; - } - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td::before { - content: attr(data-cardtitle); - display: block; - text-transform: uppercase; - font-size: 70%; - color: #343a40; - } - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td:not([data-cardtitle]) { - min-height: 3rem; - } - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td:not(:first-child):not(.card-toggle) { - border-top: var(--bs-border-width) solid var(--bs-border-color-translucent); - } - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td:first-child { - padding-right: 2rem; - } - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td.card-toggle { - display: block !important; /* stylelint-disable-line declaration-no-important */ - position: absolute; - right: 10px; - } - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td.card-toggle button { - padding: 0 0.5rem; - color: #6a737b; - } - .reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td.card-toggle button i { - font-size: 1.5em; - font-weight: bold; - } +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table { + --bs-table-striped-bg: var(--bs-body-bg); + --bs-table-hover-bg: var(--bs-body-bg); +} +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table thead { + display: none; +} +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr { + display: flex; + flex-direction: column; + margin: 0.5rem 0; + padding: 0.25rem 0.5rem 0 0.5rem; + word-wrap: break-word; + background-clip: border-box; + border: var(--bs-border-width) solid var(--bs-border-color-translucent); + border-radius: var(--bs-border-radius); +} +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr.emptyrow { + display: none; +} +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr:not(.show) td[data-cardviewhidden] { + display: none; +} +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td { + display: block; + min-height: 3.6rem; + padding: 0.5rem 0.25rem; + border: none; +} +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td::before { + content: attr(data-cardtitle); + display: block; + text-transform: uppercase; + font-size: 70%; + color: #343a40; +} +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td:not([data-cardtitle]) { + min-height: 3rem; +} +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td:not(:first-child):not(.card-toggle) { + border-top: var(--bs-border-width) solid var(--bs-border-color-translucent); +} +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td:first-child { + padding-right: 2rem; +} +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td.card-toggle { + display: block !important; /* stylelint-disable-line declaration-no-important */ + position: absolute; + right: 10px; +} +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td.card-toggle button { + padding: 0 0.5rem; + color: #6a737b; +} +.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr td.card-toggle button i { + font-size: 1.5em; + font-weight: bold; } .courseindex .courseindex-item {