mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-01-18 22:08:20 +01:00
Code Issues Projects Releases Wiki Activity

MDL-75943 reportbuilder: Refactor scss to support force card/table view

Browse Source
This commit is contained in:
Mikel Martín 2022-10-20 12:28:49 +02:00
parent 91cc98ed3d
commit 97be42d99b
4 changed files with 142 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
reportbuilder/upgrade.txt
View File

@ -3,6 +3,9 @@ Information provided here is intended especially for developers.
=== 4.2 ===
* New methods `[add|get]_attributes` added to report base class, for including custom attributes in report container HTML
* The following attributes can be added to custom reports in order to control card view display (via the `add_attributes` method):
- `data-force-card` to force cards view
- `data-force-table` to force table view
=== 4.1 ===
* New method `add_action_divider()` in base system report class, to allow adding a divider to the action menu.

18
theme/boost/scss/moodle/reportbuilder.scss
View File

@ -282,10 +282,7 @@ $rb-right-sidebar-width: 350px;
}
}
/**
* Audiences.
*/
/* Audiences. */
.reportbuilder-audiences-container {
/* 'OR' separator. */
.audience-separator {
@ -378,10 +375,17 @@ $rb-right-sidebar-width: 350px;
}
}
}
/* Report table card view for small screens */
.reportbuilder-report[data-report-type="0"]:not([data-editing]) {
// Report card view for small screens (if not forcing table).
@include media-breakpoint-down(xs) {
@include table-cards;
&: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;
}
}
}

81
theme/boost/style/moodle.css
View File

@ -21575,9 +21575,7 @@ div.editor_atto_toolbar button .icon {
.reportbuilder-toggle-card .toggle-card-button.collapsed .expanded-icon-container {
display: none; }
/**
* Audiences.
*/
/* Audiences. */
.reportbuilder-audiences-container {
/* 'OR' separator. */
/* Card action icons. */ }
@ -21595,11 +21593,10 @@ div.editor_atto_toolbar button .icon {
margin-right: 0; }
/* Report table card view styles */
/* Report table card view for small screens */
@media (max-width: 575.98px) {
.reportbuilder-report[data-report-type="0"]:not([data-editing]) table.reportbuilder-table thead {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) table.reportbuilder-table thead {
display: none; }
.reportbuilder-report[data-report-type="0"]:not([data-editing]) table.reportbuilder-table tr {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) table.reportbuilder-table tr {
display: flex;
flex-direction: column;
margin: .5rem 0;
@ -21610,39 +21607,89 @@ div.editor_atto_toolbar button .icon {
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.5rem; }
.reportbuilder-report[data-report-type="0"]:not([data-editing]) table.reportbuilder-table tr:hover {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) table.reportbuilder-table tr:hover {
background-color: #fff !important;
/* stylelint-disable-line declaration-no-important */ }
.reportbuilder-report[data-report-type="0"]:not([data-editing]) table.reportbuilder-table tr.emptyrow {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) table.reportbuilder-table tr.emptyrow {
display: none; }
.reportbuilder-report[data-report-type="0"]:not([data-editing]) table.reportbuilder-table tr:not(.show) td[data-cardviewhidden] {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) table.reportbuilder-table tr:not(.show) td[data-cardviewhidden] {
display: none; }
.reportbuilder-report[data-report-type="0"]:not([data-editing]) table.reportbuilder-table tr td {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) table.reportbuilder-table tr td {
display: block;
min-height: 3.6rem;
padding: .5rem .25rem;
border: none; }
.reportbuilder-report[data-report-type="0"]:not([data-editing]) table.reportbuilder-table tr td::before {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) 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]) table.reportbuilder-table tr td:not([data-cardtitle]) {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) table.reportbuilder-table tr td:not([data-cardtitle]) {
min-height: 3rem; }
.reportbuilder-report[data-report-type="0"]:not([data-editing]) table.reportbuilder-table tr td:not(:first-child):not(.card-toggle) {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) table.reportbuilder-table tr td:not(:first-child):not(.card-toggle) {
border-top: 1px solid rgba(0, 0, 0, 0.125); }
.reportbuilder-report[data-report-type="0"]:not([data-editing]) table.reportbuilder-table tr td:first-child {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) table.reportbuilder-table tr td:first-child {
padding-right: 2rem; }
.reportbuilder-report[data-report-type="0"]:not([data-editing]) table.reportbuilder-table tr td.card-toggle {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) 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]) table.reportbuilder-table tr td.card-toggle button {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) table.reportbuilder-table tr td.card-toggle button {
padding: 0 .5rem;
color: #6a737b; }
.reportbuilder-report[data-report-type="0"]:not([data-editing]) table.reportbuilder-table tr td.card-toggle button i {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) table.reportbuilder-table tr td.card-toggle button i {
font-size: 1.5em;
font-weight: bold; } }
@media (min-width: 576px) {
.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: .5rem 0;
padding: .25rem .5rem 0 .5rem;
background-color: #fff !important;
/* stylelint-disable-line declaration-no-important */
word-wrap: break-word;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.5rem; }
.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr:hover {
background-color: #fff !important;
/* stylelint-disable-line declaration-no-important */ }
.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: .5rem .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: 1px solid rgba(0, 0, 0, 0.125); }
.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 .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; } }

81
theme/classic/style/moodle.css
View File

@ -21521,9 +21521,7 @@ div.editor_atto_toolbar button .icon {
.reportbuilder-toggle-card .toggle-card-button.collapsed .expanded-icon-container {
display: none; }
/**
* Audiences.
*/
/* Audiences. */
.reportbuilder-audiences-container {
/* 'OR' separator. */
/* Card action icons. */ }
@ -21541,11 +21539,10 @@ div.editor_atto_toolbar button .icon {
margin-right: 0; }
/* Report table card view styles */
/* Report table card view for small screens */
@media (max-width: 575.98px) {
.reportbuilder-report[data-report-type="0"]:not([data-editing]) table.reportbuilder-table thead {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) table.reportbuilder-table thead {
display: none; }
.reportbuilder-report[data-report-type="0"]:not([data-editing]) table.reportbuilder-table tr {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) table.reportbuilder-table tr {
display: flex;
flex-direction: column;
margin: .5rem 0;
@ -21556,39 +21553,89 @@ div.editor_atto_toolbar button .icon {
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem; }
.reportbuilder-report[data-report-type="0"]:not([data-editing]) table.reportbuilder-table tr:hover {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) table.reportbuilder-table tr:hover {
background-color: #fff !important;
/* stylelint-disable-line declaration-no-important */ }
.reportbuilder-report[data-report-type="0"]:not([data-editing]) table.reportbuilder-table tr.emptyrow {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) table.reportbuilder-table tr.emptyrow {
display: none; }
.reportbuilder-report[data-report-type="0"]:not([data-editing]) table.reportbuilder-table tr:not(.show) td[data-cardviewhidden] {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) table.reportbuilder-table tr:not(.show) td[data-cardviewhidden] {
display: none; }
.reportbuilder-report[data-report-type="0"]:not([data-editing]) table.reportbuilder-table tr td {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) table.reportbuilder-table tr td {
display: block;
min-height: 3.6rem;
padding: .5rem .25rem;
border: none; }
.reportbuilder-report[data-report-type="0"]:not([data-editing]) table.reportbuilder-table tr td::before {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) 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]) table.reportbuilder-table tr td:not([data-cardtitle]) {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) table.reportbuilder-table tr td:not([data-cardtitle]) {
min-height: 3rem; }
.reportbuilder-report[data-report-type="0"]:not([data-editing]) table.reportbuilder-table tr td:not(:first-child):not(.card-toggle) {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) table.reportbuilder-table tr td:not(:first-child):not(.card-toggle) {
border-top: 1px solid rgba(0, 0, 0, 0.125); }
.reportbuilder-report[data-report-type="0"]:not([data-editing]) table.reportbuilder-table tr td:first-child {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) table.reportbuilder-table tr td:first-child {
padding-right: 2rem; }
.reportbuilder-report[data-report-type="0"]:not([data-editing]) table.reportbuilder-table tr td.card-toggle {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) 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]) table.reportbuilder-table tr td.card-toggle button {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) table.reportbuilder-table tr td.card-toggle button {
padding: 0 .5rem;
color: #6a737b; }
.reportbuilder-report[data-report-type="0"]:not([data-editing]) table.reportbuilder-table tr td.card-toggle button i {
.reportbuilder-report[data-report-type="0"]:not([data-editing]):not([data-force-table]) table.reportbuilder-table tr td.card-toggle button i {
font-size: 1.5em;
font-weight: bold; } }
@media (min-width: 576px) {
.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: .5rem 0;
padding: .25rem .5rem 0 .5rem;
background-color: #fff !important;
/* stylelint-disable-line declaration-no-important */
word-wrap: break-word;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem; }
.reportbuilder-report[data-report-type="0"]:not([data-editing])[data-force-card] table.reportbuilder-table tr:hover {
background-color: #fff !important;
/* stylelint-disable-line declaration-no-important */ }
.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: .5rem .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: 1px solid rgba(0, 0, 0, 0.125); }
.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 .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; } }