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

Clean up episode list skeleton

Browse Source
This commit is contained in:
Zoe Roux 2022-12-16 12:58:47 +09:00
parent 1ee955fbfe
commit eabf5e1faf
3 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,7 +22,7 @@ import { LinearGradient as LG } from "expo-linear-gradient";
import { AnimatePresence, motify, MotiView } from "moti"; import { AnimatePresence, motify, MotiView } from "moti";
import { useState } from "react"; import { useState } from "react";
import { Platform, View, ViewProps } from "react-native"; import { Platform, View, ViewProps } from "react-native";
import { px, rem, useYoshiki, percent } from "yoshiki/native"; import { px, rem, useYoshiki, percent, em } from "yoshiki/native";
import { hiddenIfNoJs } from "./utils/nojs"; import { hiddenIfNoJs } from "./utils/nojs";
const LinearGradient = motify(LG)(); const LinearGradient = motify(LG)();
@ -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" | "header" | "round" | "custom" | "fill"; variant?: "text" | "header" | "round" | "custom" | "fill" | "filltext";
}) => { }) => {
const { css, theme } = useYoshiki(); const { css, theme } = useYoshiki();
const [width, setWidth] = useState<number | undefined>(undefined); const [width, setWidth] = useState<number | undefined>(undefined);
@ -91,6 +91,10 @@ export const Skeleton = ({
width: percent(100), width: percent(100),
height: percent(100), height: percent(100),
}, },
variant === "filltext" && {
width: percent(100),
height: em(1),
},
], ],
props, props,
)} )}

4
front/packages/ui/src/details/episode.tsx
View File

@ -90,8 +90,8 @@ export const EpisodeLine = ({
props, props,
)} )}
> >
<P {...css({ width: rem(4), flexShrink: 0, m: ts(1) })}> <P {...css({ width: rem(4), flexShrink: 0, m: ts(1), textAlign: "center" })}>
{isLoading ? <Skeleton variant="fill" /> : displayNumber} {isLoading ? <Skeleton variant="filltext" /> : displayNumber}
</P> </P>
<Image <Image
src={thumbnail} src={thumbnail}

4
front/packages/ui/src/details/season.tsx
View File

@ -19,7 +19,7 @@
*/ */
import { Episode, EpisodeP, QueryIdentifier, Season } from "@kyoo/models"; import { Episode, EpisodeP, QueryIdentifier, Season } from "@kyoo/models";
import { Container, SwitchVariant } from "@kyoo/primitives"; import { Container, SwitchVariant, ts } from "@kyoo/primitives";
import Svg, { SvgProps, Path } from "react-native-svg"; import Svg, { SvgProps, Path } from "react-native-svg";
import { Stylable } from "yoshiki/native"; import { Stylable } from "yoshiki/native";
import { View } from "react-native"; import { View } from "react-native";
@ -73,7 +73,7 @@ export const SeasonTab = ({
<SwitchVariant> <SwitchVariant>
{({ css, theme }) => ( {({ css, theme }) => (
<View> <View>
<SvgWave fill={theme.background} /> <SvgWave fill={theme.background} {...css({ marginTop: { xs: ts(2), md: 0 } })} />
<View {...css({ bg: (theme) => theme.background }, props)}> <View {...css({ bg: (theme) => theme.background }, props)}>
<Container> <Container>
{/* <Tabs value={season} onChange={(_, i) => setSeason(i)} aria-label="List of seasons"> */} {/* <Tabs value={season} onChange={(_, i) => setSeason(i)} aria-label="List of seasons"> */}