cvancau/alapatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix linebreaks

Browse Source
This commit is contained in:
[poww10s]
2020-11-26 18:49:42 -05:00
parent 882bbac02f
commit 1ff20ec0fd
4 changed files with 212 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/timbre/Timbre.js
+130 -130
View File
@@ -12,134 +12,134 @@ import { selectById } from './timbreSlice.js';
import styles from './Timbre.module.css'; import styles from './Timbre.module.css';
export default function Timbre(props) { export default function Timbre(props) {
const ids = useSelector((state) => selectById(state, props.id)); const ids = useSelector((state) => selectById(state, props.id));
return ( return (
<div className={styles.timbreStyle}> <div className={styles.timbreStyle}>
<VCO <VCO
name="VCO 1" name="VCO 1"
id={ids.vco1} id={ids.vco1}
waveforms={[ waveforms={[
{ value: 'Saw' }, { value: 'Saw' },
{ value: 'Square' }, { value: 'Square' },
{ value: 'Triangle' }, { value: 'Triangle' },
{ value: 'Sine' }, { value: 'Sine' },
{ value: 'Vox Wave' }, { value: 'Vox Wave' },
{ value: 'DWGS' }, { value: 'DWGS' },
{ value: 'Noise' }, { value: 'Noise' },
{ value: 'Audio In' }, { value: 'Audio In' },
]} ]}
dwgsOrModTypeName="DWGS" dwgsOrModTypeName="DWGS"
dwgsOrModType={[ dwgsOrModType={[
{ value: 'SynSine1' }, { value: 'SynSine1' },
{ value: 'SynSine2' }, { value: 'SynSine2' },
{ value: 'SynSine3' }, { value: 'SynSine3' },
{ value: 'SynSine4' }, { value: 'SynSine4' },
{ value: 'SynSine5' }, { value: 'SynSine5' },
{ value: 'SynSine6' }, { value: 'SynSine6' },
{ value: 'SynSine7' }, { value: 'SynSine7' },
{ value: 'SynBass1' }, { value: 'SynBass1' },
{ value: 'SynBass2' }, { value: 'SynBass2' },
{ value: 'SynBass3' }, { value: 'SynBass3' },
{ value: 'SynBass4' }, { value: 'SynBass4' },
{ value: 'SynBass5' }, { value: 'SynBass5' },
{ value: 'SynBass6' }, { value: 'SynBass6' },
{ value: 'SynBass7' }, { value: 'SynBass7' },
{ value: 'SynWave1' }, { value: 'SynWave1' },
{ value: 'SynWave2' }, { value: 'SynWave2' },
{ value: 'SynWave3' }, { value: 'SynWave3' },
{ value: 'SynWave4' }, { value: 'SynWave4' },
{ value: 'SynWave5' }, { value: 'SynWave5' },
{ value: 'SynWave6' }, { value: 'SynWave6' },
{ value: 'SynWave7' }, { value: 'SynWave7' },
{ value: 'SynWave8' }, { value: 'SynWave8' },
{ value: 'SynWave9' }, { value: 'SynWave9' },
{ value: '5thWave1' }, { value: '5thWave1' },
{ value: '5thWave2' }, { value: '5thWave2' },
{ value: '5thWave3' }, { value: '5thWave3' },
{ value: 'Digi1' }, { value: 'Digi1' },
{ value: 'Digi2' }, { value: 'Digi2' },
{ value: 'Digi3' }, { value: 'Digi3' },
{ value: 'Digi4' }, { value: 'Digi4' },
{ value: 'Digi5' }, { value: 'Digi5' },
{ value: 'Digi6' }, { value: 'Digi6' },
{ value: 'Digi7' }, { value: 'Digi7' },
{ value: 'Digi8' }, { value: 'Digi8' },
{ value: 'Endless' }, { value: 'Endless' },
{ value: 'E.Piano1' }, { value: 'E.Piano1' },
{ value: 'E.Piano2' }, { value: 'E.Piano2' },
{ value: 'E.Piano3' }, { value: 'E.Piano3' },
{ value: 'E.Piano4' }, { value: 'E.Piano4' },
{ value: 'Organ1' }, { value: 'Organ1' },
{ value: 'Organ2' }, { value: 'Organ2' },
{ value: 'Organ3' }, { value: 'Organ3' },
{ value: 'Organ4' }, { value: 'Organ4' },
{ value: 'Organ5' }, { value: 'Organ5' },
{ value: 'Organ6' }, { value: 'Organ6' },
{ value: 'Organ7' }, { value: 'Organ7' },
{ value: 'Clav1' }, { value: 'Clav1' },
{ value: 'Clav2' }, { value: 'Clav2' },
{ value: 'Guitar1' }, { value: 'Guitar1' },
{ value: 'Guitar2' }, { value: 'Guitar2' },
{ value: 'Guitar3' }, { value: 'Guitar3' },
{ value: 'Bass1' }, { value: 'Bass1' },
{ value: 'Bass2' }, { value: 'Bass2' },
{ value: 'Bass3' }, { value: 'Bass3' },
{ value: 'Bass4' }, { value: 'Bass4' },
{ value: 'Bass5' }, { value: 'Bass5' },
{ value: 'Bell1' }, { value: 'Bell1' },
{ value: 'Bell2' }, { value: 'Bell2' },
{ value: 'Bell3' }, { value: 'Bell3' },
{ value: 'Bell4' }, { value: 'Bell4' },
{ value: 'Voice1' }, { value: 'Voice1' },
{ value: 'Voice2' }, { value: 'Voice2' },
{ value: 'Voice3' }, { value: 'Voice3' },
{ value: 'Voice4' }, { value: 'Voice4' },
]} ]}
/> />
<VCO <VCO
name="VCO 2" name="VCO 2"
id={ids.vco2} id={ids.vco2}
waveforms={[ waveforms={[
{ value: 'Saw' }, { value: 'Saw' },
{ value: 'Square' }, { value: 'Square' },
{ value: 'Triangle' }, { value: 'Triangle' },
]} ]}
dwgsOrModTypeName="Mod Type" dwgsOrModTypeName="Mod Type"
dwgsOrModType={[ dwgsOrModType={[
{ value: 'Off' }, { value: 'Off' },
{ value: 'Ring' }, { value: 'Ring' },
{ value: 'Sync' }, { value: 'Sync' },
{ value: 'RingSync' }, { value: 'RingSync' },
]} ]}
/> />
<Mixer name="Mixer" id={ids.mixer} /> <Mixer name="Mixer" id={ids.mixer} />
<Pitch name="Pitch" id={ids.pitch} /> <Pitch name="Pitch" id={ids.pitch} />
<Filter name="Filter" id={ids.filter} /> <Filter name="Filter" id={ids.filter} />
<Amp name="Amp" id={ids.amp} /> <Amp name="Amp" id={ids.amp} />
<div className={styles.lineBreak} /> <EG name="EG 1" id={ids.eg1} />
<EG name="EG 1" id={ids.eg1} /> <EG name="EG 2" id={ids.eg2} />
<EG name="EG 2" id={ids.eg2} /> <div className={styles.lineBreak} />
<LFO <LFO
name="LFO 1" name="LFO 1"
id={ids.lfo1} id={ids.lfo1}
waveforms={[ waveforms={[
{ value: 'Saw' }, { value: 'Saw' },
{ value: 'Square 1' }, { value: 'Square 1' },
{ value: 'Triangle' }, { value: 'Triangle' },
{ value: 'Sample & Hold' }, { value: 'Sample & Hold' },
]} ]}
/> />
<LFO <LFO
name="LFO 2" name="LFO 2"
id={ids.lfo2} id={ids.lfo2}
waveforms={[ waveforms={[
{ value: 'Saw' }, { value: 'Saw' },
{ value: 'Square 2' }, { value: 'Square 2' },
{ value: 'Sine' }, { value: 'Sine' },
{ value: 'Sample & Hold' }, { value: 'Sample & Hold' },
]} ]}
/> />
<Patches name="Patches" id={ids.patches} /> <Patches name="Patches" id={ids.patches} />
</div> </div>
); );
} }
src/features/timbre/Timbre.module.css
+23 -1
View File
@@ -5,7 +5,29 @@
justify-content: center; justify-content: center;
} }
@media screen and (min-width: 1824) { .lineBreak {
width: 0%;
}
@media only screen and (max-width: 1920px) {
.lineBreak {
width: 100%;
}
}
@media only screen and (max-width: 1440px) {
.lineBreak {
width: 0%;
}
}
@media only screen and (max-width: 990px) {
.lineBreak {
width: 0%;
}
}
@media only screen and (max-width: 920px) {
.lineBreak { .lineBreak {
width: 100%; width: 100%;
} }
src/features/timbre/Vocoder.js
+3 -3
View File
@@ -8,8 +8,8 @@ import EG from './parameters/EG';
import LFO from './parameters/LFO'; import LFO from './parameters/LFO';
import { VocoderFilter, FCMod } from './parameters/Filter'; import { VocoderFilter, FCMod } from './parameters/Filter';
import { VocoderAmp } from './parameters/Amp'; import { VocoderAmp } from './parameters/Amp';
import Levels from './parameters/Levels' import Levels from './parameters/Levels';
import Pans from './parameters/Pans' import Pans from './parameters/Pans';
import styles from './Timbre.module.css'; import styles from './Timbre.module.css';
export default function Vocoder(props) { export default function Vocoder(props) {
@@ -102,9 +102,9 @@ export default function Vocoder(props) {
<Pitch name="Pitch" id={ids.pitch} /> <Pitch name="Pitch" id={ids.pitch} />
<VocoderFilter name="Filter" id={ids.filter} /> <VocoderFilter name="Filter" id={ids.filter} />
<FCMod name="FC Mod" id={ids.fcMod} /> <FCMod name="FC Mod" id={ids.fcMod} />
<div className={styles.lineBreak} />
<VocoderAmp name="Amp" id={ids.amp} /> <VocoderAmp name="Amp" id={ids.amp} />
<EG name="EG" id={ids.eg} /> <EG name="EG" id={ids.eg} />
<div className={styles.lineBreak} />
<LFO name="LFO 1" id={ids.lfo1} /> <LFO name="LFO 1" id={ids.lfo1} />
<LFO name="LFO 2" id={ids.lfo2} /> <LFO name="LFO 2" id={ids.lfo2} />
<Levels name="Levels" id={ids.levels} /> <Levels name="Levels" id={ids.levels} />
src/features/timbre/parameters/Parameters.module.css
+56 -56
View File
@@ -1,89 +1,89 @@
.container, .container,
.horizontalContainer, .horizontalContainer,
.patchesContainer { .patchesContainer {
border: solid 1pt slategrey; border: solid 1pt slategrey;
border-radius: 6px; border-radius: 6px;
} }
.container { .container {
position: relative; position: relative;
font-size: small; font-size: small;
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding: 16pt; padding: 16pt;
margin: 10pt; margin: 10pt;
min-width: 15%; min-width: 15%;
height: 214px; height: 214px;
line-height: 1.5em; line-height: 1.5em;
} }
.container > * { .container > * {
margin: 3pt 0; margin: 3pt 0;
} }
.header { .header {
font-size: 1.5em; font-size: 1.5em;
line-height: 1.25em; line-height: 1.25em;
text-align: center; text-align: center;
background-color: white; background-color: white;
padding: 0 0.25em 0.075em; padding: 0 0.25em 0.075em;
border-left: 1px solid slategrey; border-left: 1px solid slategrey;
border-right: 1px solid slategrey; border-right: 1px solid slategrey;
box-sizing: border-box; box-sizing: border-box;
} }
.container > .header { .container > .header {
position: absolute; position: absolute;
top: -7.5%; top: -7.5%;
left: 12%; left: 12%;
} }
.horizontalContainer > .header, .horizontalContainer > .header,
.patchesContainer > .header { .patchesContainer > .header {
position: absolute; position: absolute;
top: -5.25%; top: -5.25%;
left: 6%; left: 6%;
} }
.horizontalContainer { .horizontalContainer {
position: relative; position: relative;
font-size: small; font-size: small;
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 16pt 8pt 16pt 8pt; padding: 16pt 8pt 16pt 8pt;
margin: 10pt; margin: 10pt;
width: 448px; width: 448px;
height: 214px; height: 214px;
} }
.patchesContainer { .patchesContainer {
position: relative; position: relative;
font-size: small; font-size: small;
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 16pt 8pt 16pt 8pt; padding: 16pt 8pt 16pt 8pt;
margin: 10pt; margin: 10pt;
width: 680px; width: 680px;
height: 214px; height: 214px;
} }
.horizontalContainer > .container, .horizontalContainer > .container,
.patchesContainer > .container { .patchesContainer > .container {
padding: 0 16pt; padding: 0 16pt;
width: 100%; width: 100%;
margin: 10pt 0; margin: 10pt 0;
border: none; border: none;
} }
.divider { .divider {
height: 214px; height: 214px;
width: 2px; width: 2px;
background-color: slategrey; background-color: slategrey;
margin: 0 8pt; margin: 0 8pt;
} }
.patchesContainer > .divider { .patchesContainer > .divider {
width: 4px; width: 4px;
} }