Skip to content

Commit bf9b249

Browse files
author
Joe Seifi
committed
adding video meta
1 parent eb505a7 commit bf9b249

File tree

14 files changed

+113
-58
lines changed

14 files changed

+113
-58
lines changed

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export default class App extends Component {
3030
<div>
3131
<header className="header">
3232
<h1 className="header_logo"><span>Festival Store</span></h1>
33-
<h2 className="header_title">New in the Festival Store Today</h2>
33+
<h2 className="header_title">New Videos This Week</h2>
3434
</header>
3535
<section className="store">
3636
<main className="store_content">
@@ -41,12 +41,15 @@ export default class App extends Component {
4141
{ !confirmed &&
4242
<ul className="video_items">
4343
{
44-
videoListData.map( ({ id, name, price, photoPath }) => {
44+
videoListData.map( ({ id, name, price, photoPath, length, filesize, format }) => {
4545
return <VideoItem
4646
key={ id }
4747
name={ name }
4848
price={ price }
4949
photoPath={ photoPath }
50+
length={ length }
51+
filesize={ filesize }
52+
format={ format }
5053
updateTotal= { this.updateTotal.bind(this) }
5154
/>
5255
})

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ export class VideoItem extends Component {
1414
name: PropTypes.string,
1515
price: PropTypes.number,
1616
photoPath: PropTypes.string,
17+
length: PropTypes.string,
18+
filesize: PropTypes.string,
19+
format: PropTypes.string,
1720
disabled: PropTypes.bool,
1821
updateTotal: PropTypes.func.isRequired
1922
}
@@ -23,16 +26,17 @@ export class VideoItem extends Component {
2326
}
2427

2528
render () {
26-
const { id, name, price, photoPath, disabled } = this.props
29+
const { id, name, price, photoPath, length, filesize, format, disabled } = this.props
2730

2831
return (
2932
<li className="video_item">
3033
<figure className="video_item_figure">
3134
<img className="video_item_image" src={ photoPath } />
3235
</figure>
33-
<div className="video_item_name">
36+
<div className="video_item_details">
3437
{ name }
3538
<span className="video_item_price">{ numeral(price).format('$0.00') }</span>
39+
<span className="video_item_meta">{ length }<br />{ filesize } { format }</span>
3640
</div>
3741
<ButtonAddToCart
3842
onClick={ this.addToCart.bind(this) }

‎03-radium/solution/App.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default class App extends Component {
3131
<StyleRoot>
3232
<header className="header">
3333
<h1 className="header_logo"><span>Festival Store</span></h1>
34-
<h2 className="header_title">New in the Festival Store Today</h2>
34+
<h2 className="header_title">New Videos This Week</h2>
3535
</header>
3636
<section className="store">
3737
<main className="store_content">
@@ -42,12 +42,15 @@ export default class App extends Component {
4242
{ !confirmed &&
4343
<ul className="video_items">
4444
{
45-
videoListData.map( ({ id, name, price, photoPath }) => {
45+
videoListData.map( ({ id, name, price, photoPath, length, filesize, format }) => {
4646
return <VideoItem
4747
key={ id }
4848
name={ name }
4949
price={ price }
5050
photoPath={ photoPath }
51+
length={ length }
52+
filesize={ filesize }
53+
format={ format }
5154
updateTotal= { this.updateTotal.bind(this) }
5255
/>
5356
})
@@ -63,7 +66,7 @@ export default class App extends Component {
6366
/>
6467
</section>
6568
<footer className="footer">
66-
123 Narrow Road, San Francisco, CA
69+
Festival Store - 123 Lorem ipsum dolor sit amet, consectetur adipiscing elit, San Francisco, CA
6770
</footer>
6871
</StyleRoot>
6972
)

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,11 @@ const buttonStyles = {
1717
':hover': {
1818
backgroundColor: '#336086'
1919
},
20+
withIcon: {
21+
display: 'flex',
22+
alignItems: 'center',
23+
justifyContent: 'center'
24+
},
2025
depressed: {
2126
color: '#848484',
2227
backgroundColor: '#bebebe',
@@ -70,6 +75,7 @@ const Button = ({
7075
<button
7176
style={ [
7277
buttonStyles.btn,
78+
icon && buttonStyles.btn.withIcon,
7379
depressed && buttonStyles.btn.depressed,
7480
disabled && buttonStyles.btn.disabled,
7581
customStyles.btn && customStyles.btn,

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const styles = {
1616
backgroundColor: '#07314d',
1717
color: '#fff',
1818
transition: 'all 350ms ease 250ms',
19-
'@media (min-width: 608px)': {
19+
'@media (min-width: 700px)': {
2020
height: '80px',
2121
position: 'inherit',
2222
bottom: 'inherit',
@@ -28,7 +28,7 @@ const styles = {
2828
flexGrow: '1',
2929
fontWeight: 'bold',
3030
lineHeight: '2',
31-
'@media (min-width: 608px)': {
31+
'@media (min-width: 700px)': {
3232
flexGrow: '0'
3333
}
3434
},
@@ -42,13 +42,13 @@ const styles = {
4242
confirmed: {
4343
height: '350px',
4444
backgroundColor: 'rgba(71, 59, 180, 0.20)',
45-
'@media (min-width: 608px)': {
45+
'@media (min-width: 700px)': {
4646
height: '350px'
4747
},
4848
cartTitle: {
4949
fontWeight: 'normal',
50-
display: 'block',
51-
textAlign: 'center'
50+
flexDirection: 'column',
51+
alignItems: 'center'
5252
},
5353
cartTotal: {
5454
paddingLeft: '0',

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

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@ import numeral from 'numeral'
44
import { ButtonAddToCart } from './index'
55

66
const styles = {
7-
foodItem: {
7+
videoItem: {
88
backgroundColor: '#fff',
99
borderBottom: '1px solid #E8E8E7',
1010
display: 'flex',
1111
height: '82px',
1212
alignItems: 'center',
1313
boxSizing: 'border-box',
1414
paddingRight: '20px',
15-
'@media (min-width: 608px)': {
15+
'@media (min-width: 700px)': {
1616
border: '0',
1717
height: 'auto',
1818
minWidth: '100px',
@@ -24,12 +24,12 @@ const styles = {
2424
maxWidth: '188px'
2525
}
2626
},
27-
foodItemFigure: {
27+
videoItemFigure: {
2828
height: '82px',
2929
width: '50px',
3030
overflow: 'hidden',
3131
marginRight: '20px',
32-
'@media screen and (min-width: 608px)': {
32+
'@media screen and (min-width: 700px)': {
3333
height: '130px',
3434
width: '100%',
3535
position: 'absolute',
@@ -40,26 +40,26 @@ const styles = {
4040
marginRight: '0'
4141
},
4242
},
43-
foodItemImage: {
43+
videoItemImage: {
4444
height: '100%',
4545
marginLeft: '-50%',
46-
'@media screen and (min-width: 608px)': {
46+
'@media screen and (min-width: 700px)': {
4747
transition: 'transform 300ms ease',
4848
marginLeft: 'initial',
4949
':hover': {
5050
transform: 'scale(1.1)',
5151
}
5252
}
5353
},
54-
foodItemName: {
54+
videoItemDetails: {
5555
flexGrow: '1',
5656
fontWeight: 'bold',
5757
fontSize: '12px',
5858
display: 'flex',
5959
flexDirection: 'column',
6060
justifyContent: 'center',
6161
textAlign: 'left',
62-
'@media screen and (min-width: 608px)': {
62+
'@media screen and (min-width: 700px)': {
6363
display: 'flex',
6464
flexFlow: 'inherit',
6565
marginBottom: '20px',
@@ -70,12 +70,20 @@ const styles = {
7070
},
7171
},
7272
videoItemPrice: {
73-
paddingTop: '6px',
74-
fontWeight: 'normal',
7573
color: '#848484',
76-
'@media screen and (min-width: 608px)': {
74+
paddingTop: '6px',
75+
'@media screen and (min-width: 700px)': {
7776
marginTop: '4px'
7877
}
78+
},
79+
videoItemMeta: {
80+
fontSize: '11px',
81+
fontWeight: 'normal',
82+
color: '#ccc',
83+
paddingTop: '6px',
84+
'@media screen and (min-width: 700px)': {
85+
paddingTop: '10px'
86+
}
7987
}
8088
}
8189

@@ -90,6 +98,9 @@ const styles = {
9098
name: PropTypes.string,
9199
price: PropTypes.number,
92100
photoPath: PropTypes.string,
101+
length: PropTypes.string,
102+
filesize: PropTypes.string,
103+
format: PropTypes.string,
93104
disabled: PropTypes.bool,
94105
updateTotal: PropTypes.func.isRequired
95106
}
@@ -99,16 +110,17 @@ const styles = {
99110
}
100111

101112
render () {
102-
const { id, name, price, photoPath, disabled } = this.props
113+
const { id, name, price, photoPath, length, filesize, format, disabled } = this.props
103114

104115
return (
105-
<li style={ [ styles.foodItem ] }>
106-
<figure style={ [ styles.foodItemFigure ] }>
107-
<img style={ [ styles.foodItemImage ] } src={ photoPath } />
116+
<li style={ [ styles.videoItem ] }>
117+
<figure style={ [ styles.videoItemFigure ] }>
118+
<img style={ [ styles.videoItemImage ] } src={ photoPath } />
108119
</figure>
109-
<div style={ [ styles.foodItemName ] }>
120+
<div style={ [ styles.videoItemDetails ] }>
110121
{ name }
111122
<span style={ [ styles.videoItemPrice ] }>{ numeral(price).format('$0.00') }</span>
123+
<span style={ [ styles.videoItemMeta ] }>{ length }<br />{ filesize } { format }</span>
112124
</div>
113125
<ButtonAddToCart
114126
onClick={ this.addToCart.bind(this) }

‎05-react-css-modules/solution/App.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export default class App extends Component {
3232
<div>
3333
<header className="header">
3434
<h1 className="header_logo"><span>Festival Store</span></h1>
35-
<h2 className="header_title">New in the Festival Store Today</h2>
35+
<h2 className="header_title">New Videos This Week</h2>
3636
</header>
3737
<section className="store">
3838
<main className="store_content">
@@ -43,12 +43,15 @@ export default class App extends Component {
4343
{ !confirmed &&
4444
<ul className="video_items">
4545
{
46-
videoListData.map( ({ id, name, price, photoPath }) => {
46+
videoListData.map( ({ id, name, price, photoPath, length, filesize, format }) => {
4747
return <VideoItem
4848
key={ id }
4949
name={ name }
5050
price={ price }
5151
photoPath={ photoPath }
52+
length={ length }
53+
filesize={ filesize }
54+
format={ format }
5255
updateTotal= { this.updateTotal.bind(this) }
5356
/>
5457
})

‎05-react-css-modules/solution/app.css

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎05-react-css-modules/solution/components/VideoItem.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ export class VideoItem extends Component {
1919
name: PropTypes.string,
2020
price: PropTypes.number,
2121
photoPath: PropTypes.string,
22+
length: PropTypes.string,
23+
filesize: PropTypes.string,
24+
format: PropTypes.string,
2225
disabled: PropTypes.bool,
2326
updateTotal: PropTypes.func.isRequired
2427
}
@@ -28,16 +31,17 @@ export class VideoItem extends Component {
2831
}
2932

3033
render () {
31-
const { id, name, price, photoPath, disabled } = this.props
34+
const { id, name, price, photoPath, length, filesize, format, disabled } = this.props
3235

3336
return (
3437
<li styleName="video_item">
3538
<figure styleName="video_item_figure">
3639
<img styleName="video_item_image" src={ photoPath } />
3740
</figure>
38-
<div styleName="video_item_name">
41+
<div styleName="video_item_details">
3942
{ name }
4043
<span styleName="video_item_price">{ numeral(price).format('$0.00') }</span>
44+
<span styleName="video_item_meta">{ length }<br />{ filesize } { format }</span>
4145
</div>
4246
<ButtonAddToCart
4347
onClick={ this.addToCart.bind(this) }

‎public/API.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,36 @@ const videoListData = [
33
id: 1231,
44
name: 'The Global Deads',
55
price: 9.99,
6+
length: '55 min',
7+
filesize: '1.48 GB',
8+
format: '1080p HD',
69
photoPath: '/workshop/img/show-1.jpg'
710
},
811
{
912
id: 1233,
1013
name: 'Sep. of Concerns',
1114
price: 14.95,
15+
length: '1 hr 29 min',
16+
filesize: '737 MB',
17+
format: 'SD',
1218
photoPath: '/workshop/img/show-2.jpg'
1319
},
1420
{
1521
id: 1234,
1622
name: 'nln STYLES',
1723
price: 24.99,
24+
length: '3 hr 12 min',
25+
filesize: '8.52 GB',
26+
format: '1080p HD',
1827
photoPath: '/workshop/img/show-3.jpg'
1928
},
2029
{
2130
id: 1232,
2231
name: 'Cascade Flex',
2332
price: 19.95,
33+
length: '2 hr 37 min',
34+
filesize: '3.64 GB',
35+
format: '1080p HD',
2436
photoPath: '/workshop/img/show-4.jpg'
2537
}
2638
]

0 commit comments

Comments
 (0)