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

Merge pull request #7 from okbel/jb/product-improvements

Browse Source 
Nav, PDP, and Transitions improvements
This commit is contained in:
Franco Arza 2020-10-23 11:34:07 -03:00 committed by GitHub
commit b15ae59aaf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 227 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/base.css
View File

@ -11,6 +11,8 @@
--text-secondary: white;
--hover: rgba(0, 0, 0, 0.075);
--hover-1: rgba(0, 0, 0, 0.15);
--hover-2: rgba(0, 0, 0, 0.25);
--cyan: #22b8cf;
--green: #37b679;
@ -41,6 +43,8 @@
--secondary: white;
--secondary-2: #f1f3f5;
--hover: rgba(255, 255, 255, 0.075);
--hover-1: rgba(255, 255, 255, 0.15);
--hover-2: rgba(255, 255, 255, 0.25);
--selection: var(--purple);
--text-base: white;

2
assets/components.css
View File

@ -1,3 +1,3 @@
.fit {
min-height: calc(100vh - 88px - 41px);
min-height: calc(100vh - 88px);
}

2
components/core/Avatar/Avatar.tsx
View File

@ -12,7 +12,7 @@ const Avatar: FC<Props> = ({}) => {
return (
<div
className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary transition linear-out duration-100"
className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary transition linear-out duration-150"
style={{
backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
}}

12
components/core/Footer/Footer.tsx
View File

@ -21,7 +21,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
return (
<footer className={rootClassName}>
<Container>
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accents-2 py-12 text-primary bg-primary">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accents-2 py-12 text-primary bg-primary transition-colors duration-150">
<div className="col-span-1 lg:col-span-2">
<Link href="/">
<a className="flex flex-initial items-center font-bold md:mr-24">
@ -36,21 +36,21 @@ const Footer: FC<Props> = ({ className, pages }) => {
<ul className="flex flex-initial flex-col md:flex-1">
<li className="py-3 md:py-0 md:pb-4">
<Link href="/">
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
<a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
Home
</a>
</Link>
</li>
<li className="py-3 md:py-0 md:pb-4">
<Link href="/">
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
<a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
Careers
</a>
</Link>
</li>
<li className="py-3 md:py-0 md:pb-4">
<Link href="/blog">
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
<a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
Blog
</a>
</Link>
@ -58,7 +58,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
{sitePages.map((page) => (
<li key={page.url} className="py-3 md:py-0 md:pb-4">
<Link href={page.url!}>
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
<a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
{page.name}
</a>
</Link>
@ -71,7 +71,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
{legalPages.map((page) => (
<li key={page.url} className="py-3 md:py-0 md:pb-4">
<Link href={page.url!}>
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
<a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
{page.name}
</a>
</Link>

2
components/core/Layout/Layout.module.css
View File

@ -1,4 +1,4 @@
.root {
@apply h-full bg-primary mx-auto;
@apply h-full bg-primary mx-auto transition-colors duration-150;
max-width: 2460px;
}

30
components/core/Layout/Layout.tsx
View File

@ -1,4 +1,4 @@
import { FC, useState } from 'react'
import { FC, useEffect, useState } from 'react'
import cn from 'classnames'
import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
import { CommerceProvider } from '@lib/bigcommerce'
@ -18,13 +18,35 @@ interface Props {
const Layout: FC<Props> = ({ children, pageProps }) => {
const { displaySidebar, closeSidebar } = useUI()
const [acceptedCookies, setAcceptedCookies] = useState(false)
const [hasScrolled, setHasScrolled] = useState(false)
useEffect(() => {
const offset = 0
function handleScroll() {
const { scrollTop } = document.documentElement
if (scrollTop > offset) setHasScrolled(true)
else setHasScrolled(false)
}
document.addEventListener('scroll', handleScroll)
return () => {
document.removeEventListener('scroll', handleScroll)
}
}, [])
return (
<CommerceProvider locale="en-us">
<div className={cn(s.root)}>
<Container>
<Navbar />
</Container>
<header
className={cn(
'sticky top-0 bg-primary z-40 transition-all duration-150',
{ 'shadow-magical': hasScrolled }
)}
>
<Container>
<Navbar />
</Container>
</header>
<main className="fit">{children}</main>
<Footer pages={pageProps.pages} />
<Sidebar show={displaySidebar} close={closeSidebar}>

2
components/core/Navbar/Navbar.module.css
View File

@ -1,3 +1,3 @@
.link {
@apply group text-base inline-flex items-center text-base leading-6 font-medium hover:text-accents-8 focus:outline-none focus:text-accents-8 transition ease-in-out duration-100 cursor-pointer;
@apply group inline-flex items-center text-base leading-6 font-medium hover:text-accents-8 focus:outline-none focus:text-accents-8 transition ease-in-out duration-150 cursor-pointer;
}

2
components/core/Searchbar/Searchbar.tsx
View File

@ -17,7 +17,7 @@ const Searchbar: FC<Props> = ({ className }) => {
return (
<div
className={cn(
'relative text-sm bg-accents-1 text-base w-full',
'relative text-sm bg-accents-1 text-base w-full transition-colors duration-150',
className
)}
>

20
components/core/Toggle/Toggle.tsx
View File

@ -9,26 +9,30 @@ interface Props {
const Toggle: FC<Props> = ({ className, checked, onChange }) => {
return (
<Switch checked={checked} onChange={onChange}>
<Switch
checked={checked}
onChange={onChange}
className="focus:outline-none"
>
<span
role="checkbox"
aria-checked="false"
tabIndex={0}
className={`${
checked ? 'bg-gray-800' : 'bg-gray-200'
} relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline`}
} relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-150 focus:outline-none focus:shadow-outline`}
>
<span
aria-hidden="true"
className={`${
checked ? 'translate-x-5' : 'translate-x-0'
} translate-x-0 relative inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200`}
} translate-x-0 relative inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-150`}
>
<span
className={`${
checked
? 'opacity-0 ease-out duration-100'
: 'opacity-100 ease-in duration-200'
? 'opacity-0 ease-out duration-150'
: 'opacity-100 ease-in duration-150'
} absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
>
<HiSun className="h-3 w-3 text-gray-400" />
@ -36,9 +40,9 @@ const Toggle: FC<Props> = ({ className, checked, onChange }) => {
<span
className={`${
checked
? 'opacity-100 ease-in duration-200'
: 'opacity-0 ease-out duration-100'
} opacity-0 ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
? 'opacity-100 ease-in duration-150'
: 'opacity-0 ease-out duration-150'
} opacity-0 ease-out duration-150 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
>
<HiMoon className="h-3 w-3 text-yellow-400" />
</span>

2
components/core/UserNav/DropdownMenu.tsx
View File

@ -26,7 +26,7 @@ const DropdownMenu: FC<DropdownMenuProps> = ({
return (
<Transition
show={open}
enter="transition ease-out duration-100 z-20"
enter="transition ease-out duration-150 z-20"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"

5
components/core/UserNav/UserNav.module.css
View File

@ -10,10 +10,9 @@
}
.item {
@apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center;
@apply mr-6 cursor-pointer relative transition ease-in-out duration-150 text-base flex items-center;
&:hover {
@apply text-accents-8 transition scale-110 duration-100;
@apply text-accents-8 transition scale-110 duration-150;
}
&:last-child {

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

@ -1,22 +1,76 @@
.root {
@apply relative w-full h-full;
@apply relative w-full h-full relative;
overflow-y: hidden;
}
& > div {
overflow: visible !important;
.leftControl,
.rightControl {
@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 {
@apply left-6;
}
.rightControl {
@apply right-6;
}
.control {
@apply opacity-0 transition duration-150;
}
.root:hover .control {
@apply opacity-100;
}
.positionIndicatorsContainer {
@apply hidden;
@screen sm {
@apply block absolute bottom-6 left-1/2 -translate-x-1/2 transform;
}
}
.rootPanel {
@apply absolute flex flex-row inset-0 z-20 m-20;
.positionIndicator {
@apply rounded-full p-2;
/* :hover .dot {
@apply bg-hover-2;
}
:focus .dot {
@apply outline-none;
} */
}
.leftPanel {
@apply flex-1;
cursor: url('/cursor-left.png'), auto;
.dot {
@apply bg-hover-1 transition w-3 h-3 rounded-full;
}
.rightPanel {
@apply flex-1;
cursor: url('/cursor-right.png'), auto;
.positionIndicator:hover .dot {
@apply bg-hover-2;
}
.positionIndicator:focus {
@apply outline-none;
}
.positionIndicator:focus .dot {
@apply shadow-outline-blue;
}
.positionIndicatorActive .dot {
@apply bg-white;
}
.positionIndicatorActive:hover .dot {
@apply bg-white;
}
/* sx={{
width: '10px',
height: '10px',
bg: currentSlide === idx ? 'primary' : 'gray',
borderRadius: 'full',
mx: 2,
'&:focus': { outline: 'none' },
}} */

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

@ -1,36 +1,71 @@
import React, { FC, useState } from 'react'
import SwipeableViews from 'react-swipeable-views'
import { useKeenSlider } from 'keen-slider/react'
import React, { Children, FC, isValidElement, useState } from 'react'
import { HiChevronLeft, HiChevronRight } from 'react-icons/hi'
import cn from 'classnames'
import s from './ProductSlider.module.css'
interface Props {
children?: any
}
const ProductSlider: FC<Props> = ({ children }) => {
const [idx, setIdx] = useState(0)
const count = React.Children.count(children)
const ProductSlider: FC = ({ children }) => {
const [currentSlide, setCurrentSlide] = useState(0)
const [isMounted, setIsMounted] = useState(false)
const goBack = () => {
idx !== 0 ? setIdx(idx - 1) : setIdx(count - 1)
}
const goNext = () => {
idx + 1 === count ? setIdx(0) : setIdx(idx + 1)
}
const [ref, slider] = useKeenSlider<HTMLDivElement>({
loop: true,
slidesPerView: 1,
mounted: () => setIsMounted(true),
slideChanged(s) {
setCurrentSlide(s.details().relativeSlide)
},
})
return (
<div className={s.root}>
<SwipeableViews
index={idx}
onChangeIndex={setIdx}
containerStyle={{ overflow: 'visible' }}
slideStyle={{ overflow: 'visible' }}
<button className={cn(s.leftControl, s.control)} onClick={slider?.prev}>
<HiChevronLeft />
</button>
<button className={cn(s.rightControl, s.control)} onClick={slider?.next}>
<HiChevronRight />
</button>
<div
ref={ref}
className="keen-slider h-full transition-opacity duration-150"
style={{ opacity: isMounted ? 1 : 0 }}
>
{children}
</SwipeableViews>
<div className={s.rootPanel}>
<div className={s.leftPanel} onClick={goBack}></div>
<div className={s.rightPanel} onClick={goNext}></div>
{Children.map(children, (child) => {
// Add the keen-slider__slide className to children
if (isValidElement(child)) {
return {
...child,
props: {
...child.props,
className: `${
child.props.className ? `${child.props.className} ` : ''
}keen-slider__slide`,
},
}
}
return child
})}
</div>
{slider && (
<div className={cn(s.positionIndicatorsContainer)}>
{[...Array(slider.details().size).keys()].map((idx) => {
return (
<button
key={idx}
className={cn(s.positionIndicator, {
[s.positionIndicatorActive]: currentSlide === idx,
})}
onClick={() => {
slider.moveToSlideRelative(idx)
}}
>
<div className={s.dot} />
</button>
)
})}
</div>
)}
</div>
)
}

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

@ -1,8 +1,8 @@
.root {
@apply relative grid items-start gap-8 grid-cols-1;
@apply relative grid items-start gap-8 grid-cols-1 overflow-x-hidden;
@screen lg {
@apply grid-cols-12 pt-10;
@apply grid-cols-12;
}
}
@ -17,24 +17,18 @@
}
@screen lg {
@apply mx-0 col-span-7;
@apply mx-0 col-span-6;
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;
}
@apply absolute inset-0 bg-violet z-0 h-full;
}
.nameBox {
@apply absolute top-6 left-10 z-10;
@apply absolute top-6 left-6 z-20;
& .name {
@apply px-6 py-2 bg-primary text-primary font-bold;
@ -46,20 +40,19 @@
@apply px-6 py-2 pb-4 bg-primary text-primary font-bold inline-block tracking-wide;
}
@screen md {
@screen lg {
& .name,
& .price {
@apply bg-violet-light text-white;
@apply bg-hover-1 text-white;
}
}
}
.sidebar {
@apply flex flex-col col-span-1;
@apply flex flex-col col-span-1 mx-auto max-w-8xl px-12 w-full;
@screen lg {
@apply col-span-5;
padding-top: 5rem;
@apply col-span-5 pl-12 pt-20;
}
}
@ -68,20 +61,18 @@
}
.img {
@apply w-full h-full object-cover;
@screen md {
height: 100%;
margin-top: -2.75rem;
}
@screen lg {
height: 100%;
margin-top: -8%;
}
@apply w-full h-auto max-h-full object-cover;
}
.button {
min-width: 300px;
text-align: center;
}
.wishlistButton {
@apply absolute z-30 top-6 right-0 bg-primary text-base w-10 h-10 flex items-center justify-center font-semibold leading-6 cursor-pointer;
@screen lg {
@apply right-12 text-white bg-violet;
}
}

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

@ -9,6 +9,8 @@ import useAddItem from '@lib/bigcommerce/cart/use-add-item'
import { isDesktop } from '@lib/browser'
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
import { getProductOptions } from '../helpers'
import { Heart } from '@components/icon'
interface Props {
className?: string
children?: any
@ -46,7 +48,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
}
return (
<Container>
<Container className="max-w-none w-full" clean>
<NextSeo
title={product.name}
description={product.description}
@ -88,12 +90,6 @@ const ProductView: FC<Props> = ({ product, className }) => {
))}
</ProductSlider>
</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 className={s.sidebar}>
@ -143,6 +139,11 @@ const ProductView: FC<Props> = ({ product, className }) => {
</div>
</section>
</div>
{/* TODO make it work */}
<div className={s.wishlistButton}>
<Heart />
</div>
</div>
</Container>
)

4
components/product/Swatch/Swatch.module.css
View File

@ -1,6 +1,6 @@
.root {
@apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
items-center justify-center cursor-pointer transition duration-100 ease-in-out
items-center justify-center cursor-pointer transition duration-150 ease-in-out
p-0 shadow-none border-gray-200 border box-border;
& > span {
@ -13,7 +13,7 @@
}
.color {
@apply text-black transition duration-100 ease-in-out;
@apply text-black transition duration-150 ease-in-out;
&:hover {
@apply text-black;

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

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

1
package.json
View File

@ -28,6 +28,7 @@
"classnames": "^2.2.6",
"cookie": "^0.4.1",
"js-cookie": "^2.2.1",
"keen-slider": "^5.2.4",
"lodash.debounce": "^4.0.8",
"lodash.random": "^3.2.0",
"next": "^9.5.6-canary.9",

1
pages/_app.tsx
View File

@ -1,4 +1,5 @@
import '@assets/main.css'
import 'keen-slider/keen-slider.min.css'
// To be removed
import 'animate.css'

4
pages/index.tsx
View File

@ -63,7 +63,7 @@ export default function Home({
}, [])
return (
<div className="mt-3">
<div>
<Grid>
{featured.slice(0, 3).map(({ node }) => (
<ProductCard key={node.path} product={node} />
@ -96,7 +96,7 @@ export default function Home({
</Marquee>
<div className="py-12 flex flex-row w-full px-12">
<div className="pr-3 w-48 relative">
<div className="sticky top-2">
<div className="sticky top-32">
<ul className="mb-10">
<li className="py-1 text-base font-bold tracking-wide">
All Categories

6
tailwind.config.js
View File

@ -18,6 +18,8 @@ module.exports = {
secondary: 'var(--secondary)',
'secondary-2': 'var(--secondary-2)',
hover: 'var(--hover)',
'hover-1': 'var(--hover-1)',
'hover-2': 'var(--hover-2)',
'accents-0': 'var(--accents-0)',
'accents-1': 'var(--accents-1)',
'accents-2': 'var(--accents-2)',
@ -41,6 +43,10 @@ module.exports = {
primary: 'var(--text-primary)',
secondary: 'var(--text-secondary)',
},
boxShadow: {
magical:
'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px',
},
},
},
variants: {},

5
yarn.lock
View File

@ -5399,6 +5399,11 @@ jws@^3.2.2:
jwa "^1.4.1"
safe-buffer "^5.0.1"
keen-slider@^5.2.4:
version "5.2.4"
resolved "https://registry.yarnpkg.com/keen-slider/-/keen-slider-5.2.4.tgz#9e2a889c63c02a651c81caa438f3691e9a3bc0a8"
integrity sha512-z39afyASW63B+1FzWGzBkvXAnzJl3gAD8M+32TmhJAPJqjckCaKYm7YBjpSba04AoVMQw8y9U1LVcUucVVIQkQ==
keycode@^2.1.7:
version "2.2.0"
resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04"