Remove useless div and add some responsiveness

This commit is contained in:
Grégoire Delattre 2016-11-23 22:32:16 +01:00
parent 9c98046c5a
commit 819abba77e
3 changed files with 8 additions and 11 deletions

View File

@ -43,9 +43,7 @@ class Main extends React.Component {
<NavBar {...this.props}/>
<Error {...this.props}/>
<div className="container-fluid">
<div className="container">
{React.cloneElement(this.props.children, this.props)}
</div>
{React.cloneElement(this.props.children, this.props)}
</div>
</div>
);

View File

@ -36,7 +36,7 @@ function MoviePoster(props) {
const selected = props.selected ? ' thumbnail-selected' : '';
const imgClass = 'thumbnail' + selected;
return (
<div className="col-xs-12 col-md-3">
<div className="col-xs-12 col-sm-6 col-md-3 col-lg-2">
<a className={imgClass}>
<img
src={props.data.poster_url}
@ -80,8 +80,8 @@ class MovieButtons extends React.Component {
render() {
const imdb_link = 'http://www.imdb.com/title/' + this.props.movie.imdb_id;
return (
<div className="hidden-xs movie-details-buttons btn-toolbar">
<a type="button" className="btn btn-default" onClick={this.handleClick}>
<div className="movie-details-buttons btn-toolbar">
<a type="button" className="btn btn-default btn-sm" onClick={this.handleClick}>
{this.props.fetching ||
<span>
<i className="fa fa-refresh"></i> Refresh
@ -94,11 +94,11 @@ class MovieButtons extends React.Component {
}
</a>
{this.props.movie.polochon_url !== "" &&
<a type="button" className="btn btn-primary" href={this.props.movie.polochon_url}>
<a type="button" className="btn btn-primary btn-sm" href={this.props.movie.polochon_url}>
<i className="fa fa-download"></i> Download
</a>
}
<a type="button" className="btn btn-warning" href="#">
<a type="button" className="btn btn-warning btn-sm" href="#">
<i className="fa fa-external-link"></i> IMDB
</a>
</div>
@ -115,7 +115,7 @@ export default class MovieList extends React.Component {
const index = this.props.movieStore.selectedMovie.index;
const selectedMovie = movies[index];
return (
<div className="row" id="movie-library">
<div className="row" id="container">
<MoviePosters
movies={this.props.movieStore.movies}
selectedMovieIndex={index}

View File

@ -12,7 +12,7 @@ export default class NavBar extends React.Component {
const isLoggedIn = username !== "" ? true : false;
return (
<div>
<Navbar inverse fixedTop collapseOnSelect>
<Navbar fluid inverse fixedTop collapseOnSelect>
<Navbar.Header>
<LinkContainer to="/">
<Navbar.Brand><a href="#">Canapé</a></Navbar.Brand>
@ -53,7 +53,6 @@ export default class NavBar extends React.Component {
</Navbar.Collapse>
</Navbar>
</div>
);
}
}