CSS for Search Results page

NYPL · Mar 1, 2021 · e72e611 · e72e611
1 parent f2490de
commit e72e611
Show file tree

Hide file tree

Showing 21 changed files with 256 additions and 290 deletions.
diff --git a/AWSCLIV2.pkg b/AWSCLIV2.pkg
diff --git a/src/components/FilterYears/FilterYears.scss b/src/components/FilterYears/FilterYears.scss
@@ -0,0 +1,6 @@
+.year-input-group {
+    display: flex;
+    div { 
+        margin-right: var(--space-s)
+    }
+}
diff --git a/src/components/FilterYears/FilterYears.tsx b/src/components/FilterYears/FilterYears.tsx
@@ -34,30 +34,36 @@ const FilterYears: React.FC<{
   }
 
   return (
-    <fieldset>
+    <fieldset className="date-range">
       <legend className="usa-legend font-sans-lg sub-legend">
         Publication Year
       </legend>
-      <DS.Label id="date-from-label" htmlFor="date-filter-from">
-        From
-      </DS.Label>
-      <DS.Input
-        type={DS.InputTypes.number}
-        id="date-filter-from"
-        value={dateFilters && dateFilters.start ? dateFilters.start : ""}
-        onChange={(e) => changeDate(e, true)}
-      />
-      <DS.HelperErrorText isError={false}> EX. 1901 </DS.HelperErrorText>
-      <DS.Label id="date-to-label" htmlFor="date-filter-to">
-        To
-      </DS.Label>
-      <DS.Input
-        type={DS.InputTypes.number}
-        id="date-filter-to"
-        value={dateFilters && dateFilters.end > 0 ? dateFilters.end : ""}
-        onChange={(e) => changeDate(e, false)}
-      />
-      <DS.HelperErrorText isError={false}> EX. 2000 </DS.HelperErrorText>
+      <div className="year-input-group">
+        <div className="year-input">
+          <DS.Label id="date-from-label" htmlFor="date-filter-from">
+            From
+          </DS.Label>
+          <DS.Input
+            type={DS.InputTypes.number}
+            id="date-filter-from"
+            value={dateFilters && dateFilters.start ? dateFilters.start : ""}
+            onChange={(e) => changeDate(e, true)}
+          />
+          <DS.HelperErrorText isError={false}> EX. 1901 </DS.HelperErrorText>
+        </div>
+        <div className="year-input">
+          <DS.Label id="date-to-label" htmlFor="date-filter-to">
+            To
+          </DS.Label>
+          <DS.Input
+            type={DS.InputTypes.number}
+            id="date-filter-to"
+            value={dateFilters && dateFilters.end > 0 ? dateFilters.end : ""}
+            onChange={(e) => changeDate(e, false)}
+          />
+          <DS.HelperErrorText isError={false}> EX. 2000 </DS.HelperErrorText>
+        </div>
+      </div>
       {dateRangeError && (
         <DS.HelperErrorText isError={true}>{dateRangeError}</DS.HelperErrorText>
       )}

diff --git a/src/components/Landing/Landing.tsx b/src/components/Landing/Landing.tsx
@@ -16,7 +16,10 @@ const LandingPage: React.FC<any> = () => {
         <DS.Breadcrumbs
           breadcrumbs={[{ url: "/", text: breadcrumbTitles.home }]}
         />
-        <div aria-label="Digital Research Books Beta" className="main-promo">
+        <div
+          aria-label="Digital Research Books Beta"
+          className="hero-container"
+        >
           <DS.Hero
             heroType={DS.HeroTypes.Secondary}
             heading={
@@ -43,18 +46,22 @@ const LandingPage: React.FC<any> = () => {
         </div>
       </div>
       <div className="content-primary">
-        <div className="searchbar">
-          <DS.Heading level={2}>
-            Search the World's Research Collections
-          </DS.Heading>
-          <SearchForm />
-          <p>
-            Use{" "}
-            <Link to="/advanced-search" className="link">
-              Advanced Search
-            </Link>{" "}
-            to narrow your results.
-          </p>
+        <div className="searchbar-container">
+          <div className="searchbar">
+            <div className="bar-content">
+              <DS.Heading level={2}>
+                Search the World's Research Collections
+              </DS.Heading>
+              <SearchForm />
+            </div>
+            <p className="advanced-search-message">
+              Use{" "}
+              <Link to="/advanced-search" className="link">
+                Advanced Search
+              </Link>{" "}
+              to narrow your results.
+            </p>
+          </div>
         </div>
         {
           // eslint-disable-next-line no-underscore-dangle

diff --git a/src/components/LanguageAccordion/LanguageAccordion.scss b/src/components/LanguageAccordion/LanguageAccordion.scss
@@ -0,0 +1,7 @@
+.language-accordion { 
+
+    .accordion { 
+        background-color: var(--ui-white);
+    }
+
+}
diff --git a/src/components/LanguageAccordion/LanguageAccordion.tsx b/src/components/LanguageAccordion/LanguageAccordion.tsx
@@ -27,13 +27,14 @@ const LanguageAccordion: React.FC<{
   };
 
   return (
-    <fieldset>
+    <fieldset className="language-accordion">
       <legend>
         <DS.Label htmlFor="lanaguage-select">Languages</DS.Label>
       </legend>
-      <DS.Accordion inputId="language-select" accordionLabel="Click to Expand">
+      <DS.Accordion inputId="language-select" accordionLabel="Filter Languages">
         <DS.List
           id="languages-list"
+          className="languages-list"
           type={DS.ListTypes.Unordered}
           modifiers={["no-list-styling"]}
         >

diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
@@ -5,14 +5,19 @@ import * as DS from "@nypl/design-system-react-components";
 // allow this component to accept all properties of "a" tag
 interface IProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   to: any;
+  modifiers?: string[];
   linkType?: DS.LinkTypes;
 }
 
 const Link = React.forwardRef(
-  ({ children, to, linkType, ...props }: IProps, ref: any) => {
+  ({ children, to, linkType, modifiers, ...props }: IProps, ref: any) => {
     return (
       <BaseLink href={to} passHref>
-        <DS.Link type={linkType} attributes={{ ref: ref, ...props }}>
+        <DS.Link
+          type={linkType}
+          modifiers={modifiers}
+          attributes={{ ref: ref, ...props }}
+        >
           {children}
         </DS.Link>
       </BaseLink>

diff --git a/src/components/ResultsFilters/ResultsFilters.scss b/src/components/ResultsFilters/ResultsFilters.scss
diff --git a/src/components/ResultsFilters/ResultsFilters.tsx b/src/components/ResultsFilters/ResultsFilters.tsx
@@ -97,7 +97,7 @@ const Filters: React.FC<{
   };
 
   return (
-    <>
+    <div className="results-filters">
       <DS.Checkbox
         checkboxId="avail_online"
         checked={!showAll}
@@ -130,7 +130,7 @@ const Filters: React.FC<{
         dateRangeError={dateRangeError}
         onSubmit={() => submitDateForm()}
       />
-    </>
+    </div>
   );
 };
 

diff --git a/src/components/ResultsList/ResultsList.scss b/src/components/ResultsList/ResultsList.scss
@@ -0,0 +1,7 @@
+.search-result {
+    @include space-stack-m
+}
+
+.editions-link {
+    margin-left: var(--space-m)
+}
diff --git a/src/components/SearchResults/ResultsList.tsx → src/components/ResultsList/ResultsList.tsx b/src/components/SearchResults/ResultsList.tsx → src/components/ResultsList/ResultsList.tsx
@@ -34,14 +34,13 @@ const ResultsList: React.FC<{ works: ApiWork[] }> = ({ works }) => {
       </div>
     );
   }
-  //TODO Re-implement RequestDigital
   return (
     <DS.List type={DS.ListTypes.Unordered} modifiers={["no-list-styling"]}>
       {works.map((work) => {
         const previewEdition = work.editions && work.editions[0];
 
         return (
-          <li key={`search-result-${work.uuid}`}>
+          <li key={`search-result-${work.uuid}`} className="search-result">
             <Link
               to={{
                 pathname: `/work/${work.uuid}`,
@@ -57,7 +56,11 @@ const ResultsList: React.FC<{ works: ApiWork[] }> = ({ works }) => {
               </DS.Heading>
             </Link>
             <span>{EditionCardUtils.getSubtitle(work.sub_title)}</span>
-            {EditionCardUtils.getAuthorsList(work.agents, "author")}
+            {EditionCardUtils.getAuthorsList(work.agents, "author") && (
+              <span>
+                By {EditionCardUtils.getAuthorsList(work.agents, "author")}{" "}
+              </span>
+            )}
             <EditionCard edition={previewEdition} />
             {/* TODO: Feature flag -- Citations
             {shouldShowCitations && (
@@ -72,7 +75,7 @@ const ResultsList: React.FC<{ works: ApiWork[] }> = ({ works }) => {
                 isGovernmentDoc={citationData.isGovernmentDoc}
               />
             )} */}
-            {getEditionsLinkElement(work)}
+            <div className="editions-link">{getEditionsLinkElement(work)}</div>
           </li>
         );
       })}

diff --git a/src/components/ResultsSorts/ResultsSorts.scss b/src/components/ResultsSorts/ResultsSorts.scss
@@ -0,0 +1,22 @@
+.sort-form {
+    fieldset {
+        border: none;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+
+        @media (min-width: $breakpoint-medium) {
+            flex-direction: row;
+        }
+
+        label {
+            @include space-inset-s;
+            flex: 1 0 auto;
+        }
+        input { 
+            @include space-inset-s;
+
+            flex: 0 1 auto;
+        }
+    }
+}
diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx
@@ -11,7 +11,7 @@ import {
   SearchQueryDefaults,
 } from "~/src/types/SearchQuery";
 import { sortMap } from "~/src/constants/sorts";
-import ResultsList from "../SearchResults/ResultsList";
+import ResultsList from "../ResultsList/ResultsList";
 import { searchResultsFetcher } from "~/src/lib/api/SearchApi";
 import { breakpoints } from "~/src/constants/breakpoints";
 import { toLocationQuery } from "~/src/util/SearchUtils";
@@ -25,7 +25,6 @@ const SearchResults: React.FC<{
   searchQuery: SearchQuery;
   searchResults: ApiSearchResult;
 }> = (props) => {
-
   const [searchQuery, setSearchQuery] = useState({
     ...SearchQueryDefaults,
     ...props.searchQuery,
@@ -49,7 +48,7 @@ const SearchResults: React.FC<{
   // When the window resizes, set mobile.
   useEffect(() => {
     function handleResize() {
-      if (window.innerWidth < breakpoints.medium) {
+      if (window.innerWidth < breakpoints.large) {
         setMobile(true);
       } else {
         setMobile(false);
@@ -214,7 +213,7 @@ const SearchResults: React.FC<{
                 : "Viewing 0 items"}
             </DS.Heading>
             {!isMobile && (
-              <form name="sortForm" ref={sortForm}>
+              <form className="sort-form" name="sortForm" ref={sortForm}>
                 <ResultsSorts
                   perPage={searchQuery.perPage}
                   sort={searchQuery.sort}
@@ -228,6 +227,7 @@ const SearchResults: React.FC<{
         </div>
         {isMobile && (
           <DS.Button
+            className="filter-button"
             id="filter-button"
             buttonType={DS.ButtonTypes.Secondary}
             onClick={() => {
@@ -239,12 +239,17 @@ const SearchResults: React.FC<{
         )}
       </div>
 
-      <div className="content-secondary content-secondary--with-sidebar-left">
+      <div
+        className={`content-secondary${
+          !isMobile && " content-secondary--with-sidebar-left"
+        }`}
+      >
         {!isMobile && (
-          <form ref={filterForm}>
+          <form className="search-filter" ref={filterForm}>
             <DS.Heading level={2} id="filter-desktop-header">
               Refine Results
             </DS.Heading>
+            <hr />
             <Filters
               filters={searchQuery.filters}
               filterYears={searchQuery.filterYears}

diff --git a/src/components/SearchHeader/SearchHeader.scss b/src/components/SearchHeader/SearchHeader.scss
@@ -0,0 +1,36 @@
+.search-header-container {
+    @include breakout;
+    background-color: var(--section-research-primary);
+}
+.search-header {
+    @include wrapper;
+    @include space-stack-l;
+
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+
+    @media (min-width: $breakpoint-medium) {
+        flex-flow: row;
+        align-items: flex-end;
+    }
+
+    & > div {
+        @include space-stack-m;
+        flex: 1 1 auto;
+    }
+
+    h1 { 
+        color: var(--ui-white); 
+        @media (min-width: #{$breakpoint-medium}) {
+            max-width: 300px;
+        }
+
+    }
+    .link {
+        @include space-stack-m;
+
+    }
+
+}
+
diff --git a/src/components/SearchHeader/SearchHeader.tsx b/src/components/SearchHeader/SearchHeader.tsx
@@ -14,14 +14,18 @@ const SearchHeader: React.FC<{ searchQuery?: SearchQuery }> = ({
   searchQuery,
 }) => {
   return (
-    <div className="search-header" aria-label="Digital Research Books Beta">
-      <>
+    <div className="search-header-container">
+      <div className="search-header" aria-label="Digital Research Books Beta">
         <DS.Heading level={1} id="1" text="Digital Research Books Beta" />
         <SearchForm searchQuery={searchQuery} />
-        <Link to="/advanced-search" className="link">
+        <Link
+          to="/advanced-search"
+          modifiers={["dark-background"]}
+          className="link"
+        >
           Advanced Search
         </Link>
-      </>
+      </div>
     </div>
   );
 };