scott/crabfit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Prevent time labels overlapping

Browse source 
https://github.com/GRA0007/crab.fit/issues/1
This commit is contained in:
Ben Grant 2021-04-12 13:38:55 +10:00
parent 003f4e811a
commit 283b60e91b
2 changed files with 4 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx
View file

@ -64,7 +64,7 @@ const times = {
'21', '21',
'22', '22',
'23', '23',
'0', '24',
], ],
}; };
@ -124,6 +124,7 @@ const TimeRangeField = ({
<Handle <Handle
value={start} value={start}
label={times[timeFormat][start]} label={times[timeFormat][start]}
extraPadding={end - start === 1 ? 'padding-right: 20px;' : (start - end === 1 ? 'padding-left: 20px;' : '')}
onMouseDown={() => { onMouseDown={() => {
document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mousemove', handleMouseMove);
isStartMoving.current = true; isStartMoving.current = true;
@ -146,6 +147,7 @@ const TimeRangeField = ({
<Handle <Handle
value={end} value={end}
label={times[timeFormat][end]} label={times[timeFormat][end]}
extraPadding={end - start === 1 ? 'padding-left: 20px;' : (start - end === 1 ? 'padding-right: 20px;' : '')}
onMouseDown={() => { onMouseDown={() => {
document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mousemove', handleMouseMove);
isEndMoving.current = true; isEndMoving.current = true;

1
crabfit-frontend/src/components/TimeRangeField/timeRangeFieldStyle.ts
View file

@ -60,6 +60,7 @@ export const Handle = styled.div`
text-align: center; text-align: center;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
${props => props.extraPadding}
} }
`; `;