astral/api
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fix up list page layout

Browse Source
This commit is contained in:
dmgnr
2026-05-06 05:29:47 +07:00 Unverified
parent 0376a90461
commit 943d9fc3a8
2 changed files with 21 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/v1/list.tsx
+20 -18
View File
@@ -27,10 +27,10 @@ export async function ListPage(
> >
{/* profile */} {/* profile */}
<div tw="flex gap-[1em] relative"> <div tw="flex gap-[1em] relative">
<div tw="absolute -top-1 -left-1 -bottom-1 -right-1 overflow-hidden rounded-[.3em] opacity-50"> <div tw="flex absolute -top-1 -left-1 -bottom-1 -right-1 overflow-hidden rounded-[.3em] opacity-50">
<img src="/namecard" alt="namecard" tw="object-cover" /> <img src="/namecard" alt="namecard" tw="object-cover" />
</div> </div>
<div tw="overflow-hidden rounded-[.7em] bg-black/25 shrink-0"> <div tw="flex overflow-hidden rounded-[.7em] bg-black/25 shrink-0">
<img <img
src="/pfp" src="/pfp"
alt="pfp" alt="pfp"
@@ -38,7 +38,7 @@ export async function ListPage(
/> />
</div> </div>
<div tw="flex flex-col justify-evenly py-[.5em] min-w-0"> <div tw="flex flex-col justify-evenly py-[.5em] min-w-0">
<div tw="text-[1.4em] font-[ShinShin]">{p.nickname}</div> <div tw="flex text-[1.4em] font-[ShinShin]">{p.nickname}</div>
<div tw="flex items-center gap-[.4em] opacity-70 font-bold text-[1.2em] tracking-widest"> <div tw="flex items-center gap-[.4em] opacity-70 font-bold text-[1.2em] tracking-widest">
AR {p.level} AR {p.level}
<svg <svg
@@ -53,18 +53,18 @@ export async function ListPage(
WL {p.worldLevel} WL {p.worldLevel}
</div> </div>
<div tw="grow"> <div tw="grow">
<div tw="opacity-70 pt-[.5em] text-[1.1em] leading-none"> <div tw="flex opacity-70 pt-[.5em] text-[1.1em] leading-none">
{p.signature} {p.signature}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div tw="pt-[.2em]"> <div tw="flex pt-[.2em]">
<div tw="opacity-50">UID</div> <div tw="flex opacity-50">UID</div>
{`: ${uid}`} {`: ${uid}`}
</div> </div>
<div tw="text-[1.2em] p-[.7em]"> <div tw="flex text-[1.2em] p-[.7em]">
<div tw="grid grid-cols-[2em_1fr_1.25fr] gap-y-[1em]"> <div tw="grid grid-cols-[2em_1fr_1.25fr] gap-y-[.25em]">
<img tw="aspect-square h-[2em]" src="/i/achi" alt="achievements" /> <img tw="aspect-square h-[2em]" src="/i/achi" alt="achievements" />
<div tw="flex items-center font-[ShinShin]"> <div tw="flex items-center font-[ShinShin]">
{p.finishAchievementNum} {p.finishAchievementNum}
@@ -115,11 +115,11 @@ export async function ListPage(
</div> </div>
</div> </div>
</div> </div>
{/* character list (for some reason ________ absolute hates me) */} {/* character list (for some reason ________ absolute hates me) */}
<div tw="absolute top-0 right-0 w-[62.5%] h-[97vh]"> <div tw="flex absolute top-0 right-0 w-[62.5%] h-[97vh]">
<div tw="flex relative flex-wrap gap-x-[1.25%] gap-y-[0.75%] p-[.5em] w-full h-full"> <div tw="relative grid grid-cols-2 gap-x-[1.25%] gap-y-[0.75%] p-[.5em] w-full h-full">
{p.showAvatarInfoList.map((a) => ( {p.showAvatarInfoList.map((a) => (
<div tw="w-[49.625%] h-[16.04166667%] bg-black/50 relative overflow-hidden rounded-lg flex"> <div tw=" bg-black/50 relative overflow-hidden rounded-lg flex">
<img <img
src={`/namecard/${a.avatar.avatarId}`} src={`/namecard/${a.avatar.avatarId}`}
alt="namecard" alt="namecard"
@@ -138,20 +138,22 @@ export async function ListPage(
<div tw="ml-[22.5%] flex"> <div tw="ml-[22.5%] flex">
<hr tw="border-none h-[90%] w-px mt-[5%] bg-white/60" /> <hr tw="border-none h-[90%] w-px mt-[5%] bg-white/60" />
<div tw="p-[.25em] font-[ShinShin] flex flex-col grow"> <div tw="p-[.25em] font-[ShinShin] flex flex-col grow">
<div>{a.avatar.name}</div> <div tw="flex">{a.avatar.name}</div>
<div> <div tw="flex">
{locs.level} {a.level} {locs.level} {a.level}
</div> </div>
</div> </div>
</div> </div>
<div tw="absolute bottom-0 right-0 leading-none p-[.2em] pb-[.3em] pr-[.45em] rounded-tl-md bg-black/50"> <div tw="flex absolute bottom-0 right-0 leading-none p-[.2em] pb-[.3em] pr-[.45em] rounded-tl-md bg-black/50">
<div tw="opacity-0 whitespace-pre">00000000/00 </div> <div tw="flex opacity-0 whitespace-pre">00000000/00 </div>
<div tw="absolute"> <div tw="flex absolute">
{uid {uid
.slice(-7) .slice(-7)
.split("") .split("")
.map((c, i) => ( .map((c, i) => (
<div style={{ opacity: i / 5 }}>{c}</div> <div tw="flex" style={{ opacity: i / 5 }}>
{c}
</div>
))} ))}
/{`${a.avatar.avatarId}`.match(/^10*(\d+)/)?.[1]} /{`${a.avatar.avatarId}`.match(/^10*(\d+)/)?.[1]}
</div> </div>
src/v1/response.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ export async function CardResponse(
</div> </div>
<div tw="flex flex-col"> <div tw="flex flex-col">
<div tw="leading-none text-white/75">Powered By</div> <div tw="leading-none text-white/75">Powered By</div>
<div tw="text-[1.5em] leading-[.8]">Enka.Network</div> <div tw="text-[1.3em] leading-[1] font-[ShinShin]">Enka.Network</div>
</div> </div>
</div> </div>
</div>, </div>,