mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-14 04:52:36 +02:00
Code Issues 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-08-17 16:00:52 +02:00
parent f8d28e4ca6
commit a116529bb5
3 changed files with 120 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
theme/boost/scss/moodle/reportbuilder.scss
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.
*/
@ -137,13 +124,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;
@ -249,7 +236,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);
}
@ -258,6 +245,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 {

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

@ -21213,10 +21213,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,
@ -21253,9 +21270,6 @@ div.editor_atto_toolbar button .icon {
text-overflow: clip;
word-break: break-all; }
/**
* Styled scrollbar with left padding for webkit browsers.
*/
/**
* Custom Reports.
*/
@ -21293,29 +21307,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;
@ -21392,20 +21412,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; }

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

@ -21159,10 +21159,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,
@ -21199,9 +21216,6 @@ div.editor_atto_toolbar button .icon {
text-overflow: clip;
word-break: break-all; }
/**
* Styled scrollbar with left padding for webkit browsers.
*/
/**
* Custom Reports.
*/
@ -21239,29 +21253,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;
@ -21338,20 +21358,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; }