Skip to content

Commit d34b191

Browse files
author
Joe Seifi
committed
finished radium solution
1 parent f8f4df1 commit d34b191

File tree

9 files changed

+197
-39
lines changed

9 files changed

+197
-39
lines changed

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { Component } from 'react'
22
import { FoodItem, BuyStrip } from './components/index'
33
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
4-
54
import { foodListData } from '../../public/API'
65
import './app.css'
76

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { Component, PropTypes } from 'react'
2-
import { ButtonBuyNow } from './index'
32
import numeral from 'numeral'
3+
import { ButtonBuyNow } from './index'
44
import '../../../public/workshop/css/buy-strip.css'
55

66
export class BuyStrip extends Component {
@@ -18,11 +18,17 @@ export class BuyStrip extends Component {
1818
return confirmed ?
1919
(
2020
<aside className="buy sold">
21-
<div className="buy_title"><p>Get Ready to eat!</p> Your order is confirmed. Your card was charged <span className="buy_total">{ formattedPrice }</span></div>
21+
<div className="buy_title">
22+
<p>Get Ready to eat!</p>
23+
Your order is confirmed. Your card was charged
24+
<span className="buy_total">{ formattedPrice }</span>
25+
</div>
2226
</aside>
2327
) : (
2428
<aside className="buy">
25-
<div className="buy_title">Total:<span className="buy_total">{ formattedPrice }</span></div>
29+
<div className="buy_title">
30+
Total: <span className="buy_total">{ formattedPrice }</span>
31+
</div>
2632
<ButtonBuyNow
2733
onClick={ this.props.onBuy }
2834
disabled={ totalPrice === 0 }>

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { Component, PropTypes } from 'react'
2-
import { ButtonAddToCart } from './index'
32
import numeral from 'numeral'
3+
import { ButtonAddToCart } from './index'
44
import '../../../public/workshop/css/food-item.css'
55

66
export class FoodItem extends Component {
@@ -27,8 +27,13 @@ export class FoodItem extends Component {
2727

2828
return (
2929
<li className="food_item">
30-
<figure className="food_item_figure"><img className="food_item_image" src={ photoPath } /></figure>
31-
<div className="food_item_name">{ name }<span className="food_item_price">{ numeral(price).format('$0.00') }</span></div>
30+
<figure className="food_item_figure">
31+
<img className="food_item_image" src={ photoPath } />
32+
</figure>
33+
<div className="food_item_name">
34+
{ name }
35+
<span className="food_item_price">{ numeral(price).format('$0.00') }</span>
36+
</div>
3237
<ButtonAddToCart
3338
onClick={ this.addToCart.bind(this) }
3439
disabled={ disabled }

‎03-radium/solution/App.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { Component } from 'react'
2+
import { StyleRoot } from 'radium'
23
import { FoodItem, BuyStrip } from './components/index'
34
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
4-
55
import { foodListData } from '../../public/API'
66
import './app.css'
77

@@ -28,7 +28,7 @@ export default class App extends Component {
2828
const { totalPrice, confirmed } = this.state
2929

3030
return (
31-
<div>
31+
<StyleRoot>
3232
<header className="header">
3333
<h1 className="logo"><span>Taco Shack</span></h1>
3434
</header>
@@ -69,7 +69,7 @@ export default class App extends Component {
6969
<footer className="footer">
7070
123 Narrow Road, San Francisco, CA
7171
</footer>
72-
</div>
72+
</StyleRoot>
7373
)
7474
}
7575
}

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

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,15 @@ const buttonStyles = {
2424
backgroundColor: '#bebebe'
2525
}
2626
},
27+
disabled: {
28+
cursor: 'auto',
29+
pointerEvents: 'none',
30+
color: '#848484',
31+
backgroundColor: '#bebebe',
32+
':hover': {
33+
backgroundColor: '#bebebe'
34+
}
35+
},
2736
icon: {
2837
content: '',
2938
display: 'inline-block',
@@ -47,7 +56,7 @@ const Button = ({
4756
icon,
4857
classNames,
4958
customStyles,
50-
depressed,
59+
depressed,
5160
disabled,
5261
onClick,
5362
children,
@@ -59,7 +68,10 @@ const Button = ({
5968
style={ [
6069
buttonStyles.btn,
6170
depressed && buttonStyles.btn.depressed,
62-
customStyles.btn
71+
disabled && buttonStyles.btn.disabled,
72+
customStyles.btn && customStyles.btn,
73+
depressed && customStyles.btn && customStyles.btn.depressed && customStyles.btn.depressed,
74+
disabled && customStyles.btn &&customStyles.btn.depressed && customStyles.btn.disabled,
6375
] }
6476
className={ classNames }
6577
onClick={ onClick }
@@ -69,7 +81,7 @@ const Button = ({
6981
{
7082
<span style={ [
7183
icon && buttonStyles.btn.icon,
72-
icon && buttonStyles.btn['icon-'+icon],
84+
icon && buttonStyles.btn['icon-' + icon],
7385
depressed && buttonStyles.btn.icon.depressed
7486
] }></span>
7587
}

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { Component, PropTypes } from 'react'
22
import { Button } from './index'
3-
// import '../../../public/workshop/css/button-buy-now.css'
43
import Radium from 'radium'
54

65
const customStyles = {
@@ -15,6 +14,15 @@ const customStyles = {
1514
},
1615
depressed: {
1716
boxShadow: '1px -1px 2px rgba(0, 0, 0, 0)'
17+
},
18+
disabled: {
19+
cursor: 'auto',
20+
pointerEvents: 'none',
21+
color: '#848484',
22+
backgroundColor: '#bebebe',
23+
':hover': {
24+
backgroundColor: '#bebebe'
25+
}
1826
}
1927
}
2028
}

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

Lines changed: 71 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,67 @@
11
import React, { Component, PropTypes } from 'react'
2-
import { ButtonBuyNow } from './index'
2+
import Radium from 'radium'
33
import numeral from 'numeral'
4-
import '../../../public/workshop/css/buy-strip.css'
4+
import { ButtonBuyNow } from './index'
5+
6+
const styles = {
7+
buy: {
8+
display: 'flex',
9+
alignItems: 'center',
10+
height: '60px',
11+
width: '100%',
12+
position: 'sticky',
13+
bottom: '0',
14+
padding: '22px',
15+
boxSizing: 'border-box',
16+
backgroundColor: '#EA491C',
17+
color: '#fff',
18+
transition: 'height 300ms ease 60ms',
19+
'@media (min-width: 608px)': {
20+
height: '80px',
21+
position: 'inherit',
22+
bottom: 'inherit',
23+
justifyContent: 'center',
24+
transition: 'height 300ms ease 260ms',
25+
},
26+
27+
buyTitle: {
28+
display: 'flex',
29+
flexGrow: '1',
30+
fontWeight: 'bold',
31+
'@media (min-width: 608px)': {
32+
flexGrow: '0'
33+
}
34+
},
35+
buyTotal: {
36+
paddingLeft: '10px',
37+
paddingRight: '10px',
38+
minWidth: '80px',
39+
fontWeight: 'normal'
40+
},
41+
42+
sold: {
43+
height: '200px',
44+
'@media (min-width: 608px)': {
45+
height: '200px',
46+
},
47+
buyTitle: {
48+
fontWeight: 'normal',
49+
display: 'block',
50+
lineHeight: '1.2',
51+
textAlign: 'center',
52+
'@media (min-width: 608px)': {
53+
lineHeight: '2'
54+
}
55+
},
56+
buyTotal: {
57+
paddingLeft: '0',
58+
minWidth: 'auto'
59+
}
60+
}
61+
}
62+
}
563

6-
export class BuyStrip extends Component {
64+
@Radium export class BuyStrip extends Component {
765

866
static propTypes = {
967
totalPrice: PropTypes.number.isRequired,
@@ -17,12 +75,18 @@ export class BuyStrip extends Component {
1775

1876
return confirmed ?
1977
(
20-
<aside className="buy sold">
21-
<div className="buy_title"><p>Get Ready to eat!</p> Your order is confirmed. Your card was charged <span className="buy_total">{ formattedPrice }</span></div>
78+
<aside style={ [ styles.buy, styles.buy.sold ] }>
79+
<div style={ [ styles.buy.sold.buyTitle ] }>
80+
<p>Get Ready to eat!</p>
81+
Your order is confirmed. Your card was charged
82+
<span style={ [ styles.buy.sold.buyTotal ] }>{ formattedPrice }</span>
83+
</div>
2284
</aside>
2385
) : (
24-
<aside className="buy">
25-
<div className="buy_title">Total:<span className="buy_total">{ formattedPrice }</span></div>
86+
<aside style={ [ styles.buy ] }>
87+
<div style={ [ styles.buy.buyTitle ] }>
88+
Total: <span style={ [ styles.buy.buyTotal ] }>{ formattedPrice }</span>
89+
</div>
2690
<ButtonBuyNow
2791
onClick={ this.props.onBuy }
2892
disabled={ totalPrice === 0 }>

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

Lines changed: 70 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,68 @@
11
import React, { Component, PropTypes } from 'react'
2-
import { ButtonAddToCart } from './index'
2+
import Radium from 'radium'
33
import numeral from 'numeral'
4-
import '../../../public/workshop/css/food-item.css'
4+
import { ButtonAddToCart } from './index'
5+
6+
const styles = {
7+
foodItem: {
8+
borderBottom: '1px solid rgba(169, 169, 169, 0.29)',
9+
display: 'flex',
10+
height: '82px',
11+
alignItems: 'center',
12+
padding: '22px',
13+
boxSizing: 'border-box',
14+
'@media (min-width: 608px)': {
15+
border: '1px solid rgba(169, 169, 169, 0.29)',
16+
height: 'auto',
17+
minWidth: '100px',
18+
flexFlow: 'column',
19+
width: '23%',
20+
flexShrink: '1',
21+
position: 'relative',
22+
paddingTop: '100px',
23+
maxWidth: '188px',
24+
}
25+
},
26+
foodItemFigure: {
27+
display: 'none',
28+
'@media screen and (min-width: 608px)': {
29+
height: '80px',
30+
width: '100%',
31+
position: 'absolute',
32+
left: '0',
33+
top: '0',
34+
display: 'block',
35+
overflow: 'hidden',
36+
},
37+
},
38+
foodItemImage: {
39+
'@media screen and (min-width: 608px)': {
40+
height: '100%'
41+
}
42+
},
43+
foodItemName: {
44+
flexGrow: '1',
45+
fontWeight: 'bold',
46+
'@media screen and (min-width: 608px)': {
47+
display: 'flex',
48+
flexFlow: 'inherit',
49+
marginBottom: '20px',
50+
alignItems: 'center',
51+
textAlign: 'center',
52+
justifyContent: 'flex-end',
53+
},
54+
},
55+
foodItemPrice: {
56+
paddingLeft: '10px',
57+
fontWeight: 'normal',
58+
color: '#848484',
59+
'@media screen and (min-width: 608px)': {
60+
marginTop: '20px'
61+
}
62+
}
63+
}
564

6-
export class FoodItem extends Component {
65+
@Radium export class FoodItem extends Component {
766

867
state = {
968
inCart: false
@@ -26,9 +85,14 @@ export class FoodItem extends Component {
2685
const { id, name, price, photoPath, disabled } = this.props
2786

2887
return (
29-
<li className="food_item">
30-
<figure className="food_item_figure"><img className="food_item_image" src={ photoPath } /></figure>
31-
<div className="food_item_name">{ name }<span className="food_item_price">{ numeral(price).format('$0.00') }</span></div>
88+
<li style={ [ styles.foodItem ] }>
89+
<figure style={ [ styles.foodItemFigure ] }>
90+
<img style={ [ styles.foodItemImage ] } src={ photoPath } />
91+
</figure>
92+
<div style={ [ styles.foodItemName ] }>
93+
{ name }
94+
<span style={ [ styles.foodItemPrice ] }>{ numeral(price).format('$0.00') }</span>
95+
</div>
3296
<ButtonAddToCart
3397
onClick={ this.addToCart.bind(this) }
3498
disabled={ disabled }

0 commit comments

Comments
 (0)