moving majority of save buttons to bottom right corner, graph margin plish

tabs/auxiliary_configuration.css

@@ -40,12 +40,16 @@
             border: 0;
             background-color: white;
         }
+    .tab-auxiliary_configuration .buttons {
+        width: calc(100% - 20px);
+
+        position: absolute;
+        bottom: 10px;
+    }
     .tab-auxiliary_configuration .update {
         display: block;
         float: right;
 
-        margin-top: 10px;
-
         height: 28px;
         line-height: 28px;
 

tabs/auxiliary_configuration.html

@@ -7,5 +7,7 @@
             <th i18n="auxiliaryName"></th>
         </tr>
     </table>
-    <a class="update" href="#" i18n="auxiliaryButtonSave"></a>
+    <div class="buttons">
+        <a class="update" href="#" i18n="auxiliaryButtonSave"></a>
+    </div>
 </div>

tabs/initial_setup.css

@@ -309,20 +309,21 @@
 
             margin-left: 100px;
         }
-.tab-initial_setup .buttons {
+    .tab-initial_setup .buttons {
-    width: calc(100% - 20px);
+        width: calc(100% - 20px);
 
-    position: absolute;
+        position: absolute;
-    bottom: 10px;
+        bottom: 10px;
-}
+    }
     .tab-initial_setup .update {
         display: block;
         float: right;
 
-        width: 80px;
         height: 28px;
         line-height: 28px;
 
+        padding: 0 15px 0 15px;
+
         text-align: center;
         font-weight: bold;
 

tabs/logging.css

@@ -56,9 +56,9 @@
     }
         .tab-logging .buttons a {
             display: block;
-            float: left;
+            float: right;
 
-            margin-right: 10px;
+            margin-left: 10px;
 
             height: 28px;
             line-height: 28px;
@@ -76,7 +76,4 @@
         }
         .tab-logging .buttons .back {
             display: none;
-
-            float: right;
-            margin: 0;
         }

tabs/logging.html

@@ -33,8 +33,8 @@
         </dl>
     </div>
     <div class="buttons">
-        <a href="#" class="log_file" i18n="loggingButtonLogFile"></a>
-        <a href="#" class="logging" i18n="loggingStart"></a>
         <a href="#" class="back" i18n="loggingBack"></a>
+        <a href="#" class="logging" i18n="loggingStart"></a>
+        <a href="#" class="log_file" i18n="loggingButtonLogFile"></a>
     </div>
 </div>

tabs/pid_tuning.css

@@ -73,6 +73,12 @@
         float: right;
         width: calc(40% - 10px); /* - ( "virtual" margin) */
     }
+    .tab-pid_tuning .buttons {
+        width: calc(100% - 20px);
+
+        position: absolute;
+        bottom: 10px;
+    }
     .tab-pid_tuning .update,
     .tab-pid_tuning .refresh {
         display: block;

tabs/pid_tuning.html

@@ -76,11 +76,13 @@
             <td><input type="number" name="tpa"        step="0.01" min="0" max="2.55" /></td>
         </tr>
     </table>
-    <a class="update" href="#" i18n="pidTuningButtonSave"></a>
-    <a class="refresh" href="#" i18n="pidTuningButtonRefresh"></a>
     <div class="clear-both"></div>
     <div class="profile">
         <span class="head" i18n="pidTuningProfileHead"></span>
         <input type="number" name="profile" min="1" max="3" />
     </div>
+    <div class="buttons">
+        <a class="update" href="#" i18n="pidTuningButtonSave"></a>
+        <a class="refresh" href="#" i18n="pidTuningButtonRefresh"></a>
+    </div>
 </div>

tabs/receiver.css

@@ -121,37 +121,9 @@
 
         border: 1px solid silver;
     }
-    .tab-receiver .update,
-    .tab-receiver .refresh {
-        display: block;
-        float: right;
-
-        margin-top: 22px;
-
-        height: 28px;
-        line-height: 28px;
-
-        padding: 0 15px 0 15px;
-
-        text-align: center;
-        font-weight: bold;
-
-        border: 1px solid silver;
-        background-color: #ececec;
-    }
-    .tab-receiver .refresh {
-        margin-right: 10px;
-    }
-    .tab-receiver .update:hover,
-    .tab-receiver .refresh:hover {
-        background-color: #dedcdc;
-    }
     .tab-receiver select[name="rx_refresh_rate"] {
         float: right;
 
-        margin-top: 30px;
-        margin-right: 20px;
-
         border: 1px solid silver;
     }
     .tab-receiver #RX_plot {
@@ -194,6 +166,37 @@
         .tab-receiver #RX_plot .line:nth-child(12) {
             stroke: #7a6614;
         }
+    .tab-receiver .buttons {
+        width: calc(100% - 20px);
+
+        position: absolute;
+        bottom: 10px;
+    }
+    .tab-receiver .update,
+    .tab-receiver .refresh {
+        display: block;
+        float: right;
+
+        margin-top: 22px;
+
+        height: 28px;
+        line-height: 28px;
+
+        padding: 0 15px 0 15px;
+
+        text-align: center;
+        font-weight: bold;
+
+        border: 1px solid silver;
+        background-color: #ececec;
+    }
+    .tab-receiver .refresh {
+        margin-right: 10px;
+    }
+    .tab-receiver .update:hover,
+    .tab-receiver .refresh:hover {
+        background-color: #dedcdc;
+    }
 
 /* SVG classes*/
 .tab-receiver .grid .tick {

tabs/receiver.html

@@ -22,8 +22,6 @@
                 <td><input type="number" name="expo" step="0.01" min="0" max="1" /></td>
             </tr>
         </table>
-        <a class="update" href="#" i18n="receiverButtonSave"></a>
-        <a class="refresh" href="#" i18n="receiverButtonRefresh"></a>
     </div>
     <div class="curves">
         <div class="throttle_curve">
@@ -53,4 +51,8 @@
         <g class="axis x" transform="translate(40, 180)"></g>
         <g class="axis y" transform="translate(40, 10)"></g>
     </svg>
+    <div class="buttons">
+        <a class="update" href="#" i18n="receiverButtonSave"></a>
+        <a class="refresh" href="#" i18n="receiverButtonRefresh"></a>
+    </div>
 </div>

tabs/receiver.js

@@ -178,7 +178,7 @@ function tab_initialize_receiver() {
             var svg = d3.select("svg");
 
             var RX_plot_e = $('#RX_plot');
-            var margin = {top: 20, right: 20, bottom: 10, left: 40};
+            var margin = {top: 20, right: 0, bottom: 10, left: 40};
             var width, height, widthScale, heightScale;
             function update_receiver_plot_size() {
                 width = RX_plot_e.width() - margin.left - margin.right;

tabs/sensors.js

@@ -40,7 +40,7 @@ function tab_initialize_sensors() {
         return sampleNumber + 1;
     }
 
-    var margin = {top: 20, right: 20, bottom: 10, left: 40};
+    var margin = {top: 20, right: 10, bottom: 10, left: 40};
     function updateGraphHelperSize(helpers) {
         helpers.width = helpers.targetElement.width() - margin.left - margin.right;
         helpers.height = helpers.targetElement.height() - margin.top - margin.bottom;

tabs/servos.css

@@ -106,6 +106,12 @@
             float: left;
             margin: 0 0 0 5px;
         }
+    .tab-servos .buttons {
+        width: calc(100% - 20px);
+
+        position: absolute;
+        bottom: 10px;
+    }
     .tab-servos .update {
         display: block;
         float: right;

tabs/servos.html

@@ -31,6 +31,8 @@
         <div class="live">
             <span i18n="servosLiveMode"></span> <input type="checkbox" />
         </div>
-        <a class="update" href="#" i18n="servosButtonSave"></a>
+        <div class="buttons">
+            <a class="update" href="#" i18n="servosButtonSave"></a>
+        </div>
     </div>
 </div>