mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-23 15:07:43 +01:00
Code Issues Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/media/MediaCard.tsx
View file

@ -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}
/>

30
src/pages/Discover.tsx
View file

@ -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) => (
<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
key={media.id}
onClick={
() =>
onClick={() =>
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!
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"

3
themes/default.ts
View file

@ -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,

3
themes/list/blue.ts
View file

@ -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,

3
themes/list/gray.ts
View file

@ -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,

3
themes/list/red.ts
View file

@ -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,

3
themes/list/teal.ts
View file

@ -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,