improve mobile layout
Gitea/movie-explorer/pipeline/head This commit looks good
Details
Gitea/movie-explorer/pipeline/head This commit looks good
Details
This commit is contained in:
parent
cf9d19e64f
commit
10191f5380
|
@ -74,7 +74,7 @@ function App() {
|
|||
let desiredLength = 0
|
||||
if (width > 1280) {
|
||||
desiredLength = 18
|
||||
} else if (width > 640) {
|
||||
} else if (width > 400) {
|
||||
desiredLength = 16
|
||||
} else { desiredLength = 15 }
|
||||
//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">
|
||||
<HamburgerMenu setConfig={setConfig} />
|
||||
</header>
|
||||
<main className="flex flex-col sm:flex-row sm:justify-center items-center 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} />
|
||||
<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} />
|
||||
<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)}
|
||||
setMovies={setMovies}
|
||||
config={config}
|
||||
|
|
|
@ -48,7 +48,8 @@ export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimila
|
|||
|
||||
const borderColor = isHighlighted ? "border-orange-300" : "border-gray-300"
|
||||
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}
|
||||
config={config}
|
||||
setMovies={setMovies}
|
||||
|
|
|
@ -62,6 +62,7 @@ interface ProviderIconsProps extends React.ComponentPropsWithRef<"div"> {
|
|||
link: string;
|
||||
}
|
||||
function ProviderIcons({ providerList, link }: ProviderIconsProps) {
|
||||
if (!providerList) { return "" }
|
||||
const list = providerList.map((e: any, i: number) => {
|
||||
return <div className="w-6 aspect-square">
|
||||
<a href={link}>
|
||||
|
|
|
@ -2,6 +2,9 @@
|
|||
export default {
|
||||
content: ["./dist/index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
screens: {
|
||||
largeMobile: "390px",
|
||||
},
|
||||
extend: {
|
||||
aspectRatio: {
|
||||
poster: "2 / 3",
|
||||
|
|
Loading…
Reference in New Issue