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

style: update rating style

Browse source
This commit is contained in:
Kentai Radiquum 2024-07-31 16:20:01 +05:00
parent 3f7b7a55a8
commit c2c3a95e6c
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
2 changed files with 82 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -107,7 +107,7 @@ export const ReleasePlayer = (props: { id: number }) => {
return ( return (
<Card> <Card>
{!voiceoverInfo || !sourcesInfo || !episodeInfo ? ( {!voiceoverInfo || !sourcesInfo || !episodeInfo ? (
<div className="flex items-center justify-center w-full h-[757px]"> <div className="flex items-center justify-center w-full aspect-[16/12]">
<Spinner /> <Spinner />
</div> </div>
) : ( ) : (

128
app/pages/Release.tsx
View file

@ -5,7 +5,15 @@ import { Spinner } from "#/components/Spinner/Spinner";
const fetcher = (...args: any) => const fetcher = (...args: any) =>
fetch([...args] as any).then((res) => res.json()); fetch([...args] as any).then((res) => res.json());
import { useUserStore } from "#/store/auth"; import { useUserStore } from "#/store/auth";
import { Card, Dropdown, Button, Carousel, Rating } from "flowbite-react"; import {
Card,
Dropdown,
Button,
Carousel,
Rating,
Flowbite,
CustomFlowbiteTheme,
} from "flowbite-react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { import {
unixToDate, unixToDate,
@ -49,6 +57,14 @@ const DropdownTheme = {
}, },
}; };
const RatingTheme: CustomFlowbiteTheme = {
ratingAdvanced: {
progress: {
base: "mx-4 h-5 w-3/4 rounded bg-gray-200 dark:bg-gray-700",
},
},
};
export const ReleasePage = (props: any) => { export const ReleasePage = (props: any) => {
const token = useUserStore((state) => state.token); const token = useUserStore((state) => state.token);
const [userList, setUserList] = useState(0); const [userList, setUserList] = useState(0);
@ -316,7 +332,7 @@ export const ReleasePage = (props: any) => {
)} )}
{data.release.status.name.toLowerCase() != "анонс" && ( {data.release.status.name.toLowerCase() != "анонс" && (
<Card> <Card>
<div className="flex items-center gap-2"> <div className="flex flex-col gap-2 lg:items-center lg:flex-row">
<Rating> <Rating>
<Rating.Star /> <Rating.Star />
<Rating.Star /> <Rating.Star />
@ -329,17 +345,28 @@ export const ReleasePage = (props: any) => {
</Rating> </Rating>
{token && ( {token && (
<> <>
<span className="mx-1.5 h-1 w-1 rounded-full bg-gray-500 dark:bg-gray-400" /> <span className="mx-1.5 h-1 w-1 rounded-full bg-gray-500 dark:bg-gray-400 hidden lg:block" />
{data.release.your_vote ? ( {data.release.your_vote ? (
<> <div className="flex items-center gap-2">
<p className="text-sm font-medium text-gray-500 dark:text-gray-400"> <p className="text-sm font-medium text-gray-500 dark:text-gray-400">
ваша оценка: {data.release.your_vote} ваша оценка: {data.release.your_vote}
</p> </p>
{/* <p>Изменить</p> */} <Button
</> size={"xs"}
className="text-gray-500 border border-gray-600 rounded-full"
color="inline"
>
изменить
</Button>
</div>
) : ( ) : (
"" <Button
// <p>Оценить</p> size={"xs"}
className="text-gray-500 border border-gray-600 rounded-full"
color="inline"
>
оценить
</Button>
)} )}
</> </>
)} )}
@ -353,45 +380,52 @@ export const ReleasePage = (props: any) => {
"голосов" "голосов"
)} )}
</p> </p>
<Rating.Advanced <Flowbite theme={{ theme: RatingTheme }}>
percentFilled={Math.floor( <Rating.Advanced
(data.release.vote_5_count / data.release.vote_count) * 100 percentFilled={Math.floor(
)} (data.release.vote_5_count / data.release.vote_count) *
className="mb-2" 100
> )}
5 className="mb-2"
</Rating.Advanced> >
<Rating.Advanced 5
percentFilled={Math.floor( </Rating.Advanced>
(data.release.vote_4_count / data.release.vote_count) * 100 <Rating.Advanced
)} percentFilled={Math.floor(
className="mb-2" (data.release.vote_4_count / data.release.vote_count) *
> 100
4 )}
</Rating.Advanced> className="mb-2"
<Rating.Advanced >
percentFilled={Math.floor( 4
(data.release.vote_3_count / data.release.vote_count) * 100 </Rating.Advanced>
)} <Rating.Advanced
className="mb-2" percentFilled={Math.floor(
> (data.release.vote_3_count / data.release.vote_count) *
3 100
</Rating.Advanced> )}
<Rating.Advanced className="mb-2"
percentFilled={Math.floor( >
(data.release.vote_2_count / data.release.vote_count) * 100 3
)} </Rating.Advanced>
className="mb-2" <Rating.Advanced
> percentFilled={Math.floor(
2 (data.release.vote_2_count / data.release.vote_count) *
</Rating.Advanced> 100
<Rating.Advanced )}
percentFilled={Math.floor( className="mb-2"
(data.release.vote_1_count / data.release.vote_count) * 100 >
)} 2
> </Rating.Advanced>
1 <Rating.Advanced
</Rating.Advanced> percentFilled={Math.floor(
(data.release.vote_1_count / data.release.vote_count) *
100
)}
>
1
</Rating.Advanced>
</Flowbite>
</Card> </Card>
)} )}
</div> </div>