Fix collection page padding

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

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>

View File

@ -80,14 +80,16 @@ 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,
@ -109,9 +111,7 @@ export const ItemDetails = ({
textDecorationLine: "underline", textDecorationLine: "underline",
}, },
}, },
}, })}
props,
)}
> >
<PosterBackground <PosterBackground
src={poster} src={poster}