basic styling

src/App.css

@@ -1,213 +0,0 @@
-:root {
-
-  --poster-width: 15rem;
-  --posters-wide: 10;
-  --posters-gap: 1rem;
-}
-
-#root {
-  height: 100%;
-  width: 100%;
-}
-
-@font-face {
-  font-family: "Jura";
-  src: url("fonts/Jura-VariableFont_wght.ttf");
-}
-
-@font-face {
-  font-family: "RobotoBold";
-  src: url("fonts/Roboto-Bold.ttf")
-}
-
-body {
-
-  font-family: Jura;
-  color: white;
-}
-
-
-main {
-  height: 100%;
-  display: flex;
-  gap: 1em;
-  justify-content: center;
-  align-items: center;
-}
-
-
-
-#movie-wall-container {
-  display: inline-flex;
-  flex-wrap: wrap;
-  flex-basis: 60%;
-  align-items: center;
-  gap: 1em;
-  height: fit-content;
-}
-
-
-#sidebar {
-  flex-basis: 20%;
-  max-height: 100%;
-  min-height: 100%;
-  font-size: 1.6rem;
-  text-align: center;
-  background-color: rgba(0, 0, 0, 0.5);
-
-  display: grid;
-  grid-template-rows: 1fr 1fr 2fr 1fr;
-  align-items: center;
-  justify-content: center;
-
-  h1 {
-    font-size: 1.2em;
-    font-family: RobotoBold;
-    grid-row: 1/ span 1;
-    height: fit-content;
-    overflow: hidden;
-
-  }
-
-  a {
-    display: contents;
-  }
-
-
-  .chosen-movie-poster {
-    grid-row: 2/ span 1;
-    object-fit: cover;
-    display: flex;
-    justify-content: center;
-  }
-
-
-  #summary {
-    overflow: scroll;
-    max-height: 100%;
-    grid-row: 3/ span 1;
-  }
-
-  p {
-    font-family: Jura;
-    padding: 0.2em;
-    margin: 0.1em 0.2em 0.1em 0.2em;
-  }
-
-  footer {
-    font-size: 1.2rem;
-    grid-row: 4/ span 1;
-    overflow: hidden;
-  }
-
-}
-
-.poster {
-  width: var(--poster-width);
-  display: grid;
-  box-shadow: 1em 1em 1em rgba(0, 0, 0, 0.5);
-  border-radius: 1em;
-  overflow: hidden;
-
-  img {
-    height: 100%;
-    animation: fadeImage 0.5s;
-    animation-fill-mode: forwards;
-    aspect-ratio: 2/3;
-  }
-}
-
-.poster>* {
-  grid-area: 1/1;
-}
-
-.highlighted {
-  border: 0.1em solid gold;
-}
-
-
-.overlay {
-  margin: 0;
-  height: 100%;
-  width: 100%;
-  background-color: rgba(255, 255, 255, 0.5);
-  cursor: pointer;
-  z-index: 2;
-  opacity: 0;
-}
-
-.highlighted>.overlay {
-  background-color: rgba(255, 222, 123, 0.5);
-}
-
-.overlay:hover {
-  opacity: 1;
-}
-
-@keyframes fadeImage {
-  from {
-    filter: blur(5rem);
-  }
-
-  to {
-    filter: blur(0);
-  }
-}
-
-
-#background {
-  background-color: black;
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-
-}
-
-.CrossfadeImage {
-  width: 100%;
-  height: 100%;
-  filter: blur(1rem) brightness(0.4);
-}
-
-#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.4rem;
-    }
-
-  }
-
-  .watch-logos-container {
-    display: flex;
-    flex-wrap: nowrap;
-    gap: 0.4rem;
-    justify-content: center;
-
-
-    .watch-logo {
-      aspect-ratio: 1/1;
-      max-height: 2rem;
-
-      img {
-        width: 100%;
-      }
-    }
-
-  }
-}
-
-#hamburger {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  z-index: 10;
-}

src/App.tsx

@@ -1,5 +1,3 @@
-import './defaults.css'
-import './App.css'
 import './spinner.css'
 import { MovieWall } from './objects/movie-wall'
 import { HamburgerMenu } from './objects/HamburgerMenu'
@@ -68,20 +66,20 @@ function App() {
   }
   return (
     <>
-      <div id="background">
+      <div id="background" className="-z-10 absolute">
         <CrossfadeImage src={backdrop} style={crossfadeImageStyles} />
       </div>
-      <main >
       <HamburgerMenu setConfig={setConfig} />
-        <Sidebar movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
+      <main className="flex justify-center gap-8">
-        <div id="movie-wall-container">
+        <Sidebar className="flex flex-col" movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
-          <MovieWall movies={movies}
+        <MovieWall
+          className="flex flex-wrap gap-2 max-w-6xl"
+          movies={movies}
           setMovies={setMovies}
           config={config}
           setChosenMovie={setChosenMovie}
           setSimilarMoviesAvailable={setSimilarMoviesAvailable}
         />
-        </div>
       </main>
     </>
   )

src/defaults.css

@@ -1,69 +0,0 @@
-*,
-*::before,
-*::after {
-	box-sizing: border-box;
-}
-
-img {
-	display: block;
-	max-width: 100%;
-}
-
-menu:not(article menu),
-ol:not(article ol),
-ul:not(article ul) {
-	list-style: none;
-}
-
-menu,
-ol,
-ul {
-	padding-left: 0;
-}
-
-article ol,
-article ul {
-	list-style-position: inside;
-}
-
-a {
-	/* Places underlines below the descenders */
-	text-underline-position: under;
-
-
-	/* Sets the thickness as a percentage of the font size */
-	text-decoration-thickness: 8;
-}
-
-/* <html> = the root */
-html {
-	font-size: 62.5%;
-	/* (62.5/100) * 16px = 10px */
-	-webkit-text-size-adjust: none;
-	/* for iOS Safari */
-	text-size-adjust: none;
-	/* for other mobile browsers */
-	height: 100vh;
-}
-
-body {
-	margin: 0;
-	height: 100%;
-
-}
-
-@media (prefers-reduced-motion: no-preference) {
-	html {
-		scroll-behavior: smooth;
-	}
-}
-
-label,
-button,
-select,
-summary,
-[type=radio],
-[type=submit],
-[type=checkbox] {
-	cursor: pointer;
-}

src/objects/movie-wall.tsx

@@ -35,16 +35,17 @@ interface MovieWallProps extends React.ComponentPropsWithRef<"div"> {
   setChosenMovie: React.Dispatch<React.SetStateAction<any>>;
   setSimilarMoviesAvailable: React.Dispatch<React.SetStateAction<boolean>>;
   config: Config;
+  className: string
 }
 
-export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimilarMoviesAvailable }: MovieWallProps) {
+export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimilarMoviesAvailable, className }: MovieWallProps) {
 
   const posters: React.ReactElement[] = []
   for (let i = 0; i < movies.length; i++) {
     const movie = movies[i]
     const isHighlighted = movie.vote_average ? movie.vote_average > 6 : false
     posters.push(
-      <Poster isHighlighted={isHighlighted} movie={movie} key={movie.id} index={i}
+      <Poster className="w-36 h-58 rounded-xl overflow-hidden flex justify-center" isHighlighted={isHighlighted} movie={movie} key={movie.id} index={i}
         listSimilar={tmdb.getSimilar}
         config={config}
         setMovies={setMovies}
@@ -52,9 +53,9 @@ export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimila
         setSimilarMoviesAvailable={setSimilarMoviesAvailable} />
     )
   }
-  return <>
+  return <div className={className}>
     {posters}
-  </>
+  </div>
 }
 
 interface PosterProps extends React.ComponentPropsWithRef<"div"> {
@@ -66,28 +67,26 @@ interface PosterProps extends React.ComponentPropsWithRef<"div"> {
   setChosenMovie: React.Dispatch<React.SetStateAction<Movie>>;
   setSimilarMoviesAvailable: React.Dispatch<React.SetStateAction<boolean>>;
   isHighlighted: boolean;
+  className: string
 }
 
 
-function Poster({ movie, config, listSimilar, setMovies, setChosenMovie, setSimilarMoviesAvailable, isHighlighted }: PosterProps) {
+function Poster({ className, movie, config, listSimilar, setMovies, setChosenMovie, setSimilarMoviesAvailable, isHighlighted }: PosterProps) {
   function clickHandler() {
     setChosenMovie(movie)
     listSimilar(config, movie, setMovies, setSimilarMoviesAvailable)
   }
   const [isLoading, setIsLoading] = useState(true)
   const [hasError, setHasError] = useState(false)
-  const classes = [
+  return <><div className={className} >
-    "poster",
-    isHighlighted ? "highlighted" : ""
-  ].join(" ")
-  return <><div className={classes} >
     {isLoading ?
-      <div className="spinner-container">
+      <div className="m-auto text-center h-full w-full fixed">
         <div className="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>
-      : <div className="overlay" onClick={() => clickHandler()}>
+      : <div className="z-10 h-full w-full cursor-pointer" onClick={() => clickHandler()}>
+        hello
       </div>
     }
-    {hasError ?? <div className="spinner-container">⚠️</div>}
+    {hasError ?? <div className="m-auto text-center">⚠️</div>}
     <img
       src={tmdb.makeImgUrl(movie.poster_path ?? "")}
       onLoad={() => setIsLoading(false)}

src/objects/sidebar.tsx

@@ -10,14 +10,15 @@ export interface SidebarProps extends React.ComponentPropsWithRef<"div"> {
   similarMoviesAvailable: boolean;
   watchProviders: WatchProviders;
   config: Config;
+  className: string
 }
-export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config }: SidebarProps) {
+export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config, className }: SidebarProps) {
   const apology = config.language == "es" ?
     "Resumen no disponible" :
     config.language == "en" ?
       "Summary unavailable." :
       ""
-  return <div id="sidebar">
+  return <div id="sidebar" className={className}>
     <h1>{movie?.title ?? "loading"}</h1>
     <a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer">
       <CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path ?? "")} containerClass="chosen-movie-poster" style={{ objectFit: "cover", height: "100%" }} />

src/objects/tmdb.tsx

@@ -28,6 +28,7 @@ export default {
 * @returns {boolean}
 */
   getPopular: async function({ language, region, page }: Config, callback: Function) {
+    try {
       let res = await tmdb.get('/popular',
         {
           params: {
@@ -36,6 +37,7 @@ export default {
             page
           }
         })
+      console.log("POPULAR MOVIES: " + JSON.stringify(res))
       if (res.status === 200) {
         res = res.data.results
         callback(res)
@@ -43,6 +45,9 @@ export default {
       } else {
         throw Error("API call failed! Response: " + JSON.stringify(res))
       }
+    } catch (error) {
+      console.error(error)
+    }
   },
   /**
    * Calls TMDB/similar, then fires the callback with res.data.results.unshift(movie) as argument

src/objects/whereToWatch.tsx

@@ -77,12 +77,7 @@ function watchProvidersExist(watchProviders: any) {
 
 }
 export function WhereToWatch({ watchProviders, config }: WhereToWatchProps) {
-  console.log("Watch providers exist?" + watchProvidersExist(watchProviders))
   if (!watchProvidersExist(watchProviders)) {
-    console.group()
-    console.log("Watch providers (WhereToWatch)")
-    console.log(watchProviders)
-    console.groupEnd()
     return <p>{config.language == "es" ? "Por el momento no hay opciónes streaming." : config.language == "en" ? "There are no online viewing options right now." : ""}</p>
   }
   return <><footer id="sidebar-footer">

src/spinner.css

@@ -1,3 +1,13 @@
+/* .overlay { */
+/*   margin: 0; */
+/*   height: 100%; */
+/*   width: 100%; */
+/*   background-color: rgba(255, 255, 255, 0.5); */
+/*   cursor: pointer; */
+/*   z-index: 2; */
+/*   opacity: 0; */
+/* } */
+/**/
 .spinner-container {
 	margin: auto;
 	text-align: center;