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

cover full screen and center

Browse Source
This commit is contained in:
Julián Benegas 2020-10-22 20:08:47 -03:00
parent 44199be2e7
commit e59b59ef8d
5 changed files with 12 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/product/ProductSlider/ProductSlider.module.css
View File

@ -5,7 +5,7 @@
.leftControl, .leftControl,
.rightControl { .rightControl {
@apply text-white absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded focus:outline-none focus:shadow-outline-blue hover:bg-hover-2; @apply text-white text-xl absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full focus:outline-none focus:shadow-outline-blue hover:bg-hover-2;
} }
.leftControl { .leftControl {
@ -13,11 +13,11 @@
} }
.rightControl { .rightControl {
@apply right-6 rotate-180 transform; @apply right-6;
} }
.control { .control {
@apply opacity-0 transition-all duration-150; @apply opacity-0 transition duration-150;
} }
.root:hover .control { .root:hover .control {

6
components/product/ProductSlider/ProductSlider.tsx
View File

@ -1,6 +1,6 @@
import { ArrowLeft } from '@components/icon'
import { useKeenSlider } from 'keen-slider/react' import { useKeenSlider } from 'keen-slider/react'
import React, { Children, FC, isValidElement, useState } from 'react' import React, { Children, FC, isValidElement, useState } from 'react'
import { HiChevronLeft, HiChevronRight } from 'react-icons/hi'
import cn from 'classnames' import cn from 'classnames'
import s from './ProductSlider.module.css' import s from './ProductSlider.module.css'
@ -17,10 +17,10 @@ const ProductSlider: FC = ({ children }) => {
return ( return (
<div className={s.root}> <div className={s.root}>
<button className={cn(s.leftControl, s.control)} onClick={slider?.prev}> <button className={cn(s.leftControl, s.control)} onClick={slider?.prev}>
<ArrowLeft /> <HiChevronLeft />
</button> </button>
<button className={cn(s.rightControl, s.control)} onClick={slider?.next}> <button className={cn(s.rightControl, s.control)} onClick={slider?.next}>
<ArrowLeft /> <HiChevronRight />
</button> </button>
<div ref={ref} className="keen-slider h-full"> <div ref={ref} className="keen-slider h-full">
{Children.map(children, (child) => { {Children.map(children, (child) => {

5
components/product/ProductView/ProductView.module.css
View File

@ -17,7 +17,7 @@
} }
@screen lg { @screen lg {
@apply mx-0 col-span-7; @apply mx-0 col-span-6;
min-height: 100%; min-height: 100%;
height: 100%; height: 100%;
} }
@ -52,8 +52,7 @@
@apply flex flex-col col-span-1; @apply flex flex-col col-span-1;
@screen lg { @screen lg {
@apply col-span-5; @apply col-span-5 pl-12 pt-20;
padding-top: 5rem;
} }
} }

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

@ -46,7 +46,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
} }
return ( return (
<Container> <Container className="max-w-none w-full" clean>
<NextSeo <NextSeo
title={product.name} title={product.name}
description={product.description} description={product.description}
@ -88,12 +88,6 @@ const ProductView: FC<Props> = ({ product, className }) => {
))} ))}
</ProductSlider> </ProductSlider>
</div> </div>
{!validMedia && (
<div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
<img src="/slider-arrows.png" />
</div>
)}
</div> </div>
<div className={s.sidebar}> <div className={s.sidebar}>

5
components/ui/Container/Container.tsx
View File

@ -5,10 +5,11 @@ interface Props {
className?: string className?: string
children?: any children?: any
el?: HTMLElement el?: HTMLElement
clean?: boolean
} }
const Container: FC<Props> = ({ children, className, el = 'div' }) => { const Container: FC<Props> = ({ children, className, el = 'div', clean }) => {
const rootClassName = cn('mx-auto max-w-8xl px-12', className) const rootClassName = cn(className, { 'mx-auto max-w-8xl px-12': !clean })
let Component: React.ComponentType<React.HTMLAttributes< let Component: React.ComponentType<React.HTMLAttributes<
HTMLDivElement HTMLDivElement