commit 8e60bb683b3aae5315bf5db6352391ca160838a9
parent e1fbcae59d04cafd04de2f14f26894c5c557647d
Author: Massimo Siboldi <mdsiboldi@gmail.com>
Date: Sat, 17 Mar 2018 19:01:33 -0700
Responsive styling
Diffstat:
9 files changed, 117 insertions(+), 77 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
@@ -1,31 +0,0 @@
-.App {
- text-align: center;
-}
-
-.App-logo {
- animation: App-logo-spin infinite 20s linear;
- height: 80px;
-}
-
-.App-header {
- background-color: #222;
- height: 150px;
- padding: 20px;
- color: white;
-}
-
-.App-intro {
- font-size: large;
-}
-
-@keyframes App-logo-spin {
- from { transform: rotate(0deg); }
- to { transform: rotate(360deg); }
-}
-
-.wave-manager-container {
- display: flex;
- align-items: left;
- justify-content: left;
- flex-direction: column;
-}
diff --git a/src/App/index.js b/src/App/index.js
@@ -14,7 +14,7 @@ import consts from '../consts.js';
import helpers from '../helpers.js';
const Adsr = (props) => (
- <div style="display: inline-block;">
+ <div class="adsr">
{consts.adsrProperties.map((aspect) => (
<Param
suffix={aspect.suffix || ''}
@@ -138,36 +138,40 @@ class App extends Component {
}}
></WaveEditor>
<div class="global-controls">
- <CircleButton
- active={this.props.playing}
- action={this.props.startMetro}
- disabled={this.props.playing}
- >
- <div class="triangle"></div>
- </CircleButton>
- <CircleButton
- active={!this.props.playing}
- action={this.props.stopMetro}
- >
- <div class="rectangle"></div>
- </CircleButton>
- <Param
- precision={0}
- name="bpm"
- minVal={20}
- maxVal={600}
- val={this.props.bpm}
- update={this.props.setBpm}
- />
- <Param
- name="beats"
- minVal={3}
- maxVal={16}
- val={this.props.numBeats}
- update={this.props.setNumBeats}
- />
- <Adsr adsr={this.props.adsr} update={this.props.setAdsrProperty} />
- <HSlider value={this.props.volume} update={this.props.setVolume} />
+ <div class="play-container">
+ <CircleButton
+ active={this.props.playing}
+ action={this.props.startMetro}
+ disabled={this.props.playing}
+ >
+ <div class="triangle"></div>
+ </CircleButton>
+ <CircleButton
+ active={!this.props.playing}
+ action={this.props.stopMetro}
+ >
+ <div class="rectangle"></div>
+ </CircleButton>
+ <Param
+ precision={0}
+ name="bpm"
+ minVal={20}
+ maxVal={600}
+ val={this.props.bpm}
+ update={this.props.setBpm}
+ />
+ <Param
+ name="beats"
+ minVal={3}
+ maxVal={16}
+ val={this.props.numBeats}
+ update={this.props.setNumBeats}
+ />
+ </div>
+ <div class="adsr-container">
+ <Adsr adsr={this.props.adsr} update={this.props.setAdsrProperty} />
+ <HSlider value={this.props.volume} update={this.props.setVolume} />
+ </div>
</div>
<div class="wave-manager-container">
{tones}
diff --git a/src/Help/Help.css b/src/Help/Help.css
@@ -47,3 +47,10 @@
* {
text-align: left;
}
+
+@media screen and (max-width: 580px) {
+ .help-container {
+ padding: 0 10px;
+ margin: 10px;
+ }
+}
diff --git a/src/Help/index.js b/src/Help/index.js
@@ -16,7 +16,14 @@ export default connect(state => ({open: state.helpOpen}), {setHelpOpen})((props)
<div class="help-container">
<h1>Help</h1>
<h2>Keybindings</h2>
- <img class="keyboard" src="../../AudioKeys/images/audiokeys-mapping-rows1.jpg" />
+ <p>Credit to AudioKeys for the image below. Velocity does nothing:</p>
+ <a href="../../AudioKeys/images/audiokeys-mapping-rows1.jpg" target="_blank">
+ <img class="keyboard" src="../../AudioKeys/images/audiokeys-mapping-rows1.jpg" />
+ (Click to view full-size)
+ </a>
+ <p>
+ Additionally, pressing '?' will open/close this window.
+ </p>
<h2>About</h2>
Synthing allows you to experiment with and visualize a waveform's effect on generated sound. Works best in Chrome.
<h2>Overview</h2>
diff --git a/src/Param/index.js b/src/Param/index.js
@@ -37,13 +37,15 @@ export default class Param extends Component {
const inputId = `param-${this.props.name}`;
return (
<div class="param" ref={(param) => {this.paramRef = param}}>
- <label for={inputId}>{this.props.name}</label>
- <input
- type="text"
- id={inputId}
- value={this.getNumString()}
- onChange={this.handleChange}
- ></input>
+ <div class="input-container">
+ <label for={inputId}>{this.props.name}</label>
+ <input
+ type="text"
+ id={inputId}
+ value={this.getNumString()}
+ onChange={this.handleChange}
+ ></input>
+ </div>
{this.props.children}
</div>
)
diff --git a/src/Param/style.css b/src/Param/style.css
@@ -1,8 +1,8 @@
.param {
position: relative;
- display: inline-block;
- padding: 10px;
- padding-right: 46px;
+ display: inline-flex;
+ align-items: center;
+ padding: 10px 5px;
box-sizing: border-box;
}
@@ -25,9 +25,12 @@
font-size: 16px;
text-align: center;
}
+.param .input-container {
+ margin: 0 5px;
+ position: relative;
+ top: -2px;
+}
.param > canvas {
- position: absolute;
- right: 5px;
- top: 15px;
+ position: relative;
}
diff --git a/src/WaveManager/style.css b/src/WaveManager/style.css
@@ -11,6 +11,7 @@
}
.wave-manager {
+ padding: 2px 5px;
margin: 5px 0;
display: inline-flex;
align-self: left;
diff --git a/src/WaveTable/index.js b/src/WaveTable/index.js
@@ -46,7 +46,7 @@ export default class WaveTable extends Component {
}
render() {
const height = this.props.height || 400;
- const width = this.props.width || window.innerWidth - 100;
+ const width = this.props.width || document.getElementsByTagName('body')[0].clientWidth;
const pixelHeight = height * window.devicePixelRatio;
const pixelWidth = width * window.devicePixelRatio;
return (
diff --git a/src/index.css b/src/index.css
@@ -56,10 +56,57 @@ h1 {
}
.global-controls {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
background: #f1ddd8;
+ padding: 10px;
+ margin: 15px 0;
+}
+
+.play-container, .adsr-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.adsr-container {
+ padding-right: 10px;
+}
+
+.adsr-container .adsr {
+
}
.global-controls .circle {
font-size: 35px;
}
+.global-controls .adsr {
+ align-self: right;
+}
+
+@media screen and (max-width: 882px) {
+ .global-controls > div {
+ align-items: center;
+ justify-content: center;
+ flex-grow: 1;
+ }
+}
+@media screen and (max-width: 660px) {
+ .adsr {
+ display: inline-block;
+ }
+ .adsr > * {
+ float: left;
+ }
+ body {
+ margin: 10px;
+ }
+}
+@media screen and (max-width: 580px) {
+ .adsr > *:nth-child(2n+1) {
+ clear: left;
+ }
+}
