From 48b85bdc1ddb3379373fb1781006bc8b7c0b4335 Mon Sep 17 00:00:00 2001 From: Biyeun Buczyk Date: Mon, 13 May 2024 12:40:06 +0200 Subject: [PATCH 1/8] B5 scss: update datatables sort styling for fixed columns with sorted headers --- .../static/hqwebapp/scss/commcarehq/_datatables.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_datatables.scss b/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_datatables.scss index ec40fd38f470..5516d93a7a99 100644 --- a/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_datatables.scss +++ b/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_datatables.scss @@ -16,13 +16,22 @@ table.dataTable.table-hq-report { color: $white; white-space: nowrap; + &.sorting_asc, + &.sorting_desc { + background-color: $blue-600; + } + &:nth-child(odd) { background-color: $blue-700; + &.sorting_asc, + &.sorting_desc { + background-color: $blue-500; + } } &.dtfc-fixed-left, &.dtfc-fixed-right { - background-color: $blue !important; + background-color: $purple !important; } &.sorting_asc::before, From 649477b9cc29c843b195e8ad7574203387cdd790 Mon Sep 17 00:00:00 2001 From: Biyeun Buczyk Date: Mon, 13 May 2024 20:10:25 +0200 Subject: [PATCH 2/8] B5 scss: prepare scss for reports --- .../hqwebapp/static/reports/scss/reports.scss | 6 ++++ .../static/reports/scss/reports/_sidebar.scss | 29 +++++++++++++++++++ .../standard/bootstrap5/base_template.html | 4 +-- 3 files changed, 37 insertions(+), 2 deletions(-) create mode 100644 corehq/apps/hqwebapp/static/reports/scss/reports.scss create mode 100644 corehq/apps/hqwebapp/static/reports/scss/reports/_sidebar.scss diff --git a/corehq/apps/hqwebapp/static/reports/scss/reports.scss b/corehq/apps/hqwebapp/static/reports/scss/reports.scss new file mode 100644 index 000000000000..a0073d1c6d6b --- /dev/null +++ b/corehq/apps/hqwebapp/static/reports/scss/reports.scss @@ -0,0 +1,6 @@ +// Configuration +@import "functions"; +@import "variables"; + + +@import "reports/sidebar"; diff --git a/corehq/apps/hqwebapp/static/reports/scss/reports/_sidebar.scss b/corehq/apps/hqwebapp/static/reports/scss/reports/_sidebar.scss new file mode 100644 index 000000000000..53027220a309 --- /dev/null +++ b/corehq/apps/hqwebapp/static/reports/scss/reports/_sidebar.scss @@ -0,0 +1,29 @@ +@media screen and (max-width: map-get($container-max-widths, "sm")) { + .row-offcanvas { + position: relative; + } + + .sidebar-offcanvas { + display: none; + } + + .row-offcanvas-left { + left: 0; + } + + .row-offcanvas-left.active { + .sidebar-offcanvas { + display: block; + } + } +} + +.btn-report-menu { + float: left; + margin-right: 13px; + background: none; + font-size: 14px; + font-weight: bold; + padding-top: 5px; + border-right: 1px solid #eeeeee; +} diff --git a/corehq/apps/reports/templates/reports/standard/bootstrap5/base_template.html b/corehq/apps/reports/templates/reports/standard/bootstrap5/base_template.html index 796922025913..2d25e5a0c5b2 100644 --- a/corehq/apps/reports/templates/reports/standard/bootstrap5/base_template.html +++ b/corehq/apps/reports/templates/reports/standard/bootstrap5/base_template.html @@ -15,10 +15,10 @@ {% block stylesheets %} {{ block.super }} {% compress css %} - + href="{% static 'reports/scss/reports.scss' %}" /> {% endcompress %} {% include 'reports/partials/filters_css.html' %} From 1fa0222246dafcd70d2a2cbff26135573cfc837d Mon Sep 17 00:00:00 2001 From: Biyeun Buczyk Date: Mon, 13 May 2024 20:11:05 +0200 Subject: [PATCH 3/8] B5 scss: update footer classes for datatables b5 --- .../hqwebapp/scss/commcarehq/_datatables.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_datatables.scss b/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_datatables.scss index 5516d93a7a99..406f3bfb4155 100644 --- a/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_datatables.scss +++ b/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_datatables.scss @@ -56,6 +56,19 @@ table.dataTable.table-hq-report { background-color: $gray-100; } } + + tbody tr td[class^="sorting_"] { + background-color: $gray-200; + &:nth-child(odd) { + background-color: lighten($gray-200, 5%); + } + } +} + + +.table-hq-report tfoot tr td { + background-color: $blue-800; + color: $white; } .dtfc-right-top-blocker:last-child { From 3c77f3b359ba4d87f37f252ad9b6054ef5c10d29 Mon Sep 17 00:00:00 2001 From: Biyeun Buczyk Date: Tue, 14 May 2024 13:02:03 +0200 Subject: [PATCH 4/8] B5 scss: add accordion styles --- corehq/apps/hqwebapp/static/reports/scss/reports.scss | 1 + .../hqwebapp/static/reports/scss/reports/_accordion.scss | 8 ++++++++ 2 files changed, 9 insertions(+) create mode 100644 corehq/apps/hqwebapp/static/reports/scss/reports/_accordion.scss diff --git a/corehq/apps/hqwebapp/static/reports/scss/reports.scss b/corehq/apps/hqwebapp/static/reports/scss/reports.scss index a0073d1c6d6b..273c0238f5fb 100644 --- a/corehq/apps/hqwebapp/static/reports/scss/reports.scss +++ b/corehq/apps/hqwebapp/static/reports/scss/reports.scss @@ -4,3 +4,4 @@ @import "reports/sidebar"; +@import "reports/accordion"; diff --git a/corehq/apps/hqwebapp/static/reports/scss/reports/_accordion.scss b/corehq/apps/hqwebapp/static/reports/scss/reports/_accordion.scss new file mode 100644 index 000000000000..6b3da804fdfa --- /dev/null +++ b/corehq/apps/hqwebapp/static/reports/scss/reports/_accordion.scss @@ -0,0 +1,8 @@ +.report-accordion-header { + padding: $spacer; +} + +.report-accordion-collapse.in { + border-bottom: 1px solid $border-color; + border-radius: 0 !important; +} From be68d3122a37a481c2fc2919cccf2dcdd4c2008d Mon Sep 17 00:00:00 2001 From: Biyeun Buczyk Date: Tue, 14 Jan 2025 14:42:22 -0500 Subject: [PATCH 5/8] B5 scss: fix display error where field-control children in form actions causes horizontal overflow --- .../apps/hqwebapp/static/hqwebapp/scss/commcarehq/_forms.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_forms.scss b/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_forms.scss index 2f7aef91a69d..e31b774801b6 100644 --- a/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_forms.scss +++ b/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_forms.scss @@ -51,6 +51,10 @@ legend { border-bottom-right-radius: $border-radius; padding: $spacer 0; margin: 0 0 $spacer 0; + + > * { + flex-shrink: initial; + } } .ms-header .btn { From 189774b7013ed96fd8b7b2c59754a2551e16a056 Mon Sep 17 00:00:00 2001 From: Biyeun Buczyk Date: Mon, 13 May 2024 12:39:23 +0200 Subject: [PATCH 6/8] B5 scss: update breadcrumb divider style globally --- .../hqwebapp/static/hqwebapp/scss/commcarehq/_variables.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables.scss b/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables.scss index 91cb8da2be98..a8680b2f3258 100644 --- a/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables.scss +++ b/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables.scss @@ -36,6 +36,9 @@ $navbar-padding-x: 0; $caret-width: 4px; $caret-vertical-align: $caret-width * .87; +// Breadcrumbs +$breadcrumb-divider: quote(">"); + // Dropdowns $dropdown-border-radius: 3px; $dropdown-inner-border-radius: 0; From ce7890b1fbed26f767f93ec081481e62165757d7 Mon Sep 17 00:00:00 2001 From: Biyeun Buczyk Date: Thu, 9 Jan 2025 15:31:47 -0500 Subject: [PATCH 7/8] fix breadcrumbs and mobile menu toggle in bootstrap5 reports --- .../bootstrap5/explore_case_data.html | 4 +- .../static/reports/scss/reports/_sidebar.scss | 46 ++++++++++-------- .../js/bootstrap5/standard_hq_report.js | 5 +- .../standard/bootstrap5/base_template.html | 47 ++++++++++++------- 4 files changed, 60 insertions(+), 42 deletions(-) diff --git a/corehq/apps/data_interfaces/templates/data_interfaces/bootstrap5/explore_case_data.html b/corehq/apps/data_interfaces/templates/data_interfaces/bootstrap5/explore_case_data.html index 99c083efe02e..58b091878f6a 100644 --- a/corehq/apps/data_interfaces/templates/data_interfaces/bootstrap5/explore_case_data.html +++ b/corehq/apps/data_interfaces/templates/data_interfaces/bootstrap5/explore_case_data.html @@ -5,9 +5,9 @@ {% js_entry 'reports/v2/js/views/bootstrap5/explore_case_data' %} -{% block page_sidebar_classes %}sidebar-offcanvas col-sm-12 col-md-3 col-xl-2{% endblock %} +{% block page_sidebar_classes %}report-sidebar col-sm-12 col-md-3 col-xl-2{% endblock %} -{% block page_row_classes %}row-offcanvas row-offcanvas-left{% endblock %} +{% block page_row_classes %}report-sidebar-row{% endblock %} {% block page_content_classes %}col-sm-12 col-md-9 col-xl-10{% endblock %} diff --git a/corehq/apps/hqwebapp/static/reports/scss/reports/_sidebar.scss b/corehq/apps/hqwebapp/static/reports/scss/reports/_sidebar.scss index 53027220a309..77f0f8229563 100644 --- a/corehq/apps/hqwebapp/static/reports/scss/reports/_sidebar.scss +++ b/corehq/apps/hqwebapp/static/reports/scss/reports/_sidebar.scss @@ -1,29 +1,35 @@ -@media screen and (max-width: map-get($container-max-widths, "sm")) { - .row-offcanvas { - position: relative; - } +.btn-report-menu { + display: none; + float: left; + background: none; + font-size: 14px; + font-weight: bold; + padding-top: 5px; + border-right: 1px solid $border-color; + border-bottom: 1px solid $border-color; + border-radius: 0; - .sidebar-offcanvas { - display: none; + &:focus { + padding-top: 5px; + background-color: #ededec; + border-right: 1px solid $border-color; } +} - .row-offcanvas-left { +@media (max-width: map-get($grid-breakpoints, "md")) { + .report-sidebar-row { + position: relative; left: 0; } - .row-offcanvas-left.active { - .sidebar-offcanvas { - display: block; - } + .report-sidebar { + display: none; } -} -.btn-report-menu { - float: left; - margin-right: 13px; - background: none; - font-size: 14px; - font-weight: bold; - padding-top: 5px; - border-right: 1px solid #eeeeee; + .report-sidebar.active { + display: block; + } + .btn-report-menu { + display: inline-block; + } } diff --git a/corehq/apps/reports/static/reports/js/bootstrap5/standard_hq_report.js b/corehq/apps/reports/static/reports/js/bootstrap5/standard_hq_report.js index 1da3ad80eac7..733d61d0505d 100644 --- a/corehq/apps/reports/static/reports/js/bootstrap5/standard_hq_report.js +++ b/corehq/apps/reports/static/reports/js/bootstrap5/standard_hq_report.js @@ -69,8 +69,9 @@ hqDefine("reports/js/bootstrap5/standard_hq_report", [ asyncReport = getAsync(); $(function () { - $('[data-toggle="offcanvas"]').click(function () { - $('.row-offcanvas').toggleClass('active'); + + $('[data-hq-toggle]').click(function () { + $($(this).data('hqToggle')).toggleClass('active'); }); $('.report-description-popover').popover({ /* todo B5: plugin:popover */ diff --git a/corehq/apps/reports/templates/reports/standard/bootstrap5/base_template.html b/corehq/apps/reports/templates/reports/standard/bootstrap5/base_template.html index 2d25e5a0c5b2..f0c423309cae 100644 --- a/corehq/apps/reports/templates/reports/standard/bootstrap5/base_template.html +++ b/corehq/apps/reports/templates/reports/standard/bootstrap5/base_template.html @@ -4,9 +4,9 @@ {% load i18n %} {% load crispy_forms_tags %} -{% block page_sidebar_classes %}sidebar-offcanvas col-sm-12 col-md-3 col-xl-2{% endblock %} +{% block page_sidebar_classes %}report-sidebar col-sm-12 col-md-3 col-xl-2{% endblock %} -{% block page_row_classes %}row-offcanvas row-offcanvas-left{% endblock %} +{% block page_row_classes %}report-sidebar-row{% endblock %} {% block page_content_classes %}col-sm-12 col-md-9 col-xl-10{% endblock %} @@ -28,22 +28,33 @@ {% block title %}{{ report.title|default:"Project Reports" }}{% endblock %} {% block page_breadcrumbs %} - {% trans "Reports Menu" %} - + + {% trans "Reports Menu" %} + + {% endblock %} {% block page_content %} From d0b1f7a25222c745ade084e744a630c73ea88e7d Mon Sep 17 00:00:00 2001 From: Biyeun Buczyk Date: Wed, 22 Jan 2025 17:51:30 +0000 Subject: [PATCH 8/8] "Bootstrap 5 Migration - Rebuilt diffs" --- .../explore_case_data.html.diff.txt | 13 ++-- .../reports/js/standard_hq_report.js.diff.txt | 11 ++- .../standard/base_template.html.diff.txt | 74 ++++++++++++++++--- .../datatables._datatables.style.diff.txt | 37 +++++++--- .../imports/forms._forms.style.diff.txt | 6 +- ...cludes_variables._variables.style.diff.txt | 5 +- 6 files changed, 116 insertions(+), 30 deletions(-) diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/data_interfaces/explore_case_data.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/data_interfaces/explore_case_data.html.diff.txt index ffa882f4a32b..632dec4abf27 100644 --- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/data_interfaces/explore_case_data.html.diff.txt +++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/data_interfaces/explore_case_data.html.diff.txt @@ -10,13 +10,16 @@ -{% js_entry_b3 'reports/v2/js/views/bootstrap3/explore_case_data' %} - -{% block page_sidebar_classes %}sidebar-offcanvas col-xs-12 col-sm-3 col-lg-2{% endblock %} +- +-{% block page_row_classes %}row-offcanvas row-offcanvas-left{% endblock %} +- +-{% block page_content_classes %}col-xs-12 col-sm-9 col-lg-10{% endblock %} +{% js_entry 'reports/v2/js/views/bootstrap5/explore_case_data' %} + -+{% block page_sidebar_classes %}sidebar-offcanvas col-sm-12 col-md-3 col-xl-2{% endblock %} - - {% block page_row_classes %}row-offcanvas row-offcanvas-left{% endblock %} - --{% block page_content_classes %}col-xs-12 col-sm-9 col-lg-10{% endblock %} ++{% block page_sidebar_classes %}report-sidebar col-sm-12 col-md-3 col-xl-2{% endblock %} ++ ++{% block page_row_classes %}report-sidebar-row{% endblock %} ++ +{% block page_content_classes %}col-sm-12 col-md-9 col-xl-10{% endblock %} {% block stylesheets %}{{ block.super }} diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/reports/js/standard_hq_report.js.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/reports/js/standard_hq_report.js.diff.txt index d9180d93fce0..5e2306cb6bf8 100644 --- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/reports/js/standard_hq_report.js.diff.txt +++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/reports/js/standard_hq_report.js.diff.txt @@ -23,8 +23,15 @@ var asyncHQReport = asyncHQReportModule({ standardReport: getStandard(), }); -@@ -73,7 +73,7 @@ - $('.row-offcanvas').toggleClass('active'); +@@ -69,11 +69,12 @@ + asyncReport = getAsync(); + + $(function () { +- $('[data-toggle="offcanvas"]').click(function () { +- $('.row-offcanvas').toggleClass('active'); ++ ++ $('[data-hq-toggle]').click(function () { ++ $($(this).data('hqToggle')).toggleClass('active'); }); - $('.report-description-popover').popover({ diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/reports/standard/base_template.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/reports/standard/base_template.html.diff.txt index b0886b750e87..e306193a5db0 100644 --- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/reports/standard/base_template.html.diff.txt +++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/reports/standard/base_template.html.diff.txt @@ -1,6 +1,6 @@ --- +++ -@@ -1,16 +1,16 @@ +@@ -1,24 +1,24 @@ -{% extends "hqwebapp/bootstrap3/two_column.html" %} +{% extends "hqwebapp/bootstrap5/two_column.html" %} {% load compress %} @@ -9,9 +9,10 @@ {% load crispy_forms_tags %} -{% block page_sidebar_classes %}sidebar-offcanvas col-xs-12 col-sm-3 col-lg-2{% endblock %} -+{% block page_sidebar_classes %}sidebar-offcanvas col-sm-12 col-md-3 col-xl-2{% endblock %} ++{% block page_sidebar_classes %}report-sidebar col-sm-12 col-md-3 col-xl-2{% endblock %} - {% block page_row_classes %}row-offcanvas row-offcanvas-left{% endblock %} +-{% block page_row_classes %}row-offcanvas row-offcanvas-left{% endblock %} ++{% block page_row_classes %}report-sidebar-row{% endblock %} -{% block page_content_classes %}col-xs-12 col-sm-9 col-lg-10{% endblock %} +{% block page_content_classes %}col-sm-12 col-md-9 col-xl-10{% endblock %} @@ -21,18 +22,67 @@ {% block stylesheets %} {{ block.super }} -@@ -28,8 +28,8 @@ + {% compress css %} +- ++ href="{% static 'reports/scss/reports.scss' %}" /> + {% endcompress %} + {% include 'reports/partials/filters_css.html' %} + +@@ -28,22 +28,33 @@ {% block title %}{{ report.title|default:"Project Reports" }}{% endblock %} {% block page_breadcrumbs %} - {% trans "Reports Menu" %} -