mirror of
https://github.com/moodle/moodle.git
synced 2025-01-18 22:08:20 +01:00
MDL-75943 reportbuilder: Refactor scss to support force card/table view
This commit is contained in:
Mikel Martín
parent
91cc98ed3d
commit
97be42d99b
@ -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.
|
||||
|
||||
@ -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) {
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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; } }
|
||||
|
||||
|
||||
@ -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; } }
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user