mirror of
https://github.com/Radiquum/AniX.git
synced 2025-04-06 00:04:39 +00:00
refactor: release page layout
This commit is contained in:
parent
6242b850c2
commit
1990e5434c
GPG key ID:
858E8EE696525EED
4 changed files with 82 additions and 93 deletions
|
|
@ -13,7 +13,7 @@ export const ReleaseInfoBasics = (props: {
|
||||||
const [isFullDescription, setIsFullDescription] = useState(false);
|
const [isFullDescription, setIsFullDescription] = useState(false);
|
||||||
|
|
||||||
return (
|
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">
|
<div className="flex flex-col w-full h-full gap-4 lg:flex-row">
|
||||||
<Image
|
<Image
|
||||||
className="w-[285px] max-h-[385px] object-cover border border-gray-200 rounded-lg shadow-md dark:border-gray-700"
|
className="w-[285px] max-h-[385px] object-cover border border-gray-200 rounded-lg shadow-md dark:border-gray-700"
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,7 @@ export const ReleaseInfoInfo = (props: {
|
||||||
genres: string;
|
genres: string;
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<Card className="h-full">
|
<Card>
|
||||||
<Table>
|
<Table>
|
||||||
<Table.Body>
|
<Table.Body>
|
||||||
<Table.Row>
|
<Table.Row>
|
||||||
|
|
|
||||||
|
|
@ -282,7 +282,7 @@ export const ReleasePlayerCustom = (props: {
|
||||||
}, [episode.selected]);
|
}, [episode.selected]);
|
||||||
|
|
||||||
return (
|
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 ||
|
!voiceover.selected ||
|
||||||
!source.selected ||
|
!source.selected ||
|
||||||
|
|
|
||||||
|
|
@ -71,80 +71,83 @@ export const ReleasePage = (props: any) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="flex flex-col gap-2">
|
||||||
<div className="flex flex-col lg:grid lg:grid-cols-[70%_30%] gap-2 grid-flow-row-dense">
|
<div className="grid grid-cols-1 lg:grid-cols-[70%_30%] gap-2 grid-flow-row-dense">
|
||||||
<div className="[grid-column:1] [grid-row:span_2]">
|
<ReleaseInfoBasics
|
||||||
<ReleaseInfoBasics
|
image={data.release.image}
|
||||||
image={data.release.image}
|
title={{
|
||||||
title={{
|
ru: data.release.title_ru,
|
||||||
ru: data.release.title_ru,
|
original: data.release.title_original,
|
||||||
original: data.release.title_original,
|
}}
|
||||||
}}
|
description={data.release.description}
|
||||||
description={data.release.description}
|
note={data.release.note}
|
||||||
note={data.release.note}
|
release_id={data.release.id}
|
||||||
release_id={data.release.id}
|
/>
|
||||||
/>
|
<ReleaseInfoInfo
|
||||||
</div>
|
country={data.release.country}
|
||||||
<div className="[grid-column:2]">
|
aired_on_date={data.release.aired_on_date}
|
||||||
<ReleaseInfoInfo
|
year={data.release.year}
|
||||||
country={data.release.country}
|
episodes={{
|
||||||
aired_on_date={data.release.aired_on_date}
|
total: data.release.episodes_total,
|
||||||
year={data.release.year}
|
released: data.release.episodes_released,
|
||||||
episodes={{
|
}}
|
||||||
total: data.release.episodes_total,
|
season={data.release.season}
|
||||||
released: data.release.episodes_released,
|
status={data.release.status ? data.release.status.name : "Анонс"}
|
||||||
}}
|
duration={data.release.duration}
|
||||||
season={data.release.season}
|
category={data.release.category.name}
|
||||||
status={data.release.status ? data.release.status.name : "Анонс"}
|
broadcast={data.release.broadcast}
|
||||||
duration={data.release.duration}
|
studio={data.release.studio}
|
||||||
category={data.release.category.name}
|
author={data.release.author}
|
||||||
broadcast={data.release.broadcast}
|
director={data.release.director}
|
||||||
studio={data.release.studio}
|
genres={data.release.genres}
|
||||||
author={data.release.author}
|
/>
|
||||||
director={data.release.director}
|
<ReleaseInfoUserList
|
||||||
genres={data.release.genres}
|
userList={userList}
|
||||||
/>
|
isFavorite={userFavorite}
|
||||||
</div>
|
release_id={data.release.id}
|
||||||
<div className="[grid-column:2]">
|
token={userStore.token}
|
||||||
<ReleaseInfoUserList
|
profile_id={userStore.user ? userStore.user.id : null}
|
||||||
userList={userList}
|
setUserList={setUserList}
|
||||||
isFavorite={userFavorite}
|
setIsFavorite={setUserFavorite}
|
||||||
release_id={data.release.id}
|
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}
|
token={userStore.token}
|
||||||
profile_id={userStore.user ? userStore.user.id : null}
|
comments={data.release.comments}
|
||||||
setUserList={setUserList}
|
|
||||||
setIsFavorite={setUserFavorite}
|
|
||||||
collection_count={data.release.collection_count}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{data.release.status &&
|
<div className="flex flex-col gap-2">
|
||||||
data.release.status.name.toLowerCase() != "анонс" && (
|
{data.release.status &&
|
||||||
<div className="[grid-column:1] [grid-row:span_12]">
|
data.release.status.name.toLowerCase() != "анонс" && (
|
||||||
{preferenceStore.params.experimental.newPlayer ?
|
<div className="[grid-column:2]">
|
||||||
<ReleasePlayerCustom id={props.id} token={userStore.token} />
|
<ReleaseInfoRating
|
||||||
: <ReleasePlayer id={props.id} />}
|
release_id={props.id}
|
||||||
</div>
|
grade={data.release.grade}
|
||||||
)}
|
token={userStore.token}
|
||||||
{data.release.status &&
|
votes={{
|
||||||
data.release.status.name.toLowerCase() != "анонс" && (
|
1: data.release.vote_1_count,
|
||||||
<div className="[grid-column:2]">
|
2: data.release.vote_2_count,
|
||||||
<ReleaseInfoRating
|
3: data.release.vote_3_count,
|
||||||
release_id={props.id}
|
4: data.release.vote_4_count,
|
||||||
grade={data.release.grade}
|
5: data.release.vote_5_count,
|
||||||
token={userStore.token}
|
total: data.release.vote_count,
|
||||||
votes={{
|
user: data.release.your_vote,
|
||||||
1: data.release.vote_1_count,
|
}}
|
||||||
2: data.release.vote_2_count,
|
/>
|
||||||
3: data.release.vote_3_count,
|
</div>
|
||||||
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]">
|
|
||||||
<InfoLists
|
<InfoLists
|
||||||
completed={data.release.completed_count}
|
completed={data.release.completed_count}
|
||||||
planned={data.release.plan_count}
|
planned={data.release.plan_count}
|
||||||
|
|
@ -152,32 +155,18 @@ export const ReleasePage = (props: any) => {
|
||||||
delayed={data.release.hold_on_count}
|
delayed={data.release.hold_on_count}
|
||||||
watching={data.release.watching_count}
|
watching={data.release.watching_count}
|
||||||
/>
|
/>
|
||||||
</div>
|
{data.release.screenshot_images.length > 0 && (
|
||||||
|
|
||||||
{data.release.screenshot_images.length > 0 && (
|
|
||||||
<div className="[grid-column:2] [grid-row:span_11]">
|
|
||||||
<ReleaseInfoScreenshots images={data.release.screenshot_images} />
|
<ReleaseInfoScreenshots images={data.release.screenshot_images} />
|
||||||
</div>
|
)}
|
||||||
)}
|
{data.release.related_releases.length > 0 && (
|
||||||
|
|
||||||
{data.release.related_releases.length > 0 && (
|
|
||||||
<div className="[grid-column:2] [grid-row:span_2]">
|
|
||||||
<ReleaseInfoRelated
|
<ReleaseInfoRelated
|
||||||
release_id={props.id}
|
release_id={props.id}
|
||||||
related={data.release.related}
|
related={data.release.related}
|
||||||
related_releases={data.release.related_releases}
|
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>
|
</div>
|
||||||
</>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue