0ct0pu5/homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

ui polish

Browse source
This commit is contained in:
Ben Phelps 2022-09-28 02:32:39 +03:00
parent 68c93c65e6
commit bb5721c473
5 changed files with 48 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/services/widget/block.jsx
View file

@ -1,6 +1,13 @@
import classNames from "classnames";
export default function Block({ value, label }) {
return (
<div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
<div
className={classNames(
"bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1",
value === undefined ? "animate-pulse" : ""
)}
>
<div className="font-thin text-sm">{value === undefined || value === null ? "-" : value}</div>
<div className="font-bold text-xs uppercase">{label}</div>
</div>

16
src/components/widgets/resources/cpu.jsx
View file

@ -25,10 +25,20 @@ export default function Cpu({ expanded }) {
if (!data) {
return (
<div className="flex-none flex flex-row items-center mr-3 py-1.5">
<div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
<FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
<div className="flex flex-col ml-3 text-left min-w-[85px]">
<div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5">-</div>
<div className="pr-1">{t("docker.cpu")}</div>
</div>
{expanded && (
<div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5">-</div>
<div className="pr-1">{t("resources.load")}</div>
</div>
)}
<UsageBar percent={100} />
</div>
</div>
);

16
src/components/widgets/resources/disk.jsx
View file

@ -25,10 +25,20 @@ export default function Disk({ options, expanded }) {
if (!data) {
return (
<div className="flex-none flex flex-row items-center mr-3 py-1.5">
<div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
<FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
<div className="flex flex-col ml-3 text-left min-w-[85px]">
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5">-</div>
<div className="pr-1">{t("resources.free")}</div>
</span>
{expanded && (
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5">-</div>
<div className="pr-1">{t("resources.total")}</div>
</span>
)}
<UsageBar percent={100} />
</div>
</div>
);

16
src/components/widgets/resources/memory.jsx
View file

@ -25,10 +25,20 @@ export default function Memory({ expanded }) {
if (!data) {
return (
<div className="flex-none flex flex-row items-center mr-3 py-1.5">
<div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
<FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
<div className="flex flex-col ml-3 text-left min-w-[85px]">
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5">-</div>
<div className="pr-1">{t("resources.free")}</div>
</span>
{expanded && (
<span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5">-</div>
<div className="pr-1">{t("resources.total")}</div>
</span>
)}
<UsageBar percent={100} />
</div>
</div>
);

2
src/components/widgets/resources/usage-bar.jsx
View file

@ -2,7 +2,7 @@ export default function UsageBar({ percent }) {
return (
<div className="mt-0.5 w-full bg-theme-800/30 rounded-full h-1 dark:bg-theme-200/20">
<div
className="bg-theme-800/70 h-1 rounded-full dark:bg-theme-200/50"
className="bg-theme-800/70 h-1 rounded-full dark:bg-theme-200/50 transition-all duration-1000"
style={{
width: `${percent}%`,
}}