options styling
s-ol
1 year, 8 months ago
| 265 | 265 |
|
| 266 | 266 |
return (
|
| 267 | 267 |
<div className="app">
|
| 268 | |
<button onClick={configure}>settings</button>
|
| 269 | |
<label>layout:{' '}
|
|
268 |
<button onClick={configure}>midi settings</button>
|
|
269 |
<div className="option">
|
|
270 |
<label>layout:</label>
|
| 270 | 271 |
<select name="layout" onChange={this.onlayout} value={layout}>
|
| 271 | 272 |
<option value="wicki_hayden">Wicki-Hayden</option>
|
| 272 | 273 |
<option value="harmonic">Harmonic Table</option>
|
| 273 | 274 |
<option value="gerhard">Gerhard</option>
|
| 274 | 275 |
</select>
|
| 275 | |
</label>
|
| 276 | |
<label>scale:{' '}
|
|
276 |
</div>
|
|
277 |
<div className="option">
|
|
278 |
<label>scale:</label>
|
| 277 | 279 |
<select name="layout" onChange={this.onscale} value={scale}>
|
| 278 | 280 |
<option value="none">None</option>
|
| 279 | 281 |
<option value="major">Major</option>
|
|
| 284 | 286 |
<option value="whole">Whole-Tone</option>
|
| 285 | 287 |
<option value="penta">Pentatonic</option>
|
| 286 | 288 |
</select>
|
| 287 | |
</label>
|
| 288 | |
<button onClick={this.onoffset}>set offset</button>
|
|
289 |
<button onClick={this.onoffset}>set offset</button>
|
|
290 |
</div>
|
| 289 | 291 |
|
| 290 | 292 |
<div className="main">
|
| 291 | 293 |
<Keyboard
|
| 51 | 51 |
font-family: sans-serif;
|
| 52 | 52 |
}
|
| 53 | 53 |
|
|
54 |
button, input, select {
|
|
55 |
background: #363636;
|
|
56 |
border: 1px solid #eeeeee;
|
|
57 |
color: #eeeeee;
|
|
58 |
padding: 0.25em;
|
|
59 |
margin: 0.125em 0;
|
|
60 |
border-radius: 0.5em;
|
|
61 |
}
|
|
62 |
|
| 54 | 63 |
.app, .keyboard, .chord {
|
| 55 | 64 |
position: relative;
|
| 56 | 65 |
}
|
|
| 58 | 67 |
.main {
|
| 59 | 68 |
display: flex;
|
| 60 | 69 |
justify-content: space-evenly;
|
|
70 |
}
|
|
71 |
|
|
72 |
.option label {
|
|
73 |
display: inline-block;
|
|
74 |
width: 4em;
|
|
75 |
margin-right: 1em;
|
| 61 | 76 |
}
|
| 62 | 77 |
|
| 63 | 78 |
.hexagon {
|