adjusted some spacing stuff on the bin page

This commit is contained in:
Carter 2025-05-06 11:17:35 -06:00
parent ee86ec176c
commit 59c14e3f8b
5 changed files with 39 additions and 34 deletions

View file

@ -401,7 +401,7 @@ export default function BinStorageConditions(props: Props) {
alignContent="center"
alignItems="center"
justifyContent="space-between">
<Grid size={{ xs: 6 }}>
<Grid size={{ xs: 8 }}>
<Box display="flex" alignContent="center" alignItems="center">
<TemperatureIcon />
<Typography noWrap style={{ fontWeight: 650 }}>

View file

@ -816,9 +816,9 @@ export default function Bin(props: Props) {
const desktopView = () => {
return (
<Card style={{ padding: 15 }}>
<Card sx={{ padding: 1 }}>
<Grid container spacing={2} direction={"row"} justifyContent="center" alignItems="stretch">
<Grid size={{ xs: 12, sm: 12, md: 6, lg: 3 }}>
<Grid size={{ xs: 12, sm: 12, md: 12, lg: 6, xl: 4 }}>
<Box
paddingX={1}
marginBottom={1}
@ -844,7 +844,7 @@ export default function Bin(props: Props) {
{overview()}
{preferences && binComponents(preferences)}
</Grid>
<Grid size={{ xs: 12, sm: 12, md: 6, lg: 3 }}>
<Grid size={{ xs: 12, sm: 12, md: 12, lg: 6, xl: 2.6 }}>
{(bin.settings.mode === pond.BinMode.BIN_MODE_DRYING ||
bin.settings.mode === pond.BinMode.BIN_MODE_HYDRATING) && (
<BinConditioningCard
@ -862,7 +862,7 @@ export default function Bin(props: Props) {
<BinStorageConditions bin={bin} headspaceCO2={headspaceCO2} cables={grainCables} />
</Box>
</Grid>
<Grid id="tour-graphs" size={{ xs: 12, sm: 12, md: 12, lg: 6 }}>
<Grid id="tour-graphs" size={{ xs: 12, sm: 12, md: 12, lg: 6, xl: 5.3 }}>
<Box paddingBottom={2}>
<StyledToggleButtonGroup
id="tour-graph-tabs"
@ -1089,11 +1089,12 @@ export default function Bin(props: Props) {
};
return (
<PageContainer>
<PageContainer padding={1}>
{showPlenumError()}
<Box
paddingBottom={isMobile || displayMobile ? 1 : 2}
paddingX={isMobile || displayMobile ? 1 : 2}>
paddingX={1}
>
{tabs()}
{isMobile && (
<Box

View file

@ -1,6 +1,5 @@
import { useHTTP, usePermissionAPI } from "hooks";
// import { useWebsocket } from "websocket";
import { /*Component,*/ Component, deviceScope, Team, User } from "models";
import { Component, deviceScope, User } from "models";
import { pond } from "protobuf-ts/pond";
import { createContext, PropsWithChildren, useContext } from "react";
import { pondURL } from "./pond";
@ -9,7 +8,6 @@ import { useGlobalState } from "providers";
import moment from "moment";
import { or } from "utils/types";
import { dateRange } from "providers/http";
// import { reject, result } from "lodash";
export interface IDeviceAPIContext {
add: (name: string, description: string, backpack: pond.BackpackSettings, otherTeam?: string) => Promise<AxiosResponse<pond.AddDeviceResponse>>;