ODWRTW/canape
2
2
Fork 0
Code Issues 3 Pull Requests 1 Releases Activity

Remove useless div and add some responsiveness

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/public/js/app.js
View File

@ -43,9 +43,7 @@ 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>
); );

12
src/public/js/components/movies/list.js
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}

3
src/public/js/components/navbar.js
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>
); );
} }
} }