Renamed movieObject to searchObject, same with css.

This commit is contained in:
2017-12-02 12:05:17 +01:00
parent 187ac6317e
commit e55067025e
3 changed files with 71 additions and 125 deletions

View File

@@ -3,7 +3,7 @@ import React from 'react';
import Notifications, {notify} from 'react-notify-toast';
// StyleComponents
import searchResultCSS from './styles/searchResult.jsx';
import searchObjectCSS from './styles/searchObject.jsx';
import buttonsCSS from './styles/buttons.jsx';
var MediaQuery = require('react-responsive');
@@ -85,27 +85,27 @@ class MovieObject {
<div key={element_key}>
<Notifications />
<div style={searchResultCSS.container} key={this.id}>
<div style={searchObjectCSS.container} key={this.id}>
<MediaQuery minWidth={600}>
<div style={searchResultCSS.posterContainer}>
<img style={searchResultCSS.posterImage} id='poster' src={posterPath}></img>
<div style={searchObjectCSS.posterContainer}>
<img style={searchObjectCSS.posterImage} id='poster' src={posterPath}></img>
</div>
<span style={searchResultCSS.title_large}>{this.title}</span>
<span style={searchObjectCSS.title_large}>{this.title}</span>
<br></br>
<span style={searchResultCSS.stats_large}>Released: { this.year } | Rating: {this.rating}</span>
<span style={searchObjectCSS.stats_large}>Released: { this.year } | Rating: {this.rating}</span>
<br></br>
<span style={searchResultCSS.summary}>{this.summary}</span>
<span style={searchObjectCSS.summary}>{this.summary}</span>
<br></br>
</MediaQuery>
<MediaQuery maxWidth={600}>
<img src={ backgroundPath } style={searchResultCSS.backgroundImage}></img>
<span style={searchResultCSS.title_small}>{this.title}</span>
<img src={ backgroundPath } style={searchObjectCSS.backgroundImage}></img>
<span style={searchObjectCSS.title_small}>{this.title}</span>
<br></br>
<span style={searchResultCSS.stats_small}>Released: {this.year} | Rating: {this.rating}</span>
<span style={searchObjectCSS.stats_small}>Released: {this.year} | Rating: {this.rating}</span>
</MediaQuery>
<div style={searchResultCSS.buttons}>
<div style={searchObjectCSS.buttons}>
{foundInPlex}
<a href={themoviedbLink}>
@@ -125,8 +125,8 @@ class MovieObject {
<br />
</MediaQuery>
<div style={searchResultCSS.dividerRow}>
<div style={searchResultCSS.itemDivider}></div>
<div style={searchObjectCSS.dividerRow}>
<div style={searchObjectCSS.itemDivider}></div>
</div>
</div>
)

View File

@@ -1,112 +0,0 @@
export default {
resultItem: {
maxWidth: '95%',
margin: '0 auto',
minHeight: '230px'
},
movie_content: {
marginLeft: '15px'
},
resultTitleLarge: {
color: 'black',
fontSize: '2em',
},
resultTitleSmall: {
color: 'black',
fontSize: '22px',
},
yearRatingLarge: {
fontSize: '0.8em'
},
resultPoster: {
float: 'left',
zIndex: '3',
position: 'relative',
marginRight: '30px'
},
background: {
width: '100%'
},
yearRatingSmall: {
marginTop: '5px',
fontSize: '0.8em'
},
resultPosterImg: {
border: '2px none',
borderRadius: '2px',
width: '150px'
},
cornerRibbon: {
position: 'absolute',
width: '450px',
},
summary: {
fontSize: '15px',
},
buttons: {
paddingTop: '20px'
},
requestButton: {
color: '#e9a131',
marginRight: '10px',
backgroundColor: 'white',
border: '#e9a131 2px solid',
borderColor: '#e9a131',
borderRadius: '4px',
textAlign: 'center',
padding: '10px',
minWidth: '100px',
float: 'left',
fontSize: '13px',
fontWeight: '800',
cursor: 'pointer'
},
requestButton_hover: {
backgroundColor: '#e9a131',
color: 'white',
},
tmdbButton: {
color: '#00d17c',
marginRight: '10px',
backgroundColor: 'white',
border: '#00d17c 2px solid',
borderRadius: '4px',
textAlign: 'center',
padding: '10px',
minWidth: '100px',
float: 'left',
fontSize: '13px',
fontWeight: '800',
cursor: 'pointer'
},
tmdbButton_hover: {
backgroundColor: '#00d17c',
color: 'white',
},
row: {
width: '100%'
},
itemDivider: {
width: '90%',
borderBottom: '1px solid grey',
margin: '2rem auto'
}
}

View File

@@ -0,0 +1,58 @@
export default {
container: {
maxWidth: '95%',
margin: '0 auto',
minHeight: '230px'
},
title_large: {
color: 'black',
fontSize: '2em',
},
title_small: {
color: 'black',
fontSize: '22px',
},
stats_large: {
fontSize: '0.8em'
},
stats_small: {
marginTop: '5px',
fontSize: '0.8em'
},
posterContainer: {
float: 'left',
zIndex: '3',
position: 'relative',
marginRight: '30px'
},
posterImage: {
border: '2px none',
borderRadius: '2px',
width: '150px'
},
backgroundImage: {
width: '100%'
},
summary: {
fontSize: '15px',
},
dividerRow: {
width: '100%'
},
itemDivider: {
width: '90%',
borderBottom: '1px solid grey',
margin: '2rem auto'
}
}