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

made some changes to the checkbox for the labels, and made sure that the tabs are scrollable in mobile view

Browse source
This commit is contained in:
csawatzky 2026-06-10 16:40:50 -06:00
parent 2cffc20daa
commit 124856baac
2 changed files with 56 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

96
src/bin/bin3dVisualizer.tsx
View file

@ -103,55 +103,53 @@ export default function bin3dVisualizer(props: Props){
const heatmapDisplay = () => { const heatmapDisplay = () => {
return ( return (
<Box> <Box>
<Box display="flex" alignContent="center" alignItems={"center"} justifyContent={"space-between"}> <Typography noWrap sx={{fontWeight: 650, fontSize: isMobile ? 13 : 20}}>
<Typography noWrap sx={{fontWeight: 650, fontSize: isMobile ? 13 : 20}}>Heatmap Display</Typography> Heatmap
<FormControlLabel </Typography>
labelPlacement="start" <FormControl fullWidth>
control={ <Select
<Checkbox value={binDisplay}
checked={showLabels} sx={{
onChange={(e, checked) => { borderRadius: 1,
setShowLabels(checked) bgcolor: 'rgba(255,255,255,0.08)',
}} '& .MuiSelect-select': { py: 1.5 },
/> '& .MuiOutlinedInput-notchedOutline': { border: 'none' },
} '&:hover .MuiOutlinedInput-notchedOutline': { border: 'none' },
label={<Typography noWrap sx={{fontSize: 11}}>Show Values</Typography>} '&.Mui-focused .MuiOutlinedInput-notchedOutline': { border: 'none' },
/> }}
</Box> onChange={event => {
<FormControl fullWidth> let selection = event.target.value
{/* <InputLabel>Display</InputLabel> */} setBinDisplay(selection)
<Select if (selection === "temp") {
value={binDisplay} setShowHeatmap(true)
sx={{ setShowTemp(true)
borderRadius: 1, setShowMoisture(false)
bgcolor: 'rgba(255,255,255,0.08)', setShowMoistureHeatmap(false)
'& .MuiSelect-select': { }
py: 1.5, if (selection === "moisture") {
}, setShowHeatmap(false)
'& .MuiOutlinedInput-notchedOutline': { border: 'none' }, setShowTemp(false)
'&:hover .MuiOutlinedInput-notchedOutline': { border: 'none' }, setShowMoisture(true)
'&.Mui-focused .MuiOutlinedInput-notchedOutline': { border: 'none' }, setShowMoistureHeatmap(true)
}} }
onChange={event => { }}
let selection = event.target.value >
setBinDisplay(selection) <MenuItem value={"temp"}>Temperature</MenuItem>
if(selection === "temp"){ <MenuItem value={"moisture"}>Moisture</MenuItem>
setShowHeatmap(true) </Select>
setShowTemp(true) </FormControl>
setShowMoisture(false) {/* Checkbox moved below dropdown — no longer affects top alignment */}
setShowMoistureHeatmap(false) <FormControlLabel
} control={
if(selection === "moisture"){ <Checkbox
setShowHeatmap(false) size="small"
setShowTemp(false) checked={showLabels}
setShowMoisture(true) onChange={(e, checked) => setShowLabels(checked)}
setShowMoistureHeatmap(true) />
} }
}}> label={<Typography noWrap sx={{fontSize: 11}}>Show Values</Typography>}
<MenuItem value={"temp"}>Temperature</MenuItem> sx={{ mt: 0.5, ml: '-9px' }}
<MenuItem value={"moisture"}>Moisture</MenuItem> />
</Select>
</FormControl>
</Box> </Box>
) )
} }

11
src/bin/binSummary/components/binDetails.tsx
View file

@ -73,8 +73,15 @@ export default function BinDetails (props: Props) {
onChange={(_, value) => setCurrentTab(value)} onChange={(_, value) => setCurrentTab(value)}
indicatorColor="primary" indicatorColor="primary"
textColor="primary" textColor="primary"
variant="fullWidth" variant="scrollable"
sx={{ flexShrink: 0 }}> scrollButtons="auto"
allowScrollButtonsMobile
sx={{
flexShrink: 0,
'& .MuiTabs-scroller': {
overflowX: 'auto !important',
}
}}>
{isMobile && <Tab label={"Bin"} value={"bin"} />} {isMobile && <Tab label={"Bin"} value={"bin"} />}
<Tab label={"Table"} value={"table"} /> <Tab label={"Table"} value={"table"} />
<Tab label={"Alerts"} value={"alerts"} /> <Tab label={"Alerts"} value={"alerts"} />