1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-24 15:17:41 +01:00

Mess up a lot of shit, this commit is unstable asf

This commit is contained in:
Cooper Ransom 2024-04-09 12:29:10 -04:00
parent 0ac3c588dd
commit 81d91fc5bd
7 changed files with 53 additions and 26 deletions

View file

@ -66,7 +66,7 @@ function MediaCardContent({
return ( return (
<Flare.Base <Flare.Base
className={`group -m-3 mb-2 rounded-xl bg-background-main transition-colors duration-100 focus:relative focus:z-10 ${ className={`group -m-[0.705em] p-[0.2em] rounded-xl bg-background-main transition-colors duration-300 focus:relative focus:z-10 ${
canLink ? "hover:bg-mediaCard-hoverBackground tabbable" : "" canLink ? "hover:bg-mediaCard-hoverBackground tabbable" : ""
}`} }`}
tabIndex={canLink ? 0 : -1} tabIndex={canLink ? 0 : -1}
@ -81,13 +81,13 @@ function MediaCardContent({
})} })}
/> />
<Flare.Child <Flare.Child
className={`pointer-events-auto relative mb-2 p-3 transition-transform duration-100 ${ className={`pointer-events-auto relative mb-2 p-3 transition-transform duration-300 ${
canLink ? "group-hover:scale-95" : "opacity-60" canLink ? "group-hover:scale-95" : "opacity-60"
}`} }`}
> >
<div <div
className={classNames( className={classNames(
"relative mb-4 pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground bg-cover bg-center transition-[border-radius] duration-100", "relative mb-4 pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground bg-cover bg-center transition-[border-radius] duration-300",
{ {
"group-hover:rounded-lg": canLink, "group-hover:rounded-lg": canLink,
}, },
@ -142,13 +142,13 @@ function MediaCardContent({
) : null} ) : null}
<div <div
className={`absolute inset-0 flex items-center justify-center bg-mediaCard-badge bg-opacity-80 transition-opacity duration-200 ${ className={`absolute inset-0 flex items-center justify-center bg-mediaCard-badge bg-opacity-80 transition-opacity duration-500 ${
closable ? "opacity-100" : "pointer-events-none opacity-0" closable ? "opacity-100" : "pointer-events-none opacity-0"
}`} }`}
> >
<IconPatch <IconPatch
clickable clickable
className="text-2xl text-mediaCard-badgeText" className="text-2xl text-mediaCard-badgeText transition-transform hover:scale-110 duration-500"
onClick={() => closable && onClose?.()} onClick={() => closable && onClose?.()}
icon={Icons.X} icon={Icons.X}
/> />

View file

@ -5,6 +5,7 @@ import { useNavigate } from "react-router-dom";
import { ThinContainer } from "@/components/layout/ThinContainer"; import { ThinContainer } from "@/components/layout/ThinContainer";
import { WideContainer } from "@/components/layout/WideContainer"; import { WideContainer } from "@/components/layout/WideContainer";
import { Divider } from "@/components/utils/Divider"; import { Divider } from "@/components/utils/Divider";
import { Flare } from "@/components/utils/Flare";
import { HomeLayout } from "@/pages/layouts/HomeLayout"; import { HomeLayout } from "@/pages/layouts/HomeLayout";
import { conf } from "@/setup/config"; import { conf } from "@/setup/config";
import { useThemeStore } from "@/stores/theme"; import { useThemeStore } from "@/stores/theme";
@ -270,30 +271,51 @@ export function Discover() {
onWheel={(e) => handleWheel(e, categorySlug)} onWheel={(e) => handleWheel(e, categorySlug)}
> >
{medias.slice(0, 20).map((media) => ( {medias.slice(0, 20).map((media) => (
<Flare.Base
className="group -m-[0.705em] p-[0.2em] rounded-xl bg-background-main transition-colors duration-300 focus:relative focus:z-10 hover:bg-mediaCard-hoverBackground tabbable"
tabIndex={0} // Assuming all items are linkable for simplicity; adjust as needed
onKeyUp={(e) => {
if (e.key === "Enter") {
navigate(
`/media/tmdb-${isTVShow ? "tv" : "movie"}-${media.id}-${
isTVShow ? media.name : media.title
}`,
);
}
}}
>
<Flare.Light
flareSize={300}
cssColorVar="--colors-mediaCard-hoverAccent"
backgroundClass="bg-mediaCard-hoverBackground duration-100"
className="rounded-xl bg-background-main group-hover:opacity-100"
/>
<Flare.Child className="pointer-events-auto relative mb-2 p-3 transition-transform duration-300 group-hover:scale-95">
<a <a
key={media.id} key={media.id}
onClick={ onClick={() =>
() =>
navigate( navigate(
`/media/tmdb-${isTVShow ? "tv" : "movie"}-${media.id}-${ `/media/tmdb-${isTVShow ? "tv" : "movie"}-${media.id}-${
isTVShow ? media.name : media.title isTVShow ? media.name : media.title
}`, }`,
) )
// Navigate instead of href!
} }
rel="noopener noreferrer" rel="noopener noreferrer"
className="block rounded-xl text-center relative overflow-hidden transition-transform transform hover:scale-95 duration-500 mr-5" className="block rounded-xl text-center relative overflow-hidden transition-transform transform hover:scale-95 duration-500 mr-5"
style={{ flex: `0 0 ${movieWidth}` }} // Set a fixed width for each movie style={{ flex: `0 0 ${movieWidth}` }} // Set a fixed width for each movie
> >
<img <img
src={`https://image.tmdb.org/t/p/w500${media.poster_path}`} // Dont change this fucking line! src={`https://image.tmdb.org/t/p/w500${media.poster_path}`}
alt={isTVShow ? media.name : media.title} alt={isTVShow ? media.name : media.title}
loading="lazy" loading="lazy"
className="rounded-xl" className="rounded-xl"
/> />
</a> </a>
</Flare.Child>
</Flare.Base>
))} ))}
</div> </div>
<button <button
type="button" type="button"
title="Back" title="Back"

View file

@ -70,6 +70,7 @@ const tokens = {
c900: "#0C1216", c900: "#0C1216",
}, },
shade: { shade: {
c25: "#5d5db3",
c50: "#676790", c50: "#676790",
c100: "#52527A", c100: "#52527A",
c200: "#3F3F60", c200: "#3F3F60",
@ -172,7 +173,7 @@ export const defaultTheme = {
// media cards // media cards
mediaCard: { mediaCard: {
hoverBackground: tokens.shade.c600, hoverBackground: tokens.shade.c600,
hoverAccent: tokens.shade.c50, hoverAccent: tokens.shade.c25,
hoverShadow: tokens.shade.c900, hoverShadow: tokens.shade.c900,
shadow: tokens.shade.c700, shadow: tokens.shade.c700,
barColor: tokens.ash.c200, barColor: tokens.ash.c200,

View file

@ -14,6 +14,7 @@ const tokens = {
c900: "#03102a" c900: "#03102a"
}, },
shade: { shade: {
c25: "#5d7db3",
c50: "#756790", c50: "#756790",
c100: "#60527a", c100: "#60527a",
c200: "#4a3f60", c200: "#4a3f60",
@ -121,7 +122,7 @@ export default createTheme({
mediaCard: { mediaCard: {
hoverBackground: tokens.shade.c600, hoverBackground: tokens.shade.c600,
hoverAccent: tokens.shade.c50, hoverAccent: tokens.shade.c25,
hoverShadow: tokens.shade.c900, hoverShadow: tokens.shade.c900,
shadow: tokens.shade.c700, shadow: tokens.shade.c700,
barColor: tokens.ash.c200, barColor: tokens.ash.c200,

View file

@ -14,6 +14,7 @@ const tokens = {
c900: "#0b0d22" c900: "#0b0d22"
}, },
shade: { shade: {
c25: "#9c9c9c",
c50: "#7c7c7c", c50: "#7c7c7c",
c100: "#666666", c100: "#666666",
c200: "#4f4f4f", c200: "#4f4f4f",
@ -121,7 +122,7 @@ export default createTheme({
mediaCard: { mediaCard: {
hoverBackground: tokens.shade.c600, hoverBackground: tokens.shade.c600,
hoverAccent: tokens.shade.c50, hoverAccent: tokens.shade.c25,
hoverShadow: tokens.shade.c900, hoverShadow: tokens.shade.c900,
shadow: tokens.shade.c700, shadow: tokens.shade.c700,
barColor: tokens.ash.c200, barColor: tokens.ash.c200,

View file

@ -14,6 +14,7 @@ const tokens = {
c900: "#220c0c" c900: "#220c0c"
}, },
shade: { shade: {
c25: "#b3675d",
c50: "#9c605c", c50: "#9c605c",
c100: "#834d49", c100: "#834d49",
c200: "#673b38", c200: "#673b38",
@ -121,7 +122,7 @@ export default createTheme({
mediaCard: { mediaCard: {
hoverBackground: tokens.shade.c600, hoverBackground: tokens.shade.c600,
hoverAccent: tokens.shade.c50, hoverAccent: tokens.shade.c25,
hoverShadow: tokens.shade.c900, hoverShadow: tokens.shade.c900,
shadow: tokens.shade.c700, shadow: tokens.shade.c700,
barColor: tokens.ash.c200, barColor: tokens.ash.c200,

View file

@ -14,6 +14,7 @@ const tokens = {
c900: "#0b1822" c900: "#0b1822"
}, },
shade: { shade: {
c25: "#5db3a8",
c50: "#677c90", c50: "#677c90",
c100: "#52667a", c100: "#52667a",
c200: "#3f4f60", c200: "#3f4f60",
@ -121,7 +122,7 @@ export default createTheme({
mediaCard: { mediaCard: {
hoverBackground: tokens.shade.c600, hoverBackground: tokens.shade.c600,
hoverAccent: tokens.shade.c50, hoverAccent: tokens.shade.c25,
hoverShadow: tokens.shade.c900, hoverShadow: tokens.shade.c900,
shadow: tokens.shade.c700, shadow: tokens.shade.c700,
barColor: tokens.ash.c200, barColor: tokens.ash.c200,