pali112
/
workout-editor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use height for ... height :)

This commit is contained in:
Rene Saarsoo 2020-10-01 23:52:30 +03:00
parent 8bd052f3a8
commit f5c7214d73
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/WorkoutPlot.tsx
View File

@ -13,10 +13,10 @@ const Bar = styled.div<BarProps>`
border-radius: 10px; border-radius: 10px;
margin-right: 0.1%; margin-right: 0.1%;
vertical-align: bottom; vertical-align: bottom;
padding-bottom: ${(props) => props.height}; height: ${(props) => props.height};
background: ${(props) => props.background}; background: ${(props) => props.background};
width: ${(props) => props.width}; width: ${(props) => props.width};
transition: width 0.1s, padding-bottom 0.1s, background-color 0.1s; transition: width 0.1s, height 0.1s, background-color 0.1s;
`; `;
const zoneColor = (intensity: Intensity | IntensityRange | FreeIntensity): string => { const zoneColor = (intensity: Intensity | IntensityRange | FreeIntensity): string => {
@ -41,13 +41,14 @@ const zoneColor = (intensity: Intensity | IntensityRange | FreeIntensity): strin
const toBarProps = (interval: Interval, workoutDuration: Duration): BarProps => ({ const toBarProps = (interval: Interval, workoutDuration: Duration): BarProps => ({
background: zoneColor(interval.intensity), background: zoneColor(interval.intensity),
width: `${interval.duration.seconds / workoutDuration.seconds * 100 - 0.1}%`, width: `${interval.duration.seconds / workoutDuration.seconds * 100 - 0.1}%`,
height: `${interval.intensity.value * 25}%`, height: `${interval.intensity.value * 100}%`,
}); });
const Plot = styled.div` const Plot = styled.div`
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
width: 800px; width: 800px;
height: 200px;
background: rgba(0,0,0, 0.03); background: rgba(0,0,0, 0.03);
border-radius: 5px; border-radius: 5px;
padding: 5px; padding: 5px;