Merge pull request #17 from tinloof/tin-2255-fix-products-list-images…

…-on-mobile Tin 2255 - fix products list images on mobile
tinloof · Oct 15, 2024 · 0e6236a · 0e6236a
2 parents 7ac7213 + 4508437
commit 0e6236a
Show file tree

Hide file tree

Showing 18 changed files with 73 additions and 82 deletions.
diff --git a/storefront/app/(website)/faqs/_parts/faq-page.tsx b/storefront/app/(website)/faqs/_parts/faq-page.tsx
@@ -188,7 +188,7 @@ export default function Faq({
                 </div>
               ) : (
                 <div className="absolute left-0 top-full z-10 mt-[5px] w-full max-w-[420px] rounded-lg border-[1.5px] border-accent bg-background p-2">
-                  <div className="w-full px-4 py-2 text-start text-accent">
+                  <div className="w-full px-4 py-2 text-start text-accent opacity-60">
                     {data.textTranslations?.searchNoResults}
                   </div>
                 </div>

diff --git a/storefront/app/(website)/faqs/_parts/search-bar.tsx b/storefront/app/(website)/faqs/_parts/search-bar.tsx
@@ -52,7 +52,7 @@ export default function SearchBar({
       />
       <input
         aria-label="Search"
-        className="h-full w-full appearance-none rounded-lg border-[1.5px] border-accent bg-background py-[10px] pl-[50px] pr-s font-sans text-body-base font-medium leading-[150%] text-accent outline-none placeholder:text-accent"
+        className="h-full w-full appearance-none rounded-lg border-[1.5px] border-accent bg-background py-[10px] pl-[50px] pr-s font-sans text-body-base font-medium leading-[150%] text-accent outline-none placeholder:text-accent placeholder:opacity-60"
         onChange={(e) => handleSearch(e.target.value)}
         onKeyDown={keydownHandler}
         placeholder={placeholder ?? "Search"}

diff --git a/storefront/app/(website)/products/[handle]/_parts/image-carousel/index.tsx b/storefront/app/(website)/products/[handle]/_parts/image-carousel/index.tsx
@@ -25,40 +25,33 @@ export function ProductImagesCarousel({
 
   return (
     <Root slidesCount={images?.length || 0}>
-      <div className="mx-auto flex w-full max-w-[666px] gap-4 lg:sticky lg:top-[calc(var(--header-height)+24px)] lg:mx-0">
-        <div className="relative hidden h-full flex-col gap-2 overflow-hidden lg:flex">
-          {(images?.length || 0) > 0 && (
-            <div
-              className={cx(
-                "scrollbar-hide flex flex-col gap-2 overflow-x-scroll px-4 lg:px-0",
-              )}
-              id="thumbs"
-            >
-              {images?.map((mediaItem, index) => (
-                <ItemCarousel
-                  index={index}
-                  key={index}
-                  mediaItem={mediaItem}
-                  selectedImageIndex={selectedImageIndex}
-                  setSelectedImageIdex={(index) => {
-                    setSelectedImageIdex(index);
-                  }}
-                />
-              ))}
-            </div>
-          )}
-        </div>
+      <div className="mx-auto flex w-full gap-2 lg:sticky lg:top-[calc(var(--header-height)+24px)] lg:mx-0 lg:max-w-[684px]">
+        {(images?.length || 0) > 0 && (
+          <div className="hidden w-[85px] flex-col gap-2 lg:flex" id="thumbs">
+            {images?.map((mediaItem, index) => (
+              <ItemCarousel
+                index={index}
+                key={index}
+                mediaItem={mediaItem}
+                selectedImageIndex={selectedImageIndex}
+                setSelectedImageIdex={(index) => {
+                  setSelectedImageIdex(index);
+                }}
+              />
+            ))}
+          </div>
+        )}
         <Slides
           className={cx(
-            "pdp-image-slides scrollbar-hide flex h-fit w-full gap-4 overflow-scroll rounded-2xl px-5 lg:max-w-[600px] lg:px-0",
+            "pdp-image-slides scrollbar-hide mt-1 flex h-fit w-full gap-xs overflow-scroll px-m lg:px-0",
             {
               "snap-x snap-mandatory": isHydrated, // only enable snapping after hydration, because it randomly scrolls on chrome
             },
           )}
         >
           {images?.map((media, index) => (
             <Slide
-              className="relative flex w-full min-w-full snap-center justify-center"
+              className="relative flex w-[86vw] min-w-full snap-center justify-center lg:w-full"
               index={index}
               key={index}
             >
@@ -104,18 +97,18 @@ function ItemCarousel({
 
   return (
     <button
-      className="min-w-[50px] overflow-hidden rounded-lg"
+      className="w-[85px] overflow-hidden rounded-lg"
       onClick={() => {
         setSelectedImageIdex(index);
       }}
     >
       <Image
         alt={`carousel-item-${index}`}
-        className="aspect-square size-12 object-cover object-center"
-        height={380}
-        sizes="52px"
+        className="aspect-square h-[85px] w-[85px] object-cover object-center"
+        height={85}
+        sizes="85px"
         src={mediaItem.url}
-        width={380}
+        width={85}
       />
     </button>
   );

diff --git a/storefront/components/global/header/index.tsx b/storefront/components/global/header/index.tsx
@@ -10,7 +10,7 @@ import Navigation from "./parts/navigation";
 
 export default function Header(props: Header) {
   return (
-    <header className="sticky top-0 z-50 flex w-full flex-col items-center bg-background">
+    <header className="sticky top-0 z-50 flex w-full flex-col items-center border-b border-accent bg-background">
       <AnnouncementBar {...props} />
       <div className="relative mx-auto flex w-full max-w-max-screen items-center justify-between gap-2xl px-m py-xs lg:px-xl">
         <div className="flex items-center gap-m">

diff --git a/storefront/components/sections/centered-text.tsx b/storefront/components/sections/centered-text.tsx
@@ -12,7 +12,7 @@ export default function CenteredText(
       {...props.rootHtmlAttributes}
       className="full mx-auto max-w-max-screen p-m lg:p-xl"
     >
-      <div className="rounded-lg border border-accent py-[90px] lg:py-[108px]">
+      <div className="rounded-lg border border-accent px-s py-[90px] lg:py-[108px]">
         <Body
           className="mx-auto max-w-[720px] text-balance text-center"
           desktopSize="6xl"

diff --git a/storefront/components/sections/collection-list.tsx b/storefront/components/sections/collection-list.tsx
@@ -31,12 +31,12 @@ function CollectionCard({
   if (!cta?.link) return null;
   return (
     <Link
-      className="group relative flex h-full min-h-[562px] w-[380px] flex-1 cursor-pointer rounded-lg lg:min-h-[604px] lg:w-[453px]"
+      className="group relative flex aspect-[3/4] h-auto w-[88vw] min-w-[320px] max-w-[453px] flex-1 cursor-pointer rounded-lg"
       href={cta?.link}
     >
       {image ? (
         <SanityImage
-          className="min-h-[562px] w-[380px] rounded-lg object-cover object-center lg:min-h-[604px] lg:w-[453px]"
+          className="aspect-[3/4] h-auto w-[88vw] min-w-[320px] max-w-[453px] rounded-lg object-cover object-center"
           data={image}
         />
       ) : (
@@ -46,7 +46,7 @@ function CollectionCard({
         <div className="absolute bottom-lg left-1/2 flex -translate-x-1/2 items-center justify-center">
           <div className="relative flex h-[80px] w-fit items-center justify-center px-2xl">
             <svg
-              className="absolute left-1/2 top-1/2 h-full w-auto -translate-x-1/2 -translate-y-1/2"
+              className="absolute left-1/2 top-1/2 h-full w-[280px] -translate-x-1/2 -translate-y-1/2 lg:w-[305px]"
               fill="none"
               height="80"
               viewBox="0 0 305 80"
@@ -63,7 +63,7 @@ function CollectionCard({
             <Body
               className="relative z-10 whitespace-nowrap text-center transition-all duration-300 group-hover:text-background"
               desktopSize="6xl"
-              mobileSize="4xl"
+              mobileSize="3xl"
             >
               {cta.label}
             </Body>

diff --git a/storefront/components/sections/hero/large-hero.tsx b/storefront/components/sections/hero/large-hero.tsx
@@ -14,7 +14,7 @@ export default function LargeHero({
   return (
     <div className="relative aspect-[16/9]">
       {children}
-      <div className="absolute bottom-0 left-1/2 z-10 flex w-full -translate-x-1/2 flex-col items-center justify-center gap-xl px-s py-2xl text-center lg:w-1/2 lg:py-6xl">
+      <div className="absolute bottom-0 left-1/2 z-10 flex w-full -translate-x-1/2 flex-col items-center justify-center gap-xl text-balance px-s py-2xl text-center lg:max-w-[680px] lg:py-6xl">
         <Heading
           className="!leading-[100%] text-white"
           desktopSize="5xl"

diff --git a/storefront/components/sections/testimonials.tsx b/storefront/components/sections/testimonials.tsx
@@ -27,7 +27,7 @@ function TestimonialCard(props: {
   text: string | undefined;
 }) {
   return (
-    <div className="flex h-full min-h-[340px] w-[390px] cursor-pointer flex-col items-start justify-start gap-lg rounded-lg border border-accent px-xl py-lg lg:min-h-[400px] lg:w-[450px]">
+    <div className="flex h-full min-h-[340px] w-[88vw] max-w-[450px] cursor-pointer flex-col items-start justify-start gap-lg rounded-lg border border-accent px-xl py-lg lg:min-h-[400px]">
       <Body desktopSize="2xl" font="sans" mobileSize="xl">
         {props.text}
       </Body>

diff --git a/storefront/components/shared/accordion.tsx b/storefront/components/shared/accordion.tsx
@@ -81,14 +81,15 @@ function AccordionItem({
       onClick={toggleOpen}
     >
       <div className="mb-s flex items-start justify-between gap-s">
-        <Heading
-          desktopSize={type === "faq" ? "xs" : "lg"}
-          font={type === "faq" ? "sans" : "serif"}
-          mobileSize={type === "faq" ? "2xs" : "base"}
-          tag="h4"
-        >
-          {title}
-        </Heading>
+        {type === "faq" ? (
+          <Body desktopSize="xl" font="sans" mobileSize="lg">
+            {title}
+          </Body>
+        ) : (
+          <Heading desktopSize="lg" font="serif" mobileSize="base" tag="h4">
+            {title}
+          </Heading>
+        )}
         <div className="group relative h-8 w-8 flex-shrink-0 rounded-full border-[1.5px] border-accent bg-background transition-colors duration-300 hover:bg-accent">
           <span className="absolute left-1/2 top-1/2 h-[1.5px] w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-accent transition-colors duration-300 group-hover:bg-background" />
           <span
@@ -105,9 +106,9 @@ function AccordionItem({
         style={{height: isOpen ? (height ?? 0) + 16 : 0}}
       >
         <Body
-          desktopSize={type === "faq" ? "lg" : "base"}
+          desktopSize="base"
           font="sans"
-          mobileSize="base"
+          mobileSize={type === "faq" ? "sm" : "base"}
         >
           {content}
         </Body>

diff --git a/storefront/components/shared/product-card.tsx b/storefront/components/shared/product-card.tsx
@@ -22,7 +22,7 @@ export default function ProductCard({
   return (
     <Link
       className={cx("flex flex-col items-center justify-center rounded-lg", {
-        "w-[370px] lg:w-[450px]": size === "default",
+        "w-[88vw] max-w-[450px]": size === "default",
         "w-full max-w-[450px]": size === "dynamicWith",
       })}
       href={`/products/${product?.handle}`}
@@ -40,7 +40,7 @@ export default function ProductCard({
           />
         )}
       </div>
-      <div className="flex flex-col items-center justify-center gap-1 px-lg py-s">
+      <div className="pointer-events-none flex flex-col items-center justify-center gap-1 px-lg py-s">
         <Body
           className="text-center"
           desktopSize="xl"

diff --git a/storefront/components/shared/typography/body.tsx b/storefront/components/shared/typography/body.tsx
@@ -10,6 +10,7 @@ export const bodyStyles = cva("", {
   variants: {
     desktopSize: {
       "2xl": "lg:text-body-2xl",
+      "2xs": "lg:text-body-2xs",
       "4xl": "lg:text-body-4xl",
       "5xl": "lg:text-body-5xl",
       "6xl": "lg:text-body-6xl",
@@ -27,6 +28,7 @@ export const bodyStyles = cva("", {
     },
     mobileSize: {
       "2xl": "text-body-2xl",
+      "2xs": "text-body-2xs",
       "3xl": "text-body-3xl",
       "4xl": "text-body-4xl",
       "5xl": "text-body-5xl",

diff --git a/storefront/components/shared/typography/heading.tsx b/storefront/components/shared/typography/heading.tsx
@@ -27,7 +27,6 @@ export const headingStyles = cva("", {
     },
     mobileSize: {
       "2xl": "text-heading-2xl text-pretty tracking-[-1.12px]",
-      "2xs": "text-heading-2xs tracking-[-0.4px]",
       "3xl": "text-heading-3xl text-pretty tracking-[-1.28px]",
       "5xl": "lg:text-heading-5xl lg:tracking-[-1.6px]",
       "6xl": "text-heading-6xl tracking-[-2px]",

diff --git a/storefront/sanity/schemas/documents/category.ts b/storefront/sanity/schemas/documents/category.ts
@@ -1,13 +1,12 @@
 import definePage from "@/sanity/helpers/define-page";
-import {defineField} from "sanity";
 
 export default definePage({
   fields: [
-    defineField({
+    {
       group: "content",
       name: "sections",
       type: "sectionsBody",
-    }),
+    },
   ],
   name: "category",
   options: {

diff --git a/storefront/sanity/schemas/documents/collection.ts b/storefront/sanity/schemas/documents/collection.ts
@@ -1,13 +1,12 @@
 import definePage from "@/sanity/helpers/define-page";
-import {defineField} from "sanity";
 
 export default definePage({
   fields: [
-    defineField({
+    {
       group: "content",
       name: "sections",
       type: "sectionsBody",
-    }),
+    },
   ],
   name: "collection",
   options: {

diff --git a/storefront/sanity/schemas/documents/product.ts b/storefront/sanity/schemas/documents/product.ts
@@ -1,29 +1,28 @@
 import definePage from "@/sanity/helpers/define-page";
-import {defineField} from "sanity";
 
 export default definePage({
   fields: [
-    defineField({
+    {
       group: "content",
       name: "specs",
       of: [
         {
           fields: [
-            defineField({name: "title", title: "Title", type: "string"}),
-            defineField({
+            {name: "title", title: "Title", type: "string"},
+            {
               name: "content",
               rows: 3,
               title: "Content",
               type: "text",
-            }),
+            },
           ],
           name: "spec",
           type: "object",
         },
       ],
       type: "array",
-    }),
-    defineField({
+    },
+    {
       fields: [
         {name: "title", title: "Title", type: "string"},
         {
@@ -36,13 +35,13 @@ export default definePage({
       ],
       name: "addons",
       type: "object",
-    }),
+    },
 
-    defineField({
+    {
       group: "content",
       name: "sections",
       type: "sectionsBody",
-    }),
+    },
   ],
   name: "product",
   options: {

diff --git a/storefront/sanity/schemas/objects/spot.ts b/storefront/sanity/schemas/objects/spot.ts
@@ -1,29 +1,29 @@
-import {defineField, defineType} from "sanity";
+import {defineType} from "sanity";
 
 export default defineType({
   fields: [
-    defineField({
+    {
       name: "product",
       to: [{type: "product"}],
       type: "reference",
       weak: true,
-    }),
-    defineField({
+    },
+    {
       fieldset: "position",
       initialValue: 50,
       name: "x",
       readOnly: true,
       type: "number",
       validation: (Rule) => Rule.required().min(0).max(100),
-    }),
-    defineField({
+    },
+    {
       fieldset: "position",
       initialValue: 50,
       name: "y",
       readOnly: true,
       type: "number",
       validation: (Rule) => Rule.required().min(0).max(100),
-    }),
+    },
   ],
   fieldsets: [
     {

diff --git a/storefront/sanity/schemas/singletons/home.ts b/storefront/sanity/schemas/singletons/home.ts
@@ -1,20 +1,19 @@
 import definePage from "@/sanity/helpers/define-page";
-import {defineField} from "sanity";
 
 export default definePage({
   __experimental_formPreviewTitle: false,
   fields: [
-    defineField({
+    {
       group: "content",
       name: "title",
       title: "Title",
       type: "string",
-    }),
-    defineField({
+    },
+    {
       group: "content",
       name: "sections",
       type: "sectionsBody",
-    }),
+    },
   ],
   name: "home",
   options: {