made some style and metadata changes for a better mobile experience

judaicadh · Nov 12, 2024 · 36e259a · 36e259a
1 parent ddaaf49
commit 36e259a
Show file tree

Hide file tree

Showing 13 changed files with 342 additions and 162 deletions.
diff --git a/src/components/Layout/Header.astro b/src/components/Layout/Header.astro
@@ -21,6 +21,7 @@ const { title, description, schemaData } = Astro.props;
 			rel="stylesheet"
 			href="https://cdn.jsdelivr.net/npm/@duetds/[email protected]/dist/duet/themes/default.css"
 		/>
+
 		<!-- Render schema data if provided -->
 	{schemaData && <Schema item={schemaData} />}
 </head>
diff --git a/src/components/Search/App.tsx b/src/components/Search/App.tsx
@@ -1,3 +1,4 @@
+import { algoliasearch } from "algoliasearch";
 import React, { useState, useRef, useEffect } from "react";
 import {
   Configure,
@@ -12,9 +13,10 @@ import {
   ToggleRefinement,
   HitsPerPage,
   CurrentRefinements,
-  Stats, RangeInput
+  Stats,
+
 } from 'react-instantsearch'
- import { algoliasearch } from "algoliasearch";
+
 import { createBrowserHistory } from "history";
 import HitTest from "@components/Search/Hit";
 import "../../styles/App/App.css";
@@ -24,25 +26,21 @@ import "../../styles/App/App.mobile.css";
 import "../../styles/App/Pagination.css";
 
 import { Panel } from '@components/Search/Panel.tsx'
-
-import CustomRangeSlider from '@components/Search/DateRange.tsx'
-import DateRangeSliderFilter from '@components/Search/DateRange.tsx'
 import DateRangeSlider from '@components/Search/DateRange.tsx'
-
+import { ClearFiltersMobile } from '@components/Search/ClearFiltersMobile.tsx'
+import { SaveFiltersMobile } from '@components/Search/SaveFiltersMobile.tsx'
 const searchClient = algoliasearch("ZLPYTBTZ4R", "be46d26dfdb299f9bee9146b63c99c77");
 
+
+
+import { ResultsNumberMobile } from '@components/Search/ResultsNumberMobile.tsx'
+import { ClearFilters } from '@components/Search/ClearFilters.tsx'
+import { NoResultsBoundary } from '@components/Search/NoResultsBoundary.tsx'
+import { NoResults } from '@components/Search/NoResults.tsx'
+import { ScrollTo } from '@components/Search/ScrollTo.tsx'
 // Custom router setup
 const history = createBrowserHistory();
-const dateToTimestamp = (dateString) => {
-  const date = new Date(dateString);
-  return isNaN(date.getTime()) ? null : Math.floor(date.getTime() / 1000);
-};
 
-const timestampToDate = (timestamp) => {
-  if (timestamp === null || timestamp === undefined) return "";
-  const date = new Date(timestamp * 1000);
-  return date.toISOString().split('T')[0];
-};
 
 function createURL(routeState) {
   const { q } = routeState;
@@ -58,8 +56,6 @@ function getStateFromLocation(location) {
     q: searchParams.get("q") || "",
   };
 }
-const MIN_TIMESTAMP = -17987443200; // January 1, 1400 in UNIX timestamp
-const MAX_TIMESTAMP = -2208988800;  // January 1, 1900 in UNIX timestamp
 
 const routing = {
   router: {
@@ -105,69 +101,104 @@ const routing = {
 
 function App() {
   const containerRef = useRef<HTMLDivElement>(null);
+  const headerRef = useRef(null);
   const searchParams = new URLSearchParams(window.location.search);
   const initialQuery = searchParams.get("q") || "";
 
   function openFilters() {
-    document.body.classList.add("filtering");
+    document.body.classList.add('filtering');
     window.scrollTo(0, 0);
+    window.addEventListener('keyup', onKeyUp);
+    window.addEventListener('click', onClick);
   }
 
+
   function closeFilters() {
     document.body.classList.remove("filtering");
     containerRef.current?.scrollIntoView({ behavior: "smooth" });
   }
+  function onKeyUp(event: { key: string }) {
+    if (event.key !== 'Escape') {
+      return;
+    }
+
+    closeFilters();
+  }
+
+  function onClick(event: MouseEvent) {
+    if (event.target !== headerRef.current) {
+      return;
+    }
+
+    closeFilters();
+  }
 
   return (
     <div id="container">
       <InstantSearch searchClient={searchClient} indexName="Dev_Kaplan" routing={routing} insights>
-        <header className="header">
+        <header className="header" ref={headerRef}>
           <p className="header-title">Explore the Kaplan Collection</p>
           <SearchBox
             placeholder="Rebecca Gratz, Billhead, Trade Card..."
             defaultValue={initialQuery}
             loadingIconComponent={({ classNames }) => (
               <div className={classNames.loadingIcon}>Loading</div>
             )}
+            submitIconComponent={SubmitIcon}
           />
         </header>
 
-
-
+        <Configure
+          attributesToSnippet={['description:10']}
+          snippetEllipsisText="…"
+          removeWordsIfNoResults="allOptional"
+        />
+        <ScrollTo>
         <main className="container" ref={containerRef}>
           <div className="container-wrapper">
             <section className="container-filters">
               <Stats />
               <div className="container-header">
                 <h2>Filters</h2>
-                <ClearRefinements translations={{ resetButtonText: "Clear all" }} />
+                <div className="clear-filters" data-layout="desktop">
+                  <ClearFilters />
+                </div>
+
+                <div className="clear-filters" data-layout="mobile">
+                  <ResultsNumberMobile />
+                </div>
               </div>
+
+
               <div className="container-body">
+
                 <DynamicWidgets>
                   <Panel header="Types">
-                    <RefinementList attribute="type" searchable={true} showMore={true} searchablePlaceholder="Search for Object Types…" />
+                    <RefinementList attribute="type" searchable={true} showMore={true}
+                                    searchablePlaceholder="Search for Object Types…" />
                   </Panel>
                 </DynamicWidgets>
-                 <Panel header="Name">
-                  <RefinementList attribute="name" searchable={true} showMore={true} searchablePlaceholder="Search for People and Businesses" />
+                <Panel header="Name">
+                  <RefinementList attribute="name" searchable={true} showMore={true}
+                                  searchablePlaceholder="Search for People and Businesses" />
                 </Panel>
                 <Panel header="Thumbnails">
                   <ToggleRefinement attribute="hasRealThumbnail" label="Only Items with Images" />
                 </Panel>
                 <Panel header="Date">
                   <DateRangeSlider
                     dateFields={[
-                      "startDate1", "endDate1",
-                      "startDate2", "endDate2",
-                      "startDate3", "endDate3",
-                      "startDate4", "endDate4",
-                      "startDate5", "endDate5",
-                      "startDate6", "endDate6",
-                      "startDate7", "endDate7",
-                      "startDate8", "endDate8",
-                      "startDate9", "endDate9",
-                      "startDate10", "endDate10",
-                      "startDate11", "endDate11"
+                      'startDate1', 'endDate1',
+                      'startDate2', 'endDate2',
+                      'startDate3', 'endDate3',
+                      'startDate4', 'endDate4',
+                      'startDate5', 'endDate5',
+                      'startDate6', 'endDate6',
+                      'startDate7', 'endDate7',
+                      'startDate8', 'endDate8',
+                      'startDate9', 'endDate9',
+                      'startDate10', 'endDate10',
+                      'startDate11', 'endDate11'
                     ]}
                     minTimestamp={-15135361438} // Example start date in your data range
                     maxTimestamp={-2208988800} // Example end date in your data range
@@ -177,18 +208,29 @@ function App() {
                 </Panel>
               </div>
             </section>
-            <footer className="container-filters-footer" />
+            <footer className="container-filters-footer" data-layout="mobile">
+              <div className="container-filters-footer-button-wrapper">
+                <ClearFiltersMobile containerRef={containerRef} />
+              </div>
+
+              <div className="container-filters-footer-button-wrapper">
+                <SaveFiltersMobile onClick={closeFilters} />
+              </div>
+            </footer>
           </div>
           <section className="container-results">
             <header className="container-header container-options">
-              <CurrentRefinements />
               <SortBy
+
                 items={[
-                  { value: 'Dev_Kaplan', label: 'Default' },
-                  { label: "Sort by name", value: "title" },
-                  { label: "Sort by type", value: "type" },
+                  { value: 'Dev_Kaplan', label: 'Sort by relevance', },
+                  { value: 'title',  label: 'Sort by name', },
+                  { value: "type", label: 'Sort by type',  },
                 ]}
               />
+              <CurrentRefinements />
+              <ClearRefinements />
+
               <HitsPerPage
                 items={[
                   { label: "20 hits per page", value: 20, default: true },
@@ -198,16 +240,74 @@ function App() {
                 ]}
               />
             </header>
-            <Hits hitComponent={HitTest} />
+            <NoResultsBoundary fallback={<NoResults />}>
+              <Hits hitComponent={HitTest} />
+            </NoResultsBoundary>
             <footer className="container-footer">
               <Configure hitsPerPage={20} />
               <Pagination />
+              <footer className="container-filters-footer" data-layout="mobile">
+                <div className="container-filters-footer-button-wrapper">
+                  <ClearFiltersMobile containerRef={containerRef} />
+                </div>
+
+                <div className="container-filters-footer-button-wrapper">
+                  <SaveFiltersMobile onClick={closeFilters} />
+                </div>
+              </footer>
             </footer>
           </section>
         </main>
+        </ScrollTo>
+
+        <aside data-layout="mobile">
+          <button
+            className="filters-button"
+            data-action="open-overlay"
+            onClick={openFilters}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 14">
+              <path
+                d="M15 1H1l5.6 6.3v4.37L9.4 13V7.3z"
+                stroke="#fff"
+                strokeWidth="1.29"
+                fill="none"
+                fillRule="evenodd"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+            Filters
+          </button>
+        </aside>
       </InstantSearch>
     </div>
-  );
-}
+      );
+      }
+
+      function SubmitIcon() {
+      return (
+      <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 18 18"
+      aria-hidden="true"
+      >
+      <g
+      fill="none"
+      fillRule="evenodd"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.67"
+      transform="translate(1 1)"
+      >
+      <circle cx="7.11" cy="7.11" r="7.11" />
+      <path d="M16 16l-3.87-3.87" />
+      </g>
+      </svg>
+      );
+    }
 
 export default App;
diff --git a/src/components/Search/ClearFiltersMobile.tsx b/src/components/Search/ClearFiltersMobile.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { useClearRefinements } from 'react-instantsearch';
+
+export function ClearFiltersMobile({
+																		 containerRef,
+																	 }: {
+	containerRef: React.RefObject<HTMLElement>;
+}) {
+	const { refine } = useClearRefinements();
+
+	function onClick() {
+		refine();
+		document.body.classList.remove('filtering');
+		containerRef.current!.scrollIntoView();
+	}
+
+	return (
+		<div className="ais-ClearRefinements">
+			<button className="ais-ClearRefinements-button" onClick={onClick}>
+				Reset filters
+			</button>
+		</div>
+	);
+}
diff --git a/src/components/Search/DateConnect.tsx b/src/components/Search/DateConnect.tsx
diff --git a/src/components/Search/Hit.tsx b/src/components/Search/Hit.tsx
@@ -5,7 +5,8 @@ type HitProps = {
   hit: AlgoliaHit<{
     name: string;
     type: string[];
-    date: string;
+    subtype: string[];
+    dateC: string;
     description: string;
     title: string;
     geography: string[];
@@ -23,25 +24,26 @@ type HitProps = {
 export function HitTest({ hit }: HitProps) {
   return (
     <article className="hit">
-      <a href={`/item/${hit.slug}`}>
-        <div className="hit-image">
-          <img src={hit.thumbnail || 'path/to/default/image.png'} alt={hit.title} />
-
-        </div>
-      </a>
-      <div className="mt-6">
-        <a href={`/item/${hit.slug}`}>
-        <span
-          className="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded-full dark:bg-gray-700 dark:text-gray-300">
-          {hit.type[0]}
-        </span>
-          <hr className="h-px my-2 bg-gray-200 border-0 dark:bg-gray-700" />
-          <p className="text-gray-500 dark:text-gray-400">{hit.title}</p>
-        </a>
+      <header className="hit-image-container">
+        <img src={hit.thumbnail} alt={hit.title} className="hit-image" />
+      </header>
+<br/>
+      <div className="hit-info-container">
 
+
+          <h1>
+            {hit.title}
+          </h1>
+          <br />
+
+
+        <footer>
+          <p className="hit-category"> {hit.subtype[0]} - {hit.dateC}</p>
+
+        </footer>
       </div>
     </article>
-);
+  );
 }
 
 export default HitTest;