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

Fix collection page padding

Browse Source
This commit is contained in:
Zoe Roux 2023-12-14 12:26:03 +01:00
parent 0fc23e2c86
commit 8b0faf8a0b
2 changed files with 31 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
front/packages/ui/src/collection/index.tsx
View File

@ -39,6 +39,7 @@ import { InfiniteFetch } from "../fetch-infinite";
import { DefaultLayout } from "../layout"; import { DefaultLayout } from "../layout";
import { ItemDetails } from "../home/recommanded"; import { ItemDetails } from "../home/recommanded";
import { SvgWave } from "../details/show"; import { SvgWave } from "../details/show";
import { ItemGrid } from "../browse/grid";
const Header = ({ slug }: { slug: string }) => { const Header = ({ slug }: { slug: string }) => {
const { css } = useYoshiki(); const { css } = useYoshiki();
@ -144,6 +145,7 @@ const query = (slug: string): QueryIdentifier<LibraryItem> => ({
}); });
export const CollectionPage: QueryPage<{ slug: string }> = ({ slug }) => { export const CollectionPage: QueryPage<{ slug: string }> = ({ slug }) => {
const { css } = useYoshiki();
const pageStyle = usePageStyle(); const pageStyle = usePageStyle();
return ( return (
@ -153,7 +155,7 @@ export const CollectionPage: QueryPage<{ slug: string }> = ({ slug }) => {
layout={{ ...ItemDetails.layout, numColumns: { xs: 1, md: 2 } }} layout={{ ...ItemDetails.layout, numColumns: { xs: 1, md: 2 } }}
Header={CollectionHeader} Header={CollectionHeader}
headerProps={{ slug }} headerProps={{ slug }}
contentContainerStyle={pageStyle} contentContainerStyle={{ padding: 0, paddingHorizontal: 0, ...pageStyle }}
> >
{(x) => ( {(x) => (
<ItemDetails <ItemDetails
@ -172,6 +174,7 @@ export const CollectionPage: QueryPage<{ slug: string }> = ({ slug }) => {
unseenEpisodesCount={ unseenEpisodesCount={
x.kind === ItemKind.Show ? x.watchStatus?.unseenEpisodesCount ?? x.episodesCount! : null x.kind === ItemKind.Show ? x.watchStatus?.unseenEpisodesCount ?? x.episodesCount! : null
} }
{...css({ marginX: ItemGrid.layout.gap })}
/> />
)} )}
</InfiniteFetch> </InfiniteFetch>

54
front/packages/ui/src/home/recommanded.tsx
View File

@ -80,38 +80,38 @@ export const ItemDetails = ({
return ( return (
<View <View
{...css({ {...css(
height: ItemDetails.layout.size, {
})} height: ItemDetails.layout.size,
},
props,
)}
> >
<Link <Link
href={href} href={href}
{...css( {...css({
{ position: "absolute",
position: "absolute", top: 0,
top: 0, left: 0,
left: 0, right: 0,
right: 0, bottom: 0,
bottom: 0, flexDirection: "row",
flexDirection: "row", bg: (theme) => theme.variant.background,
bg: (theme) => theme.variant.background, borderRadius: calc(px(imageBorderRadius), "+", ts(0.25)),
borderRadius: calc(px(imageBorderRadius), "+", ts(0.25)), overflow: "hidden",
overflow: "hidden", borderColor: (theme) => theme.background,
borderColor: (theme) => theme.background, borderWidth: ts(0.25),
borderWidth: ts(0.25), borderStyle: "solid",
borderStyle: "solid", fover: {
fover: { self: {
self: { ...focusReset,
...focusReset, borderColor: (theme: Theme) => theme.accent,
borderColor: (theme: Theme) => theme.accent, },
}, title: {
title: { textDecorationLine: "underline",
textDecorationLine: "underline",
},
}, },
}, },
props, })}
)}
> >
<PosterBackground <PosterBackground
src={poster} src={poster}