feat: Graphical Eq scaleable - prepared Reduction meter

tv2 · Dec 4, 2021 · 8ade6da · 8ade6da
1 parent eb6fa42
commit 8ade6da
Show file tree

Hide file tree

Showing 8 changed files with 176 additions and 182 deletions.
diff --git a/client/assets/css/ChanStrip.css b/client/assets/css/ChanStrip.css
@@ -98,23 +98,6 @@
     margin-top: 81px;
 }
 
-.reduction-6db {
-    color: #445f4a;
-    width: 63px;
-    height: 2px;
-    margin-left: -58px;
-    margin-right: 30px;
-    margin-top: 108px;
-}
-.reduction-12db {
-    color: #5c3939;
-    width: 63px;
-    height: 2px;
-    margin-left: -88px;
-    margin-right: 30px;
-    margin-top: 152px;
-}
-
 .zero-monitor {
     width: 2px;
     height: 20px;

diff --git a/client/assets/css/ChanStripEq.css b/client/assets/css/ChanStripEq.css
@@ -1,3 +1,18 @@
+.eq-full {
+    justify-content: space-evenly;
+}
+
+.eq-full > .eq-text {
+    display: flex;
+    justify-content: space-evenly;
+    top: 2vh;
+    left: 2vw;
+    width: 85vw;
+    height: 10vh;
+    margin-left: 2vw;
+    margin-top: 2vh;
+}
+
 .eq-full > .eq-window {
     top: 2vh;
     left: 2vw;
@@ -20,3 +35,35 @@
     font-size: 5vh;
     height: 10vh;
 }
+
+.chstrip-q {
+    width: 15vw;
+    height: 0.5vh;
+    margin-left: 5vw;
+    margin-right: 5vw;
+    margin-top: 1vh;
+    border-width: 0px;
+    border-style: solid;
+    border-radius: 8px;
+    background-color: rgb(17, 17, 17);
+}
+.chstrip-q-thumb {
+    margin-top: -2vh;
+    color: #3a3a3a;
+    font-size: 0.8vh;
+    width: 3vw;
+    height: 4vh;
+    line-height: 4vh;
+    border: 1px solid #c5c2c2;
+    border-radius: 8px;
+    background: linear-gradient(
+        to right,
+        #3a3a3a 0%,
+        #c2c2c2 20%,
+        hsl(0, 0%, 57%) 50%,
+        #00a 1px,
+        #919191 52%,
+        #c2c2c2 80%,
+        #3a3a3a 100%
+    );
+}
diff --git a/client/assets/css/ChanStripFull.css b/client/assets/css/ChanStripFull.css
@@ -1,4 +1,5 @@
 .chstrip-full-body {
+    justify-content: space-evenly;
     position: fixed;
     top: 5vh;
     left: 5vw;
@@ -15,7 +16,7 @@
     color: #fff;
 }
 
-.chstrip-full-body > .ch-strip-full-header {
+.ch-strip-full-header {
     margin-left: 5vw;
     margin-top: 1vh;
     margin-right: 10vw;
@@ -24,63 +25,55 @@
     white-space: nowrap;
 }
 
-.chstrip-full-body > .chstrip-full-parameters {
+.chstrip-full-parameters {
+    display: flex;
+    justify-content: space-evenly;
     top: 2vh;
     left: 2vw;
-    height: 100vh;
+    height: 30vh;
     overflow: auto;
     font-size: 1.5vh;
     text-align: center;
 }
 
-.chstrip-full-body .chstrip-full-parameters .horizontal {
+.chstrip-full-eq-window {
     display: flex;
     justify-content: space-evenly;
+    font-size: 1.5vh;
+    text-align: center;
 }
 
-.chstrip-full-content {
-    display: flex;
+.chstrip-full-parameter-text {
+    list-style-type: none;
+    text-align: center;
+    margin-top: 2vh;
+    font-size: 1.5vh;
 }
 
-.chstrip-full-parameters > .inp-comp-del-group {
+.chstrip-full-content-group {
     display: flex;
-    top: 2vh;
-    left: 2vw;
-    margin-left: 2vw;
-}
-
-.eq-full > .eq-window {
-    top: 2vh;
-    left: 2vw;
-    margin-top: 3vh;
-    margin-left: 10vw;
-    height: 30vh;
-    width: 0vw;
+    flex-direction: column;
 }
 
-.eq-full > .eq-canvas {
-    position: absolute;
-    margin-left: -36.5vw;
-    margin-top: 5vh;
-    height: 30vh;
-    width: 72vw;
+.chstrip-full-content {
+    display: flex;
+    flex-direction: row;
 }
 
-.eq-full > .eq-text {
-    display: flex;
-    justify-content: space-evenly;
-    top: 2vh;
-    left: 2vw;
-    width: 85vw;
-    height: 10vh;
-    margin-left: 2vw;
+.chstrip-full-parameter-reduction {
+    list-style-type: none;
+    text-align: center;
     margin-top: 2vh;
+    font-size: 1.5vh;
+    margin-left: 3vw;
 }
 
-.eq-window > .dot {
-    position: absolute;
-    font-size: 5vh;
-    height: 10vh;
+.chstrip-full-mini-text {
+    list-style-type: none;
+    text-align: center;
+    max-width: 9vw;
+    margin-top: 1vh;
+    font-size: 0.8vh;
 }
 
 .chstrip-full-zero-comp {
@@ -98,20 +91,14 @@
     margin-top: -12vh;
 }
 
-.chstrip-full-parameter-text {
-    list-style-type: none;
-    text-align: center;
-    margin-top: 2vh;
-    font-size: 1.5vh;
-}
-
-.parameter-button-text {
+.chstrip-full-parameter-text > .parameter-button-text {
     list-style-type: none;
     text-align: center;
     margin-top: 2vh;
     font-size: 1.2vh;
 }
-.parameter-button {
+
+.chstrip-full-parameter-text > .parameter-button {
     margin-left: -8vw;
     margin-top: 2vh;
     outline: none;
@@ -127,14 +114,6 @@
     border-color: rgb(99, 99, 99);
 }
 
-.chstrip-full-mini-text {
-    list-style-type: none;
-    text-align: center;
-    max-width: 9vw;
-    margin-top: 1vh;
-    font-size: 0.8vh;
-}
-
 .chstrip-full-delay-buttons {
     margin-top: 3vh;
     margin-left: 1vw;
@@ -245,35 +224,3 @@
         #3a3a3a 100%
     );
 }
-
-.chstrip-q {
-    width: 15vw;
-    height: 0.5vh;
-    margin-left: 5vw;
-    margin-right: 5vw;
-    margin-top: 1vh;
-    border-width: 0px;
-    border-style: solid;
-    border-radius: 8px;
-    background-color: rgb(17, 17, 17);
-}
-.chstrip-q-thumb {
-    margin-top: -2vh;
-    color: #3a3a3a;
-    font-size: 0.8vh;
-    width: 3vw;
-    height: 4vh;
-    line-height: 4vh;
-    border: 1px solid #c5c2c2;
-    border-radius: 8px;
-    background: linear-gradient(
-        to right,
-        #3a3a3a 0%,
-        #c2c2c2 20%,
-        hsl(0, 0%, 57%) 50%,
-        #00a 1px,
-        #919191 52%,
-        #c2c2c2 80%,
-        #3a3a3a 100%
-    );
-}
diff --git a/client/assets/css/ReductionMeter.css b/client/assets/css/ReductionMeter.css
@@ -1,17 +1,17 @@
 .reductionmeter-body {
-    top: 2px;
-    width: 24px;
-    margin-top: 15px;
-    margin-left: 5px;
+    top: 0.8vh;
+    width: 2vw;
+    margin-top: 3vh;
+    margin-left: 3vw;
     background-color: black;
     border-radius: 7px;
 }
 
 .reductionmeter-canvas {
-    width: 10px;
-    margin-left: -5px;
-    bottom: 0;
-    height: 100%;
+    width: 2vw;
+    margin-left: -2vw;
+    bottom: 0px;
+    height: 100vh;
 }
 
 .reductionmeter-lower-part {
@@ -29,3 +29,20 @@
     margin-left: 10px;
     background-color: rgb(206, 0, 0);
 }
+
+.reduction-6db {
+    color: #445f4a;
+    width: 63px;
+    height: 2px;
+    margin-left: -58px;
+    margin-right: 30px;
+    margin-top: 108px;
+}
+.reduction-12db {
+    color: #5c3939;
+    width: 63px;
+    height: 2px;
+    margin-left: -88px;
+    margin-right: 30px;
+    margin-top: 152px;
+}
diff --git a/client/components/ChanStrip.tsx b/client/components/ChanStrip.tsx
@@ -396,8 +396,6 @@ class ChanStrip extends React.PureComponent<
                                         )}
                                         <p className="zero-comp">______</p>
                                         {this.gainReduction()}
-                                        <p className="reduction-6db">___6dB</p>
-                                        <p className="reduction-12db">___12dB</p>
                                     </div>
                                 </div>
                             </React.Fragment>