basic styling
This commit is contained in:
parent
4b3b23d9ed
commit
a074c21cc2
213
src/App.css
213
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;
|
||||
}
|
||||
14
src/App.tsx
14
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} />
|
||||
<div id="movie-wall-container">
|
||||
<MovieWall movies={movies}
|
||||
<main className="flex justify-center gap-8">
|
||||
<Sidebar className="flex flex-col" movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
|
||||
<MovieWall
|
||||
className="flex flex-wrap gap-2 max-w-6xl"
|
||||
movies={movies}
|
||||
setMovies={setMovies}
|
||||
config={config}
|
||||
setChosenMovie={setChosenMovie}
|
||||
setSimilarMoviesAvailable={setSimilarMoviesAvailable}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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,34 +67,32 @@ 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 = [
|
||||
"poster",
|
||||
isHighlighted ? "highlighted" : ""
|
||||
].join(" ")
|
||||
return <><div className={classes} >
|
||||
return <><div className={className} >
|
||||
{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)}
|
||||
onError={() => setHasError(true)}
|
||||
/>
|
||||
</div>
|
||||
</div >
|
||||
</>
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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%" }} />
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue