forked from crowetic/commerce
More size for Product View
This commit is contained in:
parent
c9ee2af3e5
commit
5312f9e1f3
@ -2,19 +2,17 @@
|
|||||||
@apply relative grid items-start my-12 gap-8 grid-cols-1;
|
@apply relative grid items-start my-12 gap-8 grid-cols-1;
|
||||||
|
|
||||||
@screen md {
|
@screen md {
|
||||||
@apply grid-cols-2;
|
@apply grid-cols-12;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
min-width: 300px;
|
min-width: 300px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
justify-self: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.productDisplay {
|
.productDisplay {
|
||||||
@apply flex px-0 pb-0 relative box-border min-h-full;
|
@apply flex px-0 pb-0 relative box-border min-h-full col-span-7;
|
||||||
margin-right: -2rem;
|
margin-right: -2rem;
|
||||||
margin-left: -2rem;
|
margin-left: -2rem;
|
||||||
|
|
||||||
@ -50,10 +48,27 @@
|
|||||||
|
|
||||||
@screen md {
|
@screen md {
|
||||||
@apply inset-14;
|
@apply inset-14;
|
||||||
min-height: 400px;
|
min-height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.productSliderContainer {
|
.sidebar {
|
||||||
@apply absolute z-10 inset-0 flex items-center justify-center mt-6;
|
@apply flex flex-col md:pt-24 col-span-5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sliderContainer {
|
||||||
|
@apply absolute z-10 inset-0 flex items-center justify-center;
|
||||||
|
|
||||||
|
@screen lg {
|
||||||
|
@apply -m-12;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.img {
|
||||||
|
@apply w-full object-cover;
|
||||||
|
|
||||||
|
@screen xl {
|
||||||
|
margin-top: -14%;
|
||||||
|
height: 140%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -76,13 +76,13 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={s.productSliderContainer}>
|
<div className={s.sliderContainer}>
|
||||||
<ProductSlider>
|
<ProductSlider>
|
||||||
{/** TODO: Change with Image Component **/}
|
{/** TODO: Change with Image Component **/}
|
||||||
{product.images.edges?.map((image, i) => (
|
{product.images.edges?.map((image, i) => (
|
||||||
<img
|
<img
|
||||||
key={image?.node.urlSmall}
|
key={image?.node.urlSmall}
|
||||||
className="w-full object-cover"
|
className={s.img}
|
||||||
src={image?.node.urlXL}
|
src={image?.node.urlXL}
|
||||||
loading={i === 0 ? 'eager' : 'lazy'}
|
loading={i === 0 ? 'eager' : 'lazy'}
|
||||||
/>
|
/>
|
||||||
@ -97,7 +97,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col md:pt-24">
|
<div className={s.sidebar}>
|
||||||
<section>
|
<section>
|
||||||
{options?.map((opt: any) => (
|
{options?.map((opt: any) => (
|
||||||
<div className="pb-4" key={opt.displayName}>
|
<div className="pb-4" key={opt.displayName}>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user