handle small screen resolutions more gracefully

fixes #16

background.js

@@ -1,11 +1,7 @@
 function start_app() {
     chrome.app.window.create('main.html', {
-        frame: 'chrome',
         id: 'main-window',
-        minWidth: 960,
+        resizable: false
-        maxWidth: 960,
-        minHeight: 600,
-        maxHeight: 600
     }, function(window_child) {
         window_child.onClosed.addListener(function() {
             // connectionId is passed from the script side through the chrome.runtime.getBackgroundPage refference

changelog.html

@@ -1,5 +1,6 @@
 <span>xx.xx.xxxx - 0.21</span>
 <p>
+    - Handle small screen resolutions more gracefully<br />
     - Bugfix for Servo tab save button &amp; CAMSTAB<br />
 </p>
 <span>12.16.2013 - 0.20</span>

main.js

@@ -15,6 +15,14 @@ ga_tracker.sendAppView('Application Started');
 // Google Analytics stuff end    
 
 $(document).ready(function() {
+    // set bounds (default 960x600)
+    if (screen.height > 600) {
+        chrome.app.window.current().setBounds({width: 960, height: 600});
+    } else {
+        $('div#content').height(280);
+        chrome.app.window.current().setBounds({width: 960, height: 400});
+    }
+    
     var tabs = $('#tabs > ul');
     $('a', tabs).click(function() {
         if ($(this).parent().hasClass('active') == false) { // only initialize when the tab isn't already active

tabs/auxiliary_configuration.css

@@ -2,6 +2,7 @@
 
 }
     .tab-auxiliary_configuration .heads {
+        float: right;
     }
         .tab-auxiliary_configuration .heads li {
             float: left;
@@ -20,7 +21,6 @@
             background-color: #ececec;
         }
             .tab-auxiliary_configuration .heads li:first-child {
-                margin-left: 181px;
                 border-left: 1px solid #8b8b8b;
             }
             .tab-auxiliary_configuration .heads li:nth-child(3) {

tabs/cli.css

@@ -25,7 +25,6 @@
         margin-top: 8px;
         display: block;
         
-        width: 911px;
         height: 20px;
         line-height: 20px;
         

tabs/cli.js

@@ -61,6 +61,14 @@ function tab_initialize_cli() {
             textarea.val(cli_history.next());
     });
     
+    // handle smaller resolutions
+    if (screen.height <= 600) {
+        $('div.tab-cli .window').height(200);
+    }
+    
+    // apply dynamic width to the textarea element according to cli window width (minus padding and border width)
+    $('div.tab-cli textarea').width($('div.tab-cli .window').outerWidth() - 7);
+    
     // give input element user focus
     $('.tab-cli textarea').focus();
     

tabs/default.css

@@ -0,0 +1,101 @@
+    .welcome {
+        float: left;
+        
+        width: 494px;
+        height: 171px;
+        
+        padding: 5px;
+        
+        border: 1px solid silver;
+    }
+        .welcome a {
+            font-weight: bold;
+        }
+    .changelog {
+        margin-left: 514px;
+        margin-bottom: 10px;
+        
+        border: 1px solid silver;
+    }
+        .changelog .title {
+            line-height: 20px;
+            
+            text-align: center;
+            font-weight: bold;
+            color: white;
+            
+            border-bottom: 1px solid silver;
+            background-color: #3f4241;
+        }
+        .changelog .wrapper {
+            height: 150px;
+            
+            padding: 5px;
+            
+            overflow-y: scroll;
+            overflow-x: hidden;
+            
+            -webkit-user-select: text;
+        }
+            .changelog .wrapper span {
+                font-weight: bold;
+            }
+            .changelog .wrapper p {
+                margin-bottom: 5px;
+            }
+    .donate {
+        float: left;
+        
+        width: 504px;
+        
+        padding: 0 0 5px 0;
+        
+        border: 1px solid silver;
+    }
+        .donate .title {
+            line-height: 20px;
+            
+            text-align: center;
+            font-weight: bold;
+            color: white;
+            
+            border-bottom: 1px solid silver;
+            background-color: #3f4241;
+        }
+        .donate p {
+            padding: 5px;
+        }
+        .donate a {
+            display: block;
+            
+            width: 74px;
+            height: 21px;
+            
+            margin: auto;
+        }
+    .firmware_flasher {
+        display: block;
+        float: right;
+        
+        height: 28px;
+        line-height: 28px;
+        
+        padding: 0 15px 0 15px;
+        
+        text-align: center;
+        font-weight: bold;
+        
+        border: 1px solid silver;
+        background-color: #ececec;
+    }
+    .firmware_flasher:hover {
+        background-color: #dedcdc;
+    }
+    .created {
+        position: absolute;
+        
+        width: 920px;
+        bottom: 5px;
+        
+        text-align: center;
+    }

tabs/default.html

@@ -1,111 +1,3 @@
-<style type="text/css">
-    .welcome {
-        float: left;
-        
-        margin-right: 10px;
-        
-        width: 494px;
-        height: 171px;
-        
-        padding: 5px;
-        
-        border: 1px solid silver;
-    }
-        .welcome a {
-            font-weight: bold;
-        }
-    .changelog {
-        float: left;
-        
-        margin-bottom: 10px;
-        
-        width: 400px;
-        
-        border: 1px solid silver;
-    }
-        .changelog .title {
-            line-height: 20px;
-            
-            text-align: center;
-            font-weight: bold;
-            color: white;
-            
-            border-bottom: 1px solid silver;
-            background-color: #3f4241;
-        }
-        .changelog .wrapper {
-            height: 150px;
-            
-            padding: 5px;
-            
-            overflow-y: scroll;
-            overflow-x: hidden;
-            
-            -webkit-user-select: text;
-        }
-            .changelog .wrapper span {
-                font-weight: bold;
-            }
-            .changelog .wrapper p {
-                margin-bottom: 5px;
-            }
-    .donate {
-        float: left;
-        
-        width: 504px;
-        
-        padding: 0 0 5px 0;
-        
-        border: 1px solid silver;
-    }
-        .donate .title {
-            line-height: 20px;
-            
-            text-align: center;
-            font-weight: bold;
-            color: white;
-            
-            border-bottom: 1px solid silver;
-            background-color: #3f4241;
-        }
-        .donate p {
-            padding: 5px;
-        }
-        .donate a {
-            display: block;
-            
-            width: 74px;
-            height: 21px;
-            
-            margin: auto;
-        }
-    .firmware_flasher {
-        display: block;
-        float: right;
-        
-        height: 28px;
-        line-height: 28px;
-        
-        padding: 0 15px 0 15px;
-        
-        text-align: center;
-        font-weight: bold;
-        
-        border: 1px solid silver;
-        background-color: #ececec;
-    }
-    .firmware_flasher:hover {
-        background-color: #dedcdc;
-    }
-    .created {
-        position: absolute;
-        
-        width: 920px;
-        bottom: 5px;
-        
-        text-align: center;
-    }
-</style>
 <div class="tab-default">
     <div class="welcome">
         This application is a configuration utility for baseflight, a 32 bit fork of the popular open source RC flight control firmware project <a href="http://www.multiwii.org/" target="_blank">MultiWii</a>.<br />

tabs/default.js

@@ -2,6 +2,11 @@ function tab_initialize_default() {
     $('#content').load("./tabs/default.html", function() {
         GUI.active_tab = 'default';
         
+        // handle smaller resolution
+        if (screen.height <= 600) {
+            $('p.created').hide();
+        }
+        
         // load changelog content
         $('div.changelog.configurator .wrapper').load('./changelog.html');
         

tabs/motor_outputs.css

@@ -64,7 +64,7 @@
         .tab-motor_outputs .motor_testing .notice {
             float: right;
             
-            width: 490px;
+            width: 480px;
             
             margin-top: 20px;
             padding: 5px;

tabs/receiver.css

@@ -22,12 +22,11 @@
             border: 1px solid silver;
         }
     .tab-receiver .bars .value {
-        width: 60px;
+        width: 50px;
         padding-left: 20px;
     }
     .tab-receiver .tunings {
-        float: left;
+        float: right;
-        border: 1p xsolid red;
     }
     .tab-receiver .tunings table {
         width: 30%;
@@ -83,11 +82,11 @@
         width: 880px; 
         height: 250px;
     }
-    .tab-receiver .throttle_curve {
+    .tab-receiver .curves {
         float: right;
-        
+    }
-        margin-bottom: 20px;
+    .tab-receiver .throttle_curve {
-        margin-right: 10px;
+        margin: 0 10px 20px 10px;
         
         width: 220px;
         height: 58px;
@@ -95,9 +94,7 @@
         border: 1px solid silver;
     }
     .tab-receiver .pitch_roll_curve {
-        float: right;
+        margin: 0 10px 0 10px;
-        
-        margin-right: 10px;
 
         width: 220px;
         height: 58px;

tabs/receiver.html

@@ -41,6 +41,14 @@
             <li class="value"></li>
         </ul>        
     </div>
+    <div class="curves">
+        <div class="throttle_curve">
+            <canvas width="220" height="58"></canvas>
+        </div>
+        <div class="pitch_roll_curve">
+            <canvas width="220" height="58"></canvas>
+        </div>
+    </div>
     <div class="tunings">
         <table class="throttle">
             <tr>
@@ -64,12 +72,6 @@
         </table>
         <a class="update" href="#">Save</a>
     </div>
-    <div class="throttle_curve">
-        <canvas width="220" height="58"></canvas>
-    </div>
-    <div class="pitch_roll_curve">
-        <canvas width="220" height="58"></canvas>
-    </div>
     <div class="clear-both"></div>
     <div id="RX_plot">
     </div>