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

Merge branch 'websocket_context' into staging_environment

Browse source
This commit is contained in:
Carter 2026-03-20 12:23:01 -06:00
commit 211c58c2e9
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", marginRight: "auto",
margin: theme.spacing(1), margin: theme.spacing(1),
width: theme.spacing(16), width: theme.spacing(16),
height: theme.spacing(11), minHeight: theme.spacing(11),
},
readingsWrapper: {
position: "relative",
width: "100%",
minHeight: theme.spacing(10),
}, },
carouselContainer: { carouselContainer: {
position: 'relative', position: 'relative',
@ -143,7 +148,8 @@ export default function StatusDust(props: Props) {
return ( return (
<Tooltip title={tooltip()}> <Tooltip title={tooltip()}>
<PulseBox color={color} className={classes.box} > <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" <Grid2 container direction="column"
className={`${classes.carouselItem} ${classes.active }`} className={`${classes.carouselItem} ${classes.active }`}
> >
@ -168,8 +174,9 @@ export default function StatusDust(props: Props) {
</Typography> </Typography>
</Grid2> </Grid2>
</Grid2> </Grid2>
</Grid2>
{showTimestamp && device.status.sen5x?.timestamp && ( {showTimestamp && device.status.sen5x?.timestamp && (
<Grid2> <Grid2 sx={{ pt: 0.25 }}>
<RelativeTimestamp timestamp={device.status.sen5x.timestamp} /> <RelativeTimestamp timestamp={device.status.sen5x.timestamp} />
</Grid2> </Grid2>
)} )}

14
src/common/StatusSen5x.tsx
View file

@ -24,7 +24,13 @@ const useStyles = makeStyles((theme: Theme) => {
marginRight: "auto", marginRight: "auto",
margin: theme.spacing(1), margin: theme.spacing(1),
width: theme.spacing(16), 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: { carouselContainer: {
position: 'relative', position: 'relative',
@ -148,7 +154,8 @@ export default function StatusSen5x(props: Props) {
return ( return (
<Tooltip title={tooltip()}> <Tooltip title={tooltip()}>
<PulseBox color={color} className={classes.box} > <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" <Grid2 container direction="column"
className={`${classes.carouselItem} ${ className={`${classes.carouselItem} ${
0 === currentIndex ? classes.active : classes.inactive 0 === currentIndex ? classes.active : classes.inactive
@ -202,8 +209,9 @@ export default function StatusSen5x(props: Props) {
</Typography> </Typography>
</Grid2> </Grid2>
</Grid2>} </Grid2>}
</Grid2>
{showTimestamp && device.status.sen5x?.timestamp && ( {showTimestamp && device.status.sen5x?.timestamp && (
<Grid2> <Grid2 sx={{ pt: 0.25 }}>
<RelativeTimestamp timestamp={device.status.sen5x.timestamp} /> <RelativeTimestamp timestamp={device.status.sen5x.timestamp} />
</Grid2> </Grid2>
)} )}