cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

make secondary grid use gray bg, made sidemenu sticky

Browse Source
This commit is contained in:
Franco Arza 2020-10-17 23:00:09 -03:00
parent 526b291f4f
commit c2bc6eb1cc
3 changed files with 33 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/product/ProductCard/ProductCard.module.css
View File

@ -55,7 +55,7 @@
} }
.squareBg, .squareBg,
.productTitle, .productTitle > span,
.productPrice, .productPrice,
.wishlistButton { .wishlistButton {
@apply transition ease-in-out duration-300; @apply transition ease-in-out duration-300;
@ -65,9 +65,13 @@
@apply transform absolute inset-0 z-0 bg-secondary; @apply transform absolute inset-0 z-0 bg-secondary;
} }
.squareBg.gray {
@apply bg-gray-300 !important;
}
.productTitle { .productTitle {
line-height: 51px; line-height: 40px;
width: 200px; width: 18vw;
& span { & span {
@apply inline text-2xl leading-6 p-4 bg-primary text-primary font-bold; @apply inline text-2xl leading-6 p-4 bg-primary text-primary font-bold;

8
components/product/ProductCard/ProductCard.tsx
View File

@ -8,7 +8,7 @@ interface Props {
className?: string className?: string
children?: ReactNode[] | Component[] | any[] children?: ReactNode[] | Component[] | any[]
node: ProductData node: ProductData
variant?: 'slim' variant?: 'slim' | 'simple'
} }
interface ProductData { interface ProductData {
@ -44,12 +44,12 @@ const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
src={p.images.edges[0].node.urlXL} src={p.images.edges[0].node.urlXL}
/> />
</div> </div>
<div className={s.squareBg} /> <div className={cn(s.squareBg, { [s.gray]: variant === 'simple' })} />
<div className="flex flex-row justify-between box-border w-full z-10 relative"> <div className="flex flex-row justify-between box-border w-full z-10 relative">
<div className=""> <div className="">
<div className={s.productTitle}> <p className={s.productTitle}>
<span>{p.name}</span> <span>{p.name}</span>
</div> </p>
<span className={s.productPrice}>${p.prices.price.value}</span> <span className={s.productPrice}>${p.prices.price.value}</span>
</div> </div>
<div className={s.wishlistButton}> <div className={s.wishlistButton}>

42
pages/index.tsx
View File

@ -54,32 +54,34 @@ export default function Home({
))} ))}
</Marquee> </Marquee>
<div className="py-12 flex flex-row w-full px-12"> <div className="py-12 flex flex-row w-full px-12">
<div className="pr-3 w-48"> <div className="pr-3 w-48 relative">
<ul className="mb-10"> <div className="sticky top-2">
<li className="py-1 text-base font-bold tracking-wide"> <ul className="mb-10">
All Categories <li className="py-1 text-base font-bold tracking-wide">
</li> All Categories
{categories.map((cat) => (
<li key={cat.path} className="py-1 text-accents-8">
<a href="#">{cat.name}</a>
</li> </li>
))} {categories.map((cat) => (
</ul> <li key={cat.path} className="py-1 text-accents-8">
<ul className=""> <a href="#">{cat.name}</a>
<li className="py-1 text-base font-bold tracking-wide"> </li>
All Designers ))}
</li> </ul>
{brands.flatMap(({ node }) => ( <ul className="">
<li key={node.path} className="py-1 text-accents-8"> <li className="py-1 text-base font-bold tracking-wide">
<a href="#">{node.name}</a> All Designers
</li> </li>
))} {brands.flatMap(({ node }) => (
</ul> <li key={node.path} className="py-1 text-accents-8">
<a href="#">{node.name}</a>
</li>
))}
</ul>
</div>
</div> </div>
<div className="flex-1"> <div className="flex-1">
<Grid layout="normal"> <Grid layout="normal">
{products.map((p: any) => ( {products.map((p: any) => (
<ProductCard key={p.id} {...p} /> <ProductCard key={p.id} {...p} variant="simple" />
))} ))}
</Grid> </Grid>
</div> </div>