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

Add taglines on the front

Browse Source
This commit is contained in:
Zoe Roux 2023-08-12 01:36:26 +09:00
parent fd3c2e5f9b
commit 74c31a0f18
No known key found for this signature in database
1 changed files with 23 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
front/packages/ui/src/details/header.tsx
View File

@ -63,6 +63,7 @@ const TitleLine = ({
isLoading, isLoading,
slug, slug,
name, name,
tagline,
date, date,
poster, poster,
studio, studio,
@ -72,7 +73,8 @@ const TitleLine = ({
isLoading: boolean; isLoading: boolean;
slug: string; slug: string;
name?: string; name?: string;
date?: string; tagline?: string;
date?: string | null;
poster?: KyooImage | null; poster?: KyooImage | null;
studio?: Studio | null; studio?: Studio | null;
trailerUrl?: string | null; trailerUrl?: string | null;
@ -94,6 +96,7 @@ const TitleLine = ({
flexDirection: { xs: "column", sm: "row" }, flexDirection: { xs: "column", sm: "row" },
alignItems: { xs: "center", sm: "flex-start" }, alignItems: { xs: "center", sm: "flex-start" },
flexGrow: 1, flexGrow: 1,
maxWidth: percent(100),
})} })}
> >
<Poster <Poster
@ -118,23 +121,23 @@ const TitleLine = ({
flexGrow: 1, flexGrow: 1,
})} })}
> >
<Skeleton <P {...css({
variant="header" textAlign: { xs: "center", sm: "left" },
{...css({ width: rem(15), height: rem(2.5), marginBottom: rem(1) })} color: (theme: Theme) => ({ xs: theme.user.heading, md: theme.heading }),
> })}>
{isLoading || ( <Skeleton
<H1 variant="header"
{...css({ {...css({ width: rem(15), height: rem(2.5), marginBottom: rem(1) })}
fontWeight: { md: "900" }, >
textAlign: { xs: "center", sm: "left" }, {isLoading || (
color: (theme: Theme) => ({ xs: theme.user.heading, md: theme.heading }), <>
})} <H1>{name}</H1>
> {date && <P {...css({ fontSize: rem(2.5) })}> ({date})</P>}
{name} </>
</H1> )}
)} </Skeleton>
</Skeleton> </P>
{(isLoading || date) && ( {(isLoading || tagline) && (
<Skeleton <Skeleton
{...css({ {...css({
width: rem(5), width: rem(5),
@ -153,7 +156,7 @@ const TitleLine = ({
color: (theme: Theme) => ({ xs: theme.user.heading, md: theme.heading }), color: (theme: Theme) => ({ xs: theme.user.heading, md: theme.heading }),
})} })}
> >
{date} {tagline}
</P> </P>
)} )}
</Skeleton> </Skeleton>
@ -337,6 +340,7 @@ export const Header = ({ query, slug }: { query: QueryIdentifier<Show | Movie>;
isLoading={isLoading} isLoading={isLoading}
slug={slug} slug={slug}
name={data?.name} name={data?.name}
tagline={data?.tagline}
date={data ? getDisplayDate(data as any) : undefined} date={data ? getDisplayDate(data as any) : undefined}
poster={data?.poster} poster={data?.poster}
trailerUrl={data?.trailer} trailerUrl={data?.trailer}