Merge pull request #603 from nationalarchives/AYR-1203-search-highlight

AYR-1203/1288 - Update TB search page to current design
nationalarchives · Oct 25, 2024 · ec268f9 · ec268f9
2 parents 9c1797a + f59132c
commit ec268f9
Show file tree

Hide file tree

Showing 6 changed files with 672 additions and 238 deletions.
diff --git a/app/main/routes.py b/app/main/routes.py
@@ -605,6 +605,8 @@ def search_transferring_body(_id: uuid.UUID):  # noqa: C901
         or request.args.get("query", "").strip()
     )
 
+    open_all = request.args.get("open_all", False)
+
     search_filter = request.args.get("search_filter")
     if search_filter:
         search_filter = search_filter.strip()
@@ -674,7 +676,14 @@ def search_transferring_body(_id: uuid.UUID):  # noqa: C901
                         }
                     ],
                     "filter": [{"term": {"transferring_body_id.keyword": _id}}],
-                }
+                },
+            },
+            "highlight": {
+                "pre_tags": ["<mark>"],
+                "post_tags": ["</mark>"],
+                "fields": {
+                    "*": {},
+                },
             },
             "sort": sorting_query,
         }
@@ -719,6 +728,7 @@ def search_transferring_body(_id: uuid.UUID):  # noqa: C901
         sorting_orders=sorting_orders,
         search_terms=search_terms,
         pagination=pagination,
+        open_all=open_all,
         query_string_parameters={
             k: v for k, v in request.args.items() if k not in "page"
         },

diff --git a/app/static/image/accordion-chevron.svg b/app/static/image/accordion-chevron.svg
diff --git a/app/static/src/scss/includes/_search-transferring-body.scss b/app/static/src/scss/includes/_search-transferring-body.scss
@@ -82,61 +82,6 @@
   }
 }
 
-.govuk-table__cell {
-  &--search-results {
-    font-size: 1rem;
-    margin-bottom: -1rem;
-    line-height: 1.2rem;
-    padding: 10px;
-
-    &-no-wrap {
-      white-space: nowrap;
-    }
-
-    &:last-child {
-      padding-right: 0;
-    }
-
-    &:first-child {
-      padding-left: 0;
-    }
-
-    a {
-      color: $colour-link-default;
-      margin-bottom: -1rem;
-
-      &:visited {
-        color: $colour-link-default;
-      }
-
-      &.word-break {
-        word-break: break-word;
-      }
-    }
-  }
-}
-
-.govuk-table__header {
-  &--search-header {
-    font-size: 1rem;
-    padding: 10px;
-
-    &-title {
-      width: 100%;
-      font-size: 1rem;
-    }
-
-    &:last-child {
-      text-align: right;
-      padding-right: 0;
-    }
-
-    &:first-child {
-      padding-left: 0;
-    }
-  }
-}
-
 .search-all-filter-container {
   background-color: $colour-container-normal;
   padding: 0.5rem;
@@ -230,29 +175,6 @@ a.govuk-link {
   vertical-align: middle;
 }
 
-.ayr-filter-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  padding-top: 0.9rem;
-
-  :hover {
-    cursor: pointer;
-    background-color: $colour-link-normal;
-    color: white;
-
-    a {
-      color: white;
-    }
-
-    img.close-icon {
-      filter: invert(100%) sepia(0%) saturate(7476%) hue-rotate(110deg)
-        brightness(98%) contrast(108%);
-      background-color: white;
-    }
-  }
-}
-
 .search {
   &__mobile-heading {
     display: none;
@@ -319,3 +241,206 @@ a.govuk-link {
     }
   }
 }
+
+[class*="hidden-row"] {
+  display: none;
+}
+
+@for $i from 1 through 15 {
+  tr:has(> td > div > details.details-toggle-#{$i}[open])
+    ~ tr.hidden-row-#{$i} {
+    display: table-row;
+  }
+}
+
+.govuk-table {
+  mark {
+    background-color: #fff199;
+  }
+
+  details > summary {
+    cursor: pointer;
+    list-style: none;
+    position: relative;
+    width: 16px;
+    height: 10px;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      background-image: url("/assets/image/accordion-chevron.svg");
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+      transition: transform 0.2s;
+    }
+  }
+
+  &--inner-table {
+    border: none;
+    margin-bottom: 0;
+  }
+
+  details[open] > summary::before {
+    transform: rotate(180deg);
+  }
+
+  &__header {
+    padding-top: 0;
+
+    &--inner-table {
+      border: none;
+      font-weight: 400;
+      padding: 0;
+    }
+
+    &--with-padding {
+      padding-left: 35px;
+    }
+
+    &--search-header {
+      font-size: 1rem;
+      padding: 10px;
+
+      &-title {
+        width: 100%;
+        font-size: 1rem;
+      }
+
+      &:last-child {
+        text-align: right;
+        padding-right: 0;
+      }
+
+      &:first-child {
+        padding-left: 0;
+      }
+    }
+  }
+
+  &__cell {
+    border: none;
+
+    &--with-padding {
+      padding-left: 35px;
+    }
+
+    &--no-pt {
+      padding-top: 0;
+    }
+
+    &--no-padding {
+      padding: 0;
+    }
+
+    &__data {
+      display: flex;
+      align-items: center;
+      gap: 19px;
+    }
+
+    &--metadata {
+      padding: 5px 20px 15px 0;
+    }
+
+    &--search-results {
+      font-size: 1rem;
+      margin-bottom: -1rem;
+      line-height: 1.2rem;
+      padding: 10px;
+
+      &-no-wrap {
+        white-space: nowrap;
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+
+      &:first-child {
+        padding-left: 0;
+      }
+
+      a {
+        color: $colour-link-default;
+        margin-bottom: -1rem;
+
+        &:visited {
+          color: $colour-link-default;
+        }
+
+        &.word-break {
+          word-break: break-word;
+        }
+      }
+    }
+  }
+
+  &__row {
+    &--primary {
+      border-top: 1px solid #b1b4b6;
+    }
+  }
+}
+
+.filter-group {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  height: 100%;
+  margin-bottom: 47px;
+  margin-top: 2rem;
+  padding: 0;
+
+  .browse__sort-container {
+    margin-top: 0;
+  }
+
+  .govuk-select {
+    max-width: 240px;
+  }
+
+  &__checkboxes {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 16px;
+    height: 40px;
+
+    .govuk-checkboxes__label {
+      padding: 0;
+      max-width: 100%;
+      font-size: 16px;
+    }
+
+    .govuk-button {
+      height: 38px;
+    }
+  }
+}
+
+.ayr-filter-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding-top: 0.9rem;
+
+  :hover {
+    cursor: pointer;
+    background-color: $colour-link-normal;
+    color: white;
+
+    a {
+      color: white;
+    }
+
+    img.close-icon {
+      filter: invert(100%) sepia(0%) saturate(7476%) hue-rotate(110deg)
+        brightness(98%) contrast(108%);
+      background-color: white;
+    }
+  }
+}