From e436ece06c293ee4a6c650c887274e1fe7b24f3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= <gregoire.delattre@gmail.com>
Date: Thu, 20 Jun 2019 16:52:57 +0200
Subject: [PATCH] Update the poster images css

---
 frontend/js/components/list/poster.js  |  2 +-
 frontend/js/components/list/posters.js |  4 ++--
 frontend/scss/app.scss                 | 15 ++++++++-------
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/frontend/js/components/list/poster.js b/frontend/js/components/list/poster.js
index 4edc29f..d7178d0 100644
--- a/frontend/js/components/list/poster.js
+++ b/frontend/js/components/list/poster.js
@@ -9,7 +9,7 @@ const Poster = (props) => {
       src={props.data.get("poster_url")}
       onClick={props.onClick}
       onDoubleClick={props.onDoubleClick}
-      className={`my-1 m-md-2 img-thumbnail ${className}`}
+      className={`my-1 m-md-2 img-thumbnail object-fit-cover ${className}`}
     />
   );
 }
diff --git a/frontend/js/components/list/posters.js b/frontend/js/components/list/posters.js
index 1ae1a35..4e6fd11 100644
--- a/frontend/js/components/list/posters.js
+++ b/frontend/js/components/list/posters.js
@@ -39,7 +39,7 @@ const ListPosters = (props) => {
   }
 
   return (
-    <div className="col px-1">
+    <div className="col-4 col-md-8 px-1">
       {displayFilter &&
         <ListFilter
           updateFilter={props.updateFilter}
@@ -112,7 +112,7 @@ const Posters = (props) => {
 
   return (
     <InfiniteScroll
-      className="poster-list d-block flex-row flex-wrap justify-content-around"
+      className="poster-list d-flex flex-column flex-sm-row flex-sm-wrap justify-content-around"
       dataLength={size}
       next={loadMore}
       hasMore={hasMore()}
diff --git a/frontend/scss/app.scss b/frontend/scss/app.scss
index d097c4a..12e21d1 100644
--- a/frontend/scss/app.scss
+++ b/frontend/scss/app.scss
@@ -59,12 +59,13 @@ div.show.dropdown.nav-item > div {
 }
 
 .poster-list {
-  img {
-      max-height: 20rem;
-      object-fit: cover;
-      max-width: 100%;
-      flex-basis: content;
-  }
+    img {
+        display: block;
+        height: auto;
+        width: 100%;
+        max-width:12rem;
+        max-height:18rem;
+    }
 }
 
 .list-details {
@@ -91,7 +92,7 @@ div.show.dropdown.nav-item > div {
 }
 
 .show-thumbnail {
-    max-height: 300px;
+    max-height: 30rem;
 }
 
 div.sweet-alert > h2 {