Merge pull request #8644 from cfpb/ans_prepaid_no_results

Prepaid agreements DB: Add no-results filter state
cfpb · Nov 14, 2024 · 690bd33 · 690bd33
2 parents ae19256 + b8aa32f
commit 690bd33
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 17 deletions.
diff --git a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/search_results.html b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/search_results.html
@@ -5,6 +5,7 @@
 {% import 'v1/includes/molecules/pagination.html' as pagination with context %}
 {% from 'v1/includes/organisms/expandable.html' import expandable with context %}
 
+{% if current_count and current_count > 0  %}
 <aside class="content__sidebar content--flush-top-on-small content--flush-sides-on-small filters">
     <h3>Narrow results by...</h3>
 
@@ -95,6 +96,16 @@ <h3>Narrow results by...</h3>
         <button class="a-btn u-mb15 u-hide-on-js">Apply filters</button>
     </form>
 </aside>
+{% else %}
+<aside class="content__sidebar content--flush-top-on-small content--flush-sides-on-small filters no-results">
+    <h3 class="h4">
+        Try a broader search.
+    </h3>
+    <p>
+        Enter a different search term above.
+    </p>
+</aside>
+{% endif %}
 
 <div class="content__main content--flush-all-on-small content--flush-bottom">
     <div class="results__header">

diff --git a/cfgov/unprocessed/apps/prepaid-agreements/css/search.scss b/cfgov/unprocessed/apps/prepaid-agreements/css/search.scss
@@ -26,7 +26,9 @@
 
 .search__results {
   .content__sidebar {
-    padding: 45px 15px 0;
+    padding: (math.div(45px, $base-font-size-px) + em)
+      (math.div(15px, $base-font-size-px) + em) 0;
+
     border: 1px solid var(--gray-40);
     background-color: var(--gray-5);
 
@@ -57,6 +59,9 @@
       margin-bottom: 0;
     }
   }
+  .content__sidebar.no-results {
+    padding: math.div(30px, $base-font-size-px) + em;
+  }
   .content__main {
     border: 0;
     border-top: 1px solid var(--gray-40);
@@ -67,10 +72,8 @@
     }
   }
   .results__count {
-    padding: (
-        math.div(math.div($grid-gutter-width, 2), $base-font-size-px) + em
-      )
-      (math.div(math.div($grid-gutter-width, 2), $base-font-size-px) + em) 0;
+    padding: (math.div(15px, $base-font-size-px) + em)
+      (math.div(15px, $base-font-size-px) + em) 0;
     border-right: 1px solid var(--gray-40);
     border-bottom: 1px solid var(--gray-40);
     background-color: var(--green-20);
@@ -81,27 +84,26 @@
     }
   }
   .results__list {
-    padding: (math.div($grid-gutter-width, $base-font-size-px) + em)
-      (math.div(math.div($grid-gutter-width, 2), $base-font-size-px) + em);
+    padding: (math.div(30px, $base-font-size-px) + em)
+      (math.div(15px, $base-font-size-px) + em);
 
     li {
       list-style-type: none;
     }
   }
   .results__item {
-    margin: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) + em;
+    margin: math.div(15px, $base-font-size-px) + em;
     & + .results__item {
-      margin-top: math.div($grid-gutter-width, $base-font-size-px) + em;
+      margin-top: math.div(30px, $base-font-size-px) + em;
       h4 {
-        padding-top: math.div($grid-gutter-width, $base-font-size-px) + em;
+        padding-top: math.div(30px, $base-font-size-px) + em;
         border-top: 1px solid var(--gray-40);
       }
     }
   }
   .results__paginator {
-    margin: 0 math.div(math.div($grid-gutter-width, 2), $base-font-size-px) + em;
-    padding: 0 math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
-      em;
+    margin: 0 math.div(15px, $base-font-size-px) + em;
+    padding: 0 math.div(15px, $base-font-size-px) + em;
     max-width: 41.875rem;
   }
 }
@@ -110,12 +112,13 @@
 @include respond-to-max($bp-sm-max) {
   .search__results {
     .content__sidebar {
-      padding-top: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
-        em;
+      padding-top: math.div(15px, $base-font-size-px) + em;
+    }
+    .content__sidebar.no-results {
+      padding: math.div(15px, $base-font-size-px) + em;
     }
     .content__main {
-      margin-top: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
-        em;
+      margin-top: math.div(15px, $base-font-size-px) + em;
     }
     .results__count {
       border-left: 1px solid var(--gray-40);