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

Responsive

Browse Source
This commit is contained in:
Belen Curcio 2020-10-03 11:55:37 -03:00
parent 3d3b0f34a9
commit 808ad87413
4 changed files with 37 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/core/Searchbar/Searchbar.module.css
View File

@ -1,5 +1,5 @@
.root {
@apply px-4 flex items-center;
@apply px-4 items-center hidden md:flex;
}
.container {

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

@ -1,3 +1,20 @@
.root {
@apply relative w-full h-full p-6 box-border overflow-hidden;
}
.productTitle {
@apply p-3 h-14 bg-white text-black font-bold text-lg truncate leading-8 inline-flex;
max-width: calc(100% - 50px);
@screen lg {
@apply text-xl;
}
}
.productPrice {
@apply px-6 py-1 pb-3 bg-white text-black font-semibold inline-block text-sm leading-6;
}
.wishlistButton {
@apply w-14 h-14 flex items-center justify-center bg-white text-black font-semibold inline-block text-sm leading-6;
}

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

@ -20,25 +20,23 @@ const ProductCard: FC<Props> = ({ className, productData }) => {
<div className={rootClassName}>
{/* Overlay */}
<div className="flex flex-row justify-between box-border w-full z-10 relative">
<div className="flex flex-col">
<div>
<h1 className="p-3 h-14 bg-white text-black font-bold text-2xl truncate leading-8">
{productData.name}
</h1>
<div className="flex flex-col flex-1 overflow-hidden">
<div className="flex-1">
<h1 className={s.productTitle}>{productData.name}</h1>
</div>
<div>
<div className="px-6 py-1 pb-3 bg-white text-black font-semibold inline-block text-sm leading-6">
<div className="flex-0">
<div className={s.productPrice}>
${productData.prices.price.value}
</div>
</div>
</div>
<div className="flex items-center justify-center h-12 w-12 bg-white text-black cursor-pointer">
<div className={s.wishlistButton}>
<Heart />
</div>
</div>
<div className="absolute top-0 left-0 w-full h-full z-0">
<div className="absolute box-border top-0 left-0 w-full h-full z-0 m-12">
{/* <img
className="object-cover object-center w-full"
src={productData.images.edges[0].node.urlSmall}

16
components/product/ProductGrid/ProductGrid.module.css
View File

@ -4,16 +4,24 @@
& > * {
@apply row-span-1 lg:col-span-1 h-full bg-black box-border;
height: 500px;
@screen lg {
height: auto;
}
}
& > div:nth-child(6n + 1) {
& > div:nth-child(6n + 1),
& > div:nth-child(6n + 5) {
@apply row-span-2 lg:col-span-2 bg-violet;
min-height: var(--row-height);
@screen lg {
min-height: var(--row-height);
}
}
& > div:nth-child(6n + 5) {
@apply row-span-2 lg:col-span-2 bg-blue;
min-height: var(--row-height);
@apply bg-blue;
}
& > div:nth-child(6n + 3) {