improve sidebar styling

src/App.css

@@ -48,30 +48,45 @@ main {
 
 
 #sidebar {
-  flex-basis: calc(var(--poster-width)*2);
+  flex-basis: 20%;
+  max-height: 100%;
+  min-height: 100%;
   font-size: 1.6rem;
+  text-align: center;
   background-color: rgba(0, 0, 0, 0.5);
 
-  min-height: 100%;
+  display: grid;
-  display: flex;
 
-  flex-direction: column;
+  grid-template-rows: 1fr 2fr 2fr 1fr;
-  justify-content: space-evenly;
+  ;
-  align-content: stretch;
 
   h1 {
     font-size: 2em;
-    margin: 0;
+    margin: 1rem 0 0 0;
-    /* line-height: 0.8em; */
     font-family: RobotoBold;
     padding: 0.1em 0.2em 0.1em 0.2em;
-    align-self: flex-start;
+    grid-row: 1/ span 1;
+    overflow: hidden;
+  }
+
+  figure {
+    width: 100%;
+    margin: 0;
+    grid-row: 2/ span 1;
+    place-self: center;
+
+    .chosen-movie-poster {
+      aspect-ratio: 2/3;
+      max-width: 100%;
+      max-height: 100%;
+    }
+
   }
 
   #summary {
     overflow: scroll;
-    flex-grow: 2;
     max-height: 24rem;
+    grid-row: 3/ span 1;
   }
 
   p {
@@ -80,14 +95,8 @@ main {
     margin: 0.1em 0.2em 0.1em 0.2em;
   }
 
-  figure {
+  footer {
-    width: 100%;
+    grid-row: 4/ span 1;
-    margin: 0;
-
-    img {
-      aspect-ratio: 2/3;
-
-    }
   }
 
 }
@@ -160,20 +169,36 @@ main {
   filter: blur(1rem) brightness(0.4);
 }
 
-#watch-providers {
+#watch-providers-container {
+  max-width: 100%;
   display: flex;
+  gap: 0.2rem;
+  justify-content: space-around;
+
+  .watch-providers {
+    text-align: center;
+    border: 1rem white;
+
+    h1 {
+      font-size: 1.6rem;
+    }
 
-  h1 {
-    font-size: 1.6rem;
   }
 
   .watch-logos-container {
     display: flex;
+    flex-wrap: nowrap;
     gap: 0.4rem;
+    justify-content: center;
+
 
     .watch-logo {
-      width: 30px;
       aspect-ratio: 1/1;
+      max-height: 2rem;
+
+      img {
+        width: 100%;
+      }
     }
 
   }

src/objects/sidebar.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Movie } from "./movie-wall";
 import tmdb from "./tmdb";
 import { WhereToWatch } from "./whereToWatch";
+import CrossfadeImage from 'react-crossfade-image'
 export interface SidebarProps extends React.ComponentPropsWithRef<"div"> {
   movie: Movie;
   similarMoviesAvailable: boolean;
@@ -12,7 +13,7 @@ export function Sidebar({ movie, similarMoviesAvailable, watchProviders }: Sideb
     <h1>{movie?.title ?? "loading"}</h1>
     <figure>
       <a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer">
-        <img src={tmdb.makeImgUrl(movie.poster_path ?? "")} />
+        <CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path ?? "")} containerClass="chosen-movie-poster" />
       </a>
       <figcaption>
         {similarMoviesAvailable ? "" : "No hay data suficiente para darte pelílculas relacionadas."}

src/objects/tmdb.tsx

@@ -25,7 +25,6 @@ export default {
           page
         }
       })
-    console.log(res)
     if (res.status === 200) {
       res = res.data.results
       callback(res)
@@ -44,7 +43,6 @@ export default {
         page
       }
     })
-    console.log(res)
     if (res.status === 200) {
       const array: Array<Movie> = res.data.results
         .filter((e: Movie) => {

src/objects/whereToWatch.tsx

@@ -61,26 +61,35 @@ interface ProviderIconsProps extends React.ComponentPropsWithRef<"div"> {
 }
 function ProviderIcons({ providerList, link }: ProviderIconsProps) {
   const list = providerList.map((e: any, i: number) => {
-    return <a href={link}><img src={tmdb.makeLogoPath(e.logo_path)} className="watch-logo" key={e.provider_id + "_" + i} /></a>
+    return <div className="watch-logo">
+      <a href={link}>
+        <img src={tmdb.makeLogoPath(e.logo_path)} key={e.provider_id + "_" + i} /></a>
+    </div>
   })
   return <div className="watch-logos-container">
     {list}
   </div>
 }
+function watchProvidersExist(watchProviders: any) {
+  return watchProviders?.link
 
+}
 export function WhereToWatch({ watchProviders }: WhereToWatchProps) {
-  if (!watchProviders?.link) {
+  console.log("Watch providers exist?" + watchProvidersExist(watchProviders))
+  if (!watchProvidersExist(watchProviders)) {
     console.group()
     console.log("Watch providers (WhereToWatch)")
     console.log(watchProviders)
     console.groupEnd()
-    return <div id="no-watch"></div>
+    return <p>Por el momento no hay opciónes streaming.</p>
   }
-  return <><div id="watch-providers">
+  return <><footer id="sidebar-footer">
-    {watchProviders?.flatrate?.length > 0 ? <div><h1>Streaming:</h1><ProviderIcons providerList={watchProviders.flatrate} link={watchProviders.link} /></div> : ""}
+    <div id="watch-providers-container">
-    {watchProviders?.rent?.length > 0 ? <div><h1>Alquiler:</h1><ProviderIcons providerList={watchProviders.rent} link={watchProviders.link} /></div> : ""}
+      {watchProviders?.flatrate?.length > 0 ? <div className="watch-providers"><h1>Streaming:</h1><ProviderIcons providerList={watchProviders.flatrate} link={watchProviders.link} /></div> : ""}
-    {watchProviders?.buy?.length > 0 ? <div><h1>Comprar:</h1><ProviderIcons providerList={watchProviders.buy} link={watchProviders.link} /></div> : ""}
+      {watchProviders?.rent?.length > 0 ? <div className="watch-providers"><h1>Alquiler:</h1><ProviderIcons providerList={watchProviders.rent} link={watchProviders.link} /></div> : ""}
-  </div>
+      {watchProviders?.buy?.length > 0 ? <div className="watch-providers"><h1>Comprar:</h1><ProviderIcons providerList={watchProviders.buy} link={watchProviders.link} /></div> : ""}
+    </div>
     <p>Powered by Just Watch.</p>
+  </footer>
   </>
 }