Resume
/
movie-explorer
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve mobile layout
Gitea/movie-explorer/pipeline/head This commit looks good Details

This commit is contained in:
andrzej 2024-10-07 23:56:43 +02:00
parent cf9d19e64f
commit 10191f5380
4 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.tsx
View File

@ -74,7 +74,7 @@ function App() {
let desiredLength = 0 let desiredLength = 0
if (width > 1280) { if (width > 1280) {
desiredLength = 18 desiredLength = 18
} else if (width > 640) { } else if (width > 400) {
desiredLength = 16 desiredLength = 16
} else { desiredLength = 15 } } else { desiredLength = 15 }
//ensure movies.length is a multiple of 6 (so it makes an orphanless grid) //ensure movies.length is a multiple of 6 (so it makes an orphanless grid)
@ -94,10 +94,10 @@ function App() {
<header className="bg-black py-2"> <header className="bg-black py-2">
<HamburgerMenu setConfig={setConfig} /> <HamburgerMenu setConfig={setConfig} />
</header> </header>
<main className="flex flex-col sm:flex-row sm:justify-center items-center gap-8 grow"> <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-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} /> <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} />
<MovieWall <MovieWall
className={"flex flex-wrap gap-2 w-fit justify-center sm:max-w-lg xl:max-w-5xl "} className={"flex flex-wrap gap-2 flex-grow w-fit justify-center items-center sm:max-w-lg xl:max-w-5xl p-2"}
movies={trimMoviesForScreen(movies)} movies={trimMoviesForScreen(movies)}
setMovies={setMovies} setMovies={setMovies}
config={config} config={config}

3
src/objects/movie-wall.tsx
View File

@ -48,7 +48,8 @@ export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimila
const borderColor = isHighlighted ? "border-orange-300" : "border-gray-300" const borderColor = isHighlighted ? "border-orange-300" : "border-gray-300"
posters.push( posters.push(
<Poster className={"w-16 sm:w-28 xl:w-36 aspect-poster rounded-xl border-2 overflow-hidden relative " + borderColor} movie={movie} key={movie.id} index={i} // 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}
listSimilar={tmdb.getSimilar} listSimilar={tmdb.getSimilar}
config={config} config={config}
setMovies={setMovies} setMovies={setMovies}

1
src/objects/whereToWatch.tsx
View File

@ -62,6 +62,7 @@ interface ProviderIconsProps extends React.ComponentPropsWithRef<"div"> {
link: string; link: string;
} }
function ProviderIcons({ providerList, link }: ProviderIconsProps) { function ProviderIcons({ providerList, link }: ProviderIconsProps) {
if (!providerList) { return "" }
const list = providerList.map((e: any, i: number) => { const list = providerList.map((e: any, i: number) => {
return <div className="w-6 aspect-square"> return <div className="w-6 aspect-square">
<a href={link}> <a href={link}>

3
tailwind.config.js
View File

@ -2,6 +2,9 @@
export default { export default {
content: ["./dist/index.html", "./src/**/*.{js,ts,jsx,tsx}"], content: ["./dist/index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: { theme: {
screens: {
largeMobile: "390px",
},
extend: { extend: {
aspectRatio: { aspectRatio: {
poster: "2 / 3", poster: "2 / 3",