Ajust gps aligment of Status and Quality (betaflight#3581)

* Step 1 * New aligment
chmelevskij · Apr 27, 2024 · 59ca12f · 59ca12f
1 parent 9661944
commit 59ca12f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/locales/en/messages.json b/locales/en/messages.json
@@ -2792,8 +2792,11 @@
     "gpsSignalSatId": {
         "message": "Sat ID"
     },
-    "gpsSignalStatusQly": {
-        "message": "Status &nbsp;&nbsp;&nbsp; | &nbsp;Quality"
+    "gpsSignalStatus": {
+        "message": "Status"
+    },
+    "gpsSignalQuality": {
+        "message": "Quality"
     },
     "gnssQualityNoSignal": {
         "message": "no signal"
@@ -2817,7 +2820,7 @@
         "message": "unused"
     },
     "gnssUsedUsed": {
-        "message": "USED&nbsp;"
+        "message": "USED"
     },
     "gnssHealthyUnknown": {
         "message": "unknown"

diff --git a/src/js/tabs/gps.js b/src/js/tabs/gps.js
@@ -211,10 +211,11 @@ gps.initialize = async function (callback) {
             eSsTable.html('');
             eSsTable.append(`
                 <tr class="titles">
-                    <td style="width: 12%;" i18n="gpsSignalGnssId">${i18n.getMessage('gpsSignalGnssId')}</td>
-                    <td style="width: 10%;" i18n="gpsSignalSatId">${i18n.getMessage('gpsSignalSatId')}</td>
-                    <td style="width: 25%;" i18n="gpsSignalStr">${i18n.getMessage('gpsSignalStr')}</td>
-                    <td style="width: 53%;" i18n="gpsSignalStatusQly">${i18n.getMessage('gpsSignalStatusQly')}</td>
+                    <td style="text-align: left;  width: 12%;" i18n="gpsSignalGnssId">${i18n.getMessage('gpsSignalGnssId')}</td>
+                    <td style="text-align: center;width: 10%;" i18n="gpsSignalSatId">${i18n.getMessage('gpsSignalSatId')}</td>
+                    <td style="text-align: center;width: 25%;" i18n="gpsSignalStr">${i18n.getMessage('gpsSignalStr')}</td>
+                    <td style="text-align: left;  width: 17%;" i18n="gpsSignalStatus">${i18n.getMessage('gpsSignalStatus')}</td>
+                    <td style="text-align: left;  width: 33%;" i18n="gpsSignalQuality">${i18n.getMessage('gpsSignalQuality')}</td>
                 </tr>
             `);
 
@@ -281,12 +282,13 @@ gps.initialize = async function (callback) {
 
                         // 1st column: unused = red, used = green
                         if (used.startsWith(i18n.getMessage('gnssUsedUsed'))) {
-                            used = `<span class="colorToggle ready">&nbsp${used}&nbsp</span>`;
+                            used = `<span class="colorToggle ready">${used}</span>`;
                         } else {
                             used = `<span class="colorToggle ${usedColor}">${used}</span>`;
                         }
 
-                        rowContent += `<td>${used} | ${quality}</td>`;
+                        rowContent += `<td style="text-align: left;  width: 17%;">${used}</td>
+                                       <td style="text-align: left;  width: 33%;">${quality}</td>`;
                     }
                     eSsTable.append(`<tr>${rowContent}</tr>`);
                 }