From 0bab126d89a64b94f9bf8908b4380a6a1d0f4ae3 Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Fri, 4 Oct 2024 11:44:35 +0700 Subject: [PATCH 01/20] update tag for footer --- app/components/Footer.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx index 2a11d6d..e74d85b 100644 --- a/app/components/Footer.tsx +++ b/app/components/Footer.tsx @@ -28,7 +28,7 @@ export function Footer({footerMenu}: FooterProps) {
- {newsletterTitle &&
{newsletterTitle}
} + {newsletterTitle &&
{newsletterTitle}
}
{newsletterDescription &&

{newsletterDescription}

} {newsletterButtonText && ( @@ -102,9 +102,9 @@ function MenuLink(props: SingleMenuItem) { return ( <>
-
+
{title} -
+
    {items.map((subItem, ind) => (
  • @@ -122,7 +122,7 @@ function MenuLink(props: SingleMenuItem) { {({open}) => ( <> -
    +
    {title} -
    +
    {title}; + return
    {title}
    ; } From a6bdde54353ccda9a0039072897ffeb153cccb44 Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Fri, 11 Oct 2024 08:28:53 +0700 Subject: [PATCH 02/20] Update design cart drawer --- app/components/Cart.tsx | 58 +++++++++++++++++++++++---------------- app/components/Drawer.tsx | 6 ++-- 2 files changed, 38 insertions(+), 26 deletions(-) diff --git a/app/components/Cart.tsx b/app/components/Cart.tsx index 40d5606..ea5addd 100644 --- a/app/components/Cart.tsx +++ b/app/components/Cart.tsx @@ -59,7 +59,7 @@ function CartLines({ if (!lines) return null; const styles = { page: "col-span-2", - aside: "flex-1 overflow-y-auto", + aside: "flex-1 overflow-y-auto overflow-hidden", }; return (
    @@ -106,7 +106,7 @@ function CartLineItem({ const lineItemUrl = useVariantUrl(product.handle, selectedOptions); let styles = { page: "grid md:table-row gap-2 grid-rows-2 grid-cols-[100px_1fr_64px]", - aside: "grid gap-3 grid-rows-[1fr_auto] grid-cols-[100px_1fr_64px] pb-4", + aside: "grid gap-3 grid-rows-[1fr_auto] grid-cols-[100px_1fr] pb-4", }; const cellStyles = { @@ -117,32 +117,38 @@ function CartLineItem({ return ( - + {image && ( {title} )} - { - if (layout === "aside") { - // close the drawer - window.location.href = lineItemUrl; - } - }} - > -

    {product.title}

    - -
      +
      + { + if (layout === "aside") { + // close the drawer + window.location.href = lineItemUrl; + } + }} + > +

      {product.title}

      + +
      + +
      +
      +
        {selectedOptions.map((option) => (
      • {option.value} @@ -150,15 +156,19 @@ function CartLineItem({ ))}
      - - - + {layout === "page" && ( + + + + )}
      -
      - -
      + {layout === "aside" && ( +

      + +

      + )}
      {layout === "page" && ( @@ -283,7 +293,7 @@ export function CartSummary({
      Subtotal diff --git a/app/components/Drawer.tsx b/app/components/Drawer.tsx index f0d03c8..035ed35 100644 --- a/app/components/Drawer.tsx +++ b/app/components/Drawer.tsx @@ -35,6 +35,8 @@ export function Drawer({ top: "-translate-y-full", }; + const maxWidth = isForm === "cart" ? "max-w-[420px]" : "max-w-96"; + return ( @@ -70,10 +72,10 @@ export function Drawer({ className={cn( "transform text-left align-middle shadow-xl transition-all", openFrom === "left" - ? "h-screen-dynamic w-screen max-w-96" + ? `h-screen-dynamic w-screen ${maxWidth}` : openFrom === "top" ? "h-fit w-screen" - : "h-screen-dynamic w-screen max-w-96", + : `h-screen-dynamic w-screen ${maxWidth}`, isForm === "cart" || isForm === "filter" ? "bg-background-basic" : "bg-background-subtle-1" From 8b169caf3e92128f6b3e50b689ff6cc9bf7a5d88 Mon Sep 17 00:00:00 2001 From: dangthang1903 Date: Fri, 11 Oct 2024 08:29:46 +0700 Subject: [PATCH 03/20] add tag name for tittle footer --- app/components/Footer.tsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx index e74d85b..1f73993 100644 --- a/app/components/Footer.tsx +++ b/app/components/Footer.tsx @@ -12,6 +12,7 @@ import {IconPlusLinkFooter} from './Icon'; import {LayoutProps} from './Layout'; type FooterProps = Pick; +type TagName = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; export function Footer({footerMenu}: FooterProps) { let fetcher = useFetcher(); let isError = fetcher.state === 'idle' && fetcher.data?.errors; @@ -22,13 +23,14 @@ export function Footer({footerMenu}: FooterProps) { newsletterDescription, newsletterPlaceholder, newsletterButtonText, + tagNameTitle: Tag = 'h6', } = settings; return (