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

Merge pull request #14 from okbel/arzfran/improve-imgs

Browse Source 
Improve Image styles
This commit is contained in:
B 2020-10-26 22:51:09 -03:00 committed by GitHub
commit 876ea34b78
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 26 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css
View File

@ -4,20 +4,20 @@
@screen md { @screen md {
@apply flex-row; @apply flex-row;
} }
}
.asideWrapper { & .asideWrapper {
@apply pr-3 w-full relative; @apply pr-3 w-full relative;
@screen md { @screen md {
@apply w-48; @apply w-48;
} }
} }
.aside { & .aside {
@apply flex flex-row w-full justify-around mb-12; @apply flex flex-row w-full justify-around mb-12;
@screen md { @screen md {
@apply mb-0 block sticky top-32; @apply mb-0 block sticky top-32;
}
} }
} }

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

@ -1,5 +1,6 @@
.root { .root {
@apply relative w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer; @apply relative max-h-full w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer;
height: 100% !important;
&:hover { &:hover {
& .squareBg:before { & .squareBg:before {
@ -119,17 +120,19 @@
} }
.wishlistButton { .wishlistButton {
@apply w-10 h-10 flex ml-auto flex items-center justify-center bg-primary text-primary font-semibold text-xs leading-6 cursor-pointer z-10; @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-primary font-semibold text-xs leading-6 cursor-pointer;
} }
.imageContainer { .imageContainer {
@apply absolute z-10 inset-0 flex items-center justify-center;
& > div { & > div {
@apply h-full;
& > div { & > div {
@apply h-full; height: 100%;
padding-bottom: 0 !important; margin: 0 auto;
} }
} }
} }
.product-image {
height: 120% !important;
top: -10% !important;
}

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

@ -70,7 +70,7 @@ const ProductCard: FC<Props> = ({
variant={p.variants.edges?.[0]!} variant={p.variants.edges?.[0]!}
/> />
</div> </div>
<div className={cn(s.imageContainer)}> <div className={s.imageContainer}>
<EnhancedImage <EnhancedImage
alt={p.name} alt={p.name}
className={cn('w-full object-cover', s['product-image'])} className={cn('w-full object-cover', s['product-image'])}

4
pages/index.tsx
View File

@ -79,8 +79,8 @@ export default function Home({
key={node.path} key={node.path}
product={node} product={node}
// The first image is the largest one in the grid // The first image is the largest one in the grid
imgWidth={i === 0 ? '65vw' : '30vw'} imgWidth={i === 0 ? 1600 : 820}
imgHeight={i === 0 ? '45vw' : '22vw'} imgHeight={i === 0 ? 1600 : 820}
priority priority
/> />
))} ))}