From 8d4dffa6f01487be0cf5546653803d32282992eb Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Tue, 19 Jun 2018 12:49:31 -0400 Subject: [PATCH] video 5 --- finished-application/backend/package.json | 2 +- .../05/frontend/components/Header.js | 16 +++++ .../05/frontend/components/Meta.js | 13 ++++ .../05/frontend/components/Nav.js | 14 ++++ .../05/frontend/components/Page.js | 17 +++++ .../frontend/components/styles/CartStyles.js | 47 ++++++++++++ .../frontend/components/styles/CloseButton.js | 13 ++++ .../05/frontend/components/styles/Form.js | 71 +++++++++++++++++++ .../frontend/components/styles/ItemStyles.js | 39 ++++++++++ .../frontend/components/styles/NavStyles.js | 64 +++++++++++++++++ .../components/styles/OrderItemStyles.js | 44 ++++++++++++ .../frontend/components/styles/OrderStyles.js | 38 ++++++++++ .../05/frontend/components/styles/PriceTag.js | 17 +++++ .../frontend/components/styles/SickButton.js | 20 ++++++ .../05/frontend/components/styles/Supreme.js | 13 ++++ .../05/frontend/components/styles/Table.js | 31 ++++++++ .../05/frontend/components/styles/Title.js | 20 ++++++ stepped-solutions/05/frontend/pages/.gitkeep | 0 stepped-solutions/05/frontend/pages/_app.js | 18 +++++ stepped-solutions/05/frontend/pages/index.js | 9 +++ stepped-solutions/05/frontend/pages/sell.js | 9 +++ 21 files changed, 514 insertions(+), 1 deletion(-) create mode 100644 stepped-solutions/05/frontend/components/Header.js create mode 100644 stepped-solutions/05/frontend/components/Meta.js create mode 100644 stepped-solutions/05/frontend/components/Nav.js create mode 100644 stepped-solutions/05/frontend/components/Page.js create mode 100644 stepped-solutions/05/frontend/components/styles/CartStyles.js create mode 100644 stepped-solutions/05/frontend/components/styles/CloseButton.js create mode 100644 stepped-solutions/05/frontend/components/styles/Form.js create mode 100644 stepped-solutions/05/frontend/components/styles/ItemStyles.js create mode 100644 stepped-solutions/05/frontend/components/styles/NavStyles.js create mode 100644 stepped-solutions/05/frontend/components/styles/OrderItemStyles.js create mode 100644 stepped-solutions/05/frontend/components/styles/OrderStyles.js create mode 100644 stepped-solutions/05/frontend/components/styles/PriceTag.js create mode 100644 stepped-solutions/05/frontend/components/styles/SickButton.js create mode 100644 stepped-solutions/05/frontend/components/styles/Supreme.js create mode 100644 stepped-solutions/05/frontend/components/styles/Table.js create mode 100644 stepped-solutions/05/frontend/components/styles/Title.js create mode 100644 stepped-solutions/05/frontend/pages/.gitkeep create mode 100644 stepped-solutions/05/frontend/pages/_app.js create mode 100644 stepped-solutions/05/frontend/pages/index.js create mode 100644 stepped-solutions/05/frontend/pages/sell.js diff --git a/finished-application/backend/package.json b/finished-application/backend/package.json index abe715a75..2b4531081 100644 --- a/finished-application/backend/package.json +++ b/finished-application/backend/package.json @@ -4,7 +4,7 @@ "start": "nodemon -e js,graphql -x node src/index.js", "debug": "nodemon -e js,graphql -x node --inspect src/index.js", "test": "jest", - "playground": "graphql playground", + "playground": "graphql playground --dotenv variables.env", "deploy": "prisma deploy --env-file variables.env", "dev": "npm-run-all --parallel debug playground" }, diff --git a/stepped-solutions/05/frontend/components/Header.js b/stepped-solutions/05/frontend/components/Header.js new file mode 100644 index 000000000..51de94c0a --- /dev/null +++ b/stepped-solutions/05/frontend/components/Header.js @@ -0,0 +1,16 @@ +import Nav from './Nav'; + +const Header = () => ( +
+
+ Sick Fits +
+
+

Search

+
+
Cart
+
+); + +export default Header; diff --git a/stepped-solutions/05/frontend/components/Meta.js b/stepped-solutions/05/frontend/components/Meta.js new file mode 100644 index 000000000..2b98f9298 --- /dev/null +++ b/stepped-solutions/05/frontend/components/Meta.js @@ -0,0 +1,13 @@ +import Head from 'next/head'; + +const Meta = () => ( + + + + + + Sick Fits! + +); + +export default Meta; diff --git a/stepped-solutions/05/frontend/components/Nav.js b/stepped-solutions/05/frontend/components/Nav.js new file mode 100644 index 000000000..0bd20b7bd --- /dev/null +++ b/stepped-solutions/05/frontend/components/Nav.js @@ -0,0 +1,14 @@ +import Link from 'next/link'; + +const Nav = () => ( +
+ + Sell! + + + Home! + +
+); + +export default Nav; diff --git a/stepped-solutions/05/frontend/components/Page.js b/stepped-solutions/05/frontend/components/Page.js new file mode 100644 index 000000000..96fb9f5b7 --- /dev/null +++ b/stepped-solutions/05/frontend/components/Page.js @@ -0,0 +1,17 @@ +import React, { Component } from 'react'; +import Header from '../components/Header'; +import Meta from '../components/Meta'; + +class Page extends Component { + render() { + return ( +
+ +
+ {this.props.children} +
+ ); + } +} + +export default Page; diff --git a/stepped-solutions/05/frontend/components/styles/CartStyles.js b/stepped-solutions/05/frontend/components/styles/CartStyles.js new file mode 100644 index 000000000..d5ee93af7 --- /dev/null +++ b/stepped-solutions/05/frontend/components/styles/CartStyles.js @@ -0,0 +1,47 @@ +import styled from 'styled-components'; + +const CartStyles = styled.div` + padding: 20px; + position: relative; + background: white; + position: fixed; + height: 100%; + top: 0; + right: 0; + width: 40%; + min-width: 500px; + bottom: 0; + transform: translateX(100%); + transition: all 0.3s; + box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2); + z-index: 5; + display: grid; + grid-template-rows: auto 1fr auto; + ${props => props.open && `transform: translateX(0);`}; + header { + border-bottom: 5px solid ${props => props.theme.black}; + margin-bottom: 2rem; + padding-bottom: 2rem; + } + footer { + border-top: 10px double ${props => props.theme.black}; + margin-top: 2rem; + padding-top: 2rem; + display: grid; + grid-template-columns: auto auto; + align-items: center; + font-size: 3rem; + font-weight: 900; + p { + margin: 0; + } + } + ul { + margin: 0; + padding: 0; + list-style: none; + overflow: scroll; + } +`; + +export default CartStyles; diff --git a/stepped-solutions/05/frontend/components/styles/CloseButton.js b/stepped-solutions/05/frontend/components/styles/CloseButton.js new file mode 100644 index 000000000..69fd55c54 --- /dev/null +++ b/stepped-solutions/05/frontend/components/styles/CloseButton.js @@ -0,0 +1,13 @@ +import styled from 'styled-components'; + +const CloseButton = styled.button` + background: black; + color: white; + font-size: 3rem; + border: 0; + position: absolute; + z-index: 2; + right: 0; +`; + +export default CloseButton; diff --git a/stepped-solutions/05/frontend/components/styles/Form.js b/stepped-solutions/05/frontend/components/styles/Form.js new file mode 100644 index 000000000..5717130f1 --- /dev/null +++ b/stepped-solutions/05/frontend/components/styles/Form.js @@ -0,0 +1,71 @@ +import styled, { keyframes } from 'styled-components'; + +const loading = keyframes` + from { + background-position: 0 0; + /* rotate: 0; */ + } + + to { + background-position: 100% 100%; + /* rotate: 360deg; */ + } +`; + +const Form = styled.form` + box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.05); + background: rgba(0, 0, 0, 0.02); + border: 5px solid white; + padding: 20px; + font-size: 1.5rem; + line-height: 1.5; + font-weight: 600; + label { + display: block; + margin-bottom: 1rem; + } + input, + textarea, + select { + width: 100%; + padding: 0.5rem; + font-size: 1rem; + border: 1px solid black; + &:focus { + outline: 0; + border-color: ${props => props.theme.red}; + } + } + button, + input[type='submit'] { + width: auto; + background: red; + color: white; + border: 0; + font-size: 2rem; + font-weight: 600; + padding: 0.5rem 1.2rem; + } + fieldset { + border: 0; + padding: 0; + + &[disabled] { + opacity: 0.5; + } + &::before { + height: 10px; + content: ''; + display: block; + background-image: linear-gradient(to right, #ff3019 0%, #e2b04a 50%, #ff3019 100%); + } + &[aria-busy='true']::before { + background-size: 50% auto; + animation: ${loading} 0.5s linear infinite; + } + } +`; + +Form.displayName = 'Form'; + +export default Form; diff --git a/stepped-solutions/05/frontend/components/styles/ItemStyles.js b/stepped-solutions/05/frontend/components/styles/ItemStyles.js new file mode 100644 index 000000000..b117d5fae --- /dev/null +++ b/stepped-solutions/05/frontend/components/styles/ItemStyles.js @@ -0,0 +1,39 @@ +import styled from 'styled-components'; + +const Item = styled.div` + background: white; + border: 1px solid ${props => props.theme.offWhite}; + box-shadow: ${props => props.theme.bs}; + position: relative; + display: flex; + flex-direction: column; + img { + width: 100%; + height: 400px; + object-fit: cover; + } + p { + font-size: 12px; + line-height: 2; + font-weight: 300; + flex-grow: 1; + padding: 0 3rem; + font-size: 1.5rem; + } + .buttonList { + display: grid; + width: 100%; + border-top: 1px solid ${props => props.theme.lightgrey}; + grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); + grid-gap: 1px; + background: ${props => props.theme.lightgrey}; + & > * { + background: white; + border: 0; + font-size: 1rem; + padding: 1rem; + } + } +`; + +export default Item; diff --git a/stepped-solutions/05/frontend/components/styles/NavStyles.js b/stepped-solutions/05/frontend/components/styles/NavStyles.js new file mode 100644 index 000000000..41523df00 --- /dev/null +++ b/stepped-solutions/05/frontend/components/styles/NavStyles.js @@ -0,0 +1,64 @@ +import styled from 'styled-components'; + +const NavStyles = styled.ul` + margin: 0; + padding: 0; + display: flex; + justify-self: end; + font-size: 2rem; + a, + button { + padding: 1rem 3rem; + display: flex; + align-items: center; + position: relative; + text-transform: uppercase; + font-weight: 900; + font-size: 1em; + background: none; + border: 0; + cursor: pointer; + @media (max-width: 700px) { + font-size: 10px; + padding: 0 10px; + } + &:before { + content: ''; + width: 2px; + background: ${props => props.theme.lightgrey}; + height: 100%; + left: 0; + position: absolute; + transform: skew(-20deg); + top: 0; + bottom: 0; + } + &:after { + height: 2px; + background: red; + content: ''; + width: 0; + position: absolute; + transform: translateX(-50%); + transition: width 0.4s; + transition-timing-function: cubic-bezier(1, -0.65, 0, 2.31); + left: 50%; + margin-top: 2rem; + } + &:hover, + &:focus { + outline: none; + &:after { + width: calc(100% - 60px); + } + } + } + @media (max-width: 1300px) { + border-top: 1px solid ${props => props.theme.lightgrey}; + width: 100%; + justify-content: center; + font-size: 1.5rem; + } +`; + +export default NavStyles; diff --git a/stepped-solutions/05/frontend/components/styles/OrderItemStyles.js b/stepped-solutions/05/frontend/components/styles/OrderItemStyles.js new file mode 100644 index 000000000..292c75de3 --- /dev/null +++ b/stepped-solutions/05/frontend/components/styles/OrderItemStyles.js @@ -0,0 +1,44 @@ +import styled from 'styled-components'; + +const OrderItemStyles = styled.li` + box-shadow: ${props => props.theme.bs}; + list-style: none; + padding: 2rem; + border: 1px solid ${props => props.theme.offWhite}; + h2 { + border-bottom: 2px solid red; + margin-top: 0; + margin-bottom: 2rem; + padding-bottom: 2rem; + } + + .images { + display: grid; + grid-gap: 10px; + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + margin-top: 1rem; + img { + height: 200px; + object-fit: cover; + width: 100%; + } + } + .order-meta { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(20px, 1fr)); + display: grid; + grid-gap: 1rem; + text-align: center; + & > * { + margin: 0; + background: rgba(0, 0, 0, 0.03); + padding: 1rem 0; + } + strong { + display: block; + margin-bottom: 1rem; + } + } +`; + +export default OrderItemStyles; diff --git a/stepped-solutions/05/frontend/components/styles/OrderStyles.js b/stepped-solutions/05/frontend/components/styles/OrderStyles.js new file mode 100644 index 000000000..4a2d80493 --- /dev/null +++ b/stepped-solutions/05/frontend/components/styles/OrderStyles.js @@ -0,0 +1,38 @@ +import styled from 'styled-components'; + +const OrderStyles = styled.div` + max-width: 1000px; + margin: 0 auto; + border: 1px solid ${props => props.theme.offWhite}; + box-shadow: ${props => props.theme.bs}; + padding: 2rem; + border-top: 10px solid red; + & > p { + display: grid; + grid-template-columns: 1fr 5fr; + margin: 0; + border-bottom: 1px solid ${props => props.theme.offWhite}; + span { + padding: 1rem; + &:first-child { + font-weight: 900; + text-align: right; + } + } + } + .order-item { + border-bottom: 1px solid ${props => props.theme.offWhite}; + display: grid; + grid-template-columns: 300px 1fr; + align-items: center; + grid-gap: 2rem; + margin: 2rem 0; + padding-bottom: 2rem; + img { + width: 100%; + height: 100%; + object-fit: cover; + } + } +`; +export default OrderStyles; diff --git a/stepped-solutions/05/frontend/components/styles/PriceTag.js b/stepped-solutions/05/frontend/components/styles/PriceTag.js new file mode 100644 index 000000000..91166818c --- /dev/null +++ b/stepped-solutions/05/frontend/components/styles/PriceTag.js @@ -0,0 +1,17 @@ +import styled from 'styled-components'; + +const PriceTag = styled.span` + background: ${props => props.theme.red}; + transform: rotate(3deg); + color: white; + font-weight: 600; + padding: 5px; + line-height: 1; + font-size: 3rem; + display: inline-block; + position: absolute; + top: -3px; + right: -3px; +`; + +export default PriceTag; diff --git a/stepped-solutions/05/frontend/components/styles/SickButton.js b/stepped-solutions/05/frontend/components/styles/SickButton.js new file mode 100644 index 000000000..5b5352ed8 --- /dev/null +++ b/stepped-solutions/05/frontend/components/styles/SickButton.js @@ -0,0 +1,20 @@ +import styled from 'styled-components'; + +const SickButton = styled.button` + background: red; + color: white; + font-weight: 500; + border: 0; + border-radius: 0; + text-transform: uppercase; + font-size: 2rem; + padding: 0.8rem 1.5rem; + transform: skew(-2deg); + display: inline-block; + transition: all 0.5s; + &[disabled] { + opacity: 0.5; + } +`; + +export default SickButton; diff --git a/stepped-solutions/05/frontend/components/styles/Supreme.js b/stepped-solutions/05/frontend/components/styles/Supreme.js new file mode 100644 index 000000000..d946ccdc5 --- /dev/null +++ b/stepped-solutions/05/frontend/components/styles/Supreme.js @@ -0,0 +1,13 @@ +import styled from 'styled-components'; + +const Supreme = styled.h3` + background: ${props => props.theme.red}; + color: white; + display: inline-block; + padding: 4px 5px; + transform: skew(-3deg); + margin: 0; + font-size: 4rem; +`; + +export default Supreme; diff --git a/stepped-solutions/05/frontend/components/styles/Table.js b/stepped-solutions/05/frontend/components/styles/Table.js new file mode 100644 index 000000000..e9d06739b --- /dev/null +++ b/stepped-solutions/05/frontend/components/styles/Table.js @@ -0,0 +1,31 @@ +import styled from 'styled-components'; + +const Table = styled.table` + border-spacing: 0; + width: 100%; + border: 1px solid ${props => props.theme.offWhite}; + thead { + font-size: 10px; + } + td, + th { + border-bottom: 1px solid ${props => props.theme.offWhite}; + border-right: 1px solid ${props => props.theme.offWhite}; + padding: 10px 5px; + position: relative; + &:last-child { + border-right: none; + width: 150px; + button { + width: 100%; + } + } + } + tr { + &:hover { + background: ${props => props.theme.offWhite}; + } + } +`; + +export default Table; diff --git a/stepped-solutions/05/frontend/components/styles/Title.js b/stepped-solutions/05/frontend/components/styles/Title.js new file mode 100644 index 000000000..e1901ec1d --- /dev/null +++ b/stepped-solutions/05/frontend/components/styles/Title.js @@ -0,0 +1,20 @@ +import styled from 'styled-components'; + +const Title = styled.h3` + margin: 0 1rem; + text-align: center; + transform: skew(-5deg) rotate(-1deg); + margin-top: -3rem; + text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1); + a { + background: ${props => props.theme.red}; + display: inline; + line-height: 1.3; + font-size: 4rem; + text-align: center; + color: white; + padding: 0 1rem; + } +`; + +export default Title; diff --git a/stepped-solutions/05/frontend/pages/.gitkeep b/stepped-solutions/05/frontend/pages/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/stepped-solutions/05/frontend/pages/_app.js b/stepped-solutions/05/frontend/pages/_app.js new file mode 100644 index 000000000..98af72695 --- /dev/null +++ b/stepped-solutions/05/frontend/pages/_app.js @@ -0,0 +1,18 @@ +import App, { Container } from 'next/app'; +import Page from '../components/Page'; + +class MyApp extends App { + render() { + const { Component } = this.props; + + return ( + + + + + + ); + } +} + +export default MyApp; diff --git a/stepped-solutions/05/frontend/pages/index.js b/stepped-solutions/05/frontend/pages/index.js new file mode 100644 index 000000000..e433887cf --- /dev/null +++ b/stepped-solutions/05/frontend/pages/index.js @@ -0,0 +1,9 @@ +import Link from 'next/link'; + +const Home = props => ( +
+

Hey!

+
+); + +export default Home; diff --git a/stepped-solutions/05/frontend/pages/sell.js b/stepped-solutions/05/frontend/pages/sell.js new file mode 100644 index 000000000..c0c0e6d74 --- /dev/null +++ b/stepped-solutions/05/frontend/pages/sell.js @@ -0,0 +1,9 @@ +import Link from 'next/link'; + +const Sell = props => ( +
+

Sell!

+
+); + +export default Sell;