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/hqwebapp/scss/commcarehq/_datatables.scss b/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_datatables.scss index ec40fd38f470..406f3bfb4155 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, @@ -47,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 { 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 { diff --git a/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables.scss b/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables.scss index e541d08ca6ee..652bea49acd7 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; 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..273c0238f5fb --- /dev/null +++ b/corehq/apps/hqwebapp/static/reports/scss/reports.scss @@ -0,0 +1,7 @@ +// Configuration +@import "functions"; +@import "variables"; + + +@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; +} 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..77f0f8229563 --- /dev/null +++ b/corehq/apps/hqwebapp/static/reports/scss/reports/_sidebar.scss @@ -0,0 +1,35 @@ +.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; + + &:focus { + padding-top: 5px; + background-color: #ededec; + border-right: 1px solid $border-color; + } +} + +@media (max-width: map-get($grid-breakpoints, "md")) { + .report-sidebar-row { + position: relative; + left: 0; + } + + .report-sidebar { + display: none; + } + + .report-sidebar.active { + display: block; + } + .btn-report-menu { + display: inline-block; + } +} 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" %} -