Merge pull request #2266 from iNavFlight/MrD_Rearrange-top-bar-to-be-…

…1024px-safe
iNavFlight · Nov 30, 2024 · 6dd9cea · 6dd9cea
2 parents b2396e6 + 68ce956
commit 6dd9cea
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -88,13 +88,7 @@ <h1 class="modal__title modal__title" data-i18n="appUpdateNotificationHeader"></
                 </div>
             </div>
             <div class="header-wrapper">
-                <div id="dataflash_wrapper_global">
-                    <div class="noflash_global" align="center" i18n="sensorDataFlashNotFound"></div>
-                    <ul class="dataflash-contents_global">
-                        <li class="dataflash-free_global">
-                            <div class="legend" i18n="sensorDataFlashFreeSpace"></div>
-                        </li>
-                    </ul>
+                <div id="profiles_wrapper_global">
                     <div id="profile_change">
                         <div class="dropdown dropdown-dark">
                             <form name="profile-change" id="profile-change">
@@ -130,6 +124,14 @@ <h1 class="modal__title modal__title" data-i18n="appUpdateNotificationHeader"></
                         </div>
                     </div>
                 </div>
+                <div id="dataflash_wrapper_global">
+                    <div class="noflash_global" align="center" i18n="sensorDataFlashNotFound"></div>
+                    <ul class="dataflash-contents_global">
+                        <li class="dataflash-free_global">
+                            <div class="legend" i18n="sensorDataFlashFreeSpace"></div>
+                        </li>
+                    </ul>
+                </div>
                 <div id="sensor-status" class="sensor_state mode-connected">
                     <ul>
                         <li class="gyro" i18n_title="sensorStatusGyro">

diff --git a/js/gui.js b/js/gui.js
@@ -529,7 +529,7 @@ GUI_control.prototype.update_dataflash_global = function () {
         width: (100-(FC.DATAFLASH.totalSize - FC.DATAFLASH.usedSize) / FC.DATAFLASH.totalSize * 100) + "%",
         display: 'block'
         });
-        $(".dataflash-free_global div").text('Dataflash: free ' + formatFilesize(FC.DATAFLASH.totalSize - FC.DATAFLASH.usedSize));
+        $(".dataflash-free_global div").html(i18n.getMessage('sensorDataFlashFreeSpace') + formatFilesize(FC.DATAFLASH.totalSize - FC.DATAFLASH.usedSize));
     } else {
         $(".noflash_global").css({
         display: 'block'

diff --git a/js/serial_backend.js b/js/serial_backend.js
@@ -462,6 +462,7 @@ var SerialBackend = (function () {
             $('#sensor-status').show();
             $('#portsinput').hide();
             $('#dataflash_wrapper_global').show();
+            $('#profiles_wrapper_global').show();
 
             /*
             * Init PIDs bank with a length that depends on the version
@@ -481,7 +482,6 @@ var SerialBackend = (function () {
 
             interval.add('global_data_refresh', periodicStatusUpdater.run, periodicStatusUpdater.getUpdateInterval(CONFIGURATOR.connection.bitrate), false);
         });
-
     }
 
     privateScope.onClosed = function (result) {
@@ -497,6 +497,7 @@ var SerialBackend = (function () {
         $('#sensor-status').hide();
         $('#portsinput').show();
         $('#dataflash_wrapper_global').hide();
+        $('#profiles_wrapper_global').hide();
         $('#quad-status_wrapper').hide();
 
         //updateFirmwareVersion();

diff --git a/locale/en/messages.json b/locale/en/messages.json
@@ -5700,7 +5700,7 @@
         "message": "No dataflash <br>chip found"
     },
     "sensorDataFlashFreeSpace": {
-        "message": "Dataflash: free space"
+        "message": "Dataflash: <br />free "
     },
     "mixerProfile1": {
         "message": "Mixer Profile 1"

diff --git a/locale/uk/messages.json b/locale/uk/messages.json
@@ -5475,7 +5475,7 @@
         "message": "Чіп пам'яті <br>не знайдено"
     },
     "sensorDataFlashFreeSpace": {
-        "message": "Доступна пам'ять"
+        "message": "Пам'ять: <br/>Доступна"
     },
     "mixerProfile1": {
         "message": "Профіль мікшера 1"

diff --git a/src/css/main.css b/src/css/main.css
@@ -1696,50 +1696,80 @@ dialog {
     color: white;
     font-size: 10px;
     margin-top: 20px;
-    width: 410px;
+    width: 100px;
     float: right;
-    margin-right: 10px;
+    margin-right: 20px;
     line-height: 12px;
-    height: 33px;
+    height: 64px;
     border-radius: 5px;
     border: 1px solid #272727;
     box-shadow: 0 1px 0 rgba(92, 92, 92, 0.5);
     background: #434343 -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.55));
     padding-top: 5px;
     display: none;
     text-shadow: 0 1px rgba(0, 0, 0, 1.0);
+}
+
+@media screen and (max-width: 1060px) {
+    #dataflash_wrapper_global {
+        display: none !important;
+    }
+}
+
+/* Profile selector styling*/
 
+#profiles_wrapper_global {
+    color: white;
+    font-size: 10px;
+    margin-top: 20px;
+    width: 130px;
+    float: right;
+    margin-right: 10px;
+    line-height: 12px;
+    height: 64px;
+    padding: 0px;
+    display: none;
+    text-shadow: 0 1px rgba(0, 0, 0, 1.0);
 }
 
 #profile_change {
     color: white;
-    margin-top: 16px;
+    margin: 0px;
     width: 130px;
     float: left;
-    margin-right: 10px;
     line-height: 12px;
 }
 
+#profile_change > .dropdown {
+    margin: 0px;
+}
+
 #mixer_profile_change {
     color: white;
-    margin-top: 16px;
+    margin: 0px;
     width: 130px;
     float: left;
-    margin-right: 0;
     line-height: 12px;
 }
 
+#mixer_profile_change > .dropdown {
+    margin: 0px;
+}
+
 #battery_profile_change {
     color: white;
-    margin-top: 16px;
+    margin: 0px;
     width: 130px;
     float: right;
-    margin-right: 0;
     line-height: 12px;
 }
 
+#battery_profile_change > .dropdown {
+    margin: 0px;
+}
+
 .dataflash-contents_global {
-    margin-top: 18px;
+    margin-top: 30px;
     border: 1px solid #4A4A4A;
     background-color: #4A4A4A;
     display: flex;
@@ -1770,7 +1800,7 @@ dialog {
 
 .dataflash-contents_global li div {
     position: absolute;
-    top: -18px;
+    top: -30px;
     margin-top: 0;
     left: 0;
     right: 0;