forked from crowetic/commerce
Merge branch 'master' of https://github.com/okbel/e-comm-example
This commit is contained in:
commit
553ace94f5
@ -59,7 +59,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.fit {
|
.fit {
|
||||||
min-height: calc(100vh - 300px);
|
min-height: calc(100vh - 88px - 41px);
|
||||||
}
|
}
|
||||||
|
|
||||||
*,
|
*,
|
||||||
|
@ -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">
|
||||||
|
@ -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>
|
||||||
|
@ -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 {
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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}
|
||||||
/>
|
/>
|
||||||
|
@ -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'
|
||||||
|
|
||||||
|
@ -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: {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user