Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-05-01 13:09:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev'

Browse Source
This commit is contained in:
shamoon 2024-12-23 14:01:48 -08:00
commit fbb35d3dc8
9 changed files with 37 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/services/group.jsx
View File

@ -15,6 +15,7 @@ export default function ServicesGroup({
disableCollapse,
useEqualHeights,
groupsInitiallyCollapsed,
isSubgroup,
}) {
const panel = useRef();
@ -22,14 +23,22 @@ export default function ServicesGroup({
if (layout?.initiallyCollapsed ?? groupsInitiallyCollapsed) panel.current.style.height = `0`;
}, [layout, groupsInitiallyCollapsed]);
let groupMargin = layout?.header === false ? "-my-1" : "";
if (isSubgroup && layout?.header === false) groupMargin = "-my-3";
let groupPadding = layout?.header === false ? "px-1" : "p-1";
if (isSubgroup) groupPadding = "";
return (
<div
key={group.name}
className={classNames(
"services-group",
"services-group flex-1",
layout?.style === "row" ? "basis-full" : "basis-full md:basis-1/2 lg:basis-1/3 xl:basis-1/4",
layout?.style !== "row" && fiveColumns ? "3xl:basis-1/5" : "",
layout?.header === false ? "flex-1 px-1 -my-1" : "flex-1 p-1",
groupMargin,
groupPadding,
isSubgroup ? "subgroup" : "",
)}
>
<Disclosure defaultOpen={!(layout?.initiallyCollapsed ?? groupsInitiallyCollapsed) ?? true}>
@ -96,6 +105,7 @@ export default function ServicesGroup({
disableCollapse={disableCollapse}
useEqualHeights={useEqualHeights}
groupsInitiallyCollapsed={groupsInitiallyCollapsed}
isSubgroup
/>
))}
</div>

1
src/pages/index.jsx
View File

@ -297,7 +297,6 @@ function Home({ initialSettings }) {
disableCollapse={settings.disableCollapse}
useEqualHeights={settings.useEqualHeights}
groupsInitiallyCollapsed={settings.groupsInitiallyCollapsed}
bookmarksStyle={settings.bookmarksStyle}
/>
) : (
<BookmarksGroup

4
src/styles/globals.css
View File

@ -63,3 +63,7 @@ dialog ::-webkit-scrollbar {
::-webkit-details-marker {
display: none;
}
.chart + .chart {
margin-top: 2em;
}

2
src/widgets/glances/components/chart.jsx
View File

@ -8,7 +8,7 @@ class Chart extends PureComponent {
const { dataPoints, formatter, label } = this.props;
return (
<div className="absolute -top-1 -left-1 h-[120px] w-[calc(100%+0.5em)] z-0">
<div className="absolute -top-10 -left-2 h-[calc(100%+3em)] w-[calc(100%+1em)] z-0">
<div className="overflow-clip z-10 w-full h-full">
<ResponsiveContainer width="100%" height="100%">
<AreaChart data={dataPoints}>

2
src/widgets/glances/components/chart_dual.jsx
View File

@ -8,7 +8,7 @@ class ChartDual extends PureComponent {
const { dataPoints, formatter, stack, label, stackOffset } = this.props;
return (
<div className="absolute -top-1 -left-1 h-[120px] w-[calc(100%+0.5em)] z-0">
<div className="absolute -top-10 -left-2 h-[calc(100%+3em)] w-[calc(100%+1em)] z-0">
<div className="overflow-clip z-10 w-full h-full">
<ResponsiveContainer width="100%" height="100%">
<AreaChart data={dataPoints} stackOffset={stackOffset ?? "none"}>

4
src/widgets/glances/components/container.jsx
View File

@ -18,9 +18,9 @@ export default function Container({ children, widget, error = null, chart = true
}
return (
<div className={classNames("service-container", chart ? "chart relative h-[120px]" : "")}>
<div className={classNames("service-container", chart ? "chart relative h-[68px]" : "")}>
{children}
<div className={`absolute top-0 right-0 bottom-0 left-0 overflow-clip pointer-events-none ${className}`} />
<div className={`absolute -top-10 right-0 bottom-0 left-0 overflow-clip pointer-events-none ${className}`} />
{chart && <div className="h-[68px] overflow-clip" />}
{!chart && <div className="h-[16px] overflow-clip" />}
</div>

2
src/widgets/glances/metrics/fs.jsx
View File

@ -43,7 +43,7 @@ export default function Component({ service }) {
return (
<Container chart={chart}>
{chart && (
<div className="absolute top-0 left-0 right-0 bottom-0">
<div className="absolute -top-2 -left-2 -right-2 -bottom-2">
<div
style={{
height: `${Math.max(20, fsData.size / fsData.free)}%`,

12
src/widgets/glances/metrics/info.jsx
View File

@ -107,8 +107,12 @@ export default function Component({ service }) {
}
return (
<Container chart={chart} className="bg-gradient-to-br from-theme-500/30 via-theme-600/20 to-theme-700/10">
<Block position="top-3 right-3">
<Container chart={chart}>
{chart && (
<div className="bg-gradient-to-br from-theme-500/30 via-theme-600/20 to-theme-700/10 absolute -top-10 -left-2 -right-2 -bottom-2 h-[calc(100%+3em)] w-[calc(100%+1em)]" />
)}
<Block position="-top-6 right-2">
{quicklookData && quicklookData.cpu_name && chart && (
<div className="text-[0.6rem] opacity-50">{quicklookData.cpu_name}</div>
)}
@ -124,7 +128,7 @@ export default function Component({ service }) {
</Block>
{chart && (
<Block position="bottom-3 left-3">
<Block position="bottom-3 left-2">
{systemData && systemData.linux_distro && <div className="text-xs opacity-50">{systemData.linux_distro}</div>}
{systemData && systemData.os_version && <div className="text-xs opacity-50">{systemData.os_version}</div>}
{systemData && systemData.hostname && <div className="text-xs opacity-75">{systemData.hostname}</div>}
@ -137,7 +141,7 @@ export default function Component({ service }) {
</Block>
)}
<Block position="bottom-3 right-3 w-[4rem]">
<Block position="bottom-3 right-2 w-[4rem]">
{chart && <CPU quicklookData={quicklookData} className="opacity-50" />}
{chart && <Mem quicklookData={quicklookData} className="opacity-50" />}

10
src/widgets/glances/metrics/process.jsx
View File

@ -42,10 +42,16 @@ export default function Component({ service }) {
}
data.splice(chart ? 5 : 1);
let headerYPosition = "top-4";
let listYPosition = "bottom-4";
if (chart) {
headerYPosition = "-top-6";
listYPosition = "-top-3";
}
return (
<Container chart={chart}>
<Block position="top-4 right-3 left-3">
<Block position={`${headerYPosition} right-3 left-3`}>
<div className="flex items-center text-xs">
<div className="grow" />
<div className="w-14 text-right italic">{t("resources.cpu")}</div>
@ -53,7 +59,7 @@ export default function Component({ service }) {
</div>
</Block>
<Block position="bottom-4 right-3 left-3">
<Block position={`${listYPosition} right-3 left-3`}>
<div className="pointer-events-none text-theme-900 dark:text-theme-200">
{data.map((item) => (
<div key={item.pid} className="text-[0.75rem] h-[0.8rem]">