CSHARP-55 | @jdwjdwjdw | Update Algolia filter and search results page (

#11) * Update filter labels * Update algolia search * Search page fixups
SU-SWS · May 10, 2024 · a2681b5 · a2681b5
1 parent 7135fd5
commit a2681b5
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 27 deletions.
diff --git a/algolia-search/dist/islands/algolia-search.island.js b/algolia-search/dist/islands/algolia-search.island.js
diff --git a/algolia-search/src/algolia-search.island.tsx b/algolia-search/src/algolia-search.island.tsx
@@ -20,8 +20,18 @@ const Hit = ({hit}: HitsProps<StanfordHit>) => {
   return <DefaultHit hit={hit}/>
 }
 
-const Container = styled.div`
+const ResultsContainer = styled.ul`
+  list-style: none;
+  padding-left: 0;
+
+  @media (min-width: 768px) {
+    float: right;
+    width: 66%;
+    padding-left: 2rem;
+  }
+`
 
+const Container = styled.div`
   li {
     margin-bottom: 10px;
 
@@ -54,16 +64,13 @@ const CustomHits = (props) => {
 
   // Returns results
   return (
-    <ul
-      style={{listStyle: "none", padding: 0, float: "right", width: "66%"}}
-      className=""
-    >
+    <ResultsContainer>
       {hits.map(hit =>
         <li key={hit.objectID}>
           <Hit hit={hit}/>
         </li>
       )}
-    </ul>
+    </ResultsContainer>
   )
 }
 

diff --git a/algolia-search/src/search-form.tsx b/algolia-search/src/search-form.tsx
@@ -1,3 +1,4 @@
+import styled from "styled-components";
 import {
   useCurrentRefinements,
   useInstantSearch,
@@ -6,6 +7,23 @@ import {
 } from "react-instantsearch";
 import {useEffect, useRef} from "preact/compat";
 
+const FilterContainer = styled.div`
+  margin-top: 39px;
+
+  @media (min-width: 576px) {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    column-gap: 6rem;
+  }
+
+  @media (min-width: 768px) {
+    display: block;
+    float: left;
+    width: 33%;
+    padding-right: 2rem;
+  }
+`
+
 const SearchForm = (props) => {
 
   const {query, refine} = useSearchBox(props);
@@ -73,68 +91,82 @@ const SearchForm = (props) => {
 
         <div style={{display: "flex", gap: "1rem", marginTop: "1rem"}}>
           <button type="submit">Submit</button>
-
+          <button type="reset">Clear all</button>
         </div>
       </div>
 
-      <div style={{float: "left", width: "33%", "margin-top": "39px"}}>
+      <FilterContainer>
         <fieldset>
-          <legend>Basic Page Types</legend>
+          <legend style={{fontSize: "2.4rem"}}>Filter by Access & Affiliation</legend>
 
           <ul style={{listStyle: "none", paddingLeft: "0", marginInline: "0"}}>
             {pageTypeRefinements.map((item, i) =>
               <li
                 key={i}
-                className="w-fit flex items-center justify-center border border-black p-5 mb-5 last:mb-0"
-                style={{
-                  alignItems: "center",
-                }}
+                style={{marginBottom: "0"}}
               >
                 <label style={{
-                  marginTop: "1rem",
+                  marginTop: "0",
+                  paddingTop: ".6rem",
+                  paddingBottom: ".6rem",
                   display: "flex",
                   alignItems: "center",
+                  fontSize: "2rem",
                 }}>
                   <input
                     type="checkbox"
                     onChange={() => refinePageTypes(item.value)}
                     checked={item.isRefined}
+                    style={{
+                      width: "24px",
+                      height: "24px",
+                      flexShrink: "0",
+                    }}
                   />
-                  {item.value} ({item.count})
+                  <div style={{marginTop: "1px"}}>
+                    {item.value} ({item.count})
+                  </div>
                 </label>
               </li>
             )}
           </ul>
         </fieldset>
         <fieldset>
-          <legend>Shared Types</legend>
+          <legend style={{fontSize: "2.4rem"}}>Filter by Discipline</legend>
 
           <ul style={{listStyle: "none", paddingLeft: "0", marginInline: "0"}}>
             {sharedRefinements.map((item, i) =>
               <li
                 key={`shared-i`}
-                style={{alignItems: "center"}}
+                style={{marginBottom: "0"}}
               >
                 <label style={{
-                  marginTop: "1rem",
+                  marginTop: "0",
+                  paddingTop: ".6rem",
+                  paddingBottom: ".6rem",
                   display: "flex",
                   alignItems: "center",
+                  fontSize: "2rem",
                 }}>
                   <input
                     type="checkbox"
                     onChange={() => refineSharedTypes(item.value)}
                     checked={item.isRefined}
+                    style={{
+                      width: "24px",
+                      height: "24px",
+                      flexShrink: "0",
+                    }}
                   />
-                  {item.value} ({item.count})
+                  <div style={{marginTop: "1px"}}>
+                    {item.value} ({item.count})
+                  </div>
                 </label>
               </li>
             )}
           </ul>
         </fieldset>
-        <button type="reset">
-          Reset
-        </button>
-      </div>
+      </FilterContainer>
     </form>
   );
 }

diff --git a/c_sharp_subtheme.theme b/c_sharp_subtheme.theme
@@ -48,3 +48,12 @@ function c_sharp_subtheme_preprocess_banner(&$variables) {
   // Add banner variant style class to card wrapper.
   $variables['attributes']['class'][] = $paragraph->getBehaviorSetting('react_paragraphs:banner_variant_info', 'banner_style');
 }
+
+/**
+ * Implements hook_preprocess_page_title().
+ */
+function c_sharp_subtheme_preprocess_page_title(&$variables) {
+  if (\Drupal::request()->getPathInfo() == '/search') {
+    $variables['title']['#markup'] = 'Search Shared Facilities';
+  }
+}