4
0
forked from crowetic/commerce

changes to the layout

This commit is contained in:
Belen Curcio 2020-10-13 11:43:06 -03:00
parent 30a8677816
commit 038d02acc2
11 changed files with 132 additions and 91 deletions

View File

@ -3,15 +3,27 @@
:root { :root {
--bg-primary: white; --bg-primary: white;
--bg-secondary: black; --bg-secondary: black;
--bg-primary-accent: rgba(0, 0, 0, 0.075);
--text-primary: black; --text-primary: black;
--text-secondary: #252f3f; --text-secondary: white;
--text-default: #252f3f;
} }
[data-theme='dark'] { [data-theme='dark'] {
--bg-primary: black; --bg-primary: black;
--bg-secondary: white; --bg-secondary: white;
--bg-primary-accent: rgba(255, 255, 255, 0.075);
--text-primary: white; --text-primary: white;
--text-secondary: white; --text-secondary: black;
--text-default: white;
}
.fit {
min-height: calc(100vh - 200px);
} }
*, *,

View File

@ -15,6 +15,10 @@ const Footer: FC<Props> = ({ className }) => {
) )
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">
@ -54,11 +58,6 @@ const Footer: FC<Props> = ({ className }) => {
<small className="text-base"> <small className="text-base">
&copy; 2020 ACME, Inc. All rights reserved. &copy; 2020 ACME, Inc. All rights reserved.
</small> </small>
<hr
className="hidden md:block mt-4 border-gray-700"
style={{ flexBasis: '100%', height: 0 }}
/>
</footer> </footer>
</div> </div>
) )

View File

@ -24,7 +24,7 @@ const CoreLayout: FC<Props> = ({ className, children }) => {
<Container> <Container>
<Navbar /> <Navbar />
</Container> </Container>
<main className="h-screen">{children}</main> <main className="fit">{children}</main>
<Footer /> <Footer />
<Sidebar show={displaySidebar} close={closeSidebar}> <Sidebar show={displaySidebar} close={closeSidebar}>
<CartSidebarView /> <CartSidebarView />

View File

@ -1,7 +1,7 @@
.root {
@apply flex flex-row h-screen py-12 px-6;
}
.button { .button {
min-width: 300px; min-width: 300px;
} }
.squareBg {
@apply absolute inset-24 z-0 bg-violet;
}

View File

@ -1,7 +1,7 @@
import cn from 'classnames' import cn from 'classnames'
import { FC, useState } from 'react' import { FC, useState } from 'react'
import s from './ProductView.module.css' import s from './ProductView.module.css'
import { Button } from '@components/ui' import { Button, Container } from '@components/ui'
import { Swatch } from '@components/product' import { Swatch } from '@components/product'
import { Colors } from '@components/ui/types' import { Colors } from '@components/ui/types'
import type { Product } from '@lib/bigcommerce/api/operations/get-product' import type { Product } from '@lib/bigcommerce/api/operations/get-product'
@ -43,76 +43,76 @@ const ProductView: FC<Props> = ({ product, className }) => {
const activeColor = choices.color const activeColor = choices.color
return ( return (
<div className={cn(s.root, className)}> <Container>
<div className="absolute"> <div className="relative flex flex-row items-start overflow-hidden">
<h1 className="px-6 py-2 bg-violet text-white font-bold text-3xl"> <div className="absolute top-0 left-0 z-50">
{product.name} <h1 className="px-6 py-2 bg-violet text-white font-bold text-3xl">
</h1> {product.name}
<div className="px-6 py-2 pb-4 bg-violet text-white font-semibold inline-block"> </h1>
{product.prices?.price.value} <div className="px-6 py-2 pb-4 bg-violet text-white font-bold inline-block traking">
{` `} {product.prices?.price.value}
{product.prices?.price.currencyCode} {` `}
</div> {product.prices?.price.currencyCode}
</div>
<div className="flex-1 h-48 p-24 relative min-h-screen overflow-hidden">
<div className="absolute z-10 inset-0 flex items-center justify-center">
<img
className="w-full object-cover"
src={product.images.edges?.[0]?.node.urlXL}
/>
</div>
<div className=" absolute inset-24 z-0 bg-violet"></div>
</div>
<div className="flex-1 flex flex-col">
<section className="pb-4">
<h2 className="uppercase font-medium">Color</h2>
<div className="flex flex-row py-4">
{COLORS.map((color) => (
<Swatch
key={color}
color={color}
active={color === activeColor}
onClick={() =>
setChoices((choices) => {
return { ...choices, color }
})
}
/>
))}
</div> </div>
</section> </div>
<section className="pb-4"> <div className="flex-1 p-24 relative fit overflow-hidden box-border">
<h2 className="uppercase font-medium">Size</h2> <div className="absolute z-10 inset-0 flex items-center justify-center">
<div className="flex flex-row py-4"> <img
{SIZES.map((size) => { className="w-full object-cover"
return ( src={product.images.edges?.[0]?.node.urlXL}
/>
</div>
<div className={s.squareBg}></div>
</div>
<div className="flex-1 flex flex-col">
<section className="pt-24">
<h2 className="uppercase font-medium">Color</h2>
<div className="flex flex-row py-4">
{COLORS.map((color) => (
<Swatch <Swatch
size={size.toUpperCase()} key={color}
key={`size-${size}`} color={color}
active={size === activeSize} active={color === activeColor}
onClick={() => onClick={() =>
setChoices((choices) => { setChoices((choices) => {
return { ...choices, size } return { ...choices, color }
}) })
} }
/> />
) ))}
})} </div>
</div> </section>
</section> <section className="pb-4">
<section className="pb-12"> <h2 className="uppercase font-medium">Size</h2>
<div <div className="flex flex-row py-4">
className="break-words" {SIZES.map((size) => {
dangerouslySetInnerHTML={{ __html: product.description }} return (
/> <Swatch
</section> size={size.toUpperCase()}
<section className="pb-4"> key={`size-${size}`}
<Button type="button" className={s.button} onClick={addToCart}> active={size === activeSize}
Add to Cart onClick={() =>
</Button> setChoices((choices) => ({ ...choices, size }))
</section> }
/>
)
})}
</div>
</section>
<section className="pb-12">
<div
className="break-words"
dangerouslySetInnerHTML={{ __html: product.description }}
/>
</section>
<section className="pb-4">
<Button type="button" className={s.button} onClick={addToCart}>
Add to Cart
</Button>
</section>
</div>
</div> </div>
</div> </Container>
) )
} }

View File

@ -1,13 +1,15 @@
.root { .root {
@apply h-12 w-12 bg-white text-primary rounded-full mr-3 inline-flex items-center justify-center cursor-pointer transition duration-75 ease-in-out p-0 shadow-none; @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
items-center justify-center cursor-pointer transition duration-75 ease-in-out
p-0 shadow-none border-gray-200 border;
} }
.active.size { .active.size {
@apply border-black; @apply border-secondary border-2;
} }
.root:hover { .root:hover {
@apply transform scale-110; @apply transform scale-110 bg-primary-accent;
} }
.colorViolet { .colorViolet {
@ -22,8 +24,6 @@
@apply bg-black !important; @apply bg-black !important;
} }
.colorWhite, .colorWhite {
.size { @apply bg-white text-black !important;
@apply bg-white !important;
@apply border border-gray-200;
} }

View File

@ -27,8 +27,6 @@ const Swatch: FC<Props> = ({ className, size, color, active, ...props }) => {
className className
) )
// TODO: technically this is a radio
return ( return (
<Button className={rootClassName} {...props}> <Button className={rootClassName} {...props}>
{color && active && ( {color && active && (
@ -47,4 +45,3 @@ const Swatch: FC<Props> = ({ className, size, color, active, ...props }) => {
} }
export default Swatch export default Swatch

View File

@ -1,5 +1,7 @@
.root { .root {
@apply cursor-pointer inline-flex px-10 rounded-sm leading-6 text-white bg-black transition ease-in-out duration-150 shadow-sm font-semibold text-center justify-center uppercase py-4 uppercase text-center focus:outline-none; @apply text-secondary cursor-pointer inline-flex px-10 rounded-sm leading-6
bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold
text-center justify-center uppercase py-4 uppercase text-center focus:outline-none;
} }
.root:hover { .root:hover {

View File

@ -49,7 +49,7 @@ export default function Home({
All Categories All Categories
</li> </li>
{categories.map((cat) => ( {categories.map((cat) => (
<li key={cat.path} className="py-1 text-secondary"> <li key={cat.path} className="py-1 text-default">
<a href="#">{cat.name}</a> <a href="#">{cat.name}</a>
</li> </li>
))} ))}
@ -59,7 +59,7 @@ export default function Home({
All Designers All Designers
</li> </li>
{brands.flatMap(({ node }) => ( {brands.flatMap(({ node }) => (
<li key={node.path} className="py-1 text-secondary"> <li key={node.path} className="py-1 text-default">
<a href="#">{node.name}</a> <a href="#">{node.name}</a>
</li> </li>
))} ))}

View File

@ -13,14 +13,41 @@ export async function getStaticProps({ preview }: GetStaticPropsContext) {
} }
} }
export default function Home({}: InferGetStaticPropsType< export default function Home({
typeof getStaticProps categories,
>) { brands,
}: InferGetStaticPropsType<typeof getStaticProps>) {
return ( return (
<Container> <Container>
<h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-primary tracking-wide"> <h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-primary tracking-wide">
My Wishlist My Wishlist
</h2> </h2>
<div className="grid grid-cols-12 gap-8 mt-3 mb-20">
<div className="col-span-2">
<ul className="mb-10">
<li className="py-1 text-primary font-bold tracking-wide">
All Categories
</li>
{categories.map((cat) => (
<li key={cat.path} className="py-1 text-secondary">
<a href="#">{cat.name}</a>
</li>
))}
</ul>
</div>
<div className="col-span-8">Items.</div>
<div className="col-span-2">
<ul>
<li className="py-1 text-primary font-bold tracking-wide">
Relevance
</li>
<li className="py-1 text-secondary">Latest arrivals</li>
<li className="py-1 text-secondary">Trending</li>
<li className="py-1 text-secondary">Price: Low to high</li>
<li className="py-1 text-secondary">Price: High to low</li>
</ul>
</div>
</div>
</Container> </Container>
) )
} }

View File

@ -10,6 +10,9 @@ module.exports = {
], ],
theme: { theme: {
extend: { extend: {
backgroundOpacity: {
075: '0.75',
},
colors: { colors: {
'accent-1': '#FAFAFA', 'accent-1': '#FAFAFA',
'accent-2': '#F1F3F5', 'accent-2': '#F1F3F5',
@ -22,6 +25,7 @@ module.exports = {
red: '#DA3C3C', red: '#DA3C3C',
primary: 'var(--bg-primary)', primary: 'var(--bg-primary)',
secondary: 'var(--bg-secondary)', secondary: 'var(--bg-secondary)',
'primary-accent': 'var(--bg-primary-accent)',
}, },
textColor: { textColor: {
base: 'var(--text-primary)', base: 'var(--text-primary)',