brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed sen5x status card formatting with timestamp

Browse source
This commit is contained in:
Carter 2026-03-20 12:22:52 -06:00
parent f23a5d559d
commit a901c12ebe
2 changed files with 94 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/common/StatusDust.tsx
View file

@ -23,7 +23,12 @@ const useStyles = makeStyles((theme: Theme) => {
marginRight: "auto",
margin: theme.spacing(1),
width: theme.spacing(16),
height: theme.spacing(11),
minHeight: theme.spacing(11),
},
readingsWrapper: {
position: "relative",
width: "100%",
minHeight: theme.spacing(10),
},
carouselContainer: {
position: 'relative',
@ -143,7 +148,8 @@ export default function StatusDust(props: Props) {
return (
<Tooltip title={tooltip()}>
<PulseBox color={color} className={classes.box} >
<Grid2 container direction="column" >
<Grid2 container direction="column" spacing={0.25}>
<Grid2 className={classes.readingsWrapper}>
<Grid2 container direction="column"
className={`${classes.carouselItem} ${classes.active }`}
>
@ -168,8 +174,9 @@ export default function StatusDust(props: Props) {
</Typography>
</Grid2>
</Grid2>
</Grid2>
{showTimestamp && device.status.sen5x?.timestamp && (
<Grid2>
<Grid2 sx={{ pt: 0.25 }}>
<RelativeTimestamp timestamp={device.status.sen5x.timestamp} />
</Grid2>
)}

14
src/common/StatusSen5x.tsx
View file

@ -24,7 +24,13 @@ const useStyles = makeStyles((theme: Theme) => {
marginRight: "auto",
margin: theme.spacing(1),
width: theme.spacing(16),
height: theme.spacing(11),
minHeight: theme.spacing(11),
},
/** Reserves vertical space so absolute carousel slides do not overlap the timestamp below. */
readingsWrapper: {
position: "relative",
width: "100%",
minHeight: theme.spacing(10),
},
carouselContainer: {
position: 'relative',
@ -148,7 +154,8 @@ export default function StatusSen5x(props: Props) {
return (
<Tooltip title={tooltip()}>
<PulseBox color={color} className={classes.box} >
<Grid2 container direction="column" >
<Grid2 container direction="column" spacing={0.25}>
<Grid2 className={classes.readingsWrapper}>
<Grid2 container direction="column"
className={`${classes.carouselItem} ${
0 === currentIndex ? classes.active : classes.inactive
@ -202,8 +209,9 @@ export default function StatusSen5x(props: Props) {
</Typography>
</Grid2>
</Grid2>}
</Grid2>
{showTimestamp && device.status.sen5x?.timestamp && (
<Grid2>
<Grid2 sx={{ pt: 0.25 }}>
<RelativeTimestamp timestamp={device.status.sen5x.timestamp} />
</Grid2>
)}