Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-06-02 21:24:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add recommanded card hover

Browse Source
This commit is contained in:
Zoe Roux 2023-10-21 15:36:17 +02:00
parent 872639dab9
commit d2799adad0
2 changed files with 29 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
front/packages/ui/src/browse/grid.tsx
View File

@ -42,7 +42,7 @@ export const ItemGrid = ({
return ( return (
<Link <Link
href={href ?? ""} href={href}
{...css( {...css(
{ {
flexDirection: "column", flexDirection: "column",
@ -51,7 +51,7 @@ export const ItemGrid = ({
child: { child: {
poster: { poster: {
borderColor: (theme) => theme.background, borderColor: (theme) => theme.background,
borderWidth: px(4), borderWidth: ts(0.5),
borderStyle: "solid", borderStyle: "solid",
}, },
}, },

35
front/packages/ui/src/home/recommanded.tsx
View File

@ -40,11 +40,13 @@ import {
Poster, Poster,
SubP, SubP,
alpha, alpha,
focusReset,
ts, ts,
} from "@kyoo/primitives"; } from "@kyoo/primitives";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { ScrollView, View } from "react-native"; import { Button, Pressable, ScrollView, View } from "react-native";
import { calc, percent, px, rem, useYoshiki } from "yoshiki/native"; import { useRouter } from "solito/router";
import { Theme, calc, percent, px, rem, useYoshiki } from "yoshiki/native";
import { Fetch, Layout, WithLoading } from "../fetch"; import { Fetch, Layout, WithLoading } from "../fetch";
import { InfiniteFetch } from "../fetch-infinite"; import { InfiniteFetch } from "../fetch-infinite";
import PlayArrow from "@material-symbols/svg-400/rounded/play_arrow-fill.svg"; import PlayArrow from "@material-symbols/svg-400/rounded/play_arrow-fill.svg";
@ -57,6 +59,7 @@ export const ItemDetails = ({
overview, overview,
poster, poster,
genres, genres,
href,
playHref, playHref,
...props ...props
}: WithLoading<{ }: WithLoading<{
@ -66,12 +69,15 @@ export const ItemDetails = ({
poster: KyooImage | null; poster: KyooImage | null;
genres: Genre[] | null; genres: Genre[] | null;
overview: string | null; overview: string | null;
href: string;
playHref: string; playHref: string;
}>) => { }>) => {
const { css } = useYoshiki(); const { push } = useRouter();
const { css } = useYoshiki("recommanded-card");
return ( return (
<View <Link
href={href}
{...css( {...css(
{ {
height: ItemDetails.layout.size, height: ItemDetails.layout.size,
@ -79,6 +85,18 @@ export const ItemDetails = ({
bg: (theme) => theme.variant.background, bg: (theme) => theme.variant.background,
borderRadius: 6, borderRadius: 6,
overflow: "hidden", overflow: "hidden",
borderColor: (theme) => theme.background,
borderWidth: ts(0.25),
borderStyle: "solid",
fover: {
self: {
...focusReset,
borderColor: (theme: Theme) => theme.accent,
},
title: {
textDecorationLine: "underline",
},
},
}, },
props, props,
)} )}
@ -100,7 +118,7 @@ export const ItemDetails = ({
p: ts(1), p: ts(1),
})} })}
> >
<P {...css({ m: 0 })}>{name}</P> <P {...css([{ m: 0 }, "title"])}>{name}</P>
{subtitle && <SubP {...css({ m: 0 })}>{subtitle}</SubP>} {subtitle && <SubP {...css({ m: 0 })}>{subtitle}</SubP>}
</View> </View>
</ImageBackground> </ImageBackground>
@ -125,13 +143,13 @@ export const ItemDetails = ({
<IconFab <IconFab
icon={PlayArrow} icon={PlayArrow}
size={20} size={20}
as={Link} as={Pressable}
href={playHref ?? "#"} onPress={() => push(playHref ?? "")}
{...css({ fover: { self: { transform: "scale(1.2)" as any, mX: ts(0.5) } } })} {...css({ fover: { self: { transform: "scale(1.2)" as any, mX: ts(0.5) } } })}
/> />
</View> </View>
</View> </View>
</View> </Link>
); );
}; };
@ -162,6 +180,7 @@ export const Recommanded = () => {
x.kind !== ItemKind.Collection && !x.isLoading ? getDisplayDate(x) : undefined x.kind !== ItemKind.Collection && !x.isLoading ? getDisplayDate(x) : undefined
} }
genres={"genres" in x ? x.genres : null} genres={"genres" in x ? x.genres : null}
href={x.href}
playHref={x.kind !== ItemKind.Collection && !x.isLoading ? x.playHref : undefined} playHref={x.kind !== ItemKind.Collection && !x.isLoading ? x.playHref : undefined}
/> />
)} )}