forked from crowetic/commerce
make secondary grid use gray bg, made sidemenu sticky
This commit is contained in:
parent
526b291f4f
commit
c2bc6eb1cc
@ -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,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}>
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user