[B5] Update SCSS for reports (and fix its breadcrumbs)

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 %}
 

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 {

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 {

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;

corehq/apps/hqwebapp/static/reports/scss/reports.scss

@@ -0,0 +1,7 @@
+// Configuration
+@import "functions";
+@import "variables";
+
+
+@import "reports/sidebar";
+@import "reports/accordion";

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;
+}

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;
+  }
+}

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 }}

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({

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 %}
+-    <link type="text/less"
++    <link type="text/scss"
+           rel="stylesheet"
+           media="all"
+-          href="{% static 'reports/less/reports.less' %}" />
++          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 %}
 -  <a href="#" class="btn btn-link btn-invisible visible-xs btn-report-menu" data-toggle="offcanvas"><i class="fa fa-bars"></i> {% trans "Reports Menu" %}</a>
 -  <ol id="hq-breadcrumbs" class="breadcrumb breadcrumb-hq-section">
-+  <a href="#" class="btn btn-link btn-invisible d-xs-block btn-report-menu" data-bs-toggle="offcanvas"><i class="fa fa-bars"></i> {% trans "Reports Menu" %}</a>
-+  <ol id="hq-breadcrumbs" class="breadcrumb breadcrumb-hq-section">  {# todo B5: css:breadcrumb #}
-     <li>
-       <a href="{{ report.default_url }}"><strong>{% trans report.section_name|default:"Reports" %}</strong></a>
-     </li>
-@@ -68,17 +68,17 @@
+-    <li>
+-      <a href="{{ report.default_url }}"><strong>{% trans report.section_name|default:"Reports" %}</strong></a>
+-    </li>
+-    {% if report.breadcrumbs %}
+-      {% for crumb in report.breadcrumbs %}
+-        <li>
+-          <a href="{{ crumb.link }}">{{ crumb.title }}</a>
+-        </li>
+-      {% endfor %}
+-    {% endif %}
+-    <li class="active">
+-      {% trans report.title|default:"Untitled Report" %}
+-    </li>
+-  </ol>
++  <a
++    href="#"
++    class="btn btn-link btn-report-menu"
++    data-hq-toggle=".report-sidebar"
++  >
++    <i class="fa fa-bars"></i> {% trans "Reports Menu" %}
++  </a>
++  <nav aria-label="breadcrumb">
++    <ol
++      id="hq-breadcrumbs"
++      class="breadcrumb breadcrumb-hq-section"
++    >
++      <li class="breadcrumb-item">
++        <a href="{{ report.default_url }}"><strong>{% trans report.section_name|default:"Reports" %}</strong></a>
++      </li>
++      {% if report.breadcrumbs %}
++        {% for crumb in report.breadcrumbs %}
++          <li class="breadcrumb-item">
++            <a href="{{ crumb.link }}">{{ crumb.title }}</a>
++          </li>
++        {% endfor %}
++      {% endif %}
++      <li class="breadcrumb-item active" aria-current="page">
++        {% trans report.title|default:"Untitled Report" %}
++      </li>
++    </ol>
++  </nav>
+ {% endblock %}
+
+ {% block page_content %}
+@@ -68,17 +79,17 @@
    {% initial_page_data 'slug' report.slug %}
 
    {% block filter_panel %}
@@ -54,7 +104,7 @@
                      aria-label="Close"
                      data-bind="click: resetModal"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">
-@@ -90,14 +90,14 @@
+@@ -90,14 +101,14 @@
                {{ datespan.enddate|date:"Y-m-d" }}
              </h4>
            </div>
@@ -71,7 +121,7 @@
        <h4>{% trans 'Notice' %}</h4>
        <p>{{ report.special_notice }}</p>
      </div>
-@@ -107,7 +107,7 @@
+@@ -107,7 +118,7 @@
        {% block reportcontent %}
        {% endblock %}
      {% else %}

corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/datatables._datatables.style.diff.txt

@@ -1,6 +1,6 @@
 --- 
 +++ 
-@@ -1,102 +1,54 @@
+@@ -1,102 +1,76 @@
 -.dataTables_info,
 -.dataTables_length {
 -  display: inline-block;
@@ -50,13 +50,22 @@
 +    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,
@@ -78,8 +87,12 @@
 +    &.odd td.dtfc-fixed-left,
 +    &.odd td.dtfc-fixed-right {
 +      background-color: lighten($gray-200, 5%);
++    }
++
++    &.even td.dtfc-fixed-left {
++      background-color: $gray-100;
      }
--  }
+   }
 -  &.headerSortAsc {
 -    .dt-sort-icon:before {
 -      content: "\e155";
@@ -107,21 +120,27 @@
 -      .pagination {
 -        margin: 0;
 -      }
-+    &.even td.dtfc-fixed-left {
-+      background-color: $gray-100;
++  tbody tr td[class^="sorting_"] {
++    background-color: $gray-200;
++    &:nth-child(odd) {
++      background-color: lighten($gray-200, 5%);
      }
    }
  }
 
 -.dataTable td.text-xs {
 -  font-size: .8em;
-+.dtfc-right-top-blocker:last-child {
-+  display: none !important;
++
++.table-hq-report tfoot tr td {
++  background-color: $blue-800;
++  color: $white;
  }
--
+ 
 -.dataTable td.text-sm {
 -  font-size: .9em;
--}
++.dtfc-right-top-blocker:last-child {
++  display: none !important;
+ }
 -
 -.dataTable td.text-lg {
 -  font-size: 1.1em;

corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/forms._forms.style.diff.txt

@@ -368,7 +368,7 @@
  }
 
  .form-hide-actions .form-actions {
-@@ -361,21 +25,34 @@
+@@ -361,21 +25,38 @@
    .validationMessage {
      display: block;
      padding-top: 8px;
@@ -409,6 +409,10 @@
 +  border-bottom-right-radius: $border-radius;
 +  padding: $spacer 0;
 +  margin: 0 0 $spacer 0;
++
++  > * {
++    flex-shrink: initial;
++  }
 +}
 +
 +.ms-header .btn {