KevinMidboe/seasonedShows
1
0
Fork 0
Code Issues 20 Pull Requests 2 Packages Projects Releases 8 Wiki Activity

Moved all styling to a separate file in ./style

Browse Source
This commit is contained in:
Kevin
2017-09-03 17:29:51 +02:00
parent 850452db78
commit 6a4e2bc2ab
2 changed files with 93 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
client/app/components/MovieObject.jsx
View File

@@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
// StyleComponents // StyleComponents
import movieStyle from './styles/movieObjectStyle.jsx';
class MovieObject { class MovieObject {
constructor(object) { constructor(object) {
@@ -26,77 +27,6 @@ class MovieObject {
} }
getElement() { getElement() {
// TODO move this to separate files.
var resultItem = {
maxWidth: '95%',
margin: '0 auto',
minHeight: '230px'
}
var movie_content = {
marginLeft: '15px'
}
var resultTitle = {
color: 'black',
fontSize: '2em',
}
var resultPoster = {
float: 'left',
zIndex: '3',
position: 'relative',
marginRight: '30px'
}
var resultPosterImg = {
border: '2px none',
borderRadius: '2px',
width: '150px'
}
var buttons = {
paddingTop: '20px'
}
var requestButton = {
color: '#e9a131',
marginRight: '10px',
background: 'white',
border: '#e9a131 2px solid',
borderRadius: '4px',
textAlign: 'center',
padding: '10px',
minWidth: '100px',
float: 'left',
fontSize: '13px',
fontWeight: '800',
cursor: 'pointer'
}
var tmdbButton = {
color: '#00d17c',
marginRight: '10px',
background: 'white',
border: '#00d17c 2px solid',
borderRadius: '4px',
textAlign: 'center',
padding: '10px',
minWidth: '100px',
float: 'left',
fontSize: '13px',
fontWeight: '800',
cursor: 'pointer'
}
var row = {
width: '100%'
}
var itemDivider = {
width: '90%',
borderBottom: '1px solid grey',
margin: '2rem auto'
}
// TODO set the poster image async by updating the dom after this is returned // TODO set the poster image async by updating the dom after this is returned
if (this.poster == null || this.poster == undefined) { if (this.poster == null || this.poster == undefined) {
var posterPath = 'https://openclipart.org/image/2400px/svg_to_png/211479/Simple-Image-Not-Found-Icon.png' var posterPath = 'https://openclipart.org/image/2400px/svg_to_png/211479/Simple-Image-Not-Found-Icon.png'
@@ -106,10 +36,10 @@ class MovieObject {
var foundInPlex; var foundInPlex;
if (this.matchedInPlex) { if (this.matchedInPlex) {
foundInPlex = <button onClick={() => {this.requestExisting(this)}} foundInPlex = <button onClick={() => {this.requestExisting(this)}}
style={requestButton}><span>Request Anyway</span></button>; style={movieStyle.requestButton}><span>Request Anyway</span></button>;
} else { } else {
foundInPlex = <button onClick={() => {this.requestMovie()}} foundInPlex = <button onClick={() => {this.requestMovie()}}
style={requestButton}><span>&#x0002B; Request</span></button>; style={movieStyle.requestButton}><span>&#x0002B; Request</span></button>;
} }
var themoviedbLink = 'https://www.themoviedb.org/movie/' + this.id var themoviedbLink = 'https://www.themoviedb.org/movie/' + this.id
@@ -117,12 +47,12 @@ class MovieObject {
return ( return (
<div> <div>
<div style={resultItem} key={this.id}> <div style={movieStyle.resultItem} key={this.id}>
<div style={resultPoster}> <div style={movieStyle.resultPoster}>
<img style={resultPosterImg} id='poster' src={posterPath}></img> <img style={movieStyle.resultPosterImg} id='poster' src={posterPath}></img>
</div> </div>
<div> <div>
<span style={resultTitle}>{this.title} ({this.year})</span> <span style={movieStyle.resultTitle}>{this.title} ({this.year})</span>
<br></br> <br></br>
<span>{this.summary}</span> <span>{this.summary}</span>
<br></br> <br></br>
@@ -130,14 +60,16 @@ class MovieObject {
<span className='imdbLogo'> <span className='imdbLogo'>
</span> </span>
<div style={buttons}> <div style={movieStyle.buttons}>
{foundInPlex} {foundInPlex}
<a href={themoviedbLink}><button style={tmdbButton}><span>Info</span></button></a> <a href={themoviedbLink}>
<button style={movieStyle.tmdbButton}><span>Info</span></button>
</a>
</div> </div>
</div> </div>
</div> </div>
<div style={row}> <div style={movieStyle.row}>
<div style={itemDivider}></div> <div style={movieStyle.itemDivider}></div>
</div> </div>
</div>) </div>)

80
client/app/components/styles/movieObjectStyle.jsx Normal file
View File

@@ -0,0 +1,80 @@
export default {
resultItem: {
maxWidth: '95%',
margin: '0 auto',
minHeight: '230px'
},
resultItem: {
maxWidth: '95%',
margin: '0 auto',
minHeight: '230px'
},
movie_content: {
marginLeft: '15px'
},
resultTitle: {
color: 'black',
fontSize: '2em',
},
resultPoster: {
float: 'left',
zIndex: '3',
position: 'relative',
marginRight: '30px'
},
resultPosterImg: {
border: '2px none',
borderRadius: '2px',
width: '150px'
},
buttons: {
paddingTop: '20px'
},
requestButton: {
color: '#e9a131',
marginRight: '10px',
background: 'white',
border: '#e9a131 2px solid',
borderRadius: '4px',
textAlign: 'center',
padding: '10px',
minWidth: '100px',
float: 'left',
fontSize: '13px',
fontWeight: '800',
cursor: 'pointer'
},
tmdbButton: {
color: '#00d17c',
marginRight: '10px',
background: 'white',
border: '#00d17c 2px solid',
borderRadius: '4px',
textAlign: 'center',
padding: '10px',
minWidth: '100px',
float: 'left',
fontSize: '13px',
fontWeight: '800',
cursor: 'pointer'
},
row: {
width: '100%'
},
itemDivider: {
width: '90%',
borderBottom: '1px solid grey',
margin: '2rem auto'
}
}