From 1990e5434c05d088a1519c502638722d158c13e1 Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Sat, 22 Mar 2025 18:51:31 +0500
Subject: [PATCH] refactor: release page layout
---
.../ReleaseInfo/ReleaseInfo.Basics.tsx | 2 +-
.../ReleaseInfo/ReleaseInfo.Info.tsx | 2 +-
.../ReleasePlayer/ReleasePlayerCustom.tsx | 2 +-
app/pages/Release.tsx | 169 ++++++++----------
4 files changed, 82 insertions(+), 93 deletions(-)
diff --git a/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx b/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx
index 50fdd5b..c23cf4f 100644
--- a/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx
@@ -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"
diff --git a/app/components/ReleaseInfo/ReleaseInfo.Info.tsx b/app/components/ReleaseInfo/ReleaseInfo.Info.tsx
index ab58da7..ae0219e 100644
--- a/app/components/ReleaseInfo/ReleaseInfo.Info.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.Info.tsx
@@ -28,7 +28,7 @@ export const ReleaseInfoInfo = (props: {
genres: string;
}) => {
return (
- <Card className="h-full">
+ <Card>
<Table>
<Table.Body>
<Table.Row>
diff --git a/app/components/ReleasePlayer/ReleasePlayerCustom.tsx b/app/components/ReleasePlayer/ReleasePlayerCustom.tsx
index 4fea4ee..9e89055 100644
--- a/app/components/ReleasePlayer/ReleasePlayerCustom.tsx
+++ b/app/components/ReleasePlayer/ReleasePlayerCustom.tsx
@@ -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 ||
diff --git a/app/pages/Release.tsx b/app/pages/Release.tsx
index c29864f..581e7f6 100644
--- a/app/pages/Release.tsx
+++ b/app/pages/Release.tsx
@@ -71,80 +71,83 @@ 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]">
- <ReleaseInfoBasics
- image={data.release.image}
- title={{
- ru: data.release.title_ru,
- original: data.release.title_original,
- }}
- description={data.release.description}
- 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}
- year={data.release.year}
- episodes={{
- total: data.release.episodes_total,
- released: data.release.episodes_released,
- }}
- season={data.release.season}
- status={data.release.status ? data.release.status.name : "Анонс"}
- duration={data.release.duration}
- category={data.release.category.name}
- broadcast={data.release.broadcast}
- studio={data.release.studio}
- author={data.release.author}
- director={data.release.director}
- genres={data.release.genres}
- />
- </div>
- <div className="[grid-column:2]">
- <ReleaseInfoUserList
- userList={userList}
- isFavorite={userFavorite}
- release_id={data.release.id}
+ <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={{
+ ru: data.release.title_ru,
+ original: data.release.title_original,
+ }}
+ description={data.release.description}
+ note={data.release.note}
+ release_id={data.release.id}
+ />
+ <ReleaseInfoInfo
+ country={data.release.country}
+ aired_on_date={data.release.aired_on_date}
+ year={data.release.year}
+ episodes={{
+ total: data.release.episodes_total,
+ released: data.release.episodes_released,
+ }}
+ season={data.release.season}
+ status={data.release.status ? data.release.status.name : "Анонс"}
+ duration={data.release.duration}
+ category={data.release.category.name}
+ broadcast={data.release.broadcast}
+ studio={data.release.studio}
+ author={data.release.author}
+ director={data.release.director}
+ genres={data.release.genres}
+ />
+ <ReleaseInfoUserList
+ userList={userList}
+ isFavorite={userFavorite}
+ release_id={data.release.id}
+ token={userStore.token}
+ profile_id={userStore.user ? userStore.user.id : null}
+ setUserList={setUserList}
+ setIsFavorite={setUserFavorite}
+ 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() != "анонс" && (
+ <>
+ {preferenceStore.params.experimental.newPlayer ?
+ <ReleasePlayerCustom id={props.id} token={userStore.token} />
+ : <ReleasePlayer id={props.id} />}
+ </>
+ )}
+ <CommentsMain
+ release_id={props.id}
token={userStore.token}
- profile_id={userStore.user ? userStore.user.id : null}
- setUserList={setUserList}
- setIsFavorite={setUserFavorite}
- collection_count={data.release.collection_count}
+ comments={data.release.comments}
/>
</div>
- {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>
- )}
- {data.release.status &&
- data.release.status.name.toLowerCase() != "анонс" && (
- <div className="[grid-column:2]">
- <ReleaseInfoRating
- release_id={props.id}
- grade={data.release.grade}
- token={userStore.token}
- votes={{
- 1: data.release.vote_1_count,
- 2: data.release.vote_2_count,
- 3: data.release.vote_3_count,
- 4: data.release.vote_4_count,
- 5: data.release.vote_5_count,
- total: data.release.vote_count,
- user: data.release.your_vote,
- }}
- />
- </div>
- )}
- <div className="[grid-column:2] [grid-row:span_4]">
+ <div className="flex flex-col gap-2">
+ {data.release.status &&
+ data.release.status.name.toLowerCase() != "анонс" && (
+ <div className="[grid-column:2]">
+ <ReleaseInfoRating
+ release_id={props.id}
+ grade={data.release.grade}
+ token={userStore.token}
+ votes={{
+ 1: data.release.vote_1_count,
+ 2: data.release.vote_2_count,
+ 3: data.release.vote_3_count,
+ 4: data.release.vote_4_count,
+ 5: data.release.vote_5_count,
+ total: data.release.vote_count,
+ user: data.release.your_vote,
+ }}
+ />
+ </div>
+ )}
<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]">
+ {data.release.screenshot_images.length > 0 && (
<ReleaseInfoScreenshots images={data.release.screenshot_images} />
- </div>
- )}
-
- {data.release.related_releases.length > 0 && (
- <div className="[grid-column:2] [grid-row:span_2]">
+ )}
+ {data.release.related_releases.length > 0 && (
<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>
);
};