feat/algolia search

_includes/main_scripts.html

@@ -84,6 +84,12 @@
   <script src="{{- "/assets/js/algolia-search.js" | relative_url -}}" crossorigin="anonymous"></script>
 {%- endif -%}
 
+{%- if page.layout == 'egazette-search-landing' -%}
+  <link rel="stylesheet" href="{{- site.baseurl -}}/assets/css/algolia.css">
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js" integrity="sha256-DABVk+hYj0mdUzo+7ViJC6cwLahQIejFvC+my2M/wfM=" crossorigin="anonymous"></script>
+  <script src="{{- "/assets/js/algolia-search-landing.js" | relative_url -}}" crossorigin="anonymous"></script>
+{%- endif -%}
+
 {%- include chatbot-scripts.html -%}
 
 <script async src="{{- site.baseurl -}}/assets/js/autotrack.js"></script>

_layouts/egazette-search-landing.html

@@ -0,0 +1,67 @@
+---
+layout: skeleton
+---
+<section class="bp-section">
+  <div class="bp-container px-8 py-6">
+    <h2 class="h2 pb-3"><b>{{- page.title -}}</b></h2>
+    <div class="algolia-search-landing-subtitle-container">
+      <p class="algolia-search-landing-subtitle">Find a Gazette by keyword</p>
+      <a href="{{ page.searchUrl }}" class="link-button">
+        <span class="link-button-text">Browse all Gazettes</span>
+        <i class="sgds-icon sgds-icon-arrow-right is-size-4 ml-3" aria-hidden="true"></i>
+      </a>
+    </div>
+  </div>
+  <div class="bp-container search-content algolia-search-landing-container px-8">
+    <form id="categoryForm" data-url="{{ page.searchUrl }}">
+      <div class="algolia-search-query-container">
+        <label class="subhead-1 py-4" for="category"><b>Keyword</b></label>
+        <input class="input is-fullwidth" id="algolia-search-box-landing" type="text" placeholder="What are you looking for?" name="query" autocomplete="off">
+      </div>
+      <div class="algolia-search-category-container pb-8 pt-4">
+        <div class="subhead-1"><b>Year</b></div>
+        <div class="is-flex algolia-landing-date-container">
+          <input class="input date-input" id="input-start-date" type="text" inputmode="numeric" placeholder="Start year" name="start-date" autocomplete="off" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
+          <p class="date-dash">~</p>
+          <input class="input date-input" id="input-end-date" type="text" inputmode="numeric" placeholder="End year" name="end-date" autocomplete="off" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
+        </div>
+        <div class="subhead-1"><b>Month</b></div>
+        <div class="is-flex algolia-landing-date-container">
+          <input class="input date-input" id="input-start-month" type="text" inputmode="numeric" placeholder="Start month (e.g. 1)" name="start-month" autocomplete="off" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
+          <p class="date-dash">~</p>
+          <input class="input date-input" id="input-end-month" type="text" inputmode="numeric" placeholder="End month (e.g. 12)" name="end-month" autocomplete="off" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
+        </div>
+        <div>
+          <div class="subhead-1"><b>Category</b></div>
+          <div class="datagov-v2-browsing pb-4">Please refer to the FAQ on the sub-categories below</div>
+        <div id="category" class="algolia-search-category-items-container">
+          <div>
+            <div class="algolia-search-category-item">
+              <input id="category-government" type="checkbox" data-category="category" value="Government Gazette">
+              <label for="category-government"><b>Government Gazette</b></label>
+            </div>
+            <div id="government-gazette" class="pl-7"></div>
+          </div>
+          <div>
+            <div class="algolia-search-category-item">
+              <input id="category-legislative" type="checkbox" data-category="category" value="Legislative Supplements">
+              <label for="category-legislative"><b>Legislation Supplements</b></label>
+            </div>
+            <div id="legislative-supplements" class="pl-7"></div>
+          </div>
+          <div>
+            <div class="algolia-search-category-item">
+              <input id="category-other" type="checkbox" data-category="category" value="Other Supplements">
+              <label for="category-other"><b>Other Supplements</b></label>
+            </div>
+            <div id="other-supplements" class="pl-7"></div>
+          </div>
+        </div>
+      </div>
+    </form>
+  </div>
+</section>
+<div class="algolia-search-landing-footer">
+  <button id="clearFiltersButton" class="bp-button is-medium search-button">Clear filters</button>
+  <button id="submitButton" class="bp-button is-secondary is-medium has-text-white search-button">Search</button>
+</div>

_layouts/egazette-search.html

@@ -2,70 +2,74 @@
 layout: skeleton
 ---
 
-<section class="bp-section is-small search-section bp-section-pagetitle">
-  <div class="bp-container">
-    <div class="row">
-      <div class="col is-8 is-offset-2">
-        <p class="has-text-white">{%- include header-breadcrumb.html -%}</p>
-      </div>
+<section class="bp-section">
+  <div class="bp-container pb-16">
+    <div id="search-title" class="col is-8 is-offset-1 px-0">
+      <h2 class="h2">{{- page.title -}}</h5>
     </div>
   </div>
-  <div class="bp-container">
+  <div class="bp-container search-content">
     <div class="row">
-      <div id="search-title" class="col is-8 is-offset-2">
-        <h1 class="has-text-white"><b>{{- page.title -}}</b></h1>
-      </div>
-    </div>
-  </div>
-  <div class="bp-container">
-    <div>
-      <div class="row">
+      <div class="col is-3 is-offset-1">   
+        <h5 class="margin--bottom--sm"><b>Search</b></h5>
         <div
-          id="search-container"
-          class="col is-8 right-padding-zero is-offset-2"
+          class="field has-addons control has-icons-left is-expanded input is-fullwidth is-large algolia-searchbar"
+          id="searchbox"
         >
-          <div
-            class="field has-addons control has-icons-left is-expanded input is-fullwidth is-large"
-            id="searchbox"
-          >
-            <span class="is-large is-left">
-                <i class="sgds-icon sgds-icon-search is-size-4 search-bar"></i>
-            </span>
-          </div>
-          <div id="poweredby"></div>
-          </div>
+          <span class="is-large is-left">
+              <i class="sgds-icon sgds-icon-search is-size-4 search-bar"></i>
+          </span>
+        </div>
+        <h5 class="margin--bottom--sm subtitle-1 pt-4"><b>Filter by</b></h5>
+        <hr class="algolia-search-divider"/>
+        <div id="refinement-list-category-container">
+          <h5 class="margin--bottom--sm subtitle-1">Category</h5>
+          <div id="refinement-list-category" class="margin--bottom"></div>
+          <hr class="algolia-search-divider"/>
+        </div>
+        <div id="refinement-list-subcategory-container">
+          <h5 class="margin--bottom--sm subtitle-1">Sub-category</h5>
+          <div id="refinement-list-subcategory" class="margin--bottom"></div>
+          <hr class="algolia-search-divider"/>
+        </div>
+        <div id="refinement-list-year-container">
+          <h5 class="margin--bottom--sm subtitle-1">Year</h5>
+          <div id="refinement-list-year" class="margin--bottom"></div>
+          <hr class="algolia-search-divider"/>
+        </div>
+        <div id="refinement-list-month-container">
+          <h5 class="margin--bottom--sm subtitle-1">Month</h5>
+          <div id="refinement-list-month" class="margin--bottom"></div>
+          <hr class="algolia-search-divider"/>
         </div>
       </div>
-    </div>
-  </div>
-</section>
-<section class="bp-section">
-  <div class="bp-container search-content">
-    <div class="is-flex col is-offset-2 search-label-options">
-      <h5>Search results</h5>
-      <div class="row search-hits-options">
-        <div id="hits-per-page" class="sgds-selector p-0"></div>
-      </div>
-    </div>
-    <div class="row">
-      <!-- TODO -->
-      <div id="loading-spinner">
-			</div>
-      <div class="col is-8 is-offset-2 search-results-display">
-        <div>
-          <div class="search-summary">
-            <!-- Not including total search results - we can only retrieve up to 1000 so the number might be inaccurate -->
-            <h4 class="search-results-count" id="search-results-count"></h4>
-            <small id="search-page-indicator"></small>
+
+      <div class="col is-8 margin--left">
+        <div class="is-flex row">
+            <div class="col is-9">
+              <div id="stats"></div>
+              <div id="current-refinements" style="display:none"></div>
+              <div id="clear-refinements"></div>
+            </div>
+            <div id="sorted-by" class="col">
+              <div>Sorted by most recent</div>
+            </div>
+        </div>
+        <div class="row">
+          <div id="range-input"></div>
+          <!-- TODO -->
+          <div id="loading-spinner">
+          </div>
+          <div class="col search-results-display">
+            <div>
+              <h5 class="search-results" id="hits"></h5>
+            </div>
           </div>
-          <br />
-          <h5 class="search-results" id="hits"></h5>
         </div>
-
       </div>
     </div>
-  </div>
-</section>
+     </div>
+  </section>
 
 <div id="paginator-pages">
   <div id="pagination"></div>

_sass/theme/_text-styles.scss

@@ -61,6 +61,14 @@
   line-height: 2rem; /* 123.077% */
 }
 
+.subhead-1 {
+  font-size: 1.25rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.5rem; /* 150% */
+  letter-spacing: -0.006rem;
+}
+
 .subtitle-1 {
   color: $content-base;