Skip to content

Commit a110610

Browse files
MarkHersheyMarkHershey
committed
Refactor CSS for improved responsiveness and update Display components for better utilization metrics; adjust layout and styling in MachineCard and SingleIP components.
1 parent 914afec commit a110610

7 files changed

Lines changed: 154 additions & 104 deletions

File tree

‎mxstatus/src/App.css‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464

6565
/* Custom Container */
6666
.hacker-container {
67-
max-width: 1200px;
67+
max-width: 1400px;
6868
margin: 0 auto;
6969
padding: 0 0.75rem;
7070
transition: var(--hacker-transition);
@@ -258,30 +258,40 @@
258258
display: grid;
259259
gap: 0.75rem;
260260
grid-template-columns: 1fr;
261+
max-width: 1400px;
262+
margin: 0 auto;
261263
}
262264

263-
@media (min-width: 768px) {
265+
@media (max-width: 360px) {
264266
.gpu-section {
265-
grid-template-columns: repeat(2, 1fr);
267+
gap: 0.1rem;
266268
}
267269
}
268270

269-
@media (min-width: 1200px) {
271+
@media (min-width: 600px) {
272+
.gpu-section {
273+
gap: 0.2rem;
274+
}
275+
}
276+
277+
@media (min-width: 768px) {
270278
.gpu-section {
271279
grid-template-columns: repeat(2, 1fr);
280+
gap: 0.9rem;
272281
}
273282
}
274283

275-
/* Responsive GPU section */
276-
@media (max-width: 768px) {
284+
@media (min-width: 1080px) {
277285
.gpu-section {
278-
gap: 0.5rem;
286+
grid-template-columns: repeat(3, 1fr);
287+
gap: 1.1rem;
279288
}
280289
}
281290

282-
@media (max-width: 480px) {
291+
@media (min-width: 1400px) {
283292
.gpu-section {
284-
gap: 0.4rem;
293+
grid-template-columns: repeat(4, 1fr);
294+
gap: 1.25rem;
285295
}
286296
}
287297

@@ -403,9 +413,9 @@
403413
overflow-x: auto;
404414
}
405415

406-
.processes-table table {
416+
/* .processes-table table {
407417
min-width: 600px;
408-
}
418+
} */
409419

410420
/* Better touch targets */
411421
.hacker-badge {

‎mxstatus/src/components/DisplayPercent.js‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
11
import React from 'react'
22

33
const DisplayPercent = (props) => {
4-
const getColor = () => {
5-
if (props.percent < 0.7) {
6-
return "var(--hacker-info)"
7-
} else if (props.percent >= 0.7 && props.percent < 0.9) {
8-
return "var(--hacker-warning)"
9-
} else if (props.percent >= 0.9 && props.percent <= 1.0) {
10-
return "var(--hacker-danger)"
11-
} else {
12-
return "var(--hacker-text-secondary)"
13-
}
4+
const getUtilizationColor = (percent) => {
5+
if (percent < 0.5) return 'var(--hacker-info)'
6+
if (percent < 0.9) return 'var(--hacker-warning)'
7+
if (percent >= 0.9 && percent <= 1.0) return 'var(--hacker-danger)'
8+
return "var(--hacker-text-secondary)"
149
}
1510

1611
return (
17-
<span style={{ color: getColor() }}>
12+
<span style={{ color: getUtilizationColor(props.percent) }}>
1813
{(props.percent * 100).toFixed(1)}%
1914
</span>
2015
)

‎mxstatus/src/components/DisplayRAM.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from 'react'
33
const DisplayRAM = (props) => {
44
return (
55
<span style={{ color: 'var(--hacker-text-secondary)' }}>
6-
{(props.ram / 1024).toFixed(1)} GiB
6+
{(props.ram / 1000).toFixed(0)} GB
77
</span>
88
)
99
}

‎mxstatus/src/components/GpuCard.js‎

Lines changed: 82 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,19 @@ import CopyableText from './CopyableText'
77

88
const GpuCard = props => {
99
const getUtilizationColor = (percent) => {
10-
if (percent < 0.3) return 'var(--hacker-info)'
11-
if (percent < 0.7) return 'var(--hacker-warning)'
12-
return 'var(--hacker-danger)'
10+
if (percent < 0.5) return 'var(--hacker-info)'
11+
if (percent < 0.9) return 'var(--hacker-warning)'
12+
if (percent >= 0.9 && percent <= 1.0) return 'var(--hacker-danger)'
13+
return "var(--hacker-text-secondary)"
1314
}
1415

15-
const getTemperatureColor = (temp) => {
16-
if (temp < 60) return 'var(--hacker-info)'
17-
if (temp < 80) return 'var(--hacker-warning)'
18-
return 'var(--hacker-danger)'
19-
}
16+
const getTemperatureColor = temp => {
17+
if (temp < 70) return "var(--hacker-info)";
18+
if (temp < 85) return "var(--hacker-warning)";
19+
if (temp >= 85) return "var(--hacker-danger)";
20+
return "var(--hacker-text-secondary)";
21+
};
2022

21-
const getMemoryColor = (percent) => {
22-
if (percent < 0.5) return 'var(--hacker-info)'
23-
if (percent < 0.8) return 'var(--hacker-warning)'
24-
return 'var(--hacker-danger)'
25-
}
2623

2724
return (
2825
<div className="hacker-card" style={{
@@ -38,15 +35,16 @@ const GpuCard = props => {
3835
paddingBottom: '0.5rem'
3936
}}>
4037
<div className="d-flex align-items-center gap-2">
41-
<div style={{
42-
width: '12px',
43-
height: '12px',
38+
<div className="pulse" style={{
39+
width: '8px',
40+
height: '8px',
4441
borderRadius: '50%',
45-
backgroundColor: getUtilizationColor(props.data.gpu_usage),
46-
boxShadow: `0 0 8px ${getUtilizationColor(props.data.gpu_usage)}`
42+
backgroundColor: 'var(--hacker-info)',
43+
boxShadow: `0 0 8px var(--hacker-info)`
44+
// boxShadow: `0 0 8px ${'var(--hacker-info)'}`
4745
}}></div>
4846
<span style={{
49-
color: 'var(--hacker-text-accent)',
47+
color: 'var(--hacker-info)',
5048
fontSize: '0.85rem',
5149
fontWeight: '600'
5250
}}>
@@ -57,10 +55,21 @@ const GpuCard = props => {
5755
maxWidth: '200px',
5856
overflow: 'hidden',
5957
textOverflow: 'ellipsis',
60-
whiteSpace: 'nowrap'
58+
whiteSpace: 'nowrap',
59+
// color: 'var(--hacker-text-accent)'
6160
}}>
61+
{/* {props.data.gpu_name} ({<DisplayRAM ram={props.data.memory_total} />}) */}
6262
{props.data.gpu_name}
6363
</CopyableText>
64+
{/* <CopyableText className="hacker-badge" style={{
65+
fontSize: '0.7rem',
66+
maxWidth: '200px',
67+
overflow: 'hidden',
68+
textOverflow: 'ellipsis',
69+
whiteSpace: 'nowrap'
70+
}}>
71+
{<DisplayRAM ram={props.data.memory_total} />}
72+
</CopyableText> */}
6473
</div>
6574

6675
<div className="d-flex align-items-center gap-2">
@@ -122,7 +131,7 @@ const GpuCard = props => {
122131
Memory Utilization
123132
</span>
124133
<span style={{
125-
color: getMemoryColor(props.data.memory_usage),
134+
color: getUtilizationColor(props.data.memory_usage),
126135
fontSize: '0.75rem',
127136
fontWeight: '600'
128137
}}>
@@ -139,15 +148,15 @@ const GpuCard = props => {
139148
<div style={{
140149
width: `${props.data.memory_usage * 100}%`,
141150
height: '100%',
142-
backgroundColor: getMemoryColor(props.data.memory_usage),
151+
backgroundColor: getUtilizationColor(props.data.memory_usage),
143152
borderRadius: '3px',
144153
transition: 'width 0.3s ease'
145154
}}></div>
146155
</div>
147156
</div>
148157

149158
{/* Memory Details */}
150-
<div className="memory-details" style={{
159+
{/* <div className="memory-details" style={{
151160
display: 'grid',
152161
gridTemplateColumns: '1fr 1fr',
153162
gap: '0.5rem',
@@ -204,36 +213,65 @@ const GpuCard = props => {
204213
<DisplayRAM ram={props.data.memory_total} />
205214
</div>
206215
</div>
207-
<div className="memory-item">
216+
</div> */}
217+
218+
{/* Performance Indicators */}
219+
<div className="performance-indicators mt-2" style={{
220+
display: 'flex',
221+
gap: '0.5rem',
222+
flexWrap: 'wrap'
223+
}}>
224+
<div className="indicator" style={{
225+
padding: '0.3rem 0.5rem',
226+
backgroundColor: 'var(--hacker-bg)',
227+
border: '1px solid var(--hacker-border)',
228+
borderRadius: '0.25rem',
229+
fontSize: '0.65rem'
230+
}}>
231+
<div style={{ color: 'var(--hacker-text-secondary)' }}>Total</div>
208232
<div style={{
209-
color: 'var(--hacker-text-secondary)',
210-
fontSize: '0.65rem',
211-
marginBottom: '0.2rem'
233+
color: getUtilizationColor(props.data.gpu_usage),
234+
fontWeight: '600'
212235
}}>
213-
Efficiency
236+
<DisplayRAM ram={props.data.memory_total} />
214237
</div>
238+
</div>
239+
<div className="indicator" style={{
240+
padding: '0.3rem 0.5rem',
241+
backgroundColor: 'var(--hacker-bg)',
242+
border: '1px solid var(--hacker-border)',
243+
borderRadius: '0.25rem',
244+
fontSize: '0.65rem'
245+
}}>
246+
<div style={{ color: 'var(--hacker-text-secondary)' }}>Free</div>
215247
<div style={{
216-
color: props.data.memory_usage > 0.8 ? 'var(--hacker-warning)' : 'var(--hacker-success)',
217-
fontSize: '0.7rem',
248+
color: getUtilizationColor(props.data.gpu_usage),
218249
fontWeight: '600'
219250
}}>
220-
{((props.data.memory_total - props.data.memory_free) / props.data.memory_total * 100).toFixed(1)}%
251+
<DisplayRAM ram={props.data.memory_free} />
221252
</div>
222253
</div>
223-
</div>
224-
225-
{/* Performance Indicators */}
226-
<div className="performance-indicators mt-2" style={{
227-
display: 'flex',
228-
gap: '0.5rem',
229-
flexWrap: 'wrap'
230-
}}>
231254
<div className="indicator" style={{
232255
padding: '0.3rem 0.5rem',
233256
backgroundColor: 'var(--hacker-bg)',
234257
border: '1px solid var(--hacker-border)',
235258
borderRadius: '0.25rem',
236259
fontSize: '0.65rem'
260+
}}>
261+
<div style={{ color: 'var(--hacker-text-secondary)' }}>Used</div>
262+
<div style={{
263+
color: getUtilizationColor(props.data.gpu_usage),
264+
fontWeight: '600'
265+
}}>
266+
<DisplayRAM ram={props.data.memory_total - props.data.memory_free} />
267+
</div>
268+
</div>
269+
{/* <div className="indicator" style={{
270+
padding: '0.3rem 0.5rem',
271+
backgroundColor: 'var(--hacker-bg)',
272+
border: '1px solid var(--hacker-border)',
273+
borderRadius: '0.25rem',
274+
fontSize: '0.65rem'
237275
}}>
238276
<div style={{ color: 'var(--hacker-text-secondary)' }}>Core</div>
239277
<div style={{
@@ -242,8 +280,8 @@ const GpuCard = props => {
242280
}}>
243281
{(props.data.gpu_usage * 100).toFixed(0)}%
244282
</div>
245-
</div>
246-
<div className="indicator" style={{
283+
</div> */}
284+
{/* <div className="indicator" style={{
247285
padding: '0.3rem 0.5rem',
248286
backgroundColor: 'var(--hacker-bg)',
249287
border: '1px solid var(--hacker-border)',
@@ -257,8 +295,8 @@ const GpuCard = props => {
257295
}}>
258296
{(props.data.memory_usage * 100).toFixed(0)}%
259297
</div>
260-
</div>
261-
<div className="indicator" style={{
298+
</div> */}
299+
{/* <div className="indicator" style={{
262300
padding: '0.3rem 0.5rem',
263301
backgroundColor: 'var(--hacker-bg)',
264302
border: '1px solid var(--hacker-border)',
@@ -272,7 +310,7 @@ const GpuCard = props => {
272310
}}>
273311
{props.data.temperature}°C
274312
</div>
275-
</div>
313+
</div> */}
276314
</div>
277315
</div>
278316
</div>

0 commit comments

Comments
 (0)