Clean up and improve receiver tab style (#1643)

Clean up and improve receiver tab style

Author: mikeller

src/css/tabs-dark/receiver-dark.css

@@ -1,5 +1,5 @@
 .tab-receiver select {
-    background-color: #414443;
+    background-color: #3a3a3a;
     color: white;
 }
 
@@ -31,15 +31,16 @@
 .tab-receiver .rssi_channel_wrapper {
     background-color: #414443;
     border-bottom: 1px solid #4d4d4d;
+    border-right: 1px solid #4d4d4d;
 }
 
 .tab-receiver .rcmap_wrapper {
     background-color: #414443;
+    border-left: 1px solid #4d4d4d;
+    border-bottom: 1px solid #4d4d4d;
 }
 
 .tab-receiver .hybrid_element {
-    border-bottom: 1px solid #4d4d4d;
-    border-left: 1px solid #4d4d4d;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
 }

src/css/tabs/receiver.css

@@ -136,14 +136,19 @@
     background-color: #14407a;
 }
 
+.tab-receiver .fc_column {
+    float: right;
+    width: 50%;
+    margin-left: 20px;
+}
+
 .tab-receiver .tunings {
     float: right;
     position: relative;
-    margin: 0px 0px 20px 0;
+    margin: 0px 0px 10px 0;
     width: 100%;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
-    background-color: #DEDEDE;
 }
 
 .tab-receiver .tunings .head {
@@ -185,15 +190,9 @@
 }
 
 .tab-receiver .tunings table td {
-    background: #DEDEDE;
     border-right: 1px solid var(--subtleAccent);
 }
 
-.tab-receiver .smoothing table td {
-    background: #DEDEDE;
-    border-right: 0px;
-}
-
 .tab-receiver .tunings table td:first-child {
     border-bottom-left-radius: 3px;
 }
@@ -207,38 +206,54 @@
     padding: 1px;
 }
 
-.tab-receiver .tunings table tr:nth-child(odd) {
-    background-color: #ececec;
-}
-
 .tab-receiver .tunings table input {
     width: calc(100% - 8px);
     border: 1px solid var(--subtleAccent);
     border-radius: 3px;
-    height: 20px;
-    margin: 3px;
-    line-height: 20px;
+    height: 22px;
+    margin: 4px;
+    line-height: 22px;
     text-align: right;
+    box-sizing: border-box;
+}
+
+.tab-receiver .input-helpicon-flex {
+    display: flex;
+    flex-flow: row nowrap;
+}
+
+.tab-receiver .input-helpicon-flex .helpicon {
+    min-width: 14px;
+    margin-left: 4px;
+}
+
+.tab-receiver .tunings .sticks th,
+.tab-receiver .tunings .deadband th {
+    width: 33%;
 }
 
 .tab-receiver .rssi_channel_wrapper {
     float: right;
-    margin: 0px 0px 20px 0;
+    margin: 0px 0px 10px 0;
     border-left: 0;
     width: 30%;
+    box-sizing: border-box;
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
-    background-color: #DEDEDE;
+    border-right: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
 }
 
 .tab-receiver .rcmap_wrapper {
     float: right;
     position: relative;
-    margin: 0px 0px 20px 0;
-    width: calc(70% - 0px);
+    margin: 0px 0px 10px 0;
+    width: 70%;
+    box-sizing: border-box;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
-    background-color: #DEDEDE;
+    border-left: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
 }
 
 .tab-receiver .rssi_channel_wrapper .head,
@@ -260,6 +275,10 @@
     border-top-right-radius: 3px;
 }
 
+.tab-receiver .rssi_channel_wrapper select {
+    width: calc(100% - 10px);
+}
+
 .tab-receiver .hybrid_element {
     border-right: 1px solid var(--subtleAccent);
 }
@@ -288,6 +307,7 @@
     height: 22px;
     padding-left: 5px;
     border: 1px solid var(--subtleAccent);
+    border-radius: 3px;
     margin: 4px;
 }
 
@@ -306,15 +326,22 @@
     width: 100%;
 }
 
-.tab-receiver .rcInterpolation-label {
-    margin-top: 6px;
+.tab-receiver .rcSmoothing table td {
     border-right: none;
 }
 
+.tab-receiver .rcSmoothing table select,
+.tab-receiver .rcSmoothing table input {
+    width: 90%;
+}
+
+.tab-receiver .rcSmoothing table .helpicon {
+    margin-top: 0px;
+}
+
 .tab-receiver .rcSmoothing td:first-child {
     width: 120px;
-    padding-left:8px;
-    border-right: none;
+    padding-left: 8px;
 }
 
 .tab-receiver .rcSmoothing td:last-child {
@@ -325,22 +352,6 @@
     -webkit-appearance: slider-horizontal;
 }
 
-.tab-receiver .curves {
-    float: left;
-    margin-right: 10px;
-}
-
-.tab-receiver .throttle_curve {
-    margin: 0 0px 0px 0;
-    width: 200px;
-    height: 117px;
-    border: 1px solid silver;
-    border-radius: 3px;
-    background-image: var(--paper);
-    background-size: 200%;
-    background-position: center;
-}
-
 .tab-receiver select[name="rx_refresh_rate"] {
     float: right;
     border: 1px solid silver;

src/js/tabs/receiver.js

@@ -338,11 +338,9 @@ TABS.receiver.initialize = function (callback) {
 
             $('.tab-receiver .rcSmoothing-input-cutoff').show();
             $('select[name="rcSmoothing-input-manual-select"]').val("1");
-            $('.tab-receiver .rc-smoothing-input-blank').hide();
             if (RX_CONFIG.rcSmoothingInputCutoff == 0) {
                 $('.tab-receiver .rcSmoothing-input-cutoff').hide();
                 $('select[name="rcSmoothing-input-manual-select"]').val("0");
-                $('.tab-receiver .rc-smoothing-input-blank').show();
             }
             $('select[name="rcSmoothing-input-manual-select"]').change(function () {
                 if ($(this).val() == 0) {
@@ -357,11 +355,9 @@ TABS.receiver.initialize = function (callback) {
 
             $('.tab-receiver .rcSmoothing-derivative-cutoff').show();
             $('select[name="rcSmoothing-input-derivative-select"]').val("1");
-            $('.tab-receiver .rc-smoothing-derivative-blank').hide();
             if (RX_CONFIG.rcSmoothingDerivativeCutoff == 0) {
                 $('select[name="rcSmoothing-input-derivative-select"]').val("0");
                 $('.tab-receiver .rcSmoothing-derivative-cutoff').hide();
-                $('.tab-receiver .rc-smoothing-derivative-blank').show();
             }
             $('select[name="rcSmoothing-input-derivative-select"]').change(function () {
                 if ($(this).val() == 0) {