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

Initial plot mockup

This commit is contained in:
Rene Saarsoo 2020-10-01 21:39:29 +03:00
parent 6098f979ba
commit d6cb5c892c
3 changed files with 33 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.tsx
View File

@ -1,9 +1,12 @@
import React from 'react';
import { WorkoutPlot } from './components/WorkoutPlot';
export function App() {
return (
<div>
Hello, world!
<h1>Workout editor</h1>
<textarea rows={10} cols={100} />
<WorkoutPlot />
</div>
);
}

27
src/components/WorkoutPlot.tsx Normal file
View File

@ -0,0 +1,27 @@
import React from "react";
const Bar: React.FC<{ width: string; height: string; background: string }> = ({ width, height, background }) => (
<div style={{ display: "inline-block", verticalAlign: "bottom", paddingBottom: height, background, width, borderRadius: "10px", marginRight: "0.1%" }} />
);
export const WorkoutPlot: React.FC<{}> = () => {
return (
<div style={{ whiteSpace: "nowrap", overflow: "hidden", width: 800, outline: "1px dashed #0c0" }}>
<Bar background="#7f7f7f" width="1%" height="7.5%" />
<Bar background="#7f7f7f" width="1%" height="10%" />
<Bar background="#7f7f7f" width="1%" height="12.5%" />
<Bar background="#7f7f7f" width="1%" height="15%" />
<Bar background="#338cff" width="5%" height="20%" />
<Bar background="#ffcc3f" width="15%" height="25%" />
<Bar background="#338cff" width="5%" height="20%" />
<Bar background="#ffcc3f" width="15%" height="25%" />
<Bar background="#338cff" width="5%" height="20%" />
<Bar background="#ffcc3f" width="15%" height="25%" />
<Bar background="#338cff" width="5%" height="20%" />
<Bar background="#7f7f7f" width="1%" height="15%" />
<Bar background="#7f7f7f" width="1%" height="12.5%" />
<Bar background="#7f7f7f" width="1%" height="10%" />
<Bar background="#7f7f7f" width="1%" height="7.5%" />
</div>
);
}

2
src/index.css
View File

@ -1,5 +1,7 @@
body {
margin: 0;
padding: 40px;
background-color: #f5f5e5;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;