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

changed the grid layout for the mobile view

Browse source
This commit is contained in:
csawatzky 2025-10-01 14:43:15 -06:00
parent 80428050ba
commit 0beadef26a
2 changed files with 18 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/gate/GateDevice.tsx
View file

@ -338,14 +338,12 @@ export default function GateDevice(props: Props) {
return (
<Grid
container
direction="row"
alignContent="center"
direction={(isMobile) ? "column" : "row"}
width="100%"
//alignItems="center"
alignItems="center"
>
<Grid size={{ sm: 12, lg: isMobile || drawerView ? 12 : 4}} style={{ padding: 10 }}>
<Box
paddingLeft={1}
display="flex"
justifyContent="space-between"
alignItems="center"
@ -364,20 +362,6 @@ export default function GateDevice(props: Props) {
}
]}
/>
{/* <ToggleButtonGroup value={detail} exclusive size="small" aria-label="detail">
<ToggleButton
onClick={() => setDetail("analytics")}
value={"analytics"}
aria-label="Analysis Graphs">
Analysis
</ToggleButton>
<ToggleButton
onClick={() => setDetail("sensors")}
value={"sensors"}
aria-label="Sensor Graphs">
Sensors
</ToggleButton>
</ToggleButtonGroup> */}
</Box>
<Card raised>
<GateSVG

32
src/gate/GateFlowGraph.tsx
View file

@ -258,9 +258,9 @@ export default function GateFlowGraph(props: Props) {
<React.Fragment>
{flowEvents.length > 0 ? (
<Grid container direction="row" spacing={2} className={classes.eventGrid}>
<Grid size={3}>
<Grid size={{xs: 6, md: 3}}>
<Card raised className={classes.eventCard}>
<Grid container alignItems="center">
<Grid container width="100%" direction="column" alignItems="center">
<Grid size={9}>
<Box display="flex" justifyContent="space-between">
<Typography>Total Events:</Typography>
@ -271,7 +271,7 @@ export default function GateFlowGraph(props: Props) {
</Grid>
<Grid size={9}>
<Box display="flex" justifyContent="space-between">
<Typography>Total Time:</Typography>
<Typography>Time:</Typography>
<Typography style={{ fontWeight: 650, fontSize: 15 }}>
{moment.duration(totalTimeS, "s").humanize()}
</Typography>
@ -280,9 +280,9 @@ export default function GateFlowGraph(props: Props) {
</Grid>
</Card>
</Grid>
<Grid size={3}>
<Grid size={{xs: 6, md: 3}}>
<Card raised className={classes.eventCard}>
<Grid container alignItems="center">
<Grid container width="100%" direction="column" alignItems="center">
<Grid size={9}>
<Box display="flex" justifyContent="space-between">
<Typography>Events Inside:</Typography>
@ -293,7 +293,7 @@ export default function GateFlowGraph(props: Props) {
</Grid>
<Grid size={9}>
<Box display="flex" justifyContent="space-between">
<Typography>Event Time:</Typography>
<Typography>Time:</Typography>
<Typography style={{ fontWeight: 650, fontSize: 15 }}>
{moment.duration(timeSInside, "s").humanize()}
</Typography>
@ -302,9 +302,9 @@ export default function GateFlowGraph(props: Props) {
</Grid>
</Card>
</Grid>
<Grid size={3}>
<Grid size={{xs: 6, md: 3}}>
<Card raised className={classes.eventCard}>
<Grid container alignItems="center">
<Grid container width="100%" direction="column" alignItems="center">
<Grid size={9}>
<Box display="flex" justifyContent="space-between">
<Typography>Events Outside:</Typography>
@ -315,7 +315,7 @@ export default function GateFlowGraph(props: Props) {
</Grid>
<Grid size={9}>
<Box display="flex" justifyContent="space-between">
<Typography>Event Time:</Typography>
<Typography>Time:</Typography>
<Typography style={{ fontWeight: 650, fontSize: 15 }}>
{moment.duration(timeSOutside, "s").humanize()}
</Typography>
@ -324,15 +324,15 @@ export default function GateFlowGraph(props: Props) {
</Grid>
</Card>
</Grid>
<Grid size={3}>
<Grid size={{xs: 6, md: 3}}>
<Card raised className={classes.eventCard}>
<Grid container direction="column" alignItems="center">
<Grid container width="100%" direction="column" alignItems="center">
<Grid>
<Typography>Performance:</Typography>
</Grid>
<Grid>
<Typography style={{ fontWeight: 650, fontSize: 15 }}>
{(eventsInside / totalEvents) * 100}%
{((eventsInside / totalEvents) * 100).toFixed(2)}%
</Typography>
</Grid>
</Grid>
@ -367,7 +367,7 @@ export default function GateFlowGraph(props: Props) {
<React.Fragment>
{runtime && (
<Grid container direction="row" spacing={2} className={classes.runtimeGrid}>
<Grid size={3}>
<Grid size={{xs: 6, md: 3}}>
<Card raised className={classes.calcCard}>
<Grid container width="100%" direction="column" alignItems="center">
<Grid>Approximate Runtime:</Grid>
@ -379,7 +379,7 @@ export default function GateFlowGraph(props: Props) {
</Grid>
</Card>
</Grid>
<Grid size={3}>
<Grid size={{xs: 6, md: 3}}>
<Card raised className={classes.calcCard}>
<Grid container width="100%" direction="column" alignItems="center">
<Grid>Cost to run PCA:</Grid>
@ -394,7 +394,7 @@ export default function GateFlowGraph(props: Props) {
</Grid>
</Card>
</Grid>
<Grid size={3}>
<Grid size={{xs: 6, md: 3}}>
<Card raised className={classes.calcCard}>
<Grid container width="100%" direction="column" alignItems="center">
<Grid>Cost to run APU:</Grid>
@ -409,7 +409,7 @@ export default function GateFlowGraph(props: Props) {
</Grid>
</Card>
</Grid>
<Grid size={3}>
<Grid size={{xs: 6, md: 3}}>
<Card raised className={classes.calcCard}>
<Grid container width="100%" direction="column" alignItems="center">
<Grid>Total Cost:</Grid>