Skip to content

Commit

Permalink
MDL-77804 reportbuilder: Improve horizontal filter forms UI
Browse files Browse the repository at this point in the history
- Separate Inline forms styles in a different section and improve them
- Re-organize the styles and comments to improve readability and mantainability
- Make defined variables overridable
  • Loading branch information
roland04 committed Oct 10, 2023
1 parent 769c670 commit c5ee19b
Show file tree
Hide file tree
Showing 4 changed files with 362 additions and 373 deletions.
2 changes: 1 addition & 1 deletion reportbuilder/templates/local/filters/header.mustache
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"name": "Date modified"
}
}}
<div class="filter pb-4 mb-3 border-bottom" data-filter-for="{{name}}">
<div class="filter pb-3 mb-3 border-bottom" data-filter-for="{{name}}">
<div class="filter-header d-flex align-items-start justify-content-between">
<div class="filter-name">
{{{name}}}
Expand Down
287 changes: 157 additions & 130 deletions theme/boost/scss/moodle/reportbuilder.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,25 @@
/**
* Reportbuilder.
* Reportbuilder styles.
*/

/* Table */
//
// General styles
//

// Button styles when a toggle button is active.
.reportbuilder-wrapper {
.btn-outline-secondary[data-toggle="collapse"]:not(.collapsed),
.dropdown.show .btn-outline-secondary[data-toggle="dropdown"] {
color: color-yiq($gray-600);
background-color: $gray-600;
border-color: $gray-600;
}
}

//
// Table
//

.reportbuilder-table {
td {
@extend .align-middle;
Expand All @@ -12,71 +29,134 @@
}
}

/* Filters */
.reportbuilder-wrapper {
.filters-dropdown {
width: 27rem;
padding: 0;
z-index: $zindex-modal;
overflow: hidden;
@include media-breakpoint-down(sm) {
width: 100%;
}
.reportbuilder-filters-sidebar {
max-height: calc(100vh - #{$navbar-height} - 1rem);
overflow-y: auto;
@include thin-scrolls($white);
}
//
// Filters
//

$rb-filters-dropdown-width: 27rem !default;

.reportbuilder-wrapper .filters-dropdown {
width: $rb-filters-dropdown-width;
padding: 0;
z-index: $zindex-modal;
overflow: hidden;
@include media-breakpoint-down(sm) {
width: 100%;
}
.reportbuilder-filters-wrapper,
.reportbuilder-conditions-list {
.mform {
&.full-width-labels {
.fitem.row {
> .col-md-3,
> .col-md-9 {
flex: 0 0 100%;
max-width: 100%;
}
.fdate_selector {
flex-wrap: wrap;
}
}
}
.reportbuilder-filters-sidebar {
max-height: calc(100vh - #{$navbar-height} - 1rem);
overflow-y: auto;
@include thin-scrolls($white);
.filter {
.filter-header {
font-size: $h5-font-size;
.filter-name {
font-size: $font-size-base;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: map-get($spacers, 3);
}
.form-group {
margin-bottom: 0;
max-width: 100%;
> span {
max-width: 100%;
}
.filter-name:hover {
white-space: normal;
text-overflow: clip;
word-break: break-all;
}
}
.filter {
.filter-header {
font-size: $h5-font-size;
.filter-name {
font-size: 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 1rem;
}
.filter-name:hover {
white-space: normal;
text-overflow: clip;
word-break: break-all;
}
}
}

//
// Inline forms
//

.reportbuilder-filters-wrapper,
.reportbuilder-conditions-list {
.mform.full-width-labels {
.fdate_selector {
flex-wrap: wrap;
}
.form-group {
margin-bottom: 0;
max-width: 100%;
}
.form-group:not(.row):last-child {
flex: 1;
min-width: 0;
span,
.custom-select {
width: 100%;
}
}
}
}

/**
* Custom Reports.
*/
//
// Custom Reports
//

$rb-left-sidebar-width: 250px !default;
$rb-right-sidebar-width: 350px !default;

$rb-left-sidebar-width: 250px;
$rb-right-sidebar-width: 350px;
// Reportbuilder full page layout

@include media-breakpoint-up(lg) {
$tabs-height: 83px;
$sidebar-margin-top: $navbar-height + $tabs-height + 20px;
.path-admin-reportbuilder.pagelayout-popup {
// Fix for behat-site defined in theme/boost/scss/moodle/debug.scss:7 is not needed. Override it.
&.behat-site .fixed-top {
position: fixed;
}
#region-main {
border: none;
padding: 0;
}
#maincontent {
visibility: hidden;
}
.dynamictabs .nav-tabs {
position: fixed;
z-index: $zindex-fixed;
width: calc(100% - 35px);
padding-top: 1.25rem;
background-color: $white;
// Small hack to simulate padding bottom after nav-tabs border.
box-shadow: 0 1.25rem 0 $white;
}
.dynamictabs .tab-content {
padding-top: $tabs-height;
}
.reportbuilder-sidebar-menu {
position: fixed;
.reportbuilder-sidebar-menu-cards {
max-height: calc(100vh - #{$sidebar-margin-top} - 52px); // 52px corresponds to "search" input size.
}
}
.reportbuilder-sidebar-settings {
position: fixed;
right: 30px;
max-height: calc(100vh - #{$sidebar-margin-top});
}
.reportbuilder-report[data-editing] .reportbuilder-report-container {
max-height: calc(100vh - #{$sidebar-margin-top});
overflow-y: auto;
@include thin-scrolls($gray-100);
margin-left: calc(#{$rb-left-sidebar-width} + 1rem);
margin-right: calc(#{$rb-right-sidebar-width} + 1rem);
}
.reportbuilder-audiences-container {
margin-left: calc(#{$rb-left-sidebar-width} + 1rem);
}
}
}
// Fix popper.js behaviour in fullpage report (using 'popup' page layout).
#page-admin-reportbuilder-edit #page {
overflow-y: auto;
}

// Main content in "Editor" tab (report table)

.reportbuilder-report-container {
@extend .flex-fill;
Expand All @@ -89,8 +169,7 @@ $rb-right-sidebar-width: 350px;
.reportbuilder-editor-table-container {
overflow-x: auto;
}

/* Custom table headers */
// Custom table headers.
.reportbuilder-table th {
button[data-action="report-remove-column"],
span[data-drag-type="move"] {
Expand All @@ -107,7 +186,8 @@ $rb-right-sidebar-width: 350px;
}
}

/* Sidebar menu */
// Left sidebar menu in "Editor" tab (columns)

.reportbuilder-sidebar-menu {
@include media-breakpoint-up(lg) {
width: $rb-left-sidebar-width;
Expand All @@ -127,7 +207,8 @@ $rb-right-sidebar-width: 350px;
@include thin-scrolls($gray-100);
}

/* Settings sidebar */
// Right sidebar menu in "Editor" tab (settings)

.reportbuilder-sidebar-settings {
overflow-y: auto;
@include thin-scrolls($gray-100);
Expand Down Expand Up @@ -172,17 +253,8 @@ $rb-right-sidebar-width: 350px;
}
}

/* Add button styles when a toggle button is active. */
.reportbuilder-wrapper {
button.btn-outline-secondary[data-toggle="collapse"]:not(.collapsed),
.dropdown.show button.btn-outline-secondary[data-toggle="dropdown"] {
color: color-yiq($gray-600);
background-color: $gray-600;
border-color: $gray-600;
}
}
// Drag&drop styles

/* Drag&drop styles. */
.reportbuilder-sortable-list li,
.reportbuilder-table th,
.reportbuilder-conditions-list .condition {
Expand All @@ -195,62 +267,8 @@ $rb-right-sidebar-width: 350px;
}
}

/* Reportbuilder full page styles. */
@include media-breakpoint-up(lg) {
$tabs-height: 83px;
$sidebar-margin-top: $navbar-height + $tabs-height + 20px;
.path-admin-reportbuilder.pagelayout-popup {
// Fix for behat-site defined in theme/boost/scss/moodle/debug.scss:7 is not needed. Override it.
&.behat-site .fixed-top {
position: fixed;
}
#region-main {
border: none;
padding: 0;
}
#maincontent {
visibility: hidden;
}
.dynamictabs .nav-tabs {
position: fixed;
z-index: $zindex-fixed;
width: calc(100% - 35px);
padding-top: 1.25rem;
background-color: $white;
box-shadow: 0 1.25rem 0 $white; // Small hack to simulate padding bottom after nav-tabs border.
}
.dynamictabs .tab-content {
padding-top: $tabs-height;
}
.reportbuilder-sidebar-menu {
position: fixed;
.reportbuilder-sidebar-menu-cards {
max-height: calc(100vh - #{$sidebar-margin-top} - 52px); // 52px corresponds to "search" input size.
}
}
.reportbuilder-sidebar-settings {
position: fixed;
right: 30px;
max-height: calc(100vh - #{$sidebar-margin-top});
}
.reportbuilder-report[data-editing] .reportbuilder-report-container {
max-height: calc(100vh - #{$sidebar-margin-top});
overflow-y: auto;
@include thin-scrolls($gray-100);
margin-left: calc(#{$rb-left-sidebar-width} + 1rem);
margin-right: calc(#{$rb-right-sidebar-width} + 1rem);
}
.reportbuilder-audiences-container {
margin-left: calc(#{$rb-left-sidebar-width} + 1rem);
}
}
}
// Fix popper.js behaviour in fullpage report (using 'popup' page layout).
#page-admin-reportbuilder-edit #page {
overflow-y: auto;
}
// Toggle cards

/* Toggle cards. */
.reportbuilder-toggle-card {
.card-header {
border-bottom: none;
Expand Down Expand Up @@ -282,9 +300,10 @@ $rb-right-sidebar-width: 350px;
}
}

/* Audiences. */
// Audiences tab

.reportbuilder-audiences-container {
/* 'OR' separator. */
// 'OR' separator.
.audience-separator {
text-transform: uppercase;
&::before,
Expand All @@ -300,7 +319,7 @@ $rb-right-sidebar-width: 350px;
margin-left: 1rem;
}
}
/* Card action icons. */
// Card action icons.
.instance-card {
.card-header {
i.icon {
Expand All @@ -310,7 +329,12 @@ $rb-right-sidebar-width: 350px;
}
}

/* Report table card view styles */
//
// Card view.
//

// Mixin to covert a report table in a card

@mixin table-cards {
table.reportbuilder-table {
thead {
Expand Down Expand Up @@ -375,6 +399,9 @@ $rb-right-sidebar-width: 350px;
}
}
}

// Logic to apply card-view mixin when necessary

.reportbuilder-report[data-report-type="0"]:not([data-editing]) {
// Report card view for small screens (if not forcing table).
@include media-breakpoint-down(xs) {
Expand Down
Loading

0 comments on commit c5ee19b

Please sign in to comment.