From afbf05bacba10873f00be496bbfa6cae8c61ebba Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Tue, 18 Jun 2024 18:35:26 -0700
Subject: [PATCH] adjust responsive styles

---
 .../nodes/pages/sup-book/sup-book-page.tsx    | 239 ++++++++++--------
 1 file changed, 134 insertions(+), 105 deletions(-)

diff --git a/src/components/nodes/pages/sup-book/sup-book-page.tsx b/src/components/nodes/pages/sup-book/sup-book-page.tsx
index 28936b4c..9ac9bfe0 100644
--- a/src/components/nodes/pages/sup-book/sup-book-page.tsx
+++ b/src/components/nodes/pages/sup-book/sup-book-page.tsx
@@ -37,13 +37,13 @@ const SupBookPage = async ({node, ...props}: Props) => {
 
   return (
     <article
-      className="centered pt-32"
+      className="centered"
       {...props}
     >
-      <div className="mb-20 flex flex-col gap-24 lg:flex-row">
-        <div className="flex flex-col gap-24 lg:flex-row xl:w-2/3">
-          <div className="xl:w-7/12">
-            <div className="rs-mb-0 rs-pb-3 flex flex-col border-b-2 border-fog">
+      <div>
+        <div className="mb-20 flex flex-col md:flex-row md:gap-24 md:pt-32">
+          <div className="relative left-1/2 flex w-screen -translate-x-1/2 flex-row justify-center gap-24 bg-fog-light px-20 pt-32 md:hidden">
+            <div className="mb-16 hidden w-8/12 flex-col sm:flex md:hidden">
               <H1 className="type-3 mb-0">{node.title}</H1>
 
               {node.supBookSubjects && (
@@ -59,73 +59,152 @@ const SupBookPage = async ({node, ...props}: Props) => {
 
               {node.supBookSubtitle && <div className="type-2 mt-5 font-medium">{node.supBookSubtitle}</div>}
 
-              {node.supBookAuthorsFull && <div className="text-m2 text-press-sand-dark">{node.supBookAuthorsFull}</div>}
-
-              {awards && (
-                <div className="rs-mt-1 border-t-2 border-fog">
-                  <H2 className="flex w-fit items-center gap-2 bg-fog p-3 -text-m1 font-semibold">
-                    <BookmarkIcon
-                      width={20}
-                      className="fill-archway"
-                    />
-                    Award Winner
-                  </H2>
-                  <BookAwards>
-                    {awards.map(award => (
-                      <div key={award.id}>{award.name}</div>
-                    ))}
-                  </BookAwards>
-                </div>
-              )}
+              {node.supBookAuthorsFull && <div className="type-1 mt-5 text-press-sand-dark">{node.supBookAuthorsFull}</div>}
             </div>
+            <div className="order-first w-5/12">
+              <BookPageImage node={node} />
+            </div>
+          </div>
+          <div className="flex flex-col md:w-2/3 md:gap-24 lg:flex-row">
+            <div className="lg:w-5/8">
+              <div className="rs-mb-0 rs-pb-3 flex flex-col border-b-2 border-fog">
+                <div className="mt-7 flex flex-col sm:mt-0 sm:hidden md:flex">
+                  <H1 className="type-3 mb-0">{node.title}</H1>
 
-            <div className="rs-mb-0 rs-pb-3 flex flex-col gap-2 border-b-2 border-fog">
-              {node.supBookImprint && <div className="rs-mb-0 -text-m1 font-semibold text-press-sand-dark">Imprint: {node.supBookImprint.name}</div>}
-
-              <H2 className="-text-m1 font-normal text-stone-dark">Book Details</H2>
+                  {node.supBookSubjects && (
+                    <div className="rs-mb-2 order-first">
+                      <a
+                        href={`/search?${bookSubject}`}
+                        className="-text-m1 font-normal text-stone-dark decoration-fog-dark underline-offset-[5px] hocus:text-archway-dark hocus:decoration-archway-dark hocus:decoration-2"
+                      >
+                        {node.supBookSubjects[0].parent?.name || node.supBookSubjects[0].name}
+                      </a>
+                    </div>
+                  )}
 
-              {node.supBookCopublisherName && <div className="text-press-sand-dark">{node.supBookCopublisherName}</div>}
+                  {node.supBookSubtitle && <div className="type-2 mt-5 font-medium">{node.supBookSubtitle}</div>}
 
-              {node.supBookPubDateCloth?.time && (
-                <div className="-text-m1 text-press-sand-dark">
-                  {new Date(node.supBookPubDateCloth.time).toLocaleDateString("en-us", {
-                    month: "long",
-                    year: "numeric",
-                  })}
+                  {node.supBookAuthorsFull && <div className="type-1 mt-5 text-press-sand-dark">{node.supBookAuthorsFull}</div>}
                 </div>
-              )}
 
-              {node.supBookPages && <div className="-text-m1 text-press-sand-dark">{node.supBookPages} Pages</div>}
+                {awards && (
+                  <div className="rs-mt-1 border-t-2 border-fog">
+                    <H2 className="flex w-fit items-center gap-2 bg-fog p-3 -text-m1 font-semibold">
+                      <BookmarkIcon
+                        width={20}
+                        className="fill-archway"
+                      />
+                      Award Winner
+                    </H2>
+                    <BookAwards>
+                      {awards.map(award => (
+                        <div key={award.id}>{award.name}</div>
+                      ))}
+                    </BookAwards>
+                  </div>
+                )}
+              </div>
 
-              {lowestPrice && <div className="-text-m1 text-press-sand-dark">From {formatCurrency(lowestPrice)}</div>}
+              <div className="rs-mb-0 rs-pb-3 flex flex-col gap-2 border-b-2 border-fog">
+                {node.supBookImprint && <div className="rs-mb-0 -text-m1 font-semibold text-press-sand-dark">Imprint: {node.supBookImprint.name}</div>}
 
-              {node.supBookSeries?.name && (
-                <div>
-                  Series
-                  <br />
-                  <a
-                    href={`/search?q=${node.supBookSeries.name}`}
-                    className="-text-m1 font-normal text-stone-dark"
-                  >
-                    {node.supBookSeries.name}
-                  </a>
+                <H2 className="-text-m1 font-normal text-stone-dark">Book Details</H2>
+
+                {node.supBookCopublisherName && <div className="text-press-sand-dark">{node.supBookCopublisherName}</div>}
+
+                {node.supBookPubDateCloth?.time && (
+                  <div className="-text-m1 text-press-sand-dark">
+                    {new Date(node.supBookPubDateCloth.time).toLocaleDateString("en-us", {
+                      month: "long",
+                      year: "numeric",
+                    })}
+                  </div>
+                )}
+
+                {node.supBookPages && <div className="-text-m1 text-press-sand-dark">{node.supBookPages} Pages</div>}
+
+                {lowestPrice && <div className="-text-m1 text-press-sand-dark">From {formatCurrency(lowestPrice)}</div>}
+
+                {node.supBookSeries?.name && (
+                  <div>
+                    Series
+                    <br />
+                    <a
+                      href={`/search?q=${node.supBookSeries.name}`}
+                      className="-text-m1 font-normal text-stone-dark"
+                    >
+                      {node.supBookSeries.name}
+                    </a>
+                  </div>
+                )}
+              </div>
+              <div className="rs-mb-2 flex flex-col gap-2">
+                {node.supBookIsbn13Cloth && <div className="-text-m1 text-stone-dark">Hardcover ISBN: {node.supBookIsbn13Cloth}</div>}
+                {node.supBookIsbn13Paper && <div className="-text-m1 text-stone-dark">Paperback ISBN: {node.supBookIsbn13Paper}</div>}
+                {node.supBookIsbn13Digital && <div className="-text-m1 text-stone-dark">Ebook ISBN: {node.supBookIsbn13Digital}</div>}
+              </div>
+            </div>
+
+            <div className="lg:w-3/8">
+              <div className="rs-mb-1 rs-pb-1 border-b-2 border-fog">
+                <BookPrecart
+                  bookTitle={node.title}
+                  usClothPrice={node.supBookPriceCloth}
+                  usClothSalePrice={node.supBookClothSalePrice}
+                  usClothSaleDiscount={node.supBookClothSalePercent}
+                  usPaperPrice={node.supBookPricePaper}
+                  usPaperSalePrice={node.supBookPaperSalePrice}
+                  usPaperSaleDiscount={node.supBookPaperSalePercent}
+                  usDigitalPrice={node.supBookPriceDigital}
+                  clothIsbn={node.supBookIsbn13Cloth}
+                  paperIsbn={node.supBookIsbn13Paper}
+                  digitalIsbn={node.supBookIsbn13Digital}
+                />
+              </div>
+
+              {node.supBookERetailers && (
+                <div className="rs-mb-1 rs-pb-1 border-b-2 border-fog -text-m1">
+                  <div>Also Available from</div>
+                  <ul className="list-unstyled rs-mt-0 [&_a]:font-normal [&_a]:text-digital-red">
+                    {node.supBookERetailers.map((link, i) => (
+                      <li
+                        key={`e-book-retailer-${i}`}
+                        className="mb-0"
+                      >
+                        <a
+                          href={link.url || "#"}
+                          className="font-normal underline-offset-[5px] hocus:text-stone-dark hocus:decoration-archway-dark hocus:decoration-2"
+                        >
+                          {link.title}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
                 </div>
               )}
-            </div>
-            <div className="flex flex-col gap-2">
-              {node.supBookIsbn13Cloth && <div className="-text-m1 text-stone-dark">Hardcover ISBN: {node.supBookIsbn13Cloth}</div>}
-              {node.supBookIsbn13Paper && <div className="-text-m1 text-stone-dark">Paperback ISBN: {node.supBookIsbn13Paper}</div>}
-              {node.supBookIsbn13Digital && <div className="-text-m1 text-stone-dark">Ebook ISBN: {node.supBookIsbn13Digital}</div>}
+
+              <Link
+                href={node.path + "/desk-examination-copy-requests"}
+                className="flex items-start gap-3 -text-m1 font-normal leading-snug text-stone-dark underline-offset-[5px] hocus:text-archway-dark hocus:decoration-archway-dark hocus:decoration-2"
+              >
+                <ClipboardIcon
+                  width={24}
+                  className="mt-1 text-fog-dark"
+                />{" "}
+                Desk, Examination, or Review Copy Requests
+              </Link>
             </div>
           </div>
 
-          <div className="order-first xl:w-5/12">
-            <BookPageImage node={node} />
+          <div className="md:order-first md:w-1/3">
+            <div className="hidden md:block">
+              <BookPageImage node={node} />
+            </div>
 
             {hasExcerptAndMore && (
               <Link
                 href={`${node.path}/excerpts`}
-                className="group rs-py-1 rs-px-2 mx-auto flex w-fit items-center justify-center gap-5 border-2 border-press-sand font-normal text-stone-dark no-underline hocus:border-cardinal-red hocus:bg-cardinal-red hocus:text-white hocus:underline"
+                className="group rs-py-1 rs-mt-2 rs-px-2 mx-auto flex w-fit items-center justify-center gap-5 border-2 border-press-sand font-normal text-stone-dark no-underline hocus:border-cardinal-red hocus:bg-cardinal-red hocus:text-white hocus:underline md:mt-0"
               >
                 <span>Excerpts + more</span>
                 <DocumentDuplicateIcon
@@ -136,56 +215,6 @@ const SupBookPage = async ({node, ...props}: Props) => {
             )}
           </div>
         </div>
-
-        <div className="xl:w-1/3">
-          <div className="rs-mb-1 rs-pb-1 border-b-2 border-fog">
-            <BookPrecart
-              bookTitle={node.title}
-              usClothPrice={node.supBookPriceCloth}
-              usClothSalePrice={node.supBookClothSalePrice}
-              usClothSaleDiscount={node.supBookClothSalePercent}
-              usPaperPrice={node.supBookPricePaper}
-              usPaperSalePrice={node.supBookPaperSalePrice}
-              usPaperSaleDiscount={node.supBookPaperSalePercent}
-              usDigitalPrice={node.supBookPriceDigital}
-              clothIsbn={node.supBookIsbn13Cloth}
-              paperIsbn={node.supBookIsbn13Paper}
-              digitalIsbn={node.supBookIsbn13Digital}
-            />
-          </div>
-
-          {node.supBookERetailers && (
-            <div className="rs-mb-1 rs-pb-1 border-b-2 border-fog -text-m1">
-              <div>Also Available from</div>
-              <ul className="list-unstyled rs-mt-0 [&_a]:font-normal [&_a]:text-digital-red">
-                {node.supBookERetailers.map((link, i) => (
-                  <li
-                    key={`e-book-retailer-${i}`}
-                    className="mb-0"
-                  >
-                    <a
-                      href={link.url || "#"}
-                      className="font-normal underline-offset-[5px] hocus:text-stone-dark hocus:decoration-archway-dark hocus:decoration-2"
-                    >
-                      {link.title}
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
-
-          <Link
-            href={node.path + "/desk-examination-copy-requests"}
-            className="flex items-start gap-3 -text-m1 font-normal leading-snug text-stone-dark underline-offset-[5px] hocus:text-archway-dark hocus:decoration-archway-dark hocus:decoration-2"
-          >
-            <ClipboardIcon
-              width={24}
-              className="mt-1 text-fog-dark"
-            />{" "}
-            Desk, Examination, or Review Copy Requests
-          </Link>
-        </div>
       </div>
 
       <Tabs className="mb-20 border-b border-fog pb-20">