From 819abba77ede26b6cde14ddd1a623800d65a88b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= <gregoire.delattre@gmail.com>
Date: Wed, 23 Nov 2016 22:32:16 +0100
Subject: [PATCH] Remove useless div and add some responsiveness

---
 src/public/js/app.js                    |  4 +---
 src/public/js/components/movies/list.js | 12 ++++++------
 src/public/js/components/navbar.js      |  3 +--
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/public/js/app.js b/src/public/js/app.js
index 32574ef..be8e084 100644
--- a/src/public/js/app.js
+++ b/src/public/js/app.js
@@ -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>
     );
diff --git a/src/public/js/components/movies/list.js b/src/public/js/components/movies/list.js
index 42e7981..afd19f9 100644
--- a/src/public/js/components/movies/list.js
+++ b/src/public/js/components/movies/list.js
@@ -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}
diff --git a/src/public/js/components/navbar.js b/src/public/js/components/navbar.js
index 2c9931c..830fa8d 100644
--- a/src/public/js/components/navbar.js
+++ b/src/public/js/components/navbar.js
@@ -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>
-
     );
   }
 }