finished the bin page styling fixes

This commit is contained in:
csawatzky 2025-03-14 15:42:30 -06:00
parent a673fd72c1
commit 41131dee26

View file

@ -155,6 +155,9 @@ const useStyles = makeStyles((theme: Theme) => {
sliderThumb: { sliderThumb: {
left: 23 left: 23
}, },
mobileSliderThumb: {
left: 28
},
sliderTrack: { sliderTrack: {
height: "100%", height: "100%",
}, },
@ -1450,19 +1453,21 @@ export default function BinVisualizer(props: Props) {
{(bin.inventoryControl() === pond.BinInventoryControl.BIN_INVENTORY_CONTROL_MANUAL || {(bin.inventoryControl() === pond.BinInventoryControl.BIN_INVENTORY_CONTROL_MANUAL ||
bin.inventoryControl() === pond.BinInventoryControl.BIN_INVENTORY_CONTROL_UNKNOWN) && ( bin.inventoryControl() === pond.BinInventoryControl.BIN_INVENTORY_CONTROL_UNKNOWN) && (
<React.Fragment> <React.Fragment>
<IconButton <Box display="flex" height={isMobile ? 35 : 40} marginBottom={1}>
onClick={() => { <IconButton
setGrainUpdate(true); onClick={() => {
}} setGrainUpdate(true);
style={{ }}
backgroundColor: "gold", style={{
color: "black", margin: "auto",
height: 40, backgroundColor: "gold",
width: 40, color: "black",
marginBottom: 10 height: "100%",
}}> width: isMobile ? 35 : 40
+/- }}>
</IconButton> <Typography sx={{fontSize: isMobile ? 17 : 20, fontWeight: 650}}>+/-</Typography>
</IconButton>
</Box>
<Box <Box
height={0.7} height={0.7}
width={1} width={1}
@ -1477,9 +1482,8 @@ export default function BinVisualizer(props: Props) {
root: classes.sliderRoot, root: classes.sliderRoot,
rail: classes.sliderRail, rail: classes.sliderRail,
track: classes.sliderTrack, track: classes.sliderTrack,
thumb: classes.sliderThumb, thumb: isMobile ? classes.mobileSliderThumb : classes.sliderThumb,
valueLabel: classes.sliderValLabel, valueLabel: classes.sliderValLabel,
}} }}
style={{ height: "100%", color: sliderColour }} style={{ height: "100%", color: sliderColour }}
min={0} min={0}
@ -2088,13 +2092,13 @@ export default function BinVisualizer(props: Props) {
<Box paddingRight={1}> <Box paddingRight={1}>
{binMode()} {binMode()}
<Grid container justifyContent="flex-start" alignItems="stretch"> <Grid container justifyContent="flex-start" alignItems="stretch">
<Grid style={{ position: "relative" }}> <Grid size={5.5} style={{ position: "relative" }}>
{overview()} {overview()}
</Grid> </Grid>
<Grid style={{ position: "relative" }}> <Grid size={5} style={{ position: "relative" }}>
{visual()} {visual()}
</Grid> </Grid>
<Grid >{controls()}</Grid> <Grid size={1.5} >{controls()}</Grid>
</Grid> </Grid>
{plenum && pressure && fanPerformance()} {plenum && pressure && fanPerformance()}
{ambient && ambientDisplay()} {ambient && ambientDisplay()}