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

Clean up movie's skeleton

Browse Source
This commit is contained in:
Zoe Roux 2022-12-13 15:14:50 +09:00
parent 1b76bbf6c2
commit 8c28df9517
3 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
front/packages/primitives/src/skeleton.tsx
View File

@ -53,7 +53,7 @@ export const Skeleton = ({
children?: JSX.Element | JSX.Element[] | boolean | null; children?: JSX.Element | JSX.Element[] | boolean | null;
show?: boolean; show?: boolean;
lines?: number; lines?: number;
variant?: "text" | "round" | "custom"; variant?: "text" | "header" | "round" | "custom";
}) => { }) => {
const { css, theme } = useYoshiki(); const { css, theme } = useYoshiki();
const [width, setWidth] = useState<number | undefined>(undefined); const [width, setWidth] = useState<number | undefined>(undefined);
@ -69,12 +69,21 @@ export const Skeleton = ({
position: "relative", position: "relative",
}, },
lines === 1 && { overflow: "hidden", borderRadius: px(6) }, lines === 1 && { overflow: "hidden", borderRadius: px(6) },
variant === "text" && (variant === "text" || variant === "header") &&
lines === 1 && { lines === 1 && [
{
width: percent(75), width: percent(75),
height: rem(1.2), height: rem(1.2),
margin: px(2),
},
variant === "text" && {
margin: px(2),
},
variant === "header" && {
marginBottom: rem(0.5), marginBottom: rem(0.5),
}, },
],
variant === "round" && { variant === "round" && {
borderRadius: 9999999, borderRadius: 9999999,
}, },

3
front/packages/primitives/src/themes/theme.tsx
View File

@ -147,6 +147,9 @@ export const ContrastArea = ({
contrastText contrastText
? { ? {
...theme, ...theme,
// Keep the same skeletons, it looks weird otherwise.
overlay0: theme.user.overlay0,
overlay1: theme.user.overlay1,
heading: mode === "light" ? theme.colors.black : theme.colors.white, heading: mode === "light" ? theme.colors.black : theme.colors.white,
paragraph: theme.heading, paragraph: theme.heading,
} }

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

@ -111,7 +111,10 @@ const TitleLine = ({
flexGrow: 1, flexGrow: 1,
})} })}
> >
<Skeleton {...css({ width: rem(15), height: rem(3) })}> <Skeleton
variant="header"
{...css({ width: rem(15), height: rem(2.5), marginBottom: rem(1) })}
>
{isLoading || ( {isLoading || (
<H1 <H1
{...css({ {...css({
@ -129,6 +132,7 @@ const TitleLine = ({
{...css({ {...css({
width: rem(5), width: rem(5),
height: rem(1.5), height: rem(1.5),
marginBottom: rem(0.5),
})} })}
> >
{isLoading || ( {isLoading || (
@ -184,12 +188,13 @@ const TitleLine = ({
> >
<P <P
{...css({ {...css({
color: (theme) => theme.user.paragraph, color: (theme: Theme) => theme.user.paragraph,
display: "flex",
})} })}
> >
{t("show.studio")}:{" "} {t("show.studio")}:{" "}
{isLoading ? ( {isLoading ? (
<Skeleton /> <Skeleton {...css({ width: rem(5) })} />
) : ( ) : (
<A href={`/studio/${studio!.slug}`} {...css({ color: (theme) => theme.user.link })}> <A href={`/studio/${studio!.slug}`} {...css({ color: (theme) => theme.user.link })}>
{studio!.name} {studio!.name}
@ -227,7 +232,7 @@ const Description = ({
<> <>
{i !== 0 && ", "} {i !== 0 && ", "}
{isLoading ? ( {isLoading ? (
<Skeleton key={i} /> <Skeleton key={i} {...css({ width: rem(5) })} />
) : ( ) : (
<A key={genre.slug} href={`/genres/${genre.slug}`}> <A key={genre.slug} href={`/genres/${genre.slug}`}>
{genre.name} {genre.name}