diff --git a/client/assets/css/ChanStrip.css b/client/assets/css/ChanStrip.css index f62c4702..4bd40f1a 100644 --- a/client/assets/css/ChanStrip.css +++ b/client/assets/css/ChanStrip.css @@ -1,11 +1,8 @@ .chan-strip-body { - position: fixed; - display: flex; + position: relative; top: 5px; - left: 0px; - right: 0px; - overflow: auto; - height: 240px; + width: 420px; + height: 940px; background-color: rgb(31, 31, 31); border-color: rgb(70, 70, 70); border-style: solid; @@ -15,37 +12,36 @@ color: #fff; } +.chan-strip-body > .header { + margin-left: 20px; + margin-top: 10px; + width: 420px; + font-size: 240%; + color: #fff; +} + .chan-strip-body > .parameters { - position: fixed; - display: flex; top: 5px; left: 2px; - width: 1880px; overflow: auto; - height: 240px; - text-align: left; - z-index: 2; - + text-align: center; color: #fff; } -.parameters > .vertical { - transform: rotate(180deg); - text-align: right; - writing-mode: vertical-rl; - text-orientation: right; +.parameters > .parameter-group { + display: flex; + top: 5px; + left: 2px; margin-left: 20px; - margin-right: 20px; - margin-top: 50px; - line-height: 30px; - font-size: 140%; + overflow: auto; + text-align: center; + color: #fff; } -.parameters > .vertical-line { - background-color:rgb(70, 70, 70); - height: 100%; - width: 4px; - margin-left: 10px; - margin-right: 10px; + +.parameters > .group-text { + text-align: center; + line-height: 20px; + font-size: 110%; } .parameters > .parameter-text { @@ -67,39 +63,30 @@ font-size: 95%; } -.chan-strip-body > .settings-buttons { - background-color: rgb(31, 31, 31); +.header > .close { position: fixed; - z-index: 2; - top: 9px; - height: 240px; - width: 140px; - right: 15px; -} - -.settings-buttons > .close { outline : none; border-color: rgb(99, 99, 99); background-color: rgb(27, 27, 27); - border-radius: 100%; - display: block; + border-radius: 20px; color: #fff; width: 50px; height: 50px; font-size: 30px; - line-height: 50px; - margin-left: 50px; + margin-top: 5px; + left: 350px; } -.settings-buttons > button { +.header > button { outline : none; border-color: rgb(99, 99, 99); background-color: rgb(27, 27, 27); border-radius: 7px; - margin-top: 10px; - width: 130px; - font-size: 105%; - line-height: 30px; + margin-left: 10px; + margin-top: 5px; + width: 180px; + font-size: 12px; + line-height: 40px; color: #fff; } diff --git a/client/assets/css/Channels.css b/client/assets/css/Channels.css index 28005d44..761212bd 100644 --- a/client/assets/css/Channels.css +++ b/client/assets/css/Channels.css @@ -3,7 +3,6 @@ flex-direction: row; background-color: black; min-height: 760px; - margin-top: 22vh; } .channels-mix-body { diff --git a/client/components/ChanStrip.tsx b/client/components/ChanStrip.tsx index f26d52f0..d28b6a87 100644 --- a/client/components/ChanStrip.tsx +++ b/client/components/ChanStrip.tsx @@ -10,8 +10,6 @@ import { TOGGLE_SHOW_MONITOR_OPTIONS } from '../../server/reducers/settingsActions' import { IFader } from '../../server/reducers/fadersReducer' -import { SET_FADER_THRESHOLD, SET_FADER_RATIO, SET_FADER_LOW, SET_FADER_MID, SET_FADER_HIGH } from '../../server/reducers/faderActions' -import { SET_AUX_LEVEL } from '../../server/reducers/channelActions'; import { SOCKET_SET_THRESHOLD, SOCKET_SET_RATIO, SOCKET_SET_LOW, SOCKET_SET_MID, SOCKET_SET_HIGH, SOCKET_SET_AUX_LEVEL } from '../../server/constants/SOCKET_IO_DISPATCHERS'; interface IChanStripInjectProps { @@ -250,28 +248,26 @@ class ChanStrip extends React.PureComponent -
- {this.props.label || ("FADER " + (this.props.faderIndex + 1))} - {" COMPRESSOR"} +
+ {"COMPRESSOR"}
-
- {this.threshold()} - {this.ratio()} -
-
- {this.props.label || ("FADER " + (this.props.faderIndex + 1))} - {" EQUALIZER"} +
+ {this.threshold()} + {this.ratio()}
-
- {this.low()} - {this.mid()} - {this.high()} -
-
- {this.props.label || ("FADER " + (this.props.faderIndex + 1))} - {" MONITOR MIX MINUS"} +
+
+ {"EQUALIZER"} +
+
+ {this.low()} + {this.mid()} + {this.high()} +
+
+
+ {"MONITOR MIX MINUS"}
-
    {this.props.channel.map((ch: any, index: number) => { if (ch.auxLevel[this.props.auxSendIndex] >= 0) { @@ -279,9 +275,6 @@ class ChanStrip extends React.PureComponent -
    -
    -
) } @@ -289,25 +282,32 @@ class ChanStrip extends React.PureComponent - {this.props.offtubeMode ? - this.parameters() - : null - } -
+
+ {this.props.label || ("FADER " + (this.props.faderIndex + 1))} -
+ className="close" + onClick={() => this.handleClose()} + >X + + +
+
+ >CHANNEL ROUTING + + >MONITOR ROUTING +
+
+ {this.props.offtubeMode ? + this.parameters() + : null + }
) }