dominik/homepage-plus
1
0
Fork 0
mirror of https://github.com/DI0IK/homepage-plus.git synced 2025-07-18 18:49:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Enhancement: statusStyle improvements (#2119)

Browse source
This commit is contained in:
shamoon 2023-10-04 22:12:57 -07:00 • committed by GitHub
parent 861ab32ca3
commit 571f627b3b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 100 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/components/services/ping.jsx
View file

@ -7,9 +7,8 @@ export default function Ping({ group, service, style }) {
refreshInterval: 30000
});
let textSize = "text-[8px]";
let colorClass = ""
let backgroundClass = "bg-theme-500/10 dark:bg-theme-900/50";
let backgroundClass = "bg-theme-500/10 dark:bg-theme-900/50 px-1.5 py-0.5";
let statusTitle = "HTTP status";
let statusText;
@ -26,11 +25,7 @@ export default function Ping({ group, service, style }) {
statusTitle += ` ${data.status}`
if (style === "basic") {
statusText = t("docker.offline")
} else if (style === "dot") {
statusText = "◉"
textSize = "text-[14px]"
backgroundClass = ""
statusText = t("ping.down")
} else {
statusText = data.status
}
@ -40,19 +35,21 @@ export default function Ping({ group, service, style }) {
colorClass = "text-emerald-500/80"
if (style === "basic") {
statusText = t("docker.running")
} else if (style === "dot") {
statusText = "◉"
textSize = "text-[14px]"
backgroundClass = ""
statusText = t("ping.up")
} else {
statusText = ping
}
}
if (style === "dot") {
backgroundClass = 'p-3';
colorClass = colorClass.replace('text-', 'bg-').replace(/\/\d\d$/, '');
}
return (
<div className={`w-auto px-1.5 py-0.5 text-center rounded-b-[3px] overflow-hidden ping-status-invalid ${backgroundClass}`} title={statusTitle}>
<div className={`font-bold uppercase ${textSize} ${colorClass}`}>{statusText}</div>
<div className={`w-auto text-center rounded-b-[3px] overflow-hidden ping-status ${backgroundClass}`} title={statusTitle}>
{style !== 'dot' && <div className={`font-bold uppercase text-[8px] ${colorClass}`}>{statusText}</div>}
{style === 'dot' && <div className={`rounded-full h-3 w-3 ${colorClass}`}/>}
</div>
);
}