Skip to content

Commit 3c52ada

Browse files
jaypylesjaypyles
committed
feat: edit styling on dashboard
1 parent bda6356 commit 3c52ada

File tree

17 files changed

+404
-118
lines changed

17 files changed

+404
-118
lines changed

‎src/components/dashboard/controls/global-controls/global-controls.module.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.controls {
2+
position: fixed;
3+
bottom: 1rem;
4+
transform: translateX(-50%);
5+
left: 50%;
6+
z-index: 100;
7+
background-color: var(--paper-opaque-bg);
8+
padding: 0.5rem;
9+
border-radius: 8px;
10+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
11+
backdrop-filter: blur(8px);
12+
}
13+
14+
.controlsGroup {
15+
display: flex;
16+
gap: 0.5rem;
17+
align-items: center;
18+
}
19+
20+
@media (max-width: 768px) {
21+
.controls {
22+
display: none;
23+
}
24+
}

‎src/components/dashboard/controls/global-controls/global-controls.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from "react";
2+
import { SettingsControl } from "../settings/settings-control";
3+
import { BackgroundChanger } from "../background-changer";
4+
import { Files } from "../files";
5+
import classes from "./global-controls.module.css";
6+
7+
export const GlobalControls = () => {
8+
return (
9+
<div className={classes.controls}>
10+
<div className={classes.controlsGroup}>
11+
<SettingsControl />
12+
<BackgroundChanger />
13+
<Files />
14+
</div>
15+
</div>
16+
);
17+
};

‎src/components/dashboard/controls/global-controls/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./global-controls";

‎src/components/dashboard/dashboard.module.css

Lines changed: 31 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,49 @@
11
.server-manager-container {
22
padding: 20px;
3+
max-width: 100%;
34
}
45

56
.servers {
6-
margin-bottom: 1rem;
7-
display: flex;
8-
flex-wrap: wrap;
7+
margin-bottom: 1.5rem;
8+
display: grid;
9+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
910
gap: 1rem;
10-
1111
width: 100%;
12+
13+
height: 18.25rem;
14+
15+
@media (max-width: 768px) {
16+
height: 43rem;
17+
}
1218
}
1319

1420
.overview {
15-
width: 49% !important;
16-
flex-grow: 1;
21+
width: 100% !important;
22+
height: 100%;
23+
transition: all 0.3s ease-in-out;
1724
}
1825

1926
.overview:hover {
20-
background-color: var(--paper-hover-color);
21-
cursor: pointer;
27+
transform: translateY(-2px);
28+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
2229
}
2330

2431
.integrations {
25-
display: flex;
26-
flex-wrap: wrap;
32+
display: grid;
33+
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
2734
gap: 1rem;
35+
width: 100%;
36+
padding: 0.5rem 0;
37+
}
38+
39+
@media (max-width: 768px) {
40+
.integrations {
41+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
42+
gap: 0.75rem;
43+
}
44+
45+
.servers {
46+
grid-template-columns: 1fr;
47+
gap: 0.75rem;
48+
}
2849
}

‎src/components/dashboard/dashboard.tsx

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { useRouter } from "next/router";
77
import { ExternalIntegration } from "@/components/dashboard/widgets/external-integrations/external-integration";
88
import useGetIntegrations from "@/lib/hooks/useGetIntegrations";
99
import { Integration } from "@/components/dashboard/widgets/external-integrations/external-integration.types";
10+
import { GlobalControls } from "./controls/global-controls";
11+
1012
const Dashboard = () => {
1113
const router = useRouter();
1214
const [hosts, setHosts] = useState<string[]>([]);
@@ -21,30 +23,31 @@ const Dashboard = () => {
2123
};
2224

2325
return (
24-
<>
25-
<Container maxWidth="lg" className={classes["server-manager-container"]}>
26-
<div className={classes.servers}>
27-
{hosts.map((host) => (
28-
<HostOverview
29-
key={host}
30-
host={host}
31-
onClick={() => handleClick(host)}
32-
className={classes.overview}
33-
/>
34-
))}
35-
</div>
36-
<div className={classes.integrations}>
37-
{Object.values(integrations).map((integration) => (
38-
<ExternalIntegration
39-
key={integration.name}
40-
integration={integration.name as Integration}
41-
polling={integration.name === "qbittorrent"}
42-
url={integration.url}
43-
/>
44-
))}
45-
</div>
46-
</Container>
47-
</>
26+
<Container maxWidth="md" className={classes["server-manager-container"]}>
27+
<GlobalControls />
28+
29+
<div className={classes.servers}>
30+
{hosts.map((host) => (
31+
<HostOverview
32+
key={host}
33+
host={host}
34+
onClick={() => handleClick(host)}
35+
className={classes.overview}
36+
/>
37+
))}
38+
</div>
39+
40+
<div className={classes.integrations}>
41+
{Object.values(integrations).map((integration) => (
42+
<ExternalIntegration
43+
key={integration.name}
44+
integration={integration.name as Integration}
45+
polling={integration.name === "qbittorrent"}
46+
url={integration.url}
47+
/>
48+
))}
49+
</div>
50+
</Container>
4851
);
4952
};
5053

‎src/components/dashboard/widgets/external-integrations/argocd-integration/argocd-integration.module.css

Lines changed: 86 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,109 @@
1-
.applications {
1+
.applicationsContainer {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 0.75rem;
5+
width: 100%;
6+
margin-top: 0.25rem;
7+
}
8+
9+
.statusSection {
210
display: flex;
3-
flex-direction: row;
11+
flex-direction: column;
12+
gap: 0.25rem;
13+
}
14+
15+
.statusLabel {
16+
font-weight: 600;
17+
color: var(--text-secondary);
18+
text-transform: uppercase;
19+
letter-spacing: 0.5px;
20+
font-size: 0.7rem;
21+
margin-left: 0.25rem;
22+
}
23+
24+
.applications {
25+
display: grid;
26+
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
427
gap: 0.5rem;
28+
width: 100%;
529
}
630

731
.application {
832
background-color: var(--integration-bg-color);
933
padding: 0.5rem;
10-
border-radius: 0.125rem;
11-
12-
text-align: center;
13-
34+
border-radius: 6px;
1435
display: flex;
36+
align-items: center;
37+
justify-content: space-between;
1538
gap: 0.25rem;
39+
transition: all 0.2s ease-in-out;
40+
position: relative;
41+
overflow: hidden;
42+
border: 1px solid transparent;
43+
}
1644

45+
.application:hover {
46+
transform: translateY(-1px);
47+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
48+
}
49+
50+
.applicationName {
51+
font-size: 0.75rem;
52+
font-weight: 500;
53+
color: var(--text-primary);
54+
overflow: hidden;
55+
text-overflow: ellipsis;
56+
white-space: nowrap;
57+
flex: 1;
58+
}
59+
60+
.statusIndicator {
61+
display: flex;
1762
align-items: center;
1863
justify-content: center;
64+
min-width: 20px;
1965
}
2066

21-
.applicationStatus {
22-
font-family: monospace;
23-
padding: 0.125rem;
24-
border-radius: 0.125rem;
67+
.statusDot {
68+
width: 6px;
69+
height: 6px;
70+
border-radius: 50%;
71+
transition: all 0.2s ease-in-out;
2572
}
2673

2774
.synced {
75+
border-color: var(--synced);
76+
}
77+
78+
.synced .statusDot {
2879
background-color: var(--synced);
80+
box-shadow: 0 0 6px var(--synced);
2981
}
3082

3183
.outOfSync {
84+
border-color: var(--outOfSync);
85+
}
86+
87+
.outOfSync .statusDot {
3288
background-color: var(--outOfSync);
89+
box-shadow: 0 0 6px var(--outOfSync);
90+
}
91+
92+
@media (max-width: 768px) {
93+
.applications {
94+
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
95+
gap: 0.4rem;
96+
}
97+
98+
.application {
99+
padding: 0.4rem;
100+
}
101+
102+
.applicationName {
103+
font-size: 0.7rem;
104+
}
105+
106+
.statusLabel {
107+
font-size: 0.65rem;
108+
}
33109
}

0 commit comments

Comments
 (0)