more responsivity improvements

2024-10-08 10:54:50 +02:00 · 2024-10-08 10:54:50 +02:00 · 1427aedbbf
parent 10191f5380
commit 1427aedbbf
7 changed files with 36 additions and 13 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -12,7 +12,8 @@
        "axios": "^1.6.8",
        "react": "^18.2.0",
        "react-crossfade-image": "^1.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "tailwind-merge": "^2.5.3"
      },
      "devDependencies": {
        "@types/react": "*",
@ -3999,6 +4000,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/tailwind-merge": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.3.tgz",
+      "integrity": "sha512-d9ZolCAIzom1nf/5p4LdD5zvjmgSxY0BGgdSvmXIoMYAiPdAW/dSpP7joCDYFY7r/HkEa2qmPtkgsu0xjQeQtw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
    "node_modules/tailwindcss": {
      "version": "3.4.13",
      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.13.tgz",
--- a/package.json
+++ b/package.json
@ -14,7 +14,8 @@
    "axios": "^1.6.8",
    "react": "^18.2.0",
    "react-crossfade-image": "^1.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "tailwind-merge": "^2.5.3"
  },
  "devDependencies": {
    "@types/react": "*",
--- a/src/App.tsx
+++ b/src/App.tsx
@ -94,10 +94,10 @@ function App() {
        <header className="bg-black py-2">
          <HamburgerMenu setConfig={setConfig} />
        </header>
-        <main className="flex flex-col-reverse sm:flex-row justify-start sm:justify-center items-center sm:gap-8 grow">
-          <Sidebar className="flex flex-col justify-around sm:justify-between items-center max-w-sm bg-black/80 text-white w-full sm:w-96 h-64 sm:h-full" movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
+        <main className="flex flex-col-reverse xl:flex-row justify-start sm:justify-center items-center sm:gap-8 grow">
+          <Sidebar className="flex flex-col justify-around sm:justify-between items-center bg-black/80 text-white w-full sm:w-96 h-64 sm:h-full" movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
          <MovieWall
-            className={"flex flex-wrap gap-2 flex-grow w-fit justify-center items-center sm:max-w-lg xl:max-w-5xl p-2"}
+            className={"flex flex-wrap gap-2 flex-grow w-full md:w-11/12 justify-center items-center xl:max-w-5xl p-2"}
            movies={trimMoviesForScreen(movies)}
            setMovies={setMovies}
            config={config}
--- a/src/objects/movie-wall.tsx
+++ b/src/objects/movie-wall.tsx
@ -1,6 +1,7 @@
 import React, { useState } from "react"
 import { Config } from "../App"
 import tmdb from "./tmdb"
+import { twMerge } from "tailwind-merge"

 export interface Movie {
  id: number | null
@ -45,11 +46,18 @@ export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimila
  for (let i = 0; i < movies.length; i++) {
    const movie = movies[i]
    const isHighlighted = movie.vote_average ? movie.vote_average > 6 : false
-
+    const widths = [
+      " ",
+      "w-16",
+      "largeMobile:w-20",
+      "sm:w-32",
+      "md:w-36",
+      "lg:w-40"
+    ]
    const borderColor = isHighlighted ? "border-orange-300" : "border-gray-300"
    posters.push(
      // TODO: tailwind merge so that these break points actually work
-      <Poster className={"w-16 largeMobile:w-20 sm:w-40 aspect-poster rounded-xl border-2 overflow-hidden relative " + borderColor} movie={movie} key={movie.id} index={i}
+      <Poster className={twMerge("aspect-poster rounded-xl border-2 overflow-hidden relative " + borderColor + widths.join(" "))} movie={movie} key={movie.id} index={i}
        listSimilar={tmdb.getSimilar}
        config={config}
        setMovies={setMovies}
--- a/src/objects/sidebar.tsx
+++ b/src/objects/sidebar.tsx
@ -23,8 +23,8 @@ export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config,
    <div className="sm:h-14 w-fit flex justify-center items-center">
      <h1 className="font-bold text-base sm:text-lg sm:text-wrap my-1 sm:my-4 overflow-hidden text-center text-balance">{movie?.title ?? "loading"}</h1>
    </div>
-    <div className="flex flex-row sm:flex-col gap-2 justify-center sm:items-center">
-      <a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer" className="h-32 sm:h-96 aspect-poster flex justify-center">
+    <div className="flex flex-row sm:flex-col gap-2 justify-center items-center">
+      <a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer" className="w-3/12 sm:h-96 aspect-poster flex justify-center">
        <CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path ?? "")} style={{
          objectFit: "clip",
          height: "100%",
@ -32,7 +32,7 @@ export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config,
        }} />
      </a>
      {similarMoviesAvailable ? "" : "No hay data suficiente para darte pelílculas relacionadas."}
-      <div className="h-32 sm:h-72 w-64 sm:w-full overflow-y-scroll overflow-x-hidden sm:mt-4 p-2 sm:p-4 text-sm sm:text-base flex justify-center items-center border-2 border-slate-800 rounded-lg ">
+      <div className="h-36 sm:h-72 w-8/12 sm:w-full overflow-y-scroll overflow-x-hidden sm:mt-4 p-2 sm:p-4 text-sm sm:text-base flex justify-center items-center border-2 border-slate-800 rounded-lg ">
        {/* TODO: make the apology vertically centered */}
        {movie.overview === null ?
          <p>Loading...</p>
@ -43,7 +43,7 @@ export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config,
        }
      </div>
    </div>
-    <WhereToWatch watchProviders={watchProviders} config={config} className="w-full h-16 sm:h-32 flex flex-col justify-center mb-1 sm:mb-4 text-xs sm:text-base" />
+    <WhereToWatch watchProviders={watchProviders} config={config} className="w-full h-32 sm:h-32 flex flex-col justify-center mb-1 sm:mb-4 text-xs sm:text-base" />
  </div >


--- a/src/objects/whereToWatch.tsx
+++ b/src/objects/whereToWatch.tsx
@ -69,7 +69,7 @@ function ProviderIcons({ providerList, link }: ProviderIconsProps) {
        <img src={tmdb.makeLogoPath(e.logo_path)} key={e.provider_id + "_" + i} /></a>
    </div>
  })
-  return <div id="logos-container" className="w-full flex">
+  return <div className="w-full flex justify-center">
    {list}
  </div>
 }
@ -82,7 +82,7 @@ export function WhereToWatch({ watchProviders, config, className }: WhereToWatch
    {watchProvidersExist(watchProviders) ?
      <>
        <div className="flex w-full justify-around">
-          {watchProviders?.flatrate?.length > 0 ? <div className=""><h1>Streaming:</h1><ProviderIcons providerList={watchProviders.flatrate} link={watchProviders.link} /></div> : ""}
+          {watchProviders?.flatrate?.length > 0 ? <div><h1>Streaming:</h1><ProviderIcons providerList={watchProviders.flatrate} link={watchProviders.link} /></div> : ""}
          {watchProviders?.rent?.length > 0 ? <div className=""><h1>{config.language == "es" ? "Alquiler:" : config.language == "en" ? "To Rent:" : ""}</h1><ProviderIcons providerList={watchProviders.rent} link={watchProviders.link} /></div> : ""}
          {watchProviders?.buy?.length > 0 ? <div className="watch-providers"><h1>{config.language == "es" ? "Comprar:" : config.language == "en" ? "To Buy:" : ""}</h1><ProviderIcons providerList={watchProviders.buy} link={watchProviders.link} /></div> : ""}
        </div>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -4,6 +4,10 @@ export default {
  theme: {
    screens: {
      largeMobile: "390px",
+      sm: "640px",
+      md: "767px",
+      lg: "1023px",
+      xl: "1280px",
    },
    extend: {
      aspectRatio: {