From 1ff20ec0fdbac0d8e8a24f5e0e5d2030396f858b Mon Sep 17 00:00:00 2001
From: "[poww10s]" <[theironminer@gmail.com]>
Date: Thu, 26 Nov 2020 18:49:42 -0500
Subject: [PATCH] fix linebreaks

---
 src/features/timbre/Timbre.js                 | 260 +++++++++---------
 src/features/timbre/Timbre.module.css         |  24 +-
 src/features/timbre/Vocoder.js                |   6 +-
 .../timbre/parameters/Parameters.module.css   | 112 ++++----
 4 files changed, 212 insertions(+), 190 deletions(-)

diff --git a/src/features/timbre/Timbre.js b/src/features/timbre/Timbre.js
index 64fe8a7..08285bc 100644
--- a/src/features/timbre/Timbre.js
+++ b/src/features/timbre/Timbre.js
@@ -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>
+    );
 }
diff --git a/src/features/timbre/Timbre.module.css b/src/features/timbre/Timbre.module.css
index 37acb12..704b64d 100644
--- a/src/features/timbre/Timbre.module.css
+++ b/src/features/timbre/Timbre.module.css
@@ -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%;
     }
diff --git a/src/features/timbre/Vocoder.js b/src/features/timbre/Vocoder.js
index 885e638..58cc148 100644
--- a/src/features/timbre/Vocoder.js
+++ b/src/features/timbre/Vocoder.js
@@ -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} />
diff --git a/src/features/timbre/parameters/Parameters.module.css b/src/features/timbre/parameters/Parameters.module.css
index 5abbe6f..685eff3 100644
--- a/src/features/timbre/parameters/Parameters.module.css
+++ b/src/features/timbre/parameters/Parameters.module.css
@@ -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;
 }