Skip to content

Commit 883fe79

Browse files
rhys-childsrhys-childs
committed
fix table layout and inputs
1 parent 437f45a commit 883fe79

2 files changed

Lines changed: 88 additions & 94 deletions

File tree

‎src/routes/Pages/Calculators/SkillCalculator/index.js‎

Lines changed: 38 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -430,16 +430,16 @@ const SkillCalculator = () => {
430430
}}>
431431
<TableHead>
432432
<TableRow sx={{ '& .MuiTableCell-root': { py: 1.5, borderBottom: 2, borderColor: 'divider' } }}>
433-
<TableCell sx={{ width: '200px' }}>
433+
<TableCell sx={{ width: '180px' }}>
434434
<Typography variant="subtitle2">Skill</Typography>
435435
</TableCell>
436436
<TableCell>
437437
<Typography variant="subtitle2">Current</Typography>
438438
</TableCell>
439-
<TableCell>
439+
<TableCell sx={{ minWidth: '250px' }}>
440440
<Typography variant="subtitle2">Target</Typography>
441441
</TableCell>
442-
<TableCell align="right">
442+
<TableCell align="right" sx={{ width: '100px' }}>
443443
<Typography variant="subtitle2">Exp Cost</Typography>
444444
</TableCell>
445445
</TableRow>
@@ -465,25 +465,23 @@ const SkillCalculator = () => {
465465
</Box>
466466
</TableCell>
467467
<TableCell>
468-
<TextField
469-
size="small"
470-
type="number"
471-
inputProps={{ min: 0, max: 999 }}
472-
value={skillLevels[skill]}
473-
variant="outlined"
474-
onChange={(event) => updateSkillLevels(skill, event.target.value)}
475-
sx={{ width: '160px' }}
476-
InputProps={{
477-
endAdornment: (
478-
<InputAdornment position="end" size="small">
479-
<Typography>{`/ ${getSkillMax(multipliers, skill, level)}`}</Typography>
480-
</InputAdornment>
481-
),
482-
}}
483-
/>
468+
<Box display="flex" alignItems="center" gap={2.5} sx={{ whiteSpace: 'nowrap', pr: 2 }}>
469+
<TextField
470+
size="small"
471+
type="number"
472+
inputProps={{ min: 0, max: 999 }}
473+
value={skillLevels[skill]}
474+
variant="outlined"
475+
onChange={(event) => updateSkillLevels(skill, event.target.value)}
476+
sx={{ width: '90px' }}
477+
/>
478+
<Typography sx={{ color: 'text.secondary' }}>
479+
{`/ ${getSkillMax(multipliers, skill, level)}`}
480+
</Typography>
481+
</Box>
484482
</TableCell>
485-
<TableCell>
486-
<Box display="flex" alignItems="center" gap={1}>
483+
<TableCell sx={{ minWidth: '250px' }}>
484+
<Box display="flex" alignItems="center" gap={2}>
487485
<TextField
488486
size="small"
489487
type="number"
@@ -500,23 +498,26 @@ const SkillCalculator = () => {
500498
}));
501499
}}
502500
onBlur={() => handleTargetBlur(skill)}
503-
sx={{ width: '120px' }}
504-
InputProps={{
505-
endAdornment: (
506-
<InputAdornment position="end" size="small">
507-
<Typography
508-
sx={{ color: 'text.secondary', minWidth: '28px', textAlign: 'right' }}>
509-
{(() => {
510-
const diff =
511-
(parseInt(skillTargets[skill]) || 0) -
512-
(parseInt(skillLevels[skill]) || 0);
513-
return diff >= 0 ? `+${diff}` : `${diff}`;
514-
})()}
515-
</Typography>
516-
</InputAdornment>
517-
),
518-
}}
501+
sx={{ width: '90px' }}
519502
/>
503+
<Typography
504+
sx={{
505+
color: (() => {
506+
const diff =
507+
(parseInt(skillTargets[skill]) || 0) - (parseInt(skillLevels[skill]) || 0);
508+
if (diff > 0) return 'success.main';
509+
if (diff < 0) return 'error.main';
510+
return 'text.secondary';
511+
})(),
512+
minWidth: '36px',
513+
fontWeight: 500,
514+
}}>
515+
{(() => {
516+
const diff =
517+
(parseInt(skillTargets[skill]) || 0) - (parseInt(skillLevels[skill]) || 0);
518+
return diff >= 0 ? `+${diff}` : `${diff}`;
519+
})()}
520+
</Typography>
520521
<Button
521522
size="small"
522523
variant="outlined"

‎src/routes/Pages/Calculators/StatCalculator/index.js‎

Lines changed: 50 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -263,8 +263,7 @@ const StatCalculator = () => {
263263
sx={{
264264
padding: '2px',
265265
color: statWerewolfToggles[stat] === 'night' ? '#1976d2' : '#f57c00',
266-
}}
267-
>
266+
}}>
268267
{statWerewolfToggles[stat] === 'night' ? (
269268
<NightsStayIcon fontSize="small" />
270269
) : (
@@ -333,8 +332,7 @@ const StatCalculator = () => {
333332
minWidth: '45px',
334333
fontSize: '0.7rem',
335334
padding: '4px 8px',
336-
}}
337-
>
335+
}}>
338336
MAX
339337
</Button>
340338
{parseInt(statTargets[stat]) > parseInt(statLevels[stat]) && (
@@ -347,8 +345,7 @@ const StatCalculator = () => {
347345
borderRadius: '4px',
348346
padding: '4px',
349347
color: '#4caf50',
350-
}}
351-
>
348+
}}>
352349
<CheckIcon fontSize="small" />
353350
</IconButton>
354351
<IconButton
@@ -358,8 +355,7 @@ const StatCalculator = () => {
358355
border: '1px solid rgba(0, 0, 0, 0.23)',
359356
borderRadius: '4px',
360357
padding: '4px',
361-
}}
362-
>
358+
}}>
363359
<ClearIcon fontSize="small" />
364360
</IconButton>
365361
</>
@@ -407,8 +403,7 @@ const StatCalculator = () => {
407403
size="small"
408404
sx={{
409405
'& .MuiTableCell-root': { py: 1, px: 1 },
410-
}}
411-
>
406+
}}>
412407
<TableHead>
413408
<TableRow sx={{ '& .MuiTableCell-root': { py: 1.5, borderBottom: 2, borderColor: 'divider' } }}>
414409
<TableCell>
@@ -417,7 +412,7 @@ const StatCalculator = () => {
417412
<TableCell>
418413
<Typography variant="subtitle2">Current</Typography>
419414
</TableCell>
420-
<TableCell>
415+
<TableCell sx={{ width: '300px' }}>
421416
<Typography variant="subtitle2">Target</Typography>
422417
</TableCell>
423418
<TableCell align="right" sx={{ minWidth: '140px' }}>
@@ -440,8 +435,7 @@ const StatCalculator = () => {
440435
sx={{
441436
padding: '2px',
442437
color: statWerewolfToggles[stat] === 'night' ? '#1976d2' : '#f57c00',
443-
}}
444-
>
438+
}}>
445439
{statWerewolfToggles[stat] === 'night' ? (
446440
<NightsStayIcon fontSize="small" />
447441
) : (
@@ -454,32 +448,30 @@ const StatCalculator = () => {
454448
</Box>
455449
</TableCell>
456450
<TableCell>
457-
<TextField
458-
size="small"
459-
type="number"
460-
inputProps={{ min: 0, max: 500 }}
461-
value={statLevels[stat]}
462-
variant="outlined"
463-
onChange={(event) => updateStatLevels(stat, event.target.value)}
464-
sx={{ minWidth: '120px' }}
465-
InputProps={{
466-
endAdornment: (
467-
<InputAdornment position="end" size="small">
468-
<Typography>{`/ ${getMaxStat(
469-
stat,
470-
charClass,
471-
race,
472-
level,
473-
isWerewolf,
474-
isWerewolf && statWerewolfToggles ? statWerewolfToggles[stat] : 'day',
475-
)}`}</Typography>
476-
</InputAdornment>
477-
),
478-
}}
479-
/>
451+
<Box display="flex" alignItems="center" gap={2}>
452+
<TextField
453+
size="small"
454+
type="number"
455+
inputProps={{ min: 0, max: 500 }}
456+
value={statLevels[stat]}
457+
variant="outlined"
458+
onChange={(event) => updateStatLevels(stat, event.target.value)}
459+
sx={{ width: '90px' }}
460+
/>
461+
<Typography sx={{ color: 'text.secondary' }}>
462+
{`/ ${getMaxStat(
463+
stat,
464+
charClass,
465+
race,
466+
level,
467+
isWerewolf,
468+
isWerewolf && statWerewolfToggles ? statWerewolfToggles[stat] : 'day',
469+
)}`}
470+
</Typography>
471+
</Box>
480472
</TableCell>
481-
<TableCell>
482-
<Box display="flex" alignItems="center" gap={1}>
473+
<TableCell sx={{ width: '300px' }}>
474+
<Box display="flex" alignItems="center" gap={2}>
483475
<TextField
484476
size="small"
485477
type="number"
@@ -496,20 +488,24 @@ const StatCalculator = () => {
496488
}));
497489
}}
498490
onBlur={() => handleTargetBlur(stat)}
499-
sx={{ width: '120px' }}
500-
InputProps={{
501-
endAdornment: (
502-
<InputAdornment position="end" size="small">
503-
<Typography sx={{ color: 'text.secondary', minWidth: '28px', textAlign: 'right' }}>
504-
{(() => {
505-
const diff = (parseInt(statTargets[stat]) || 0) - (parseInt(statLevels[stat]) || 0);
506-
return diff >= 0 ? `+${diff}` : `${diff}`;
507-
})()}
508-
</Typography>
509-
</InputAdornment>
510-
),
511-
}}
491+
sx={{ width: '90px' }}
512492
/>
493+
<Typography
494+
sx={{
495+
color: (() => {
496+
const diff = (parseInt(statTargets[stat]) || 0) - (parseInt(statLevels[stat]) || 0);
497+
if (diff > 0) return 'success.main';
498+
if (diff < 0) return 'error.main';
499+
return 'text.secondary';
500+
})(),
501+
minWidth: '36px',
502+
fontWeight: 500,
503+
}}>
504+
{(() => {
505+
const diff = (parseInt(statTargets[stat]) || 0) - (parseInt(statLevels[stat]) || 0);
506+
return diff >= 0 ? `+${diff}` : `${diff}`;
507+
})()}
508+
</Typography>
513509
<Button
514510
size="small"
515511
variant="outlined"
@@ -518,8 +514,7 @@ const StatCalculator = () => {
518514
minWidth: '45px',
519515
fontSize: '0.7rem',
520516
padding: '4px 8px',
521-
}}
522-
>
517+
}}>
523518
MAX
524519
</Button>
525520
{parseInt(statTargets[stat]) > parseInt(statLevels[stat]) && (
@@ -532,8 +527,7 @@ const StatCalculator = () => {
532527
borderRadius: '4px',
533528
padding: '4px',
534529
color: '#4caf50',
535-
}}
536-
>
530+
}}>
537531
<CheckIcon fontSize="small" />
538532
</IconButton>
539533
<IconButton
@@ -543,8 +537,7 @@ const StatCalculator = () => {
543537
border: '1px solid rgba(0, 0, 0, 0.23)',
544538
borderRadius: '4px',
545539
padding: '4px',
546-
}}
547-
>
540+
}}>
548541
<ClearIcon fontSize="small" />
549542
</IconButton>
550543
</>

0 commit comments

Comments
 (0)