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

MDL-74315 reportbuilder: Fix report filters hidden under top navbar

Browse Source 
- Add scrolling to big filter containers to avoid them to be hidden under header
- Remove custom reportbuilder scrollbar mixin and replace it with 'thin-scrolls'
  standard mixin
This commit is contained in:
Mikel Martín
2022-10-18 15:34:02 +02:00
parent 3d2710653e
commit 320d99378c
3 changed files with 120 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
theme/boost/scss/moodle/reportbuilder.scss
+14 -23
View File
@@ -17,9 +17,16 @@
.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);
}
}
.reportbuilder-filters-wrapper,
.reportbuilder-conditions-list {
@@ -64,26 +71,6 @@
}
}
/**
* Styled scrollbar with left padding for webkit browsers.
*/
@mixin reportbuilder-scrollbar() {
$inner-scrollbar-thumb: $secondary;
$inner-scrollbar-track: lighten($secondary, 40%);
&::-webkit-scrollbar {
-webkit-appearance: none;
appearance: none;
}
&::-webkit-scrollbar-thumb {
background-color: $inner-scrollbar-thumb;
border-left: 5px solid $white;
}
&::-webkit-scrollbar-track {
background-color: $inner-scrollbar-track;
border-left: 5px solid $white;
}
}
/**
* Custom Reports.
*/
@@ -134,13 +121,13 @@ $rb-right-sidebar-width: 350px;
}
.reportbuilder-sidebar-menu-cards {
overflow-y: auto;
@include reportbuilder-scrollbar;
@include thin-scrolls($gray-100);
}
/* Settings sidebar */
.reportbuilder-sidebar-settings {
overflow-y: auto;
@include reportbuilder-scrollbar;
@include thin-scrolls($gray-100);
@include media-breakpoint-up(lg) {
width: $rb-right-sidebar-width;
flex-shrink: 0;
@@ -246,7 +233,7 @@ $rb-right-sidebar-width: 350px;
.reportbuilder-report[data-editing] .reportbuilder-report-container {
max-height: calc(100vh - #{$sidebar-margin-top});
overflow-y: auto;
@include reportbuilder-scrollbar;
@include thin-scrolls($gray-100);
margin-left: calc(#{$rb-left-sidebar-width} + 1rem);
margin-right: calc(#{$rb-right-sidebar-width} + 1rem);
}
@@ -255,6 +242,10 @@ $rb-right-sidebar-width: 350px;
}
}
}
// Fix popper.js behaviour in fullpage report (using 'popup' page layout).
#page-admin-reportbuilder-edit #page {
overflow-y: auto;
}
/* Toggle cards. */
.reportbuilder-toggle-card {
theme/boost/style/moodle.css
+53 -27
View File
@@ -21177,10 +21177,27 @@ div.editor_atto_toolbar button .icon {
/* Filters */
.reportbuilder-wrapper .filters-dropdown {
width: 27rem;
padding: 0; }
padding: 0;
z-index: 1050;
overflow: hidden; }
@media (max-width: 767.98px) {
.reportbuilder-wrapper .filters-dropdown {
width: 100%; } }
.reportbuilder-wrapper .filters-dropdown .reportbuilder-filters-sidebar {
max-height: calc(100vh - 60px - 1rem);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #6a737b #fff; }
.reportbuilder-wrapper .filters-dropdown .reportbuilder-filters-sidebar::-webkit-scrollbar {
width: 12px; }
.reportbuilder-wrapper .filters-dropdown .reportbuilder-filters-sidebar::-webkit-scrollbar-track {
background: #fff; }
.reportbuilder-wrapper .filters-dropdown .reportbuilder-filters-sidebar::-webkit-scrollbar-thumb {
background-color: #6a737b;
border-radius: 20px;
border: 3px solid #fff; }
.reportbuilder-wrapper .filters-dropdown .reportbuilder-filters-sidebar::-webkit-scrollbar-thumb:hover {
background-color: #495057; }
.reportbuilder-wrapper .reportbuilder-filters-wrapper .mform.full-width-labels .fitem.row > .col-md-3,
.reportbuilder-wrapper .reportbuilder-filters-wrapper .mform.full-width-labels .fitem.row > .col-md-9,
@@ -21217,9 +21234,6 @@ div.editor_atto_toolbar button .icon {
text-overflow: clip;
word-break: break-all; }
/**
* Styled scrollbar with left padding for webkit browsers.
*/
/**
* Custom Reports.
*/
@@ -21255,29 +21269,35 @@ div.editor_atto_toolbar button .icon {
font-size: 12px; }
.reportbuilder-sidebar-menu-cards {
overflow-y: auto; }
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #6a737b #f8f9fa; }
.reportbuilder-sidebar-menu-cards::-webkit-scrollbar {
-webkit-appearance: none;
appearance: none; }
.reportbuilder-sidebar-menu-cards::-webkit-scrollbar-thumb {
background-color: #ced4da;
border-left: 5px solid #fff; }
width: 12px; }
.reportbuilder-sidebar-menu-cards::-webkit-scrollbar-track {
background-color: white;
border-left: 5px solid #fff; }
background: #f8f9fa; }
.reportbuilder-sidebar-menu-cards::-webkit-scrollbar-thumb {
background-color: #6a737b;
border-radius: 20px;
border: 3px solid #f8f9fa; }
.reportbuilder-sidebar-menu-cards::-webkit-scrollbar-thumb:hover {
background-color: #495057; }
/* Settings sidebar */
.reportbuilder-sidebar-settings {
overflow-y: auto; }
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #6a737b #f8f9fa; }
.reportbuilder-sidebar-settings::-webkit-scrollbar {
-webkit-appearance: none;
appearance: none; }
.reportbuilder-sidebar-settings::-webkit-scrollbar-thumb {
background-color: #ced4da;
border-left: 5px solid #fff; }
width: 12px; }
.reportbuilder-sidebar-settings::-webkit-scrollbar-track {
background-color: white;
border-left: 5px solid #fff; }
background: #f8f9fa; }
.reportbuilder-sidebar-settings::-webkit-scrollbar-thumb {
background-color: #6a737b;
border-radius: 20px;
border: 3px solid #f8f9fa; }
.reportbuilder-sidebar-settings::-webkit-scrollbar-thumb:hover {
background-color: #495057; }
@media (min-width: 992px) {
.reportbuilder-sidebar-settings {
width: 350px;
@@ -21354,20 +21374,26 @@ div.editor_atto_toolbar button .icon {
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container {
max-height: calc(100vh - 163px);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #6a737b #f8f9fa;
margin-left: calc(250px + 1rem);
margin-right: calc(350px + 1rem); }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar {
-webkit-appearance: none;
appearance: none; }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar-thumb {
background-color: #ced4da;
border-left: 5px solid #fff; }
width: 12px; }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar-track {
background-color: white;
border-left: 5px solid #fff; }
background: #f8f9fa; }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar-thumb {
background-color: #6a737b;
border-radius: 20px;
border: 3px solid #f8f9fa; }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar-thumb:hover {
background-color: #495057; }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-audiences-container {
margin-left: calc(250px + 1rem); } }
#page-admin-reportbuilder-edit #page {
overflow-y: auto; }
/* Toggle cards. */
.reportbuilder-toggle-card .card-header {
border-bottom: none; }
theme/classic/style/moodle.css
+53 -27
View File
@@ -21123,10 +21123,27 @@ div.editor_atto_toolbar button .icon {
/* Filters */
.reportbuilder-wrapper .filters-dropdown {
width: 27rem;
padding: 0; }
padding: 0;
z-index: 1050;
overflow: hidden; }
@media (max-width: 767.98px) {
.reportbuilder-wrapper .filters-dropdown {
width: 100%; } }
.reportbuilder-wrapper .filters-dropdown .reportbuilder-filters-sidebar {
max-height: calc(100vh - 50px - 1rem);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #6a737b #fff; }
.reportbuilder-wrapper .filters-dropdown .reportbuilder-filters-sidebar::-webkit-scrollbar {
width: 12px; }
.reportbuilder-wrapper .filters-dropdown .reportbuilder-filters-sidebar::-webkit-scrollbar-track {
background: #fff; }
.reportbuilder-wrapper .filters-dropdown .reportbuilder-filters-sidebar::-webkit-scrollbar-thumb {
background-color: #6a737b;
border-radius: 20px;
border: 3px solid #fff; }
.reportbuilder-wrapper .filters-dropdown .reportbuilder-filters-sidebar::-webkit-scrollbar-thumb:hover {
background-color: #495057; }
.reportbuilder-wrapper .reportbuilder-filters-wrapper .mform.full-width-labels .fitem.row > .col-md-3,
.reportbuilder-wrapper .reportbuilder-filters-wrapper .mform.full-width-labels .fitem.row > .col-md-9,
@@ -21163,9 +21180,6 @@ div.editor_atto_toolbar button .icon {
text-overflow: clip;
word-break: break-all; }
/**
* Styled scrollbar with left padding for webkit browsers.
*/
/**
* Custom Reports.
*/
@@ -21201,29 +21215,35 @@ div.editor_atto_toolbar button .icon {
font-size: 12px; }
.reportbuilder-sidebar-menu-cards {
overflow-y: auto; }
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #6a737b #f8f9fa; }
.reportbuilder-sidebar-menu-cards::-webkit-scrollbar {
-webkit-appearance: none;
appearance: none; }
.reportbuilder-sidebar-menu-cards::-webkit-scrollbar-thumb {
background-color: #ced4da;
border-left: 5px solid #fff; }
width: 12px; }
.reportbuilder-sidebar-menu-cards::-webkit-scrollbar-track {
background-color: white;
border-left: 5px solid #fff; }
background: #f8f9fa; }
.reportbuilder-sidebar-menu-cards::-webkit-scrollbar-thumb {
background-color: #6a737b;
border-radius: 20px;
border: 3px solid #f8f9fa; }
.reportbuilder-sidebar-menu-cards::-webkit-scrollbar-thumb:hover {
background-color: #495057; }
/* Settings sidebar */
.reportbuilder-sidebar-settings {
overflow-y: auto; }
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #6a737b #f8f9fa; }
.reportbuilder-sidebar-settings::-webkit-scrollbar {
-webkit-appearance: none;
appearance: none; }
.reportbuilder-sidebar-settings::-webkit-scrollbar-thumb {
background-color: #ced4da;
border-left: 5px solid #fff; }
width: 12px; }
.reportbuilder-sidebar-settings::-webkit-scrollbar-track {
background-color: white;
border-left: 5px solid #fff; }
background: #f8f9fa; }
.reportbuilder-sidebar-settings::-webkit-scrollbar-thumb {
background-color: #6a737b;
border-radius: 20px;
border: 3px solid #f8f9fa; }
.reportbuilder-sidebar-settings::-webkit-scrollbar-thumb:hover {
background-color: #495057; }
@media (min-width: 992px) {
.reportbuilder-sidebar-settings {
width: 350px;
@@ -21300,20 +21320,26 @@ div.editor_atto_toolbar button .icon {
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container {
max-height: calc(100vh - 153px);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #6a737b #f8f9fa;
margin-left: calc(250px + 1rem);
margin-right: calc(350px + 1rem); }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar {
-webkit-appearance: none;
appearance: none; }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar-thumb {
background-color: #ced4da;
border-left: 5px solid #fff; }
width: 12px; }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar-track {
background-color: white;
border-left: 5px solid #fff; }
background: #f8f9fa; }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar-thumb {
background-color: #6a737b;
border-radius: 20px;
border: 3px solid #f8f9fa; }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-report[data-editing] .reportbuilder-report-container::-webkit-scrollbar-thumb:hover {
background-color: #495057; }
.path-admin-reportbuilder.pagelayout-popup .reportbuilder-audiences-container {
margin-left: calc(250px + 1rem); } }
#page-admin-reportbuilder-edit #page {
overflow-y: auto; }
/* Toggle cards. */
.reportbuilder-toggle-card .card-header {
border-bottom: none; }