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

Make all tabs responsive

Browse Source
This commit is contained in:
Aoife
2021-04-20 18:18:36 +02:00
parent 35c60694ae
commit 997baa5479
5 changed files with 48 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/editor/Arpeggio.js
+2 -2
View File
@@ -77,7 +77,7 @@ export default function Arpeggiator(props) {
/> />
</div> </div>
</section> </section>
<section className=" -mt-4 flex flex-col justify-around w-1/5"> <section className="mb-2 flex flex-col justify-around w-1/5">
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<h3>Tempo</h3> <h3>Tempo</h3>
@@ -175,7 +175,7 @@ export default function Arpeggiator(props) {
} }
/> />
</div> </div>
<div className="flex flex-row justify-around"> <div className="pt-2 flex flex-row justify-around">
<div className="flex flex-col items-center w-1/2"> <div className="flex flex-col items-center w-1/2">
<h3>Key Sync</h3> <h3>Key Sync</h3>
<Checkbox <Checkbox
src/features/editor/Effects.js
+5 -14
View File
@@ -7,21 +7,12 @@ import Arpeggiator from './Arpeggio';
export default function Effects(props) { export default function Effects(props) {
const ids = useSelector((state) => selectById(state, props.id)); const ids = useSelector((state) => selectById(state, props.id));
return ( return (
<div className="h-screen grid grid-cols-10 grid-rows-6 gap-4 p-6"> <div className="flex flex-wrap justify-between py-6 px-4">
<ModFX <ModFX className="flex-grow w-80" id={ids.modfx} />
className="row-start-2 col-start-3 col-span-2 row-span-2" <Delay className="flex-grow w-80" id={ids.delay} />
id={ids.modfx} <EQ className="flex-grow w-80" id={ids.eq} />
/>
<Delay
className="row-start-2 col-start-5 col-span-2 row-span-2"
id={ids.delay}
/>
<EQ
className="row-start-2 col-start-7 col-span-2 row-span-2"
id={ids.eq}
/>
<Arpeggiator <Arpeggiator
className="row-start-4 row-span-2 col-start-4 col-span-4" className="flex-grow w-96"
id1={ids.arpeggA} id1={ids.arpeggA}
id2={ids.arpeggB} id2={ids.arpeggB}
/> />
src/features/editor/Vocoder.js
+19 -20
View File
@@ -14,10 +14,10 @@ import Pans from './parameters/Pans';
export default function Vocoder(props) { export default function Vocoder(props) {
const ids = useSelector((state) => selectById(state, props.id)); const ids = useSelector((state) => selectById(state, props.id));
return ( return (
<div className='h-screen grid grid-cols-8 grid-rows-3 gap-4 p-6'> <div className="flex flex-wrap justify-between py-6 px-4">
<VCO <VCO
className='col-span-2' className="flex-grow w-80"
name='VCO' name="VCO"
id={ids.vco} id={ids.vco}
waveforms={[ waveforms={[
{ value: 'Saw' }, { value: 'Saw' },
@@ -29,7 +29,7 @@ export default function Vocoder(props) {
{ value: 'Noise' }, { value: 'Noise' },
{ value: 'Audio In' }, { value: 'Audio In' },
]} ]}
dwgsOrModTypeName='DWGS' dwgsOrModTypeName="DWGS"
dwgsOrModType={[ dwgsOrModType={[
{ value: 'SynSine1' }, { value: 'SynSine1' },
{ value: 'SynSine2' }, { value: 'SynSine2' },
@@ -97,19 +97,17 @@ export default function Vocoder(props) {
{ value: 'Voice4' }, { value: 'Voice4' },
]} ]}
/> />
<AudioIn className='col-span-2' name='Audio In' id={ids.audioIn} /> <AudioIn className="flex-grow w-80" name="Audio In" id={ids.audioIn} />
<Mixer className='col-span-1' name='Mixer' id={ids.mixer} /> <Mixer name="Mixer" id={ids.mixer} />
<Pitch className='col-span-3' name='Pitch' id={ids.pitch} /> <Pitch className="flex-grow w-1/2 " name="Pitch" id={ids.pitch} />
<div className='col-span-8 grid grid-cols-9 grid-rows-1 gap-4'> <VocoderFilter name="Filter" id={ids.filter} />
<div /> <FCMod name="FC Mod" id={ids.fcMod} />
<VocoderFilter name='Filter' id={ids.filter} /> <VocoderAmp className="flex-grow w-80" name="Amp" id={ids.amp} />
<FCMod name='FC Mod' id={ids.fcMod} /> <VocoderEG className="flex-grow w-80" name="EG" id1={ids.eg} />
<VocoderAmp className='col-span-2' name='Amp' id={ids.amp} /> <div style={{ flexBasis: '100%' }} />
<VocoderEG className='col-span-3' name='EG' id1={ids.eg} />
</div>
<LFO <LFO
className='col-span-2' className="flex-grow w-80"
name='LFO 1' name="LFO 1"
id={ids.lfo1} id={ids.lfo1}
waveforms={[ waveforms={[
{ value: 'Saw' }, { value: 'Saw' },
@@ -119,8 +117,8 @@ export default function Vocoder(props) {
]} ]}
/> />
<LFO <LFO
className='col-span-2' className="flex-grow w-80"
name='LFO 2' name="LFO 2"
id={ids.lfo2} id={ids.lfo2}
waveforms={[ waveforms={[
{ value: 'Saw' }, { value: 'Saw' },
@@ -129,8 +127,9 @@ export default function Vocoder(props) {
{ value: 'Sample & Hold' }, { value: 'Sample & Hold' },
]} ]}
/> />
<Levels className='col-span-2' name='Levels' id={ids.levels} /> <div style={{ flexBasis: '100%' }} />
<Pans className='col-span-2' name='Pans' id={ids.pans} /> <Levels className="flex-grow w-96" name="Levels" id={ids.levels} />
<Pans className="flex-grow w-96" name="Pans" id={ids.pans} />
</div> </div>
); );
} }
src/features/editor/parameters/Amp.js
+1 -1
View File
@@ -117,7 +117,7 @@ export const VocoderAmp = (props) => {
/> />
</div> </div>
</div> </div>
<div className="flex flex-row"> <div className="my-3 flex flex-row">
<div className="flex flex-col items-center w-1/2"> <div className="flex flex-col items-center w-1/2">
<h3>Keyboard Track</h3> <h3>Keyboard Track</h3>
<Knob <Knob
src/features/editor/parameters/EG.js
+21 -21
View File
@@ -11,8 +11,8 @@ export default function EG(props) {
return ( return (
<Card className={props.className} header={props.name}> <Card className={props.className} header={props.name}>
<div className='flex flex-row justify-evenly'> <div className="flex flex-row justify-evenly">
<div className='flex flex-col items-center'> <div className="flex flex-col items-center">
<h3>Attack</h3> <h3>Attack</h3>
<Knob <Knob
value={parameters_eg_1.attack} value={parameters_eg_1.attack}
@@ -27,7 +27,7 @@ export default function EG(props) {
} }
/> />
</div> </div>
<div className='flex flex-col items-center'> <div className="flex flex-col items-center">
<h3>Decay</h3> <h3>Decay</h3>
<Knob <Knob
value={parameters_eg_1.decay} value={parameters_eg_1.decay}
@@ -42,7 +42,7 @@ export default function EG(props) {
} }
/> />
</div> </div>
<div className='flex flex-col items-center'> <div className="flex flex-col items-center">
<h3>Sustain</h3> <h3>Sustain</h3>
<Knob <Knob
value={parameters_eg_1.sustain} value={parameters_eg_1.sustain}
@@ -57,7 +57,7 @@ export default function EG(props) {
} }
/> />
</div> </div>
<div className='flex flex-col items-center'> <div className="flex flex-col items-center">
<h3>Release</h3> <h3>Release</h3>
<Knob <Knob
value={parameters_eg_1.release} value={parameters_eg_1.release}
@@ -72,10 +72,10 @@ export default function EG(props) {
} }
/> />
</div> </div>
<div className='flex flex-col items-center'> <div className="flex flex-col items-center">
<h3>EG 1 Reset</h3> <h3>EG 1 Reset</h3>
<Checkbox <Checkbox
className='rounded-md border-2 text-blue-500 mt-2 w-6 h-6' className="rounded-md border-2 text-blue-500 mt-2 w-6 h-6"
value={parameters_eg_1.egReset} value={parameters_eg_1.egReset}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
@@ -88,8 +88,8 @@ export default function EG(props) {
/> />
</div> </div>
</div> </div>
<div className='flex flex-row justify-evenly'> <div className="flex flex-row justify-evenly">
<div className='flex flex-col items-center'> <div className="flex flex-col items-center">
<h3>Attack</h3> <h3>Attack</h3>
<Knob <Knob
value={parameters_eg_2.attack} value={parameters_eg_2.attack}
@@ -104,7 +104,7 @@ export default function EG(props) {
} }
/> />
</div> </div>
<div className='flex flex-col items-center'> <div className="flex flex-col items-center">
<h3>Decay</h3> <h3>Decay</h3>
<Knob <Knob
value={parameters_eg_2.decay} value={parameters_eg_2.decay}
@@ -119,7 +119,7 @@ export default function EG(props) {
} }
/> />
</div> </div>
<div className='flex flex-col items-center'> <div className="flex flex-col items-center">
<h3>Sustain</h3> <h3>Sustain</h3>
<Knob <Knob
value={parameters_eg_2.sustain} value={parameters_eg_2.sustain}
@@ -134,7 +134,7 @@ export default function EG(props) {
} }
/> />
</div> </div>
<div className='flex flex-col items-center'> <div className="flex flex-col items-center">
<h3>Release</h3> <h3>Release</h3>
<Knob <Knob
value={parameters_eg_2.release} value={parameters_eg_2.release}
@@ -149,10 +149,10 @@ export default function EG(props) {
} }
/> />
</div> </div>
<div className='flex flex-col items-center'> <div className="flex flex-col items-center">
<h3>EG 2 Reset</h3> <h3>EG 2 Reset</h3>
<Checkbox <Checkbox
className='rounded-md border-2 text-blue-500 mt-2 w-6 h-6' className="rounded-md border-2 text-blue-500 mt-2 w-6 h-6"
value={parameters_eg_2.egReset} value={parameters_eg_2.egReset}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
@@ -175,8 +175,8 @@ export function VocoderEG(props) {
return ( return (
<Card className={props.className} header={props.name}> <Card className={props.className} header={props.name}>
<div className='-mt-1 flex flex-row justify-evenly'> <div className="-mt-1 flex flex-row justify-evenly">
<div className='flex flex-col items-center'> <div className="flex flex-col items-center">
<h3>Attack</h3> <h3>Attack</h3>
<Knob <Knob
value={parameters_eg_1.attack} value={parameters_eg_1.attack}
@@ -191,7 +191,7 @@ export function VocoderEG(props) {
} }
/> />
</div> </div>
<div className='flex flex-col items-center'> <div className="flex flex-col items-center">
<h3>Decay</h3> <h3>Decay</h3>
<Knob <Knob
value={parameters_eg_1.decay} value={parameters_eg_1.decay}
@@ -206,7 +206,7 @@ export function VocoderEG(props) {
} }
/> />
</div> </div>
<div className='flex flex-col items-center'> <div className="flex flex-col items-center">
<h3>Sustain</h3> <h3>Sustain</h3>
<Knob <Knob
value={parameters_eg_1.sustain} value={parameters_eg_1.sustain}
@@ -221,7 +221,7 @@ export function VocoderEG(props) {
} }
/> />
</div> </div>
<div className='flex flex-col items-center'> <div className="flex flex-col items-center">
<h3>Release</h3> <h3>Release</h3>
<Knob <Knob
value={parameters_eg_1.release} value={parameters_eg_1.release}
@@ -237,10 +237,10 @@ export function VocoderEG(props) {
/> />
</div> </div>
</div> </div>
<div className='-mt-8 flex flex-col items-center'> <div className="flex flex-col items-center">
<h3>EG Reset</h3> <h3>EG Reset</h3>
<Checkbox <Checkbox
className='checkbox' className="checkbox"
value={parameters_eg_1.egReset} value={parameters_eg_1.egReset}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(