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

Use bigger episodes size in the news list

Browse Source
This commit is contained in:
Zoe Roux 2023-10-30 13:40:57 +01:00
parent 42869cb28f
commit 068e153ae9
3 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/packages/ui/src/fetch-infinite.tsx
View File

@ -51,7 +51,7 @@ export const InfiniteFetchList = <Data, Props, _>({
divider?: boolean | ComponentType; divider?: boolean | ComponentType;
Header?: ComponentType<Props & { children: JSX.Element }> | ReactElement; Header?: ComponentType<Props & { children: JSX.Element }> | ReactElement;
headerProps?: Props; headerProps?: Props;
getItemType?: (item: Data, index: number) => string | number; getItemType?: (item: WithLoading<Data>, index: number) => string | number;
fetchMore?: boolean; fetchMore?: boolean;
}): JSX.Element | null => { }): JSX.Element | null => {
const { numColumns, size } = useBreakpointMap(layout); const { numColumns, size } = useBreakpointMap(layout);

2
front/packages/ui/src/fetch-infinite.web.tsx
View File

@ -159,7 +159,7 @@ export const InfiniteFetchList = <Data, _, HeaderProps>({
divider?: boolean | ComponentType; divider?: boolean | ComponentType;
Header?: ComponentType<{ children: JSX.Element } & HeaderProps> | ReactElement; Header?: ComponentType<{ children: JSX.Element } & HeaderProps> | ReactElement;
headerProps: HeaderProps; headerProps: HeaderProps;
getItemType?: (item: Data, index: number) => string | number; getItemType?: (item: WithLoading<Data>, index: number) => string | number;
fetchMore?: boolean; fetchMore?: boolean;
}): JSX.Element | null => { }): JSX.Element | null => {
const oldItems = useRef<Data[] | undefined>(); const oldItems = useRef<Data[] | undefined>();

7
front/packages/ui/src/home/news.tsx
View File

@ -41,6 +41,7 @@ import { EpisodeBox, episodeDisplayNumber } from "../details/episode";
export const NewsList = () => { export const NewsList = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { css } = useYoshiki();
return ( return (
<> <>
@ -48,6 +49,9 @@ export const NewsList = () => {
<InfiniteFetch <InfiniteFetch
query={NewsList.query()} query={NewsList.query()}
layout={{ ...ItemGrid.layout, layout: "horizontal" }} layout={{ ...ItemGrid.layout, layout: "horizontal" }}
getItemType={(x, i) =>
x.kind === NewsKind.Movie || (x.isLoading && i % 2) ? "movie" : "episode"
}
empty={t("home.none")} empty={t("home.none")}
> >
{(x, i) => {(x, i) =>
@ -69,6 +73,9 @@ export const NewsList = () => {
} }
overview={x.name} overview={x.name}
thumbnail={x.thumbnail} thumbnail={x.thumbnail}
// TODO: support this on mobile too
// @ts-expect-error This is a web only property
{...css({ gridColumnEnd: "span 2" })}
/> />
) )
} }