Skip to content

Commit c9ae76f

Browse files
author
Joe Seifi
committed
new design and finished radium
1 parent 3655895 commit c9ae76f

File tree

23 files changed

+267
-255
lines changed

23 files changed

+267
-255
lines changed

‎01-react-css3/solution/App.js

Lines changed: 22 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component } from 'react'
2-
import { FoodItem, BuyStrip } from './components/index'
2+
import { VideoItem, ShoppingCart } from './components/index'
33
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
44
import { foodListData } from '../../public/API'
55
import './app.css'
@@ -29,44 +29,40 @@ export default class App extends Component {
2929
return (
3030
<div>
3131
<header className="header">
32-
<h1 className="logo"><span>Taco Shack</span></h1>
32+
<h1 className="header_logo"><span>Festival Store</span></h1>
33+
<h2 className="header_title">New in the Festival Store Today</h2>
3334
</header>
34-
<section className="order">
35-
<main className="food">
36-
<figure className="food_header">
37-
<img className="food_header_image" src="../../workshop/img/taco.jpg" />
38-
</figure>
35+
<section className="store">
36+
<main className="store_content">
3937
<ReactCSSTransitionGroup
40-
transitionName="closefoods"
38+
transitionName="closeStoreContent"
4139
transitionEnterTimeout={ 500 }
42-
transitionLeaveTimeout={ 600 }>
40+
transitionLeaveTimeout={ 500 }>
4341
{ !confirmed &&
44-
<div className="food_menu">
45-
<ul className="food_items">
46-
{
47-
foodListData.map( ({ id, name, price, photoPath }) => {
48-
return <FoodItem
49-
key={ id }
50-
name={ name }
51-
price={ price }
52-
photoPath={ photoPath }
53-
updateTotal= { this.updateTotal.bind(this) }
54-
/>
55-
})
56-
}
57-
</ul>
58-
</div>
42+
<ul className="video_items">
43+
{
44+
foodListData.map( ({ id, name, price, photoPath }) => {
45+
return <VideoItem
46+
key={ id }
47+
name={ name }
48+
price={ price }
49+
photoPath={ photoPath }
50+
updateTotal= { this.updateTotal.bind(this) }
51+
/>
52+
})
53+
}
54+
</ul>
5955
}
6056
</ReactCSSTransitionGroup>
6157
</main>
62-
<BuyStrip
58+
<ShoppingCart
6359
totalPrice={ totalPrice }
6460
confirmed={ confirmed }
6561
onBuy={ this.onBuy.bind(this) }
6662
/>
6763
</section>
6864
<footer className="footer">
69-
123 Narrow Road, San Francisco, CA
65+
Festival Store - 123 Lorem ipsum dolor sit amet, consectetur adipiscing elit, San Francisco, CA
7066
</footer>
7167
</div>
7268
)

‎01-react-css3/solution/components/BuyStrip.js renamed to ‎01-react-css3/solution/components/ShoppingCart.js

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React, { Component, PropTypes } from 'react'
22
import numeral from 'numeral'
33
import { ButtonBuyNow } from './index'
4-
import '../../../public/workshop/css/buy-strip.css'
4+
import '../../../public/workshop/css/shopping-cart.css'
55

6-
export class BuyStrip extends Component {
6+
export class ShoppingCart extends Component {
77

88
static propTypes = {
99
totalPrice: PropTypes.number.isRequired,
@@ -17,17 +17,18 @@ export class BuyStrip extends Component {
1717

1818
return confirmed ?
1919
(
20-
<aside className="buy sold">
21-
<div className="buy_title">
20+
<aside className="shopping_cart confirmed">
21+
<div className="cart_title">
2222
<p>Get Ready to eat!</p>
23-
Your order is confirmed. Your card was charged
24-
<span className="buy_total">{ formattedPrice }</span>
23+
<p>Your order is confirmed. Your card was charged
24+
<span className="cart_total"> { formattedPrice }</span>
25+
</p>
2526
</div>
2627
</aside>
2728
) : (
28-
<aside className="buy">
29-
<div className="buy_title">
30-
Total: <span className="buy_total">{ formattedPrice }</span>
29+
<aside className="shopping_cart">
30+
<div className="cart_title">
31+
Total: <span className="cart_total">{ formattedPrice }</span>
3132
</div>
3233
<ButtonBuyNow
3334
onClick={ this.props.onBuy }

‎01-react-css3/solution/components/FoodItem.js renamed to ‎01-react-css3/solution/components/VideoItem.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React, { Component, PropTypes } from 'react'
22
import numeral from 'numeral'
33
import { ButtonAddToCart } from './index'
4-
import '../../../public/workshop/css/food-item.css'
4+
import '../../../public/workshop/css/video-item.css'
55

6-
export class FoodItem extends Component {
6+
export class VideoItem extends Component {
77

88
state = {
99
inCart: false
@@ -26,11 +26,11 @@ export class FoodItem extends Component {
2626
const { id, name, price, photoPath, disabled } = this.props
2727

2828
return (
29-
<li className="food_item">
30-
<figure className="food_item_figure">
31-
<img className="food_item_image" src={ photoPath } />
29+
<li className="video_item">
30+
<figure className="video_item_figure">
31+
<img className="video_item_image" src={ photoPath } />
3232
</figure>
33-
<div className="food_item_name">
33+
<div className="video_item_name">
3434
{ name }
3535
<span className="food_item_price">{ numeral(price).format('$0.00') }</span>
3636
</div>

‎01-react-css3/solution/components/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@ export { Button } from './Button'
33
export { ButtonAddToCart } from './ButtonAddToCart'
44
export { ButtonBuyNow } from './ButtonBuyNow'
55

6-
export { FoodItem } from './FoodItem'
7-
export { BuyStrip } from './BuyStrip'
6+
export { VideoItem } from './VideoItem'
7+
export { ShoppingCart } from './ShoppingCart'

‎01-react-css3/solution/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "react-css3-session-solution",
33
"version": "1.0.0",
4-
"description": "Taco Shack - CSS and Style loader",
4+
"description": "Festival Store - CSS and Style loader",
55
"author": "Joe Seifi",
66
"license": "ISC"
77
}

‎03-radium/solution/App.js

Lines changed: 21 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { Component } from 'react'
22
import { StyleRoot } from 'radium'
3-
import { FoodItem, BuyStrip } from './components/index'
3+
import { VideoItem, ShoppingCart } from './components/index'
44
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
55
import { foodListData } from '../../public/API'
66
import './app.css'
@@ -30,37 +30,33 @@ export default class App extends Component {
3030
return (
3131
<StyleRoot>
3232
<header className="header">
33-
<h1 className="logo"><span>Taco Shack</span></h1>
33+
<h1 className="header_logo"><span>Festival Store</span></h1>
34+
<h2 className="header_title">New in the Festival Store Today</h2>
3435
</header>
35-
<section className="order">
36-
<main className="food">
37-
<figure className="food_header">
38-
<img className="food_header_image" src="../../workshop/img/taco.jpg" />
39-
</figure>
36+
<section className="store">
37+
<main className="store_content">
4038
<ReactCSSTransitionGroup
41-
transitionName="closefoods"
39+
transitionName="closeStoreContent"
4240
transitionEnterTimeout={ 500 }
43-
transitionLeaveTimeout={ 600 }>
41+
transitionLeaveTimeout={ 500 }>
4442
{ !confirmed &&
45-
<div className="food_menu">
46-
<ul className="food_items">
47-
{
48-
foodListData.map( ({ id, name, price, photoPath }) => {
49-
return <FoodItem
50-
key={ id }
51-
name={ name }
52-
price={ price }
53-
photoPath={ photoPath }
54-
updateTotal= { this.updateTotal.bind(this) }
55-
/>
56-
})
57-
}
58-
</ul>
59-
</div>
43+
<ul className="video_items">
44+
{
45+
foodListData.map( ({ id, name, price, photoPath }) => {
46+
return <VideoItem
47+
key={ id }
48+
name={ name }
49+
price={ price }
50+
photoPath={ photoPath }
51+
updateTotal= { this.updateTotal.bind(this) }
52+
/>
53+
})
54+
}
55+
</ul>
6056
}
6157
</ReactCSSTransitionGroup>
6258
</main>
63-
<BuyStrip
59+
<ShoppingCart
6460
totalPrice={ totalPrice }
6561
confirmed={ confirmed }
6662
onBuy={ this.onBuy.bind(this) }

‎03-radium/solution/components/Button.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ const buttonStyles = {
1111
border: '0',
1212
cursor: 'pointer',
1313
color: '#fff',
14-
backgroundColor: '#ec4800',
14+
backgroundColor: '#07314d',
1515
userSelect: 'none',
1616
transition: 'all 120ms',
1717
':hover': {
18-
backgroundColor: '#f98d00'
18+
backgroundColor: '#336086'
1919
},
2020
depressed: {
2121
color: '#848484',

‎03-radium/solution/components/ButtonBuyNow.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,11 @@ import Radium from 'radium'
44

55
const customStyles = {
66
btn: {
7-
backgroundColor: '#fff',
8-
color: '#000',
7+
backgroundColor: '#ec4800',
98
boxShadow: '1px -1px 2px rgba(0, 0, 0, 0.2)',
109
width: '110px',
1110
':hover': {
12-
backgroundColor: '#000',
13-
color: '#fff'
11+
backgroundColor: '#f98d00',
1412
},
1513
depressed: {
1614
boxShadow: '1px -1px 2px rgba(0, 0, 0, 0)'

‎03-radium/solution/components/BuyStrip.js renamed to ‎03-radium/solution/components/ShoppingCart.js

Lines changed: 23 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import numeral from 'numeral'
44
import { ButtonBuyNow } from './index'
55

66
const styles = {
7-
buy: {
7+
shoppingCart: {
88
display: 'flex',
99
alignItems: 'center',
1010
height: '60px',
@@ -13,55 +13,51 @@ const styles = {
1313
bottom: '0',
1414
padding: '22px',
1515
boxSizing: 'border-box',
16-
backgroundColor: '#EA491C',
16+
backgroundColor: '#07314d',
1717
color: '#fff',
18-
transition: 'height 300ms ease 60ms',
18+
transition: 'all 350ms ease 250ms',
1919
'@media (min-width: 608px)': {
2020
height: '80px',
2121
position: 'inherit',
2222
bottom: 'inherit',
23-
justifyContent: 'center',
24-
transition: 'height 300ms ease 260ms',
23+
justifyContent: 'center'
2524
},
2625

27-
buyTitle: {
26+
cartTitle: {
2827
display: 'flex',
2928
flexGrow: '1',
3029
fontWeight: 'bold',
30+
lineHeight: '2',
3131
'@media (min-width: 608px)': {
3232
flexGrow: '0'
3333
}
3434
},
35-
buyTotal: {
35+
cartTotal: {
3636
paddingLeft: '10px',
3737
paddingRight: '10px',
3838
minWidth: '80px',
3939
fontWeight: 'normal'
4040
},
4141

42-
sold: {
43-
height: '200px',
42+
confirmed: {
43+
height: '350px',
4444
'@media (min-width: 608px)': {
45-
height: '200px',
45+
height: '350px'
4646
},
47-
buyTitle: {
47+
cartTitle: {
4848
fontWeight: 'normal',
4949
display: 'block',
50-
lineHeight: '1.2',
51-
textAlign: 'center',
52-
'@media (min-width: 608px)': {
53-
lineHeight: '2'
54-
}
50+
textAlign: 'center'
5551
},
56-
buyTotal: {
57-
paddingLeft: '0',
52+
cartTotal: {
53+
padding: '0',
5854
minWidth: 'auto'
5955
}
6056
}
6157
}
6258
}
6359

64-
@Radium export class BuyStrip extends Component {
60+
@Radium export class ShoppingCart extends Component {
6561

6662
static propTypes = {
6763
totalPrice: PropTypes.number.isRequired,
@@ -75,17 +71,18 @@ const styles = {
7571

7672
return confirmed ?
7773
(
78-
<aside style={ [ styles.buy, styles.buy.sold ] }>
79-
<div style={ [ styles.buy.sold.buyTitle ] }>
74+
<aside style={ [ styles.shoppingCart, styles.shoppingCart.confirmed ] }>
75+
<div style={ [ styles.shoppingCart.cartTitle, styles.shoppingCart.confirmed.cartTitle ] }>
8076
<p>Get Ready to eat!</p>
81-
Your order is confirmed. Your card was charged
82-
<span style={ [ styles.buy.sold.buyTotal ] }>{ formattedPrice }</span>
77+
<p>Your order is confirmed. Your card was charged
78+
<span style={ [ styles.shoppingCart.cartTotal, styles.shoppingCart.confirmed.cartTotal ] }> { formattedPrice }</span>
79+
</p>
8380
</div>
8481
</aside>
8582
) : (
86-
<aside style={ [ styles.buy ] }>
87-
<div style={ [ styles.buy.buyTitle ] }>
88-
Total: <span style={ [ styles.buy.buyTotal ] }>{ formattedPrice }</span>
83+
<aside style={ [ styles.shoppingCart ] }>
84+
<div style={ [ styles.shoppingCart.cartTitle ] }>
85+
Total: <span style={ [ styles.shoppingCart.cartTotal ] }>{ formattedPrice }</span>
8986
</div>
9087
<ButtonBuyNow
9188
onClick={ this.props.onBuy }

0 commit comments

Comments
 (0)