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