From a259226273193a1f6636cd7c6d0f28e33b4514d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= <gregoire.delattre@gmail.com>
Date: Tue, 28 May 2019 22:30:36 +0200
Subject: [PATCH] Add the show fanart in the show detail view

---
 frontend/js/components/shows/details.js | 58 ++++++++++++++++---------
 frontend/scss/app.scss                  | 12 +++++
 2 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/frontend/js/components/shows/details.js b/frontend/js/components/shows/details.js
index a43027a..67c011a 100644
--- a/frontend/js/components/shows/details.js
+++ b/frontend/js/components/shows/details.js
@@ -38,20 +38,23 @@ const ShowDetails = (props) => {
   }
 
   return (
-    <div className="row no-gutters">
-      <Header
-        data={props.show}
-        addToWishlist={props.addShowToWishlist}
-        deleteFromWishlist={props.deleteShowFromWishlist}
-      />
-      <SeasonsList
-        data={props.show}
-        addTorrent={props.addTorrent}
-        addToWishlist={props.addShowToWishlist}
-        getEpisodeDetails={props.getEpisodeDetails}
-        refreshSubtitles={props.refreshSubtitles}
-      />
-    </div>
+    <React.Fragment>
+      <Fanart url={props.show.get("fanart_url")} />
+      <div className="row no-gutters">
+        <Header
+          data={props.show}
+          addToWishlist={props.addShowToWishlist}
+          deleteFromWishlist={props.deleteShowFromWishlist}
+        />
+        <SeasonsList
+          data={props.show}
+          addTorrent={props.addTorrent}
+          addToWishlist={props.addShowToWishlist}
+          getEpisodeDetails={props.getEpisodeDetails}
+          refreshSubtitles={props.refreshSubtitles}
+        />
+      </div>
+    </React.Fragment>
   );
 }
 ShowDetails.propTypes = {
@@ -65,18 +68,33 @@ ShowDetails.propTypes = {
 };
 export default connect(mapStateToProps, mapDispatchToProps)(ShowDetails);
 
+const Fanart = (props) => (
+  <div className="show-fanart mx-n3 mt-n1">
+    <img
+      className="img w-100 object-fit-cover object-position-top mh-40vh"
+      src={props.url}
+    />
+  </div>
+)
+Fanart.propTypes = {
+  url: PropTypes.string,
+}
+
 const Header = (props) => (
-  <div className="card col-12 col-md-10 offset-md-1 mb-3">
-    <div className="row no-gutters">
-      <div className="col-4">
-        <img className="img-fluid" src={props.data.get("poster_url")} />
+  <div className="card col-12 col-md-10 offset-md-1 mt-n3 mb-3">
+    <div className="d-flex flex-column flex-md-row">
+      <div className="d-flex justify-content-center">
+        <img
+          className="overflow-hidden object-fit-cover"
+          src={props.data.get("poster_url")}
+        />
       </div>
-      <div className="col-8">
+      <div className="">
         <div className="card-body">
           <h5 className="card-title">{props.data.get("title")}</h5>
           <p className="card-text">{props.data.get("year")}</p>
           <p className="card-text">{props.data.get("rating")}</p>
-          <p className="card-text">{props.data.get("plot")}</p>
+          <p className="card-text plot">{props.data.get("plot")}</p>
           <p className="card-text">
             <ImdbButton imdbId={props.data.get("imdb_id")} xs/>
           </p>
diff --git a/frontend/scss/app.scss b/frontend/scss/app.scss
index 66227c5..d097c4a 100644
--- a/frontend/scss/app.scss
+++ b/frontend/scss/app.scss
@@ -19,6 +19,18 @@ body {
   padding-top: $body-padding-top;
 }
 
+.object-fit-cover {
+    object-fit: cover;
+}
+
+.object-position-top {
+    object-position: top;
+}
+
+.mh-40vh {
+    max-height: 40vh;
+}
+
 // Remove borders from the navbar
 .navbar-toggler,
 div.show.dropdown.nav-item > div {