feat: flexible UI layout, AutoMix, Capabilities (and more)

* (more) responsive layouts * touch optimization * AutoMix toggle * fader capabilities (override enabled features for a single fader) * VU disabled when unsupported
olzzon · Jul 13, 2020 · c210c0e · c210c0e
1 parent db728e8
commit c210c0e
Show file tree

Hide file tree

Showing 19 changed files with 976 additions and 513 deletions.
diff --git a/client/assets/css/ChanStrip.css b/client/assets/css/ChanStrip.css
@@ -1,7 +1,7 @@
 .chan-strip-body {
     position: relative;
     top: 5px;
-    width: 620px;
+    min-width: 320px;
     height: 940px;
     background-color: rgb(31, 31, 31);
     border-color: rgb(70, 70, 70);
@@ -15,9 +15,11 @@
 .chan-strip-body > .header {
     margin-left: 40px;
     margin-top: 10px;
-    width: 420px;
+    margin-right: 80px;
+    /* width: 420px; */
     font-size: 240%;
     color: #fff;
+    white-space: nowrap;
 }
 
 .chan-strip-body > .parameters {
@@ -29,6 +31,16 @@
     color: #fff;
 }
 
+.chan-strip-body .parameters .horizontal {
+    display: flex;
+    justify-content: space-evenly;
+}
+.chan-strip-body .parameters .horizontal .item {
+}
+.chan-strip-body .parameters .horizontal .item .content {
+    display: flex;
+}
+
 .parameters > .inp-comp-del-group {
     display: flex;
     top: 5px;
@@ -44,7 +56,8 @@
     height: 50px;
 }
 
-.parameters > .eq-group {
+.parameters > .eq-group,
+.content > .eq-group {
     display: flex;
     top: 5px;
     left: 2px;
@@ -53,6 +66,9 @@
     text-align: center;
     color: #fff;
 }
+.content > .eq-group {
+    margin-left: 0;
+}
 
 .eq-group > .horizontal-space {
     width: 150px;
@@ -88,7 +104,8 @@
     margin-top: -150px;
 }
 
-.parameters > .parameter-text {
+.parameters > .parameter-text,
+.content > .parameter-text {
     list-style-type: none;
     text-align: center;
     margin-top: 15px;
@@ -101,6 +118,11 @@
     margin-top: 24px;
     margin-left: 50px;
 }
+.content > .delayButtons {
+    width: 30px;
+    margin-top: 24px;
+    margin-left: 50px;
+}
 
 .delayButtons > .delayTime {
     outline: none;
@@ -120,6 +142,17 @@
     margin-top: 24px;
     margin-left: 50px;
 }
+.inp-comp-del-group .input-buttons.disabled {
+    visibility: hidden;
+}
+.content > .input-buttons {
+    width: 30px;
+    margin-top: 24px;
+    margin-left: 50px;
+}
+.content > .input-buttons.disabled {
+    visibility: hidden;
+}
 
 .input-buttons > .input-select {
     outline: none;
@@ -137,7 +170,8 @@
     background-color: #2f475b;
 }
 
-.parameters > .monitor-sends {
+.parameters > .monitor-sends,
+.content > .monitor-sends {
     list-style-type: none;
     display: flex;
     text-align: center;
@@ -149,7 +183,7 @@
 }
 
 .header > .close {
-    position: fixed;
+    position: absolute;
     outline: none;
     border-color: rgb(99, 99, 99);
     background-color: rgb(27, 27, 27);
@@ -158,8 +192,8 @@
     width: 50px;
     height: 50px;
     font-size: 30px;
-    margin-top: 5px;
-    left: 550px;
+    /* margin-top: 5px; */
+    right: 40px;
 }
 
 .header > button {

diff --git a/client/assets/css/Channel.css b/client/assets/css/Channel.css
@@ -13,6 +13,29 @@
     height: 950px;
     position: relative;
     touch-action: none;
+    display: flex;
+    flex-direction: column;
+}
+
+.channel-body > .channel-props,
+.channel-body > .out-control,
+.channel-body > .channel-control {
+    flex-grow: 0;
+}
+.channel-body > .fader {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: center;
+    align-items: center;
+}
+.channel-body > .out-control {
+    padding-bottom: 5px;
+}
+.channel-body > .channel-control {
+    height: 160px;
+    display: flex;
+    flex-direction: column-reverse;
 }
 
 .channel-body.ignore-on {
@@ -47,7 +70,7 @@
     -moz-outline: none;
     margin-left: 3px;
     margin-right: 3px;
-    margin-top: 37px;
+    margin-top: 3px;
     color: white;
     height: 90px;
     width: 80px;
@@ -71,7 +94,7 @@
     -moz-outline: none;
     margin-left: 3px;
     margin-right: 3px;
-    margin-top: 5px;
+    margin-top: 3px;
     color: white;
     height: 90px;
     width: 80px;
@@ -95,7 +118,7 @@
     -moz-outline: none;
     margin-left: 3px;
     margin-right: 3px;
-    margin-top: 22px;
+    margin-top: 3px;
     color: white;
     height: 90px;
     width: 80px;
@@ -114,7 +137,8 @@
     background-color: rgb(163, 106, 0);
 }
 
-.channel-mute-button {
+.channel-mute-button,
+.channel-amix-button {
     outline: none;
     -moz-outline: none;
     margin-left: 3px;
@@ -134,6 +158,14 @@
     color: rgb(48, 48, 48);
 }
 
+.channel-amix-button.on {
+    background-color: rgb(78, 59, 97);
+    color: rgb(255, 255, 255);
+}
+.channel-amix-button.disabled {
+    visibility: hidden;
+}
+
 .channel-ignore-button {
     outline: none;
     -moz-outline: none;
@@ -189,21 +221,34 @@
 
 .channel-volume-fader {
     width: 10px;
-    height: 400px;
-    margin-left: 55px;
-    margin-top: 30px;
+    height: calc(100% - 60px);
+    margin: 30px 20px;
     background-color: rgb(15, 15, 15);
     border-color: rgba(0, 0, 0);
 }
 
+.channel-volume-fader::before,
+.channel-volume-fader::after {
+    content: '__';
+    position: absolute;
+    color: rgb(134, 134, 134);
+    top: 92px;
+}
+.channel-volume-fader::before {
+    left: 9px;
+}
+.channel-volume-fader::after {
+    right: 9px;
+}
+
 :focus {
     outline: 0;
 }
 
 .channel-zero-indicator {
     color: rgb(134, 134, 134);
     position: absolute;
-    top: 214px;
+    top: 206px;
     left: 37px;
 }