Merge branch 'skaman82-GUI-optimization' into development

_locales/en/messages.json

@@ -933,7 +933,7 @@
     },
 
     "cliInfo": {
-        "message": "<span style=\"color: red\">Note</span>: Leaving CLI tab or pressing Disconnect will <strong>automatically</strong> send \"<strong>exit</strong>\" to the board.  With the latest firmware this will make the controller <span style=\"color: red\">restart</span> and unsaved changes will be <span style=\"color: red\">lost</span>."
+        "message": "<strong>Note</strong>: Leaving CLI tab or pressing Disconnect will <strong>automatically</strong> send \"<strong>exit</strong>\" to the board.  With the latest firmware this will make the controller <span style=\"color: red\">restart</span> and unsaved changes will be <span style=\"color: red\">lost</span>."
     },
     "cliInputPlaceholder": {
         "message": "Write your command here"
@@ -1140,7 +1140,7 @@
         "message": "Warning"
     },
     "firmwareFlasherWarningText": {
-        "message": "Please do <span style=\"color: red\">not</span> try to flash <strong>non-cleanflight</strong> hardware with this firmware flasher.<br />Do <span style=\"color: red\">not</span> <strong>disconnect</strong> the board or <strong>turn off</strong> your computer while flashing.<br /><br /><span style=\"color: #57a929\">Note: </span>STM32 bootloader is stored in ROM, it cannot be bricked.<br />Note: <strong>Auto-Connect</strong> is always disabled while you are inside firmware flasher.<br /><span style=\"color: red\">Note: </span>Make sure you have a backup; some upgrades/downgrades will wipe your configuration.<br /><span style=\"color: #57a929\">Note:</span> If you have problems flashing try disconnecting all cables from your FC.<br /><br /><span style=\"color: #57a929\">Note: </span>If you have lost comminication with your board then power off the board, jumper the bootloader pins, power on, enable 'No reboot sequence', enable 'Full chip erase', re-flash, then power off, remove bootloader jumper, power on and connect (For all firmware except OPBL firmware)."
+        "message": "Please do <span style=\"color: red\">not</span> try to flash <strong>non-cleanflight</strong> hardware with this firmware flasher.<br />Do <span style=\"color: red\">not</span> <strong>disconnect</strong> the board or <strong>turn off</strong> your computer while flashing.<br /><br /><strong>Note: </strong>STM32 bootloader is stored in ROM, it cannot be bricked.<br /><strong>Note: </strong><span style=\"color: red\">Auto-Connect</span> is always disabled while you are inside firmware flasher.<br /><strong>Note: </strong>Make sure you have a backup; some upgrades/downgrades will wipe your configuration.<br /><strong>Note:</strong> If you have problems flashing try disconnecting all cables from your FC.<br /><br /><strong>Note: </strong>If you have lost comminication with your board then power off the board, jumper the bootloader pins, power on, enable 'No reboot sequence', enable 'Full chip erase', re-flash, then power off, remove bootloader jumper, power on and connect (For all firmware except OPBL firmware)."
     },
     "firmwareFlasherButtonLeave": {
         "message": "Leave Firmware Flasher"
@@ -1202,5 +1202,11 @@
     },
     "controlAxisAux8": {
         "message": "AUX 8"
+    },
+    "pidHelp1": {
+        "message": "The values below change the behaviour of the ANGLE and HORIZON flight modes. Different PID controllers handle the LEVEL values differently. Please check the documentation."
+    },
+    "configHelp1": {
+        "message": "RSSI is a measurement of signal strength and is very handy so you know when your aircraft isw going out of range or if it is suffering RF interference."
     }
 }

changelog.html

@@ -1,6 +1,7 @@
 <span>2015.11.14 - 1.1.0 - cleanflight</span>
 <ul>
     <li>Support Cleanflight API 1.14.0.</li>
+    <li>Minor GUI cleanups and fixes.</li>
 </ul>
 
 <span>2015.11.11 - 1.0.0 - cleanflight</span>

js/gui.js

@@ -238,6 +238,7 @@ GUI_control.prototype.tab_switch_cleanup = function (callback) {
 };
 
 GUI_control.prototype.content_ready = function (callback) {
+    
     $('.togglesmall').each(function(index, html) {
         var switchery = new Switchery(html,
         {
@@ -258,12 +259,43 @@ GUI_control.prototype.content_ready = function (callback) {
         
         $(html).removeClass('toggle');
     });
+
+    $('.togglemedium').each(function(index, html) {
+        var switchery = new Switchery(html,
+         {
+            className: 'switcherymid',
+            color: '#59aa29', 
+            secondaryColor: '#c4c4c4' 
+         });
+
+         $(html).removeClass('togglemedium');
+    });
     
     // Build link to in-use CF version documentation
     var documentationButton = $('div#content #button-documentation');
     documentationButton.html("Documentation for "+CONFIG.flightControllerVersion);
     documentationButton.attr("href","https://github.com/cleanflight/cleanflight/tree/v{0}/docs".format(CONFIG.flightControllerVersion));
-    
+
+    // loading tooltip
+    jQuery(document).ready(function($) {
+        $('cf_tip').each(function() { // Grab all ".cf_tip" elements, and for each...
+        log(this); // ...print out "this", which now refers to each ".cf_tip" DOM element 
+    });
+
+    $('.cf_tip').each(function() { 
+        $(this).jBox('Tooltip', {
+            content: $(this).children('.cf_tooltiptext'),		
+            delayOpen: 100,
+            delayClose: 100,
+            position: {
+                x: 'right',
+                y: 'center'
+            },
+            outside: 'x'
+            });
+        });
+    });
+
     if (callback) callback();
 }
 

js/libraries/switchery/switchery.css

@@ -18,7 +18,7 @@
   vertical-align: middle;
   width: 45px;
   z-index:1000;
-
+  opacity:1 !important;
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
@@ -35,14 +35,9 @@
   height: 14px;
   position: absolute;
   top: 0;
-  width: 14px;
+  width: 14px; 
-  
 }
 
-
-
-
-
 .switcherymid {
   background-color: #fff;
   border: 1px solid #fff;
@@ -70,22 +65,13 @@
   height: 14px;
   position: absolute;
   top: 0;
-  width: 14px;
+  width: 14px;  
-  
 }
 
-
-
-
-
-
-
-
 /* Switchery sizes. */
 
 .switchery-small {
   border: none !important;
-
   border-radius: 20px;
   height: 10px;
   width: 20px;

js/serial_backend.js

@@ -79,8 +79,8 @@ $(document).ready(function () {
                     if (!GUI.auto_connect) $('div#port-picker #baud').prop('disabled', false);
 
                     // reset connect / disconnect button
-        			$('div.connect_controls a.connect').removeClass('active');
+                    $('div.connect_controls a.connect').removeClass('active');
-					$('div.connect_controls a.connect_state').text(chrome.i18n.getMessage('connect'));
+                    $('div.connect_controls a.connect_state').text(chrome.i18n.getMessage('connect'));
                    
                     // reset active sensor indicators
                     sensor_status(0);
@@ -137,12 +137,8 @@ $(document).ready(function () {
         });
     });
 
-
     PortHandler.initialize();
     PortUsage.initialize();
-    
-
-
 });
 
 
@@ -183,7 +179,6 @@ function onOpen(openInfo) {
         }, 10000);
 
 
-
         // request configuration data
         MSP.send_message(MSP_codes.MSP_API_VERSION, false, false, function () {
             GUI.log(chrome.i18n.getMessage('apiVersionReceived', [CONFIG.apiVersion]));
@@ -257,14 +252,11 @@ function onConnect() {
     $('#tabs ul.mode-disconnected').hide();
     $('#tabs ul.mode-connected').show();
 
-    if ("CLFL" == CONFIG.flightControllerIdentifier){
+    var sensor_state = $('#sensor-status');
-        
+    sensor_state.show(); 
-        var sensor_state = $('#sensor-status');
+   	
-        sensor_state.show(); 
+    var port_picker = $('#portsinput');
-       	
+    port_picker.hide(); 
-        var port_picker = $('#portsinput');
-        port_picker.hide(); 
-    }
 }
 
 function onClosed(result) {
@@ -280,7 +272,6 @@ function onClosed(result) {
     var port_picker = $('#portsinput');
     port_picker.show(); 
 
-    /* */
     var sensor_state = $('#sensor-status');
     sensor_state.hide();
    
@@ -312,30 +303,27 @@ function sensor_status(sensors_detected) {
 
     if (have_sensor(sensors_detected, 'acc')) {
         $('.accel', e_sensor_status).addClass('on');
-    	$('.accicon', e_sensor_status).addClass('active');
+        $('.accicon', e_sensor_status).addClass('active');
 
     } else {
         $('.accel', e_sensor_status).removeClass('on');
-		$('.accicon', e_sensor_status).removeClass('active');
+        $('.accicon', e_sensor_status).removeClass('active');
-
     }
 
     if (have_sensor(sensors_detected, 'gyro')) {
         $('.gyro', e_sensor_status).addClass('on');
-		$('.gyroicon', e_sensor_status).addClass('active');
+        $('.gyroicon', e_sensor_status).addClass('active');
-
     } else {
         $('.gyro', e_sensor_status).removeClass('on');
-		$('.gyroicon', e_sensor_status).removeClass('active');
+        $('.gyroicon', e_sensor_status).removeClass('active');
-
     }
 
     if (have_sensor(sensors_detected, 'baro')) {
         $('.baro', e_sensor_status).addClass('on');
-		$('.baroicon', e_sensor_status).addClass('active');
+        $('.baroicon', e_sensor_status).addClass('active');
     } else {
         $('.baro', e_sensor_status).removeClass('on');
-		$('.baroicon', e_sensor_status).removeClass('active');
+        $('.baroicon', e_sensor_status).removeClass('active');
     }
 
     if (have_sensor(sensors_detected, 'mag')) {
@@ -343,7 +331,7 @@ function sensor_status(sensors_detected) {
 		$('.magicon', e_sensor_status).addClass('active');
     } else {
         $('.mag', e_sensor_status).removeClass('on');
-		$('.magicon', e_sensor_status).removeClass('active');
+        $('.magicon', e_sensor_status).removeClass('active');
     }
 
     if (have_sensor(sensors_detected, 'gps')) {
@@ -351,15 +339,15 @@ function sensor_status(sensors_detected) {
 		$('.gpsicon', e_sensor_status).addClass('active');
     } else {
         $('.gps', e_sensor_status).removeClass('on');
-		$('.gpsicon', e_sensor_status).removeClass('active');
+        $('.gpsicon', e_sensor_status).removeClass('active');
     }
 
     if (have_sensor(sensors_detected, 'sonar')) {
         $('.sonar', e_sensor_status).addClass('on');
-		$('.sonaricon', e_sensor_status).addClass('active');
+        $('.sonaricon', e_sensor_status).addClass('active');
     } else {
         $('.sonar', e_sensor_status).removeClass('on');
-		$('.sonaricon', e_sensor_status).removeClass('active');
+        $('.sonaricon', e_sensor_status).removeClass('active');
     }
 }
 
@@ -404,4 +392,3 @@ function bit_clear(num, bit) {
     return num & ~(1 << bit);
 }
 
-

main.css

@@ -37,19 +37,6 @@ a.disabled {
 }
 
 /* Help-Icon  */
-span .helpicon {
-    float: right;
-    margin-top: 2px;
-    margin-right: 0px;
-    display: block;
-    height: 14px;
-    width: 14px;
-    opacity: 0.2;
-    background-image: url(images/icons/cf_icon_info_grey.svg);
-    background-size: contain;
-    background-position: center;
-}
-
 .helpicon {
     float: right;
     margin-top: 7px;
@@ -61,19 +48,15 @@ span .helpicon {
     background-image: url(images/icons/cf_icon_info_grey.svg);
     background-size: contain;
     background-position: center;
+    transition: none;  
 }
 
 .helpicon:hover {
-    opacity: 1.0;
+    opacity: 0.9;
     background-image: url(images/icons/cf_icon_info_green.svg);
+    transition: none;  
 }
 
-/* Change here the content of the documentation button in all tabs!!!
-
-.cf_doc_version_bt a:before {
-	content:"Documentation 1.10";
-	}
-*/
 .cf_doc_version_bt a {
     padding: 1px 9px 1px 9px;
     margin-top: -45px;
@@ -128,12 +111,12 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 .headerbar {
-    height: 110px;
+	height:110px;
-    width: 100%;
+	width:100%;
-    float: left;
+	background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.15));
-    background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.15));
 }
 
+
 #logo {
     position: relative;
     float: left;
@@ -151,7 +134,7 @@ input[type="number"]::-webkit-inner-spin-button {
 .logo_text {
     position: absolute;
     height: 20px;
-    width: 132px;
+    width: 125px;
     left: 31px;
     top: 63px;
     color: #949494;
@@ -535,12 +518,12 @@ input[type="number"]::-webkit-inner-spin-button {
 
 #tabs ul {
     /* overflow-y: auto;  do not force scrollbars as it renders blank stripe on some user agents */
-    
+
 }
 
 #tabs.logopen ul {
     /* Cause the height to shrink to contain its floated contents while log is open */
-    
+
 }
 
 .header-wrapper .mode-connected {
@@ -905,10 +888,10 @@ dialog {
     /* leave 20px side padding always */
     /*padding: 0 20px 0 20px;
     for testing: */
-    padding: 20px;
+  padding: 20px;
-    position: relative;
+  position: relative;
-    float: left;
+  /*float: left;
-    width: calc(100% - 40px);
+  width:calc(100% - 40px);*/
 }
 
 .content_toolbar {
@@ -959,7 +942,7 @@ dialog {
     cursor: default;
     color: #fff;
     background-color: #AFAFAF;
-    border: none;
+    border: 1px solid #AFAFAF;
     pointer-events: none;
     text-shadow: none;
     opacity: 0.5;
@@ -1370,7 +1353,7 @@ dialog {
     border-radius: 3px;
     color: #fff;
     font-size: 10px;
-}
+	}
 
 .fixfalse {
     background-color: #e60000;
@@ -1385,7 +1368,7 @@ dialog {
 @media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) {
     .content_wrapper {
         padding: 15px;
-        width: calc(100% - 30px);
+  /*width:calc(100% - 30px);*/
     }
     .tab_title {
         font-size: 16px;
@@ -1407,12 +1390,12 @@ dialog {
     body {
         /*font-size: 11px;*/
         /* lets see if we really need this? */
-        
+
     }
     .tab-setup, .tab-landing, .tab-adjustments, .tab-auxiliary, .tab-cli, .tab-configuration, .tab-dataflash,
         .tab-firmware_flasher, .tab-gps, .tab-help, .tab-led-strip, .tab-logging, .tab-modes, .tab-motors,
         .tab-pid_tuning, .tab-ports, .tab-receiver, .tab-sensors, .tab-servos {
-        
+
     }
     .cf_table td {
         padding-top: 2px;
@@ -1423,7 +1406,7 @@ dialog {
     }
     .default_btn a {
         /*font-size:11px;*/
-        
+
     }
     #tabs li a {
         font-family: 'open_sansregular', Arial;
@@ -1465,7 +1448,13 @@ dialog {
         margin-right: 7px;
         height: 14px;
         width: 14px;
+        transition: none;
+
     }
+    
+    #tooltiptext {
+    }
+    
     .gps_false {
         padding: 0px 3px 0px 3px;
         font-size: 10px;
@@ -1484,4 +1473,4 @@ dialog {
         height: calc(100% - 81px);
         overflow-y: auto;
     }
-}
+}

main.js

@@ -386,21 +386,4 @@ $("#showlog").on('click', function() {
     
 });
 
-});
+});
-
-
-
-
-
-// loading tooltip
-$(document).ready(function() {
-$('.cf_tip').jBox('Tooltip', {
-    delayOpen: 100,
-    delayClose: 100,
-	position: {
-        x: 'right',
-        y: 'center'
-    },
-	outside: 'x'
-});
-});

tabs/configuration.html

@@ -281,9 +281,10 @@
             <div class="gui_box grey">
                 <div class="gui_box_titlebar">
                     <div class="spacer_box_title" i18n="configurationRSSI"></div>
-                    <div class="helpicon cf_tip"
+                        <div class="helpicon cf_tip">
-                        title="RSSI is a measurement of signal strength and is very handy so you know when your aircraft isw going out of range or if it is suffering RF interference."></div>
+                            <div class="cf_tooltiptext" i18n="configHelp1" style="display:none;"></div>
-                </div>
+                        </div>
+                    </div>
                 <div class="spacer_box">
                     <table cellpadding="0" cellspacing="0">
                         <thead>

tabs/configuration.js

@@ -89,7 +89,7 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
             {bit: 4, group: 'esc', name: 'MOTOR_STOP', description: 'Don\'t spin the motors when armed'},
             {bit: 5, group: 'other', name: 'SERVO_TILT', description: 'Servo gimbal'},
             {bit: 6, group: 'other', name: 'SOFTSERIAL', description: 'Enable CPU based serial ports'},
-            {bit: 7, group: 'gps', name: 'GPS', description: 'Configure port scenario first<div class="helpicon cf_tip" title="Remember to select port scenario first!"></div>'},
+            {bit: 7, group: 'gps', name: 'GPS', description: 'Configure port scenario first'},
             {bit: 8, group: 'rxFailsafe', name: 'FAILSAFE', description: 'Failsafe settings on RX signal loss'},
             {bit: 9, group: 'other', name: 'SONAR', description: 'Sonar'},
             {bit: 10, group: 'other', name: 'TELEMETRY', description: 'Telemetry output'},
@@ -355,22 +355,6 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
 
             });
         });
-
-
-
-// loading tooltip
-	$(document).ready(function() {
-		$('.cf_tip').jBox('Tooltip', {
-		delayOpen: 100,
-		delayClose: 100,
-		position: {
-			x: 'right',
-			y: 'center'
-		},
-		outside: 'x'
-		});
-	});
-	
 		
 	
         $('a.save').click(function () {

tabs/firmware_flasher.html

@@ -17,8 +17,8 @@
                     </tr>
                     <tr class="option flash_on_connect_wrapper">
                         <td><label> <input class="flash_on_connect toggle" type="checkbox" /> <span
-                                i18n="firmwareFlasherFlashOnConnect"></span></td>
+                                i18n="firmwareFlasherFlashOnConnect"></span></label></td>
-                        </label>
+                        
                         <td><span class="description" i18n="firmwareFlasherFlashOnConnectDescription"></span></td>
                     </tr>
                     <tr class="option">
@@ -89,7 +89,7 @@
                 <p i18n="firmwareFlasherTargetWarning"></p>
             </div>
         </div>
-        <div class="info">
+        <div class="info"><a name="progressbar"></a>
             <progress class="progress" value="0" min="0" max="100"></progress>
             <span class="progressLabel" i18n="firmwareFlasherLoadFirmwareFile"></span>
         </div>
@@ -102,7 +102,7 @@
             <a class="load_remote_file disabled" href="#" i18n="firmwareFlasherButtonLoadOnline"></a>
         </div>
         <div class="btn">
-            <a class="flash_firmware disabled" href="#" i18n="firmwareFlasherFlashFirmware"></a>
+            <a class="flash_firmware disabled" href="#progressbar" i18n="firmwareFlasherFlashFirmware"></a>
         </div>
     </div>
 </div>

tabs/firmware_flasher.js

@@ -529,4 +529,3 @@ TABS.firmware_flasher.cleanup = function (callback) {
 
     if (callback) callback();
 };
-

tabs/landing.css

@@ -1,43 +1,41 @@
+/* general layout */
 .tab-landing {
-    margin: 0px;
+    min-height: 100%;
-    padding: 0px;
+    overflow: hidden;
+}
+
+.tab-landing .content_wrapper {
+    padding: 0;
+    min-height: 100%;
+    height: 100%;
+    overflow-y: auto;
     background-color: #436c2c;
 }
 
-.tab-landing {
-    margin: 0px;
-    padding: 0px;
-    width: 100%;
-    position: absolute;
-}
-
 .tab-landing .content_top {
-    float: left;
+    height: 140px;
-    width: 100%;
+    background: #59aa29;
-    background-color: #59aa29;
+    padding: 20px;
-    height: 240px;
-    height: 35%;
-    height: 190px;
 }
 
 .tab-landing .content_mid {
-    float: left;
-    width: 100%;
     background-color: #eaeaea;
+    overflow: hidden;
 }
 
 .tab-landing .content_foot {
-    float: left;
+    clear: both;
-    width: 100%;
+    padding: 20px;
+    padding-bottom: 5px;
 }
 
+/* hero block */
 .tab-landing .logowrapper {
-    float: both;
     margin-left: auto;
     margin-right: auto;
-    width: 450px;
+    margin-top: 5px;
+    width: 800px;
     color: white;
-    margin-top: 25px;
     font-size: 14px;
     font-family: 'open_sanslight', Arial;
 }
@@ -52,154 +50,26 @@
     font-family: 'open_sanslight', Arial;
 }
 
-.tab-landing .content_wrapper {
+/* sponsors blocks */
-    margin: 0px;
-    padding: 0px;
-    width: calc(100% - 0px);
-    height: 100%;
-}
-
-.tab-landing .left {
-    width: 60%;
-    position: relative;
-}
-
-.tab-landing .right {
-    float: left;
-    margin-left: 10px;
-    width: calc(40% - 10px);
-    position: relative;
-}
-
-.contributing li {
-    list-style-type: disc;
-    list-style-position: initial;
-    margin-left: 20px;
-}
-
-#changelog_bt {
-    height: 84px;
-    width: 30px;
-    background-color: black;
-    margin-left: -30px;
-    margin-top: 30px;
-    position: absolute;
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px;
-}
-
-#changelog_button {
-    display: block;
-    color: white;
-    height: 30px;
-    width: 100px;
-    transform: rotate(270deg);
-    transform-origin: left top 0;
-    margin-left: 6px;
-    margin-top: 74px;
-}
-
-.changelog_wrapper {
-    right: 0px;
-    width: 30px;
-    height: 100%;
-    position: fixed;
-}
-
-.changelog {
-    height: calc(100% - 0px);
-    right: 0px;
-    width: 0px;
-    background-color: #363736;
-    position: absolute;
-    color: #ccc;
-}
-
-.changelog .title {
-    line-height: 20px;
-    text-align: left;
-    padding-left: 10px;
-    font-weight: bold;
-    color: #56AC1D;
-    text-transform: uppercase;
-}
-
-.changelog .changewrapper {
-    height: calc(100% - 40px);
-    padding: 10px;
-    overflow-y: hidden;
-    overflow-x: hidden;
-    -webkit-user-select: text;
-    opacity: 0;
-}
-
-.changelog .changewrapper.active {
-    overflow-y: scroll;
-    opacity: 0;
-}
-
-.changelog .changewrapper span {
-    font-weight: bold;
-    line-height: 22px;
-}
-
-.changelog .changewrapper ul {
-    margin-bottom: 10px;
-    line-height: 15px;
-}
-
-.changelog .changewrapper ul span {
-    font-weight: bold;
-    color: #fff;
-}
-
-.changelog .changewrapper li {
-    font-weight: normal;
-    margin-left: 0px;
-    border-top: 1px solid #656565;
-    padding-top: 4px;
-    padding-bottom: 4px;
-}
-
-.changelog .changewrapper p {
-    margin-bottom: 5px;
-}
-
-.text2 ul {
-    margin-bottom: 0px;
-    line-height: 15px;
-}
-
-.text2 li {
-    font-weight: normal;
-    margin-left: 0px;
-    border-top: 1px solid #ccc;
-    padding-top: 4px;
-    padding-bottom: 4px !important;
-}
-
 .sponsors .title {
     text-transform: uppercase;
     font-size: 10px;
 }
 
 .sponsors {
-    float: both;
     margin-left: auto;
     margin-right: auto;
-    width: 825px;
     text-align: center;
-    color: rgba(255, 255, 255, 0.50);
+    color: silver;
-    margin-top: 2%;
 }
 
 .sponsors ul {
-    margin-top: 10px;
+    margin-top: 5px;
 }
 
 .sponsors li {
-    margin-right: 10px;
     display: inline-block;
+    margin-right: 10px;
 }
 
 .sponsors li a {
@@ -208,7 +78,7 @@
     padding-left: 4px;
     padding-right: 4px;
     font-size: 13px;
-    line-height: 10px;
+    line-height: 22px;
     color: white;
     font-weight: normal;
     font-family: 'open_sanslight', Arial;
@@ -227,27 +97,140 @@
     font-size: 12px;
 }
 
-.text3 {
+/* text columns */
+.tab-landing .content_mid .column .wrap {
+    padding: 15px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+
+.tab-landing .content_mid .column .wrap2 {
+    padding: 10px;
+    padding-bottom: 10px;
+    padding-top: 10px;
+}
+
+.tab-landing .content_mid h2, .tab-landing .content_mid h3 {
+    margin-bottom: 5px;
+    font-size: 13px;
+}
+
+.tab-landing .content_mid h3 {
+    font-size: 12px;
+}
+
+.tab-landing .content_mid .text1 .wrap {
+    margin-left: 0px;
+}
+
+.tab-landing .content_mid .text1 {
+    width: 37%;
+}
+
+.tab-landing .content_mid .text2 {
+    width: 40%;
+}
+
+.tab-landing .content_mid .text2 ul {
+    margin-top: 10px;
+}
+
+.tab-landing .content_mid .text2 li {
+    padding: 5px 0;
+    border-top: 1px dotted silver;
+}
+
+.tab-landing .content_mid .text3 {
+    width: 23%;
+}
+
+.tab-landing .content_mid .text3 .wrap2 {
+    border: 1px solid silver;
+    border-radius: 5px;
+    background: white;
+    margin-right: 25px;
+    margin-left: 20px;
+    margin-top: 5px;
+    min-height: 187px;
     font-size: 11px;
 }
 
-.mid_head {
+.tab-landing .content_mid .text3 .donate {
-    font-size: 13px;
+    margin-top: 10px;
-    line-height: 10px;
-    color: #000;
-    font-weight: bold;
-    margin-bottom: 10px;
-    line-height: 16px;
-}
-
-.donate {
-    float: left;
-    margin-top: 15px;
-    width: 100%;
     text-align: center;
-    margin-bottom: -5px;
 }
 
-.text1  a:hover, .text2  a:hover, .text3 a:hover {
+/* changelog block */
-    color: #59aa29;
+#changelog {
+    width: 250px;
+    height: 100%;
+    position: fixed;
+    right: -245px;
+    top: 0px;
+}
+
+#changelog .wrapper {
+    height: 100%;
+    padding: 0 20px;
+    border-left: 5px solid green;
+    overflow-y: auto;
+    display: none;
+}
+
+#changelog .button {
+    transform: rotate(270deg);
+    top: 50px;
+    right: 215px;
+    position: absolute;
+    background: green;
+    border-radius: 5px 5px 0 0;
+    border-bottom: none;
+    height: 30px;
+}
+
+#changelog .button a {
+    display: block;
+    padding: 5px 10px;
+    width: 70px;
+    text-align: center;
+    color: white;
+}
+
+#changelog .title {
+    margin: 20px 0;
+    font-size: 16px;
+}
+
+#content.log_open #changelog {
+    right: 0px;
+    background: white;
+}
+
+#content.log_open #changelog .wrapper {
+    display: block;
+}
+
+/* changelog content */
+#changelog .log {
+    line-height: 17px;
+}
+
+#changelog .log span {
+    display: block;
+    font-weight: bold;
+    padding-bottom: 5px;
+    border-bottom: 1px solid #ddd;
+}
+
+#changelog .log ul {
+    margin: 5px 0 20px 10px;
+}
+
+#changelog .log li {
+    font-weight: normal;
+    margin-bottom: 5px;
+}
+
+#changelog .log p {
+    margin-bottom: 20px;
 }

tabs/landing.html

@@ -7,32 +7,27 @@
             </div>
         </div>
         <div class="content_mid">
-            <div class="cf_column third_left text1" style="width: 41%">
+            <div class="column third_left text1">
-                <div class="spacer_left" style="width: calc(100% - 30px); padding-left: 20; padding-right: 10px;">
+                <div class="wrap">
-                    <div class="mid_head">Hardware</div>
+                    <h2>Hardware</h2>
                     <div i18n="defaultWelcomeText"></div>
                 </div>
             </div>
-            <div class="cf_column third_center text2" style="width: 37%;">
+            <div class="column third_center text2">
-                <div class="spacer">
+                <div class="wrap">
-                    <div i18n="defaultContributingHead" class="mid_head"></div>
+                    <h2 i18n="defaultContributingHead"></h2>
                     <div i18n="defaultContributingText"></div>
                 </div>
             </div>
-            <div class="cf_column third_right text3" style="width: calc(22% - 15px); margin-right: 15px;">
+            <div class="column third_right text3">
-                <div class="spacer_right" style="padding-left: 15px; width: calc(100% - 25px);">
+                <div class="wrap2">
-                    <div class="gui_box grey" style="min-height: 200px; border: #59aa29 1px solid;">
+                    <h3 i18n="defaultDonateHead"></h3>
-                        <div class="spacer" style="margin-top: 10px; margin-bottom: 10px;">
+                    <div i18n="defaultDonateText"></div>
-                            <div i18n="defaultDonateHead" class="mid_head"></div>
+                    <div class="donate">
-                            <div i18n="defaultDonateText"></div>
+                        <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=TSQKVT6UYKGL6"
-                            <div class="donate">
+                            target="_blank" title="Donate"><img src="./images/btn-donate.png" alt="Paypal"
-                                <a
+                            height="30" /></a>
-                                    href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=TSQKVT6UYKGL6"
+                        </li>
-                                    target="_blank" title="Donate"><img src="./images/btn-donate.png" alt="Paypal"
-                                    height="30" /></a>
-                                </li>
-                            </div>
-                        </div>
                     </div>
                 </div>
             </div>
@@ -55,20 +50,21 @@
                     <li><a href="http://www.overskyrc.com" title="www.overskyrc.com" target="_blank">OverSkyRC</a></li>
                     <li><a href="http://multirotormania.com" title="multirotormania.com" target="_blank">Multi
                             Rotor Mania</a></li>
-                    <li><a href="http://www.scorpionsystem.com" title="www.scorpionsystem.com" target="_blank">Scorpion Power Systems</a></li>
+                    <li><a href="http://www.scorpionsystem.com" title="www.scorpionsystem.com" target="_blank">Scorpion
+                            Power Systems</a></li>
                     <li><a href="http://www.multigp.com" title="www.multigp.com" target="_blank">MultiGP</a></li>
                 </ul>
             </div>
         </div>
-        <div class="changelog_wrapper">
+    </div>
-            <div class="changelog configurator">
+    <div id="changelog">
-                <div id="changelog_bt">
+        <div class="button">
-                    <a id="changelog_button" href="#">Changelog</a>
+            <a id="changelog_toggle" href="#">Changelog</a>
-                </div>
+        </div>
-                <div class="title" i18n="defaultChangelogHead"></div>
+        <div class="wrapper">
-                <div class="changewrapper">
+            <div class="title" i18n="defaultChangelogHead"></div>
-                    <!-- changelog content will be loaded here -->
+            <div class="log">
-                </div>
+                <!-- changelog content will be loaded here -->
             </div>
         </div>
     </div>

tabs/landing.js

@@ -14,41 +14,34 @@ TABS.landing.initialize = function (callback) {
         localize();
 
         // load changelog content
-        $('div.changelog.configurator .changewrapper').load('./changelog.html');
+        $('#changelog .log').load('./changelog.html');
 
         $('div.welcome a, div.sponsors a').click(function () {
             googleAnalytics.sendEvent('ExternalUrls', 'Click', $(this).prop('href'));
         });
-        
-
-/** changelog trigger **/
-$("#changelog_button").on('click', function() {
-    var state = $(this).data('state2');
-    if ( state ) {
-        $(".changelog").animate({width: 0}, 200);
-	    $(".changewrapper").animate({opacity: 0}, 500);
-		$(".changewrapper").removeClass('active');
-
-        state = false;
-    }else{
-        $(".changelog").animate({width: 220}, 200);
-        $(".changewrapper").animate({opacity: 1}, 500);
-        $(".changewrapper").addClass('active');
-
-        state = true;
-    }
-    $(this).text(state ? 'Close' : 'Changelog');
-    $(this).data('state2', state);
-    
-});
-
-
 
+        /** changelog trigger **/
+        $("#changelog_toggle").on('click', function() {
+            var state = $(this).data('state2');
+            if (state) {
+                $("#changelog").animate({right: -245}, 200, function () {
+                    $("#content").removeClass('log_open');
+                    });
+                state = false;
+            } else {
+                $("#changelog").animate({right: 0}, 200);
+                $("#content").addClass('log_open');
+                state = true;
+            }
+            $(this).text(state ? 'Close' : 'Changelog');
+            $(this).data('state2', state);
+        });
 
         GUI.content_ready(callback);
     });
+
 };
 
 TABS.landing.cleanup = function (callback) {
     if (callback) callback();
-};
+};

tabs/led_strip.css

@@ -12,10 +12,11 @@
 }
 
 .tab-led-strip .mainGrid {
-    width: calc((24px + 8px) * 16);
+    width: calc((24px + 7px) * 16);
-    height: calc((24px + 8px) * 16);
+    height: calc((24px + 7px) * 16);
     float: left;
     margin-right: 10px;
+    border-radius: 3px;
 }
 
 .tab-led-strip .mainGrid .gPoint {
@@ -112,13 +113,13 @@
 .tab-led-strip .wire {
     color: rgba(255,255,255,.5);
     text-align: center;
-    font-size: 16px;
+    font-size: 12px;
     text-shadow: 1px 1px rgba(0,0,0,.4);
     padding-top: 0px;
     display: block;
-    font-family: monospace;
+    /* font-family: monospace; */
     margin-left: -1px;
-    margin-top: -23px;
+    margin-top: -21px;
     width: 24px;
     height: 24px;
 }
@@ -276,7 +277,7 @@
 .tab-led-strip .colors {
     height: 130px;
     position: relative;
-	display: inline-block;
+    display: inline-block;
     width: 49%;
 }
 
@@ -324,6 +325,7 @@
     border: 1px solid rgb(236, 236, 236);
     margin-top: -1px;
     margin-left: -1px;
+    border-radius: 3px;
 }
 
 .gridSections .block {
@@ -334,9 +336,6 @@
 }
 
 
-
-
-
 /*******JQUERYUI**********/
 
 .tab-led-strip .ui-selected {

tabs/motors.html

@@ -118,7 +118,7 @@
                     </div>
                     <div class="notice">
                         <p i18n="motorsNotice"></p>
-                        <label><input id="motorsEnableTestMode" class="toggle" type="checkbox" /><span
+                        <label><input id="motorsEnableTestMode" class="togglesmall" type="checkbox" /><span
                             class="motorsEnableTestMode" i18n="motorsEnableControl"></span></label>
                     </div>
                     <div class="cler-both"></div>

tabs/pid_tuning.css

@@ -228,10 +228,10 @@
     float: left;
     margin: 0px;
     padding: 0px;
-    text-align: center;
+    text-align: left;
     padding-left: 5px;
     line-height: 13px;
-    padding-top: 6px;
+    padding-top: 8px;
     font-size: 12px;
     border-bottom: 1px solid #ccc;
     color: #828282;
@@ -262,7 +262,7 @@
 }
 
 .tab-pid_tuning .helpicon {
-    margin-top: 0px;
+    margin-top: -1px;
 }
 
 #content-watermark {

tabs/pid_tuning.html

@@ -64,24 +64,6 @@
                             <td><input type="number" name="d" step="1" min="0" max="255" /></td>
                         </tr>
                     </table>
-                    <table id="pid_accel" class="pid_tuning">
-                        <tr>
-                            <th colspan="4">
-                                <div class="pid_mode">
-                                    Accelerometer/Level
-                                    <div class="helpicon cf_tip"
-                                        title="The values below change the behaviour of the ANGLE and HORIZON flight modes. Different PID controllers handle the LEVEL values differently. Please check the documentation."></div>
-                                </div>
-                            </th>
-                        </tr>
-                        <tr class="LEVEL">
-                            <!-- 7 -->
-                            <td></td>
-                            <td><input type="number" name="p" step="0.1" min="0" max="25.5" /></td>
-                            <td><input type="number" name="i" step="0.001" min="0" max="0.255" /></td>
-                            <td><input type="number" name="d" step="1" min="0" max="255" /></td>
-                        </tr>
-                    </table>
                     <table id="pid_baro" class="pid_tuning">
                         <tr>
                             <th colspan="4">
@@ -146,6 +128,32 @@
                         </tr>
                     </table>
                 </div>
+<div class="gui_box grey" style="margin-top:10px;">
+<table id="pid_accel" class="pid_tuning">
+                        <tr>
+                            <th colspan="4">
+                                <div class="pid_mode">
+                                    <div style="width: 25%; float: left; text-align: left;">
+                                        Angle/Horizon
+                                        <div class="helpicon cf_tip">
+                                            <div class="cf_tooltiptext" i18n="pidHelp1" style="display: none;"></div>
+                                        </div>
+                                    </div>
+                                    <div style="width:25%; float:left;">Strength (Angle)</div>
+                                    <div style="width:25%; float:left;">Strength (Horizon)</div>
+                                    <div style="width:25%; float:left;">Transition (Horizon)</div>
+                                </div>
+                            </th>
+                        </tr>
+                        <tr class="LEVEL">
+                            <!-- 7 -->
+                            <td></td>
+                            <td><input type="number" name="p" step="0.1" min="0" max="25.5" /></td>
+                            <td><input type="number" name="i" step="0.001" min="0" max="0.255" /></td>
+                            <td><input type="number" name="d" step="1" min="0" max="255" /></td>
+                        </tr>
+                    </table>
+                  </div>    
             </div>
             <div class="cf_column half">
                 <div class="spacer_left">

tabs/pid_tuning.js

@@ -264,20 +264,6 @@ TABS.pid_tuning.initialize = function (callback) {
         // translate to user-selected language
         localize();
 
-	// loading tooltip
-	$(document).ready(function() {
-	$('.cf_tip').jBox('Tooltip', {
-		delayOpen: 100,
-		delayClose: 100,
-		position: {
-        x: 'right',
-        y: 'center'
-		},
-		outside: 'x'
-	});
-	});
-
-
         hideUnusedPids(CONFIG.activeSensors);
 
         $('#showAllPids').on('click', function(){

tabs/ports.js

@@ -163,7 +163,7 @@ TABS.ports.initialize = function (callback, scrollPosition) {
                     var select_e;
                     if (column != 'telemetry') {
                         var checkboxId = 'functionCheckbox-' + portIndex + '-' + columnIndex + '-' + i;
-                        functions_e.prepend('<span class="function"><input type="checkbox" class="toggle" 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 + '"> ' + functionRule.displayName + '</label></span>');
 
                         if (serialPort.functions.indexOf(functionName) >= 0) {
                             var checkbox_e = functions_e.find('#' + checkboxId);

tabs/receiver.css

@@ -287,6 +287,8 @@
     border-radius: 0px;
     border: 1px solid silver;
     margin: 4px;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
 }
 
 .tab-receiver .hybrid_element select {

tabs/servos.html

@@ -21,7 +21,7 @@
                 </tr>
             </table>
             <div class="live">
-                <input type="checkbox" class="toggle" /> <span i18n="servosLiveMode"></span>
+                <input type="checkbox" class="togglemedium" /> <span i18n="servosLiveMode"></span>
             </div>
         </div>
         <div class="note require-upgrade">

tabs/setup.css

@@ -74,6 +74,12 @@
     background-image: url(../images/paper.jpg);
     background-size: 100%;
     background-position: center;
+    border-radius: 5px;
+}
+
+#canvas {
+    width: 100% !important;
+    height: 100% !important;
 }
 
 .gui_box grey .block_wrapper {

tabs/setup.html

@@ -52,7 +52,7 @@
             <div class="spacer_right">
                 <div class="model-and-info">
                     <div id="interactive_block">
-                        <div id="canvas_wrapper" style="">
+                        <div id="canvas_wrapper">
                             <canvas id="canvas"></canvas>
                             <div class="attitude_info">
                                 <dl>