Update algolia search results styles and structure

SU-SWS · Nov 22, 2023 · 6ac1d80 · 6ac1d80
1 parent ccf2781
commit 6ac1d80
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 24 deletions.
diff --git a/themes/stanford_basic/algolia-search/dist/islands/algolia-search.island.js b/themes/stanford_basic/algolia-search/dist/islands/algolia-search.island.js
diff --git a/themes/stanford_basic/algolia-search/src/algolia-search.island.tsx b/themes/stanford_basic/algolia-search/src/algolia-search.island.tsx
@@ -22,7 +22,12 @@ const Hit = ({hit}) => {
 
 const Container = styled.div`
   li {
-    margin-bottom: 40px;
+    margin-bottom: 30px;
+    border-bottom: 1px solid black;
+
+    &:last-child {
+      border-bottom: none;
+    }
   }
 `
 

diff --git a/themes/stanford_basic/algolia-search/src/hits/default-hit.tsx b/themes/stanford_basic/algolia-search/src/hits/default-hit.tsx
@@ -4,20 +4,19 @@ import {Highlight, Snippet} from "react-instantsearch";
 const HitContainer = styled.article`
   display: flex;
   flex-direction: column;
-  gap: 40px;
-  justify-content: left;
-  padding: 20px;
-  margin-bottom: 20px;
+  justify-content: space-between;
+  gap: 4rem;
+  padding: 2rem 2rem 2rem 0;
+  margin-bottom: 2rem;
 
   @media (min-width: 768px) {
     flex-direction: row;
   }
 
   img {
-    max-width: 200px;
-    max-height: 200px;
+    max-width: 300px;
+    max-height: 300px;
     object-fit: cover;
-    aspect-ratio: 1;
   }
 `
 
@@ -31,10 +30,7 @@ const DefaultHit = ({hit}) => {
   const hitUrl = new URL(hit.url);
 
   return (
-    <HitContainer className="su-card">
-      {hit.photo &&
-        <img src={hit.photo.replace(hitUrl.origin, '')} alt=""/>
-      }
+    <HitContainer>
       <DetailsContainer>
         <div>
           <h2>
@@ -62,6 +58,9 @@ const DefaultHit = ({hit}) => {
           </div>
         }
       </DetailsContainer>
+      {hit.photo &&
+        <img src={hit.photo.replace(hitUrl.origin, '')} alt=""/>
+      }
     </HitContainer>
   )
 }

diff --git a/themes/stanford_basic/algolia-search/src/search-box.tsx b/themes/stanford_basic/algolia-search/src/search-box.tsx
@@ -55,7 +55,7 @@ const SearchBox = (props) => {
           autoFocus
         />
       </div>
-      <div style={{display: "flex", gap: "10px"}}>
+      <div style={{display: "flex", gap: "1rem", marginTop: "1rem"}}>
         <button type="submit">Submit</button>
         <button
           type="reset"