mirror of
https://github.com/sussy-code/smov.git
synced 2024-12-20 14:37:43 +01:00
Mess up a lot of shit, this commit is unstable asf
This commit is contained in:
Cooper Ransom
parent
0ac3c588dd
commit
81d91fc5bd
7 changed files with 53 additions and 26 deletions
|
|
@ -66,7 +66,7 @@ function MediaCardContent({
|
|||
|
||||
return (
|
||||
<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" : ""
|
||||
}`}
|
||||
tabIndex={canLink ? 0 : -1}
|
||||
|
|
@ -81,13 +81,13 @@ function MediaCardContent({
|
|||
})}
|
||||
/>
|
||||
<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"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
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,
|
||||
},
|
||||
|
|
@ -142,13 +142,13 @@ function MediaCardContent({
|
|||
) : null}
|
||||
|
||||
<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"
|
||||
}`}
|
||||
>
|
||||
<IconPatch
|
||||
clickable
|
||||
className="text-2xl text-mediaCard-badgeText"
|
||||
className="text-2xl text-mediaCard-badgeText transition-transform hover:scale-110 duration-500"
|
||||
onClick={() => closable && onClose?.()}
|
||||
icon={Icons.X}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { useNavigate } from "react-router-dom";
|
|||
import { ThinContainer } from "@/components/layout/ThinContainer";
|
||||
import { WideContainer } from "@/components/layout/WideContainer";
|
||||
import { Divider } from "@/components/utils/Divider";
|
||||
import { Flare } from "@/components/utils/Flare";
|
||||
import { HomeLayout } from "@/pages/layouts/HomeLayout";
|
||||
import { conf } from "@/setup/config";
|
||||
import { useThemeStore } from "@/stores/theme";
|
||||
|
|
@ -270,30 +271,51 @@ export function Discover() {
|
|||
onWheel={(e) => handleWheel(e, categorySlug)}
|
||||
>
|
||||
{medias.slice(0, 20).map((media) => (
|
||||
<a
|
||||
key={media.id}
|
||||
onClick={
|
||||
() =>
|
||||
<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
|
||||
}`,
|
||||
)
|
||||
// Navigate instead of href!
|
||||
}
|
||||
rel="noopener noreferrer"
|
||||
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
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={`https://image.tmdb.org/t/p/w500${media.poster_path}`} // Dont change this fucking line!
|
||||
alt={isTVShow ? media.name : media.title}
|
||||
loading="lazy"
|
||||
className="rounded-xl"
|
||||
<Flare.Light
|
||||
flareSize={300}
|
||||
cssColorVar="--colors-mediaCard-hoverAccent"
|
||||
backgroundClass="bg-mediaCard-hoverBackground duration-100"
|
||||
className="rounded-xl bg-background-main group-hover:opacity-100"
|
||||
/>
|
||||
</a>
|
||||
<Flare.Child className="pointer-events-auto relative mb-2 p-3 transition-transform duration-300 group-hover:scale-95">
|
||||
<a
|
||||
key={media.id}
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/media/tmdb-${isTVShow ? "tv" : "movie"}-${media.id}-${
|
||||
isTVShow ? media.name : media.title
|
||||
}`,
|
||||
)
|
||||
}
|
||||
rel="noopener noreferrer"
|
||||
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
|
||||
>
|
||||
<img
|
||||
src={`https://image.tmdb.org/t/p/w500${media.poster_path}`}
|
||||
alt={isTVShow ? media.name : media.title}
|
||||
loading="lazy"
|
||||
className="rounded-xl"
|
||||
/>
|
||||
</a>
|
||||
</Flare.Child>
|
||||
</Flare.Base>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
title="Back"
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@ const tokens = {
|
|||
c900: "#0C1216",
|
||||
},
|
||||
shade: {
|
||||
c25: "#5d5db3",
|
||||
c50: "#676790",
|
||||
c100: "#52527A",
|
||||
c200: "#3F3F60",
|
||||
|
|
@ -172,7 +173,7 @@ export const defaultTheme = {
|
|||
// media cards
|
||||
mediaCard: {
|
||||
hoverBackground: tokens.shade.c600,
|
||||
hoverAccent: tokens.shade.c50,
|
||||
hoverAccent: tokens.shade.c25,
|
||||
hoverShadow: tokens.shade.c900,
|
||||
shadow: tokens.shade.c700,
|
||||
barColor: tokens.ash.c200,
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ const tokens = {
|
|||
c900: "#03102a"
|
||||
},
|
||||
shade: {
|
||||
c25: "#5d7db3",
|
||||
c50: "#756790",
|
||||
c100: "#60527a",
|
||||
c200: "#4a3f60",
|
||||
|
|
@ -121,7 +122,7 @@ export default createTheme({
|
|||
|
||||
mediaCard: {
|
||||
hoverBackground: tokens.shade.c600,
|
||||
hoverAccent: tokens.shade.c50,
|
||||
hoverAccent: tokens.shade.c25,
|
||||
hoverShadow: tokens.shade.c900,
|
||||
shadow: tokens.shade.c700,
|
||||
barColor: tokens.ash.c200,
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ const tokens = {
|
|||
c900: "#0b0d22"
|
||||
},
|
||||
shade: {
|
||||
c25: "#9c9c9c",
|
||||
c50: "#7c7c7c",
|
||||
c100: "#666666",
|
||||
c200: "#4f4f4f",
|
||||
|
|
@ -121,7 +122,7 @@ export default createTheme({
|
|||
|
||||
mediaCard: {
|
||||
hoverBackground: tokens.shade.c600,
|
||||
hoverAccent: tokens.shade.c50,
|
||||
hoverAccent: tokens.shade.c25,
|
||||
hoverShadow: tokens.shade.c900,
|
||||
shadow: tokens.shade.c700,
|
||||
barColor: tokens.ash.c200,
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ const tokens = {
|
|||
c900: "#220c0c"
|
||||
},
|
||||
shade: {
|
||||
c25: "#b3675d",
|
||||
c50: "#9c605c",
|
||||
c100: "#834d49",
|
||||
c200: "#673b38",
|
||||
|
|
@ -121,7 +122,7 @@ export default createTheme({
|
|||
|
||||
mediaCard: {
|
||||
hoverBackground: tokens.shade.c600,
|
||||
hoverAccent: tokens.shade.c50,
|
||||
hoverAccent: tokens.shade.c25,
|
||||
hoverShadow: tokens.shade.c900,
|
||||
shadow: tokens.shade.c700,
|
||||
barColor: tokens.ash.c200,
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ const tokens = {
|
|||
c900: "#0b1822"
|
||||
},
|
||||
shade: {
|
||||
c25: "#5db3a8",
|
||||
c50: "#677c90",
|
||||
c100: "#52667a",
|
||||
c200: "#3f4f60",
|
||||
|
|
@ -121,7 +122,7 @@ export default createTheme({
|
|||
|
||||
mediaCard: {
|
||||
hoverBackground: tokens.shade.c600,
|
||||
hoverAccent: tokens.shade.c50,
|
||||
hoverAccent: tokens.shade.c25,
|
||||
hoverShadow: tokens.shade.c900,
|
||||
shadow: tokens.shade.c700,
|
||||
barColor: tokens.ash.c200,
|
||||
|
|
|
|||
Loading…
Reference in a new issue