Rearrange top bar to fit on 1024px screens

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">

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'

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();

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"

locale/uk/messages.json

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

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;