From f8f1a07cfc978a213273f37f6cff53d0bfb936ee Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Fri, 17 Sep 2021 17:10:18 +0700 Subject: [PATCH] :bug: bug: banner home buggy when display in carousel :%s --- src/components/common/Banner/Banner.module.scss | 3 +++ src/components/common/Banner/Banner.tsx | 17 ++++++++++------- .../Banner/BannerItem/BannerItem.module.scss | 5 ++++- .../common/CarouselCommon/CarouselCommon.tsx | 1 + .../home/HomeBanner/HomeBanner.module.scss | 8 ++++++-- .../ProductListBanner/ProductListBanner.tsx | 6 ++++++ src/styles/_base.scss | 4 ++-- 7 files changed, 32 insertions(+), 12 deletions(-) diff --git a/src/components/common/Banner/Banner.module.scss b/src/components/common/Banner/Banner.module.scss index e69de29bb..22b99a787 100644 --- a/src/components/common/Banner/Banner.module.scss +++ b/src/components/common/Banner/Banner.module.scss @@ -0,0 +1,3 @@ +.bannerWrap { + @apply w-full; +} \ No newline at end of file diff --git a/src/components/common/Banner/Banner.tsx b/src/components/common/Banner/Banner.tsx index bc73e0b33..7157033a1 100644 --- a/src/components/common/Banner/Banner.tsx +++ b/src/components/common/Banner/Banner.tsx @@ -3,6 +3,7 @@ import React, { memo } from 'react' import { ResponsiveType } from 'react-multi-carousel' import CarouselCommon from '../CarouselCommon/CarouselCommon' import BannerItem, { BannerItemProps } from './BannerItem/BannerItem' +import s from './Banner.module.scss' interface Props { data: BannerItemProps[], @@ -28,13 +29,15 @@ const Banner = memo(({ data }: Props) => { /> } return ( - - data={data} - itemKey="banner" - Component={BannerItem} - responsive={RESPONSIVE} - showDots={true} - /> +
+ + data={data} + itemKey="banner" + Component={BannerItem} + responsive={RESPONSIVE} + showDots={true} + /> +
) }) diff --git a/src/components/common/Banner/BannerItem/BannerItem.module.scss b/src/components/common/Banner/BannerItem/BannerItem.module.scss index 5a37e252a..1c91e0beb 100644 --- a/src/components/common/Banner/BannerItem/BannerItem.module.scss +++ b/src/components/common/Banner/BannerItem/BannerItem.module.scss @@ -1,8 +1,11 @@ @import "../../../../styles/utilities"; .bannerItem { - @apply bg-primary-light shape-common-lg overflow-hidden; + @apply bg-primary-light shape-common-lg overflow-hidden w-full; padding: 0; + @screen lg { + max-height: 42rem; + } &.large { margin-bottom: 2.8rem; background-image: url("./pattern.svg"); diff --git a/src/components/common/CarouselCommon/CarouselCommon.tsx b/src/components/common/CarouselCommon/CarouselCommon.tsx index 4e39610a9..51f29210e 100644 --- a/src/components/common/CarouselCommon/CarouselCommon.tsx +++ b/src/components/common/CarouselCommon/CarouselCommon.tsx @@ -72,6 +72,7 @@ const CarouselCommon = ({ responsive={responsive} arrows={false} renderDotsOutside={true} + ssr={true} // customLeftArrow={} // customRightArrow={} > diff --git a/src/components/modules/home/HomeBanner/HomeBanner.module.scss b/src/components/modules/home/HomeBanner/HomeBanner.module.scss index ed8c5c7a7..8fa727ebe 100644 --- a/src/components/modules/home/HomeBanner/HomeBanner.module.scss +++ b/src/components/modules/home/HomeBanner/HomeBanner.module.scss @@ -1,15 +1,20 @@ @import "../../../../styles/utilities"; .homeBanner { - @apply spacing-horizontal; + @apply spacing-horizontal overflow-hidden; margin-bottom: 2.8rem; + .left { @apply hidden; margin-bottom: 3rem; + max-width: 50rem; } @screen xl { @apply grid; grid-template-columns: 1fr 1.8fr; + > div { + @apply w-full overflow-hidden; + } .left { @apply relative flex items-end justify-center shape-common-lg; margin-right: 1.6rem; @@ -29,7 +34,6 @@ @apply relative font-heading text-center; padding: 2.4rem 2.4rem 4.8rem; width: min-content; - color: var(--white); font-size: 8.8rem; line-height: 8rem; diff --git a/src/components/modules/product-list/ProductListBanner/ProductListBanner.tsx b/src/components/modules/product-list/ProductListBanner/ProductListBanner.tsx index edeaa9f35..3f13d238c 100644 --- a/src/components/modules/product-list/ProductListBanner/ProductListBanner.tsx +++ b/src/components/modules/product-list/ProductListBanner/ProductListBanner.tsx @@ -16,6 +16,12 @@ const ProductListBanner = ({ }: Props) => { subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.", imgLink: BannerRight.src, size: "large", + }, + { + title: "Save 15% on your first order", + subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.", + imgLink: BannerRight.src, + size: "large", } ] } diff --git a/src/styles/_base.scss b/src/styles/_base.scss index 41d33bdf1..1eab49e38 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -1,4 +1,4 @@ -@import url("https://fonts.googleapis.com/css2?family=Nunito&family=Poppins:wght@500&family=Righteous&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Nunito&family=Poppins:wght@500&display=swap"); @import '../../public/fonts/style.css'; :root { @@ -42,7 +42,7 @@ --line-height: 2.4rem; --font-sans: "Nunito", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif; - --font-heading: "Norquay-bold", "Righteous", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif; + --font-heading: "Norquay-bold", monospace, -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif; --font-logo: "Poppins", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif; }