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

View File

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

View File

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