Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-24 02:02:36 -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 { ItemDetails } from "../home/recommanded";
import { SvgWave } from "../details/show";
import { ItemGrid } from "../browse/grid";
const Header = ({ slug }: { slug: string }) => {
const { css } = useYoshiki();
@ -144,6 +145,7 @@ const query = (slug: string): QueryIdentifier<LibraryItem> => ({
});
export const CollectionPage: QueryPage<{ slug: string }> = ({ slug }) => {
const { css } = useYoshiki();
const pageStyle = usePageStyle();
return (
@ -153,7 +155,7 @@ export const CollectionPage: QueryPage<{ slug: string }> = ({ slug }) => {
layout={{ ...ItemDetails.layout, numColumns: { xs: 1, md: 2 } }}
Header={CollectionHeader}
headerProps={{ slug }}
contentContainerStyle={pageStyle}
contentContainerStyle={{ padding: 0, paddingHorizontal: 0, ...pageStyle }}
>
{(x) => (
<ItemDetails
@ -172,6 +174,7 @@ export const CollectionPage: QueryPage<{ slug: string }> = ({ slug }) => {
unseenEpisodesCount={
x.kind === ItemKind.Show ? x.watchStatus?.unseenEpisodesCount ?? x.episodesCount! : null
}
{...css({ marginX: ItemGrid.layout.gap })}
/>
)}
</InfiniteFetch>

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

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