Add the show fanart in the show detail view

frontend/js/components/shows/details.js

@@ -38,6 +38,8 @@ const ShowDetails = (props) => {
   }
 
   return (
+    <React.Fragment>
+      <Fanart url={props.show.get("fanart_url")} />
       <div className="row no-gutters">
         <Header
           data={props.show}
@@ -52,6 +54,7 @@ const ShowDetails = (props) => {
           refreshSubtitles={props.refreshSubtitles}
         />
       </div>
+    </React.Fragment>
   );
 }
 ShowDetails.propTypes = {
@@ -65,18 +68,33 @@ ShowDetails.propTypes = {
 };
 export default connect(mapStateToProps, mapDispatchToProps)(ShowDetails);
 
-const Header = (props) => (
+const Fanart = (props) => (
-  <div className="card col-12 col-md-10 offset-md-1 mb-3">
+  <div className="show-fanart mx-n3 mt-n1">
-    <div className="row no-gutters">
+    <img
-      <div className="col-4">
+      className="img w-100 object-fit-cover object-position-top mh-40vh"
-        <img className="img-fluid" src={props.data.get("poster_url")} />
+      src={props.url}
+    />
   </div>
-      <div className="col-8">
+)
+Fanart.propTypes = {
+  url: PropTypes.string,
+}
+
+const Header = (props) => (
+  <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="">
         <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>

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 {