nyne/nysoure
1
0
Fork 0
mirror of https://github.com/wgh136/nysoure.git synced 2025-12-16 15:51:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve characters UI

Browse Source
This commit is contained in:
nyne
2025-11-16 21:23:12 +08:00
parent 5a253b60d0
commit e2c30e5d77
1 changed files with 20 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/pages/resource_details_page.tsx
View File

@@ -2081,6 +2081,11 @@ function GalleryImage({src, nfsw}: {src: string, nfsw: boolean}) {
function Characters({ characters }: { characters: CharacterParams[] }) { function Characters({ characters }: { characters: CharacterParams[] }) {
const { t } = useTranslation(); const { t } = useTranslation();
let main = characters.filter((c) => c.role === "primary");
let other1 = characters.filter((c) => c.role !== "primary" && c.image);
let other2 = characters.filter((c) => c.role !== "primary" && !c.image);
characters = [...main, ...other1, ...other2];
if (!characters || characters.length === 0) { if (!characters || characters.length === 0) {
return <></>; return <></>;
} }
@@ -2088,7 +2093,7 @@ function Characters({ characters }: { characters: CharacterParams[] }) {
return ( return (
<div className="mt-8"> <div className="mt-8">
<h3 className="text-xl font-bold mb-4">{t("Characters")}</h3> <h3 className="text-xl font-bold mb-4">{t("Characters")}</h3>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4"> <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2">
{characters.map((character, index) => ( {characters.map((character, index) => (
<CharacterCard key={index} character={character} /> <CharacterCard key={index} character={character} />
))} ))}
@@ -2099,6 +2104,7 @@ function Characters({ characters }: { characters: CharacterParams[] }) {
function CharacterCard({ character }: { character: CharacterParams }) { function CharacterCard({ character }: { character: CharacterParams }) {
const navigate = useNavigate(); const navigate = useNavigate();
const { t } = useTranslation();
const handleCVClick = (e: React.MouseEvent) => { const handleCVClick = (e: React.MouseEvent) => {
e.stopPropagation(); e.stopPropagation();
@@ -2110,20 +2116,29 @@ function CharacterCard({ character }: { character: CharacterParams }) {
return ( return (
<div className="group relative aspect-[3/4] overflow-hidden rounded-lg bg-base-200 shadow-sm"> <div className="group relative aspect-[3/4] overflow-hidden rounded-lg bg-base-200 shadow-sm">
<img <img
src={network.getImageUrl(character.image)} src={character.image ? network.getImageUrl(character.image) : "/cp.webp"}
alt={character.name} alt={character.name}
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
<div className="absolute bottom-1 left-1 right-1 px-2 py-2 border border-base-100/40 rounded-lg bg-base-100/60"> <div className="absolute bottom-1 left-1 right-1 px-1 py-1 border border-base-100/40 rounded-lg bg-base-100/60">
<h4 className="font-semibold text-sm leading-tight line-clamp border border-transparent px-1"> <h4 className="font-semibold text-sm leading-tight line-clamp border border-transparent">
{character.name} {character.name}
{
character.role === "primary" ? (
<span className="bg-primary/80 rounded-lg px-2 py-0.5 text-primary-content ml-1" style={{
fontSize: "10px",
}}>
Main
</span>
) : null
}
</h4> </h4>
{character.cv && ( {character.cv && (
<button <button
onClick={handleCVClick} onClick={handleCVClick}
className="hover:bg-base-200/80 px-1 border border-transparent hover:border-base-300/50 rounded-sm text-xs transition-colors cursor-pointer" className="hover:bg-base-200/80 border border-transparent hover:border-base-300/50 rounded-sm text-xs transition-colors cursor-pointer"
> >
CV: {character.cv} CV: {character.cv}
</button> </button>