4
0
forked from crowetic/commerce
This commit is contained in:
Luis Alvarez 2020-10-20 22:27:50 -05:00
commit 553ace94f5
10 changed files with 72 additions and 51 deletions

View File

@ -59,7 +59,7 @@
} }
.fit { .fit {
min-height: calc(100vh - 300px); min-height: calc(100vh - 88px - 41px);
} }
*, *,

View File

@ -22,10 +22,6 @@ const Footer: FC<Props> = ({ className, pages }) => {
return ( return (
<div className="bg-black text-white"> <div className="bg-black text-white">
<hr
className="hidden md:block mt-4 border-gray-700"
style={{ flexBasis: '100%', height: 0 }}
/>
<footer className={rootClassName}> <footer className={rootClassName}>
<Link href="/"> <Link href="/">
<a className="flex flex-initial items-center md:items-start font-bold md:mr-24"> <a className="flex flex-initial items-center md:items-start font-bold md:mr-24">

View File

@ -20,7 +20,7 @@ const Navbar: FC<Props> = ({ className }) => {
<Logo /> <Logo />
</a> </a>
</Link> </Link>
<nav className="space-x-4 ml-6 hidden md:block"> <nav className="space-x-4 ml-6 sm:hidden lg:block">
<Link href="/"> <Link href="/">
<a className={s.link}>All</a> <a className={s.link}>All</a>
</Link> </Link>
@ -33,11 +33,11 @@ const Navbar: FC<Props> = ({ className }) => {
</nav> </nav>
</div> </div>
<div className="md:flex flex-1 justify-center hidden"> <div className="lg:flex flex-1 justify-center sm:hidden">
<Searchbar /> <Searchbar />
</div> </div>
<div className="flex flex-initial md:flex-1 justify-end space-x-8"> <div className="flex flex-1 justify-end space-x-8">
<Toggle <Toggle
checked={theme === 'dark'} checked={theme === 'dark'}
onChange={() => onChange={() =>
@ -47,7 +47,8 @@ const Navbar: FC<Props> = ({ className }) => {
<UserNav /> <UserNav />
</div> </div>
</div> </div>
<div className="block flex pb-4 md:hidden px-4 md:px-6">
<div className="sm:flex pb-4 lg:px-6 lg:hidden">
<Searchbar /> <Searchbar />
</div> </div>
</div> </div>

View File

@ -1,9 +1,14 @@
.root { .root {
@apply relative w-full h-full; @apply relative w-full h-full;
overflow-y: hidden;
& > div {
overflow: visible !important;
}
} }
.rootPanel { .rootPanel {
@apply absolute flex flex-row inset-0 z-20 overflow-hidden; @apply absolute flex flex-row inset-0 z-20 m-20;
} }
.leftPanel { .leftPanel {

View File

@ -19,13 +19,18 @@ const ProductSlider: FC<Props> = ({ children }) => {
return ( return (
<div className={s.root}> <div className={s.root}>
<SwipeableViews
index={idx}
onChangeIndex={setIdx}
containerStyle={{ overflow: 'visible' }}
slideStyle={{ overflow: 'visible' }}
>
{children}
</SwipeableViews>
<div className={s.rootPanel}> <div className={s.rootPanel}>
<div className={s.leftPanel} onClick={goBack}></div> <div className={s.leftPanel} onClick={goBack}></div>
<div className={s.rightPanel} onClick={goNext}></div> <div className={s.rightPanel} onClick={goNext}></div>
</div> </div>
<SwipeableViews index={idx} onChangeIndex={setIdx}>
{children}
</SwipeableViews>
</div> </div>
) )
} }

View File

@ -1,30 +1,40 @@
.root { .root {
@apply relative grid items-start my-12 gap-8 grid-cols-1; @apply relative grid items-start gap-8 grid-cols-1;
@screen md { @screen lg {
@apply grid-cols-12; @apply grid-cols-12 pt-10;
} }
} }
.button {
min-width: 300px;
text-align: center;
}
.productDisplay { .productDisplay {
@apply flex px-0 pb-0 relative box-border min-h-full col-span-7; @apply relative flex px-0 pb-0 relative box-border col-span-7;
margin-right: -2rem; margin-right: -2rem;
margin-left: -2rem; margin-left: -2rem;
min-height: 400px; min-height: 400px;
@screen md { @screen md {
@apply px-24 mx-0; min-height: 700px;
}
@screen lg {
@apply mx-0;
min-height: 100%;
height: 100%;
}
}
.squareBg {
@apply absolute inset-0 bg-violet z-0;
max-height: 250px;
@screen md {
@apply inset-20;
max-height: 500px;
} }
} }
.nameBox { .nameBox {
@apply absolute top-0 left-0 z-50; @apply absolute top-6 left-0 z-50;
& .name { & .name {
@apply px-6 py-2 bg-primary text-primary font-bold text-3xl; @apply px-6 py-2 bg-primary text-primary font-bold text-3xl;
@ -42,33 +52,38 @@
} }
} }
.squareBg {
@apply absolute inset-0 bg-violet z-0;
max-height: 250px;
@screen md {
@apply inset-14;
min-height: 100%;
}
}
.sidebar { .sidebar {
@apply flex flex-col md:pt-24 col-span-5; @apply flex flex-col col-span-5;
@screen lg {
padding-top: 5rem;
}
} }
.sliderContainer { .sliderContainer {
@apply absolute z-10 inset-0 flex items-center justify-center; @apply absolute z-10 inset-0 flex items-center justify-center overflow-x-hidden;
@screen lg {
@apply -m-12;
}
} }
.img { .img {
@apply w-full object-cover; @apply w-full h-full object-cover;
@screen md {
height: 100%;
margin-top: -2.75rem;
}
@screen lg {
height: 150%;
margin-top: -10%;
}
@screen xl { @screen xl {
margin-top: -14%; height: 170%;
height: 140%; margin-top: -19%;
} }
} }
.button {
min-width: 300px;
text-align: center;
}

View File

@ -65,7 +65,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
}} }}
/> />
<div className={cn(s.root, 'fit')}> <div className={cn(s.root, 'fit')}>
<div className={s.productDisplay}> <div className={cn(s.productDisplay, 'fit')}>
<div className={s.squareBg}></div> <div className={s.squareBg}></div>
<div className={s.nameBox}> <div className={s.nameBox}>
<h1 className={s.name}>{product.name}</h1> <h1 className={s.name}>{product.name}</h1>

View File

@ -52,7 +52,7 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div <div
className="absolute inset-0 bg-black bg-opacity-25 transition-opacity" className="absolute inset-0 bg-black bg-opacity-50 transition-opacity"
// Close the sidebar when clicking on the backdrop // Close the sidebar when clicking on the backdrop
onClick={close} onClick={close}
/> />

View File

@ -1,7 +1,10 @@
import '@assets/global.css' import '@assets/global.css'
import '@assets/tailwind.css' import '@assets/tailwind.css'
import '@assets/utils.css' import '@assets/utils.css'
// To be removed
import 'animate.css' import 'animate.css'
import { FC } from 'react' import { FC } from 'react'
import type { AppProps } from 'next/app' import type { AppProps } from 'next/app'

View File

@ -3,11 +3,7 @@ module.exports = {
removeDeprecatedGapUtilities: true, removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true, purgeLayersByDefault: true,
}, },
purge: [ purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
'./components/**/*.{js,ts,jsx,tsx}',
'./pages/**/*.{js,ts,jsx,tsx}',
'./ui/**/*.{js,ts,jsx,tsx}',
],
theme: { theme: {
extend: { extend: {
backgroundOpacity: { backgroundOpacity: {