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

fixed the component cards to work with mui's new grids

Browse source
This commit is contained in:
csawatzky 2025-02-26 14:35:02 -06:00
parent 3d8cfc5125
commit 9633fb7bb6
2 changed files with 29 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/component/ComponentCard.tsx
View file

@ -5,12 +5,13 @@ import {
CardActionArea, CardActionArea,
CardContent, CardContent,
CardHeader, CardHeader,
Grid2 as Grid, //Grid2 as Grid,
Switch, Switch,
Theme, Theme,
Tooltip, Tooltip,
Typography Typography
} from "@mui/material"; } from "@mui/material";
import Grid from '@mui/material/Grid2';
import EventBlocker from "common/EventBlocker"; import EventBlocker from "common/EventBlocker";
import MeasurementSummary from "component/MeasurementSummary"; import MeasurementSummary from "component/MeasurementSummary";
import { useComponentAPI, useSnackbar, useThemeType } from "hooks"; import { useComponentAPI, useSnackbar, useThemeType } from "hooks";
@ -366,15 +367,6 @@ export default function ComponentCard(props: Props) {
}; };
return ( return (
<Grid
size={{
xs: 12,
sm: showMobile ? 12 : 6,
md: showMobile ? 12 : 6,
lg: showMobile ? 12 : 4,
xl: showMobile ? 12 : 3
}}
>
<Card raised className={classes.card}> <Card raised className={classes.card}>
<CardActionArea <CardActionArea
onClick={(event: any) => openComponentPage(event)} onClick={(event: any) => openComponentPage(event)}
@ -385,6 +377,6 @@ export default function ComponentCard(props: Props) {
{sensorCard()} {sensorCard()}
</CardActionArea> </CardActionArea>
</Card> </Card>
</Grid>
); );
} }

31
src/pages/Device.tsx
View file

@ -1,4 +1,5 @@
import { Button, Checkbox, Divider, FormControlLabel, Grid2 as Grid, List, ListItem, Typography } from "@mui/material"; import { Button, Checkbox, Divider, FormControlLabel, List, ListItem, Typography } from "@mui/material";
import Grid from '@mui/material/Grid2';
import { Component, Device, Interaction, User } from "models"; import { Component, Device, Interaction, User } from "models";
import { getContextKeys, getContextTypes } from "pbHelpers/Context"; import { getContextKeys, getContextTypes } from "pbHelpers/Context";
import { useDeviceAPI, useGlobalState, useSnackbar } from "providers"; import { useDeviceAPI, useGlobalState, useSnackbar } from "providers";
@ -288,8 +289,18 @@ export default function DevicePage() {
</li> </li>
<Divider component="li" /> <Divider component="li" />
<ListItem> <ListItem>
<Grid container direction="row" justifyContent="flex-start" spacing={2}> <Grid width={"100%"} container justifyContent="flex-start" direction="row" spacing={2}>
{sensorComponents} {sensorComponents.map(card => (
<Grid size={{
xs: 12,
sm: isMobile ? 12 : 6,
md: isMobile ? 12 : 6,
lg: isMobile ? 12 : 4,
xl: isMobile ? 12 : 3
}}>
{card}
</Grid>
))}
</Grid> </Grid>
</ListItem> </ListItem>
<li> <li>
@ -299,8 +310,18 @@ export default function DevicePage() {
</li> </li>
<Divider component="li" /> <Divider component="li" />
<ListItem> <ListItem>
<Grid container direction="row" justifyContent="flex-start" spacing={2}> <Grid width={"100%"} container justifyContent="flex-start" direction="row" spacing={2}>
{controllerComponents} {controllerComponents.map(card => (
<Grid size={{
xs: 12,
sm: isMobile ? 12 : 6,
md: isMobile ? 12 : 6,
lg: isMobile ? 12 : 4,
xl: isMobile ? 12 : 3
}}>
{card}
</Grid>
))}
</Grid> </Grid>
</ListItem> </ListItem>
{device.settings.mutations.length > 0 && ( {device.settings.mutations.length > 0 && (