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