Details pages styling cleanup

NYPL · Mar 3, 2021 · c46ae30 · c46ae30
1 parent 06230fb
commit c46ae30
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 48 deletions.
diff --git a/src/__tests__/unit/SearchPagination.test.jsx b/src/__tests__/unit/SearchPagination.test.jsx
diff --git a/src/components/EditionDetail/Edition.tsx b/src/components/EditionDetail/Edition.tsx
@@ -18,6 +18,7 @@ const Edition: React.FC<{ editionResult: EditionResult }> = (props) => {
   const edition: ApiEdition = props.editionResult.data;
 
   const featuredInstance = edition.instances[0];
+  console.log("edition", edition);
 
   const toggleShowAll = (e: React.ChangeEvent<HTMLInputElement>) => {
     router.push({
@@ -65,19 +66,25 @@ const Edition: React.FC<{ editionResult: EditionResult }> = (props) => {
         </div>
 
         <div className="content-primary">
-          <DS.Heading level={2} id="featured-edition">
-            Featured Copy
-          </DS.Heading>
+          {featuredInstance && (
+            <>
+              <DS.Heading level={2} id="featured-edition">
+                Featured Copy
+              </DS.Heading>
 
-          <div id="featured-edition-card">
-            <InstanceCard
-              editionYear={edition.publication_date}
-              instance={featuredInstance}
-            />
-          </div>
+              <div id="featured-edition-card">
+                <InstanceCard
+                  editionYear={edition.publication_date}
+                  instance={featuredInstance}
+                />
+              </div>
+            </>
+          )}
 
           <div id="nypl-item-details">
+            <hr />
             <EditionDetailDefinitionList edition={edition} />
+            <hr />
             {edition.instances && (
               <div className="all-instances-header">
                 <h3

diff --git a/src/components/Work/Work.tsx b/src/components/Work/Work.tsx
@@ -43,8 +43,6 @@ const WorkDetail: React.FC<{ workResult: WorkResult }> = (props) => {
     });
   };
 
-  console.log("showAll", router.query.showAll);
-
   return (
     <div className="layout-container">
       {/* TODO RequestDigital {this.state.requestedEdition && this.getRequestDigital(work)} */}
@@ -109,7 +107,7 @@ const WorkDetail: React.FC<{ workResult: WorkResult }> = (props) => {
                         <>Show only items currently available online</>
                       ),
                     }}
-                    checked={router.query.showAll === "false"}
+                    checked={router.query.showAll !== "true"}
                     onChange={(e) => toggleShowAll(e)}
                   />
                 </div>

diff --git a/src/lib/api/SearchApi.ts b/src/lib/api/SearchApi.ts
@@ -23,7 +23,7 @@ const defaultWorkQuery: WorkQuery = {
 
 const defaultEditionQuery = {
   editionIdentifier: "",
-  showAll: "false",
+  showAll: "true",
 };
 
 //TODO: Lower Priority: combine SearchQuery and ApiSearchQuery
@@ -82,9 +82,11 @@ export const workFetcher = async (query: WorkQuery) => {
 export const editionFetcher = async (query: EditionQuery) => {
   const editionApiQuery = {
     editionIdentifier: query.editionIdentifier,
-    showAll: query.showAll ? query.showAll : defaultEditionQuery.showAll,
+    showAll:
+      typeof query.showAll !== "undefined"
+        ? query.showAll
+        : defaultEditionQuery.showAll,
   };
-
   const res = await fetch(editionUrl, {
     method: "POST",
     headers: {

diff --git a/src/pages/edition/[editionId]/index.tsx b/src/pages/edition/[editionId]/index.tsx
@@ -9,6 +9,7 @@ export async function getServerSideProps(context: any) {
   //TODO: Default query
   const editionQuery: EditionQuery = {
     editionIdentifier: context.query.editionId,
+    showAll: context.query.showAll,
   };
 
   const editionResult: EditionResult = await editionFetcher(editionQuery);

diff --git a/styles/components/Search.scss b/styles/components/Search.scss
@@ -15,7 +15,7 @@
 .search-filter {
   @include space-stack-xs; 
   border-top: 2px solid var(--section-research-primary);
-  background-color: var(--ui-gray-light);
+  background-color: var(--ui-gray-xlight);
 
   h2 {
     @include space-inset-xs;
@@ -28,5 +28,11 @@
 }
 
 .filter-button {
+  @include space-stack-s;
+
   width: 100%
+}
+
+.content-bottom {
+  margin: 0 auto;
 }
diff --git a/styles/shared/DefinitionList.scss b/styles/shared/DefinitionList.scss
@@ -28,8 +28,6 @@ dl.nypl-details-table {
     }
 
     border-bottom: 1px solid var(--ui-gray-medium);
-
-
       @media (min-width: #{$breakpoint-medium}) {
         flex-flow: row;
         flex-wrap: wrap;