L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-85397 theme: update reports to use container queries

Browse Source 
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.
This commit is contained in:
Tasio
2025-05-14 15:50:03 +02:00
parent 6999197243
commit c312a9871c
3 changed files with 133 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
theme/boost/scss/moodle/reportbuilder.scss
+7 -6
View File
@@ -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;
}
}
theme/boost/style/moodle.css
+63 -60
View File
@@ -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 {
theme/classic/style/moodle.css
+63 -60
View File
@@ -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 {