marcel/omni-tools
1
0
Fork 0
mirror of https://github.com/iib0011/omni-tools.git synced 2025-09-19 22:19:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: make responsive

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2025-04-17 07:47:29 +01:00
parent dbaf482a7e
commit 779a5cfdb7
2 changed files with 130 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/input/NumericInputWithUnit.tsx
View File

@@ -128,6 +128,7 @@ export default function NumericInputWithUnit(props: {
disabled={disabled} disabled={disabled}
type="number" type="number"
fullWidth fullWidth
sx={{ width: { xs: '75%', sm: '80%', md: '90%' } }}
value={(inputValue / siPrefixes[prefix]) value={(inputValue / siPrefixes[prefix])
.toFixed(9) .toFixed(9)
.replace(/(\d*\.\d+?)0+$/, '$1')} .replace(/(\d*\.\d+?)0+$/, '$1')}
@@ -140,6 +141,7 @@ export default function NumericInputWithUnit(props: {
fullWidth fullWidth
disabled={disableChangingUnit} disabled={disableChangingUnit}
value={prefix} value={prefix}
sx={{ width: { xs: '75%', sm: '80%', md: '90%' } }}
onChange={(evt) => { onChange={(evt) => {
handlePrefixChange(evt.target.value || ''); handlePrefixChange(evt.target.value || '');
}} }}
@@ -157,6 +159,7 @@ export default function NumericInputWithUnit(props: {
fullWidth fullWidth
disabled={disableChangingUnit} disabled={disableChangingUnit}
placeholder={'Unit'} placeholder={'Unit'}
sx={{ width: { xs: '75%', sm: '80%', md: '90%' } }}
value={unit} value={unit}
onChange={(event) => { onChange={(event) => {
setUserSelectedUnit(true); setUserSelectedUnit(true);

208
src/pages/tools/number/generic-calc/index.tsx
View File

@@ -1,4 +1,13 @@
import { Autocomplete, Box, Radio, Stack, TextField } from '@mui/material'; import {
Autocomplete,
Box,
MenuItem,
Radio,
Select,
Stack,
TextField,
useTheme
} from '@mui/material';
import React, { useContext, useState } from 'react'; import React, { useContext, useState } from 'react';
import ToolContent from '@components/ToolContent'; import ToolContent from '@components/ToolContent';
import { ToolComponentProps } from '@tools/defineTool'; import { ToolComponentProps } from '@tools/defineTool';
@@ -16,6 +25,7 @@ import Qty from 'js-quantities';
import { CustomSnackBarContext } from 'contexts/CustomSnackBarContext'; import { CustomSnackBarContext } from 'contexts/CustomSnackBarContext';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Grid'; import Grid from '@mui/material/Grid';
import useMediaQuery from '@mui/material/useMediaQuery';
function numericSolveEquationFor( function numericSolveEquationFor(
equation: string, equation: string,
@@ -51,6 +61,8 @@ export default async function makeTool(
return function GenericCalc({ title }: ToolComponentProps) { return function GenericCalc({ title }: ToolComponentProps) {
const { showSnackBar } = useContext(CustomSnackBarContext); const { showSnackBar } = useContext(CustomSnackBarContext);
const theme = useTheme();
const lessThanSmall = useMediaQuery(theme.breakpoints.down('sm'));
// For UX purposes we need to track what vars are // For UX purposes we need to track what vars are
const [valsBoundToPreset, setValsBoundToPreset] = useState<{ const [valsBoundToPreset, setValsBoundToPreset] = useState<{
@@ -280,61 +292,91 @@ export default async function makeTool(
title: 'Variables', title: 'Variables',
component: ( component: (
<Box> <Box>
<Grid container spacing={2} sx={{ mb: 2 }}> {lessThanSmall ? (
<Grid item xs={10}></Grid> <Stack
<Grid item xs={2}> direction={'column'}
<Typography fontWeight="bold" align="center"> spacing={2}
Solve For alignItems={'center'}
</Typography> justifyContent={'space-between'}
>
<Typography>Solve for</Typography>
<Select
sx={{ width: '80%' }}
fullWidth
value={values.outputVariable}
onChange={(event) =>
handleSelectedTargetChange(
event.target.value,
updateField
)
}
>
{calcData.variables.map((variable) => (
<MenuItem
disabled={
valsBoundToPreset[variable.name] !== undefined ||
variable.solvable === false
}
key={variable.name}
value={variable.name}
>
{variable.title}
</MenuItem>
))}
</Select>
</Stack>
) : (
<Grid container spacing={2} sx={{ mb: 2 }}>
<Grid item xs={10}></Grid>
<Grid item xs={2}>
<Typography fontWeight="bold" align="center">
Solve For
</Typography>
</Grid>
</Grid> </Grid>
</Grid> )}
{calcData.variables.map((variable) => ( {calcData.variables.map((variable) => (
<Box <Box
key={variable.name} key={variable.name}
sx={{ sx={{
mb: 3, my: 3,
p: 1, p: 1,
borderRadius: 1 borderRadius: 1
}} }}
> >
<Grid container spacing={2} alignItems="center"> <Grid container spacing={2} alignItems="center">
<Grid item xs={10}> <Grid item xs={lessThanSmall ? 12 : 10}>
<Box> <Box>
<Stack spacing={2}> <Stack spacing={2}>
<Box> <Stack
<Stack direction={{ xs: 'column', md: 'row' }}
direction="row" spacing={2}
spacing={2} alignItems="center"
alignItems="center" >
> <Typography sx={{ minWidth: '8%' }}>
<Typography sx={{ minWidth: '8%' }}> {variable.title}
{variable.title} </Typography>
</Typography> <NumericInputWithUnit
<NumericInputWithUnit defaultPrefix={variable.defaultPrefix}
defaultPrefix={variable.defaultPrefix} value={values.vars[variable.name]}
value={values.vars[variable.name]} disabled={
disabled={ values.outputVariable === variable.name ||
values.outputVariable === variable.name || valsBoundToPreset[variable.name] !== undefined
valsBoundToPreset[variable.name] !== }
undefined disableChangingUnit={
} valsBoundToPreset[variable.name] !== undefined
disableChangingUnit={ }
valsBoundToPreset[variable.name] !== onOwnChange={(val) =>
undefined updateVarField(
} variable.name,
onOwnChange={(val) => val.value,
updateVarField( val.unit,
variable.name, values,
val.value, updateField
val.unit, )
values, }
updateField />
) </Stack>
}
/>
</Stack>
</Box>
{variable.alternates?.map((alt) => ( {variable.alternates?.map((alt) => (
<Box key={alt.title}> <Box key={alt.title}>
@@ -391,26 +433,28 @@ export default async function makeTool(
</Box> </Box>
</Grid> </Grid>
<Grid {!lessThanSmall && (
item <Grid
xs={2} item
sx={{ display: 'flex', justifyContent: 'center' }} xs={2}
> sx={{ display: 'flex', justifyContent: 'center' }}
<Radio >
value={variable.name} <Radio
checked={values.outputVariable === variable.name} value={variable.name}
disabled={ checked={values.outputVariable === variable.name}
valsBoundToPreset[variable.name] !== undefined || disabled={
variable.solvable === false valsBoundToPreset[variable.name] !== undefined ||
} variable.solvable === false
onClick={() => }
handleSelectedTargetChange( onClick={() =>
variable.name, handleSelectedTargetChange(
updateField variable.name,
) updateField
} )
/> }
</Grid> />
</Grid>
)}
</Grid> </Grid>
</Box> </Box>
))} ))}
@@ -422,23 +466,25 @@ export default async function makeTool(
{ {
title: 'Extra outputs', title: 'Extra outputs',
component: ( component: (
<Grid container spacing={2}> <Box>
{calcData.extraOutputs?.map((extraOutput) => ( <Grid container spacing={2}>
<Grid item xs={12} key={extraOutput.title}> {calcData.extraOutputs?.map((extraOutput) => (
<Stack spacing={1} px={4}> <Grid item xs={12} key={extraOutput.title}>
<Typography>{extraOutput.title}</Typography> <Stack spacing={1}>
<NumericInputWithUnit <Typography>{extraOutput.title}</Typography>
disabled={true} <NumericInputWithUnit
defaultPrefix={extraOutput.defaultPrefix} disabled={true}
value={{ defaultPrefix={extraOutput.defaultPrefix}
value: extraOutputs[extraOutput.title], value={{
unit: extraOutput.unit value: extraOutputs[extraOutput.title],
}} unit: extraOutput.unit
/> }}
</Stack> />
</Grid> </Stack>
))} </Grid>
</Grid> ))}
</Grid>
</Box>
) )
} }
] ]