CF/BF - Cleanup ports tab.

Handes wrapping on narrow screens better.
cleanflight · Apr 22, 2017 · 22b82cc · 22b82cc
1 parent 1a8bad2
commit 22b82cc
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -772,10 +772,10 @@
     },
 
     "portsIdentifier": {
-      "message": "Port Identifier"
+      "message": "Identifier"
     },
     "portsConfiguration": {
-      "message": "Configuration"
+      "message": "Configuration/MSP"
     },
     "portsSerialRx": {
       "message": "Serial Rx"
@@ -828,6 +828,18 @@
     "portsFunction_TELEMETRY_SMARTPORT": {
         "message": "SmartPort"
     },
+    "portsFunction_TELEMETRY_IBUS": {
+        "message": "iBUS"
+    },
+    "portsFunction_TELEMETRY_JETIXBUS": {
+        "message": "JETIXBUS"
+    },
+    "portsFunction_TELEMETRY_CRSF": {
+        "message": "CRSF"
+    },
+    "portsFunction_TELEMETRY_SRXL": {
+        "message": "SRXL"
+    },
     "portsFunction_ESC_SENSOR": {
         "message": "ESC"
     },
@@ -843,9 +855,6 @@
     "portsFunction_IRC_TRAMP": {
         "message": "IRC Tramp"
     },
-    "portsFunction_TELEMETRY_IBUS": {
-        "message": "iBUS Telemetry"
-    },
     "pidTuningUpgradeFirmwareToChangePidController": {
         "message": "<span style=\"color: red\">Changing PID controller disabled - you can change it via the CLI.</span>  You have firmware with API version <span style=\"color: red\">$1</span>, but this functionality requires requires <span class=\"message-positive\">$2</span>."
     },

diff --git a/tabs/ports.css b/tabs/ports.css
@@ -72,15 +72,30 @@
     display: none;
 }
 
+/* margin required when cell contents wrap */
+.tab-ports .ports select {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.tab-ports .ports select[name=function-peripherals],
+.tab-ports .ports select[name=function-telemetry] {
+    max-width: 110px;
+}
+
+.tab-ports .ports td {
+    text-align: center;
+}
+
 .tab-ports .ports thead td {
-    text-align: left;
     white-space: nowrap;
     padding: 5px 7px;
     background-color: #828885;
     color: white;
 }
 
 .tab-ports .ports thead td:first-child {
+    text-align: left;
     border-top-left-radius: 5px;
     border-left: 0px;
 }

diff --git a/tabs/ports.js b/tabs/ports.js
@@ -209,7 +209,7 @@ TABS.ports.initialize = function (callback, scrollPosition) {
                     var select_e;
                     if (column !== 'telemetry' && column !== 'sensors' && column !== 'peripherals') {
                         var checkboxId = 'functionCheckbox-' + portIndex + '-' + columnIndex + '-' + i;
-                        functions_e.prepend('<span class="function"><input type="checkbox" class="togglemedium" id="' + checkboxId + '" value="' + functionName + '" /><label for="' + checkboxId + '"> ' + functionRule.displayName + '</label></span>');
+                        functions_e.prepend('<span class="function"><input type="checkbox" class="togglemedium" id="' + checkboxId + '" value="' + functionName + '" /><label for="' + checkboxId + '"></label></span>');
 
                         if (serialPort.functions.indexOf(functionName) >= 0) {
                             var checkbox_e = functions_e.find('#' + checkboxId);