root/nezha_dash
1
0
Fork 0
mirror of https://github.com/hamster1963/nezha-dash.git synced 2025-04-24 21:10:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: better inline card

Browse Source
This commit is contained in:
hamster1963 2024-12-01 19:05:08 +08:00
parent 6980b6e6e8
commit 70038f9044
3 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/(main)/ClientComponents/ServerDetailClient.tsx
View File

@ -209,7 +209,9 @@ export default function ServerDetailClient({
{data.status.Load1} / {data.status.Load5} /{" "} {data.status.Load1} / {data.status.Load5} /{" "}
{data.status.Load15} {data.status.Load15}
</div> </div>
) : <div className="text-xs">Unknown</div>} ) : (
<div className="text-xs">Unknown</div>
)}
</section> </section>
</CardContent> </CardContent>
</Card> </Card>
@ -222,7 +224,9 @@ export default function ServerDetailClient({
{" "} {" "}
{formatBytes(data.status.NetOutTransfer)}{" "} {formatBytes(data.status.NetOutTransfer)}{" "}
</div> </div>
) : <div className="text-xs">Unknown</div>} ) : (
<div className="text-xs">Unknown</div>
)}
</section> </section>
</CardContent> </CardContent>
</Card> </Card>
@ -235,7 +239,9 @@ export default function ServerDetailClient({
{" "} {" "}
{formatBytes(data.status.NetInTransfer)}{" "} {formatBytes(data.status.NetInTransfer)}{" "}
</div> </div>
) : <div className="text-xs">Unknown</div>} ) : (
<div className="text-xs">Unknown</div>
)}
</section> </section>
</CardContent> </CardContent>
</Card> </Card>

2
app/(main)/ClientComponents/ServerListClient.tsx
View File

@ -162,7 +162,7 @@ export default function ServerListClient() {
{inline === "1" && ( {inline === "1" && (
<section <section
ref={containerRef} ref={containerRef}
className="flex flex-col gap-2 overflow-x-scroll" className="flex flex-col gap-2 overflow-x-scroll scrollbar-hidden"
> >
{filteredServers.map((serverInfo) => ( {filteredServers.map((serverInfo) => (
<ServerCardInline key={serverInfo.id} serverInfo={serverInfo} /> <ServerCardInline key={serverInfo.id} serverInfo={serverInfo} />

10
components/ServerCardInline.tsx
View File

@ -79,7 +79,7 @@ export default function ServerCardInline({
</div> </div>
</div> </div>
</div> </div>
<div className={"flex w-14 flex-col"}> <div className={"flex w-20 flex-col"}>
<p className="text-xs text-muted-foreground">{t("Uptime")}</p> <p className="text-xs text-muted-foreground">{t("Uptime")}</p>
<div className="flex items-center text-xs font-semibold"> <div className="flex items-center text-xs font-semibold">
{(serverInfo?.status.Uptime / 86400).toFixed(0)} {"Days"} {(serverInfo?.status.Uptime / 86400).toFixed(0)} {"Days"}
@ -106,7 +106,7 @@ export default function ServerCardInline({
</div> </div>
<ServerUsageBar value={stg} /> <ServerUsageBar value={stg} />
</div> </div>
<div className={"flex w-14 flex-col"}> <div className={"flex w-16 flex-col"}>
<p className="text-xs text-muted-foreground">{t("Upload")}</p> <p className="text-xs text-muted-foreground">{t("Upload")}</p>
<div className="flex items-center text-xs font-semibold"> <div className="flex items-center text-xs font-semibold">
{up >= 1024 {up >= 1024
@ -114,7 +114,7 @@ export default function ServerCardInline({
: `${up.toFixed(2)}M/s`} : `${up.toFixed(2)}M/s`}
</div> </div>
</div> </div>
<div className={"flex w-14 flex-col"}> <div className={"flex w-16 flex-col"}>
<p className="text-xs text-muted-foreground">{t("Download")}</p> <p className="text-xs text-muted-foreground">{t("Download")}</p>
<div className="flex items-center text-xs font-semibold"> <div className="flex items-center text-xs font-semibold">
{down >= 1024 {down >= 1024
@ -122,7 +122,7 @@ export default function ServerCardInline({
: `${down.toFixed(2)}M/s`} : `${down.toFixed(2)}M/s`}
</div> </div>
</div> </div>
<div className={"flex flex-col"}> <div className={"flex w-20 flex-col"}>
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
{t("TotalUpload")} {t("TotalUpload")}
</p> </p>
@ -130,7 +130,7 @@ export default function ServerCardInline({
{formatBytes(serverInfo.status.NetOutTransfer)} {formatBytes(serverInfo.status.NetOutTransfer)}
</div> </div>
</div> </div>
<div className={"flex flex-col"}> <div className={"flex w-20 flex-col"}>
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
{t("TotalDownload")} {t("TotalDownload")}
</p> </p>