Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-04-06 00:04:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: release page layout

Browse source
This commit is contained in:
Kentai Radiquum 2025-03-22 18:51:31 +05:00
parent 6242b850c2
commit 1990e5434c
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
4 changed files with 82 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/components/ReleaseInfo/ReleaseInfo.Basics.tsx
View file

@ -13,7 +13,7 @@ export const ReleaseInfoBasics = (props: {
const [isFullDescription, setIsFullDescription] = useState(false);
return (
<Card className="h-full">
<Card className="h-full row-span-2">
<div className="flex flex-col w-full h-full gap-4 lg:flex-row">
<Image
className="w-[285px] max-h-[385px] object-cover border border-gray-200 rounded-lg shadow-md dark:border-gray-700"

2
app/components/ReleaseInfo/ReleaseInfo.Info.tsx
View file

@ -28,7 +28,7 @@ export const ReleaseInfoInfo = (props: {
genres: string;
}) => {
return (
<Card className="h-full">
<Card>
<Table>
<Table.Body>
<Table.Row>

2
app/components/ReleasePlayer/ReleasePlayerCustom.tsx
View file

@ -282,7 +282,7 @@ export const ReleasePlayerCustom = (props: {
}, [episode.selected]);
return (
<Card className="h-full">
<Card className="aspect-video min-h-min-h-[300px] sm:min-h-[466px] md:min-h-[540px] lg:min-h-[512px] xl:min-h-[608px] 2xl:min-h-[712px]">
{(
!voiceover.selected ||
!source.selected ||

39
app/pages/Release.tsx
View file

@ -71,9 +71,8 @@ export const ReleasePage = (props: any) => {
}
return (
<>
<div className="flex flex-col lg:grid lg:grid-cols-[70%_30%] gap-2 grid-flow-row-dense">
<div className="[grid-column:1] [grid-row:span_2]">
<div className="flex flex-col gap-2">
<div className="grid grid-cols-1 lg:grid-cols-[70%_30%] gap-2 grid-flow-row-dense">
<ReleaseInfoBasics
image={data.release.image}
title={{
@ -84,8 +83,6 @@ export const ReleasePage = (props: any) => {
note={data.release.note}
release_id={data.release.id}
/>
</div>
<div className="[grid-column:2]">
<ReleaseInfoInfo
country={data.release.country}
aired_on_date={data.release.aired_on_date}
@ -104,8 +101,6 @@ export const ReleasePage = (props: any) => {
director={data.release.director}
genres={data.release.genres}
/>
</div>
<div className="[grid-column:2]">
<ReleaseInfoUserList
userList={userList}
isFavorite={userFavorite}
@ -117,14 +112,23 @@ export const ReleasePage = (props: any) => {
collection_count={data.release.collection_count}
/>
</div>
<div className="grid grid-cols-1 lg:grid-cols-[70%_30%] gap-2 grid-flow-row-dense">
<div className="flex flex-col gap-2">
{data.release.status &&
data.release.status.name.toLowerCase() != "анонс" && (
<div className="[grid-column:1] [grid-row:span_12]">
<>
{preferenceStore.params.experimental.newPlayer ?
<ReleasePlayerCustom id={props.id} token={userStore.token} />
: <ReleasePlayer id={props.id} />}
</div>
</>
)}
<CommentsMain
release_id={props.id}
token={userStore.token}
comments={data.release.comments}
/>
</div>
<div className="flex flex-col gap-2">
{data.release.status &&
data.release.status.name.toLowerCase() != "анонс" && (
<div className="[grid-column:2]">
@ -144,7 +148,6 @@ export const ReleasePage = (props: any) => {
/>
</div>
)}
<div className="[grid-column:2] [grid-row:span_4]">
<InfoLists
completed={data.release.completed_count}
planned={data.release.plan_count}
@ -152,32 +155,18 @@ export const ReleasePage = (props: any) => {
delayed={data.release.hold_on_count}
watching={data.release.watching_count}
/>
</div>
{data.release.screenshot_images.length > 0 && (
<div className="[grid-column:2] [grid-row:span_11]">
<ReleaseInfoScreenshots images={data.release.screenshot_images} />
</div>
)}
{data.release.related_releases.length > 0 && (
<div className="[grid-column:2] [grid-row:span_2]">
<ReleaseInfoRelated
release_id={props.id}
related={data.release.related}
related_releases={data.release.related_releases}
/>
</div>
)}
<div className="[grid-column:1] [grid-row:span_32]">
<CommentsMain
release_id={props.id}
token={userStore.token}
comments={data.release.comments}
/>
</div>
</div>
</>
</div>
);
};