generated from Dicken/dickendock
round57: Scroll-to-top-Button hoeher positioniert, Laufzeit-Anzeige in Einstellungen lesbar formatiert
This commit is contained in:
@@ -26,7 +26,7 @@ export function ScrollToTopButton() {
|
|||||||
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
|
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
|
||||||
title="Nach oben scrollen"
|
title="Nach oben scrollen"
|
||||||
aria-label="Nach oben scrollen"
|
aria-label="Nach oben scrollen"
|
||||||
className="fixed bottom-5 right-5 z-30 flex h-11 w-11 items-center justify-center rounded-full
|
className="fixed bottom-20 right-5 z-30 flex h-11 w-11 items-center justify-center rounded-full
|
||||||
border border-black/10 bg-white/90 text-lg text-black/70 shadow-lg backdrop-blur-md
|
border border-black/10 bg-white/90 text-lg text-black/70 shadow-lg backdrop-blur-md
|
||||||
transition-opacity hover:bg-white dark:border-white/10 dark:bg-neutral-900/90
|
transition-opacity hover:bg-white dark:border-white/10 dark:bg-neutral-900/90
|
||||||
dark:text-white/70 dark:hover:bg-neutral-900"
|
dark:text-white/70 dark:hover:bg-neutral-900"
|
||||||
|
|||||||
@@ -8,6 +8,27 @@ import { useTheme } from "../../hooks/useTheme.js";
|
|||||||
import { useSettings } from "../../hooks/useSettings.js";
|
import { useSettings } from "../../hooks/useSettings.js";
|
||||||
import { AdminPageHeader } from "./AdminPageHeader.js";
|
import { AdminPageHeader } from "./AdminPageHeader.js";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Formatiert eine Sekundenzahl als "Xd Yh Zm Ws" (nur die tatsächlich
|
||||||
|
* relevanten Einheiten, z. B. "3h 12m 5s" ohne führende "0d") - vorher stand
|
||||||
|
* hier die rohe Sekundenzahl ("uptimeSeconds"), z. B. "435822s", was bei
|
||||||
|
* einem Blick in die Einstellungen kaum sinnvoll einzuordnen war.
|
||||||
|
*/
|
||||||
|
function formatUptime(totalSeconds: number): string {
|
||||||
|
const days = Math.floor(totalSeconds / 86400);
|
||||||
|
const hours = Math.floor((totalSeconds % 86400) / 3600);
|
||||||
|
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
||||||
|
const seconds = Math.floor(totalSeconds % 60);
|
||||||
|
|
||||||
|
const parts: string[] = [];
|
||||||
|
if (days > 0) parts.push(`${days}d`);
|
||||||
|
if (days > 0 || hours > 0) parts.push(`${hours}h`);
|
||||||
|
if (days > 0 || hours > 0 || minutes > 0) parts.push(`${minutes}m`);
|
||||||
|
parts.push(`${seconds}s`);
|
||||||
|
|
||||||
|
return parts.join(" ");
|
||||||
|
}
|
||||||
|
|
||||||
function InfoRow({ label, value }: { label: string; value: string }) {
|
function InfoRow({ label, value }: { label: string; value: string }) {
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center justify-between border-b border-black/5 py-3 last:border-0 dark:border-white/5">
|
<div className="flex items-center justify-between border-b border-black/5 py-3 last:border-0 dark:border-white/5">
|
||||||
@@ -489,7 +510,7 @@ export function SettingsPage() {
|
|||||||
<div>
|
<div>
|
||||||
<InfoRow label="Status" value={health.status} />
|
<InfoRow label="Status" value={health.status} />
|
||||||
<InfoRow label="Version" value={health.version} />
|
<InfoRow label="Version" value={health.version} />
|
||||||
<InfoRow label="Läuft seit" value={`${health.uptimeSeconds}s`} />
|
<InfoRow label="Läuft seit" value={formatUptime(health.uptimeSeconds)} />
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<p className="text-sm text-black/40 dark:text-white/40">Lade …</p>
|
<p className="text-sm text-black/40 dark:text-white/40">Lade …</p>
|
||||||
|
|||||||
Reference in New Issue
Block a user