Merge pull request #305 from NGO-Algorithm-Audit/feature/search-improvements

Feature/search improvements

Author: jfparie

i18n/en.toml

@@ -91,5 +91,11 @@ other = "Medium risk"
 [score-card--low-risk]
 other = "Low risk"
 
+[search]
+other = "Search"
+
 [search-type-to-start]
-other = "Type to start searching"
+other = "Type to start searching"
+
+[search-no-results]
+other = "No results found"

i18n/nl.toml

@@ -91,5 +91,11 @@ other = "Medium risico"
 [score-card--low-risk]
 other = "Laag risico"
 
+[search]
+other = "Zoeken"
+
 [search-type-to-start]
-other = "Typ om te beginnen met zoeken"
+other = "Typ om te beginnen met zoeken"
+
+[search-no-results]
+other = "Geen resultaten gevonden"

layouts/index.html

@@ -20,11 +20,13 @@
     width: 100%;
     height: 200vh;
     background-color: rgba(0, 0, 0, 0.35);
-    z-index: 1000;
+    z-index: 11000;
   }
 
   .algolia-search {
-    z-index: 5000;
+    &.isfocused {
+      z-index: 12000;
+    }
     position: relative;
     .search-panel {
       display: block;
@@ -34,11 +36,6 @@
       flex: 3;
     }
 
-    .ais-Highlight-highlighted {
-      color: inherit;
-      font-size: inherit;
-    }
-
     #searchbox {
       margin-bottom: 2rem;
     }
@@ -59,9 +56,16 @@
       margin-top: 10px;
       margin-bottom: 10px;
     }
-
     .search-result-image {
       height: auto;
+      width: auto;
+      @media (min-width: 992px) {
+        position: absolute;
+      }
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
       max-height: 175px;
       max-width: 100%;
       margin: auto;
@@ -75,19 +79,18 @@
       list-style: none;
     }
 
-    .ais-Highlight-highlighted,
-    .ais-Snippet-highlighted {
+    mark {
       background-color: #FFFF92;
     }
   }
 </style>
 <!-- Search -->
 <div class="search-overlay d-none"></div>
-<section class="section color-blue">
+<section class="section color-blue" id="search">
   <div class="container algolia-search rounded-lg">
     <div class="row">
       <div class="col">
-        <h2 class="pt-5 color-blue">Search</h2>
+        <h2 class="pt-5 color-blue">{{i18n "search" }}</h2>
       </div>
     </div>
     <div class="row">
@@ -165,6 +168,11 @@ <h2 class="pt-5 color-blue">Search</h2>
           return;
         }
 
+        if(!items || !items.length > 0) {
+          container.querySelector('ol').innerHTML = `<p>{{i18n "search-no-results"}}</p>`;
+          return;
+        }
+        
         container.querySelector('ol').innerHTML = items
           .map(
             item => {
@@ -173,13 +181,13 @@ <h2 class="pt-5 color-blue">Search</h2>
               <a href=${item.url} class="container">
                 <div class="row search-result-row">
                   <div class="col-12 col-lg-2">
-                    <div class="my-3">
-                      <img class="image-fluid search-result-image d-flex" src=${item.image} alt=${item.title} />
+                    <div class="my-3 text-center image-frame">
+                      <img class="image-fluid search-result-image d-inline p-2" src=${item.image} alt=${item.title} />
                     </div>
                   </div>
                   <div class="col-12 col-lg-10">
-                    <h3 class="color-blue search-result-title">${item.title}</h3>
-                    <p class="color-gray search-result-subtitle">${item.subtitle}</p>
+                    <h3 class="color-blue search-result-title">${item._highlightResult.title.value}</h3>
+                    <p class="color-gray search-result-subtitle">${item._highlightResult.subtitle.value}</p>
                   </div>
                 </div>
               </a>
@@ -195,7 +203,7 @@ <h3 class="color-blue search-result-title">${item.title}</h3>
         placeholder: '{{ i18n "search-type-to-start" }}',
       }),
       instantsearch.widgets.configure({
-        hitsPerPage: 3,
+        hitsPerPage: 8,
         filters: "language:{{$.Site.Language.Lang}}"
       }),
       infiniteHits({
@@ -211,6 +219,7 @@ <h3 class="color-blue search-result-title">${item.title}</h3>
   docReady(function () {
     $("input.ais-SearchBox-input").on("focus", function () {
       $(".algolia-search").addClass("bg-lightblue");
+      $(".algolia-search").addClass("isfocused");
       $("#hits").addClass("d-block");
       $("#hits").removeClass("d-none");
       $(".search-overlay").removeClass("d-none");
@@ -219,6 +228,7 @@ <h3 class="color-blue search-result-title">${item.title}</h3>
 
     $(".search-overlay").on("click", function () {
       $(".algolia-search").removeClass("bg-lightblue");
+      $(".algolia-search").removeClass("isfocused");
       $("#hits").removeClass("d-block");
       $("#hits").addClass("d-none");
       $(".search-overlay").addClass("d-none");

layouts/partials/head.html

@@ -19,7 +19,7 @@
 
 <meta name="search_title" content="{{if .Params.search.title}}{{.Params.search.title}}{{else}}{{.Params.title}}{{end}}"> 
 <meta name="search_subtitle" content="{{if .Params.search.title}}{{.Params.search.subtitle}}{{else}}{{.Params.subtitle}}{{end}}"> 
-<meta name="search_image" content="{{if .Params.search.image}}{{.Params.search.image}}{{else}}{{.Params.image}}{{end}}"> 
+<meta name="search_image" content="{{if .Params.search.image}}{{.Params.search.image | relURL}}{{else}}{{.Params.image | relURL}}{{end}}"> 
 
 <!--Favicon-->
 <link rel="shortcut icon" href="{{ site.Params.favicon | absURL }}" type="image/x-icon">

layouts/partials/header.html

@@ -59,8 +59,14 @@
           {{ end }}
           {{ end }}
 
+          <!-- Search -->
+          <li class="nav-item">
+            <a class="nav-link" href='{{ if eq .Site.Language.Lang "en" }}{{else}}/nl{{end}}/#search' title="Search">{{i18n "search" }} <i class="fas fa-search"></i></a>
+          </li>
+          <!-- /Search -->
+
+
           <!-- Language toggle -->
-           
           {{ if .IsTranslated }}
           {{ range .Translations }}
           <li class="nav-item d-inline-block" style="min-width: 137px;">