diff --git a/front/packages/primitives/src/utils/breakpoints.ts b/front/packages/primitives/src/utils/breakpoints.ts index 8b3b3261..80d4bae3 100644 --- a/front/packages/primitives/src/utils/breakpoints.ts +++ b/front/packages/primitives/src/utils/breakpoints.ts @@ -24,7 +24,6 @@ import { isBreakpoints } from "yoshiki/dist/utils"; import { breakpoints } from "yoshiki/native"; type AtLeastOne }> = Partial & U[keyof U]; - export type Breakpoint = T | AtLeastOne>; // copied from yoshiki. diff --git a/front/packages/primitives/src/utils/spacing.tsx b/front/packages/primitives/src/utils/spacing.tsx index 4bb95967..ab625686 100644 --- a/front/packages/primitives/src/utils/spacing.tsx +++ b/front/packages/primitives/src/utils/spacing.tsx @@ -18,8 +18,16 @@ * along with Kyoo. If not, see . */ +import { Platform } from "react-native"; import { px } from "yoshiki/native"; export const ts = (spacing: number) => { return px(spacing * 8); }; + +export const focusReset: object = + Platform.OS === "web" + ? { + boxShadow: "unset", + } + : {}; diff --git a/front/packages/ui/src/browse/grid.tsx b/front/packages/ui/src/browse/grid.tsx index 0901610e..1d0a4b13 100644 --- a/front/packages/ui/src/browse/grid.tsx +++ b/front/packages/ui/src/browse/grid.tsx @@ -18,7 +18,7 @@ * along with Kyoo. If not, see . */ -import { Link, Skeleton, Poster, ts, P, SubP } from "@kyoo/primitives"; +import { Link, Skeleton, Poster, ts, focusReset, P, SubP } from "@kyoo/primitives"; import { Platform } from "react-native"; import { percent, px, Stylable, useYoshiki } from "yoshiki/native"; import { Layout, WithLoading } from "../fetch"; @@ -37,7 +37,7 @@ export const ItemGrid = ({ poster?: string | null; }> & Stylable<"text">) => { - const { css } = useYoshiki(); + const { css } = useYoshiki("grid"); return ( theme.appbar, + }, + title: { + textDecorationLine: "underline", + }, + }, }, // We leave no width on native to fill the list's grid. Platform.OS === "web" && { @@ -59,10 +74,16 @@ export const ItemGrid = ({ props, )} > - + {isLoading || ( -

+

{name}

)} diff --git a/front/packages/ui/src/fetch-infinite.tsx b/front/packages/ui/src/fetch-infinite.tsx index 2391cd67..c34fcdb2 100644 --- a/front/packages/ui/src/fetch-infinite.tsx +++ b/front/packages/ui/src/fetch-infinite.tsx @@ -66,9 +66,10 @@ export const InfiniteFetch = ({ return ; } - const placeholders = [ - ...Array(items ? numColumns - (items.length % numColumns) + numColumns : placeholderCount), - ].map((_, i) => ({ id: `gen${i}`, isLoading: true } as Data)); + const count = items ? numColumns - (items.length % numColumns) : placeholderCount; + const placeholders = [...Array(count === 0 ? numColumns : count)].map( + (_, i) => ({ id: `gen${i}`, isLoading: true } as Data), + ); return (