handle small screen resolutions more gracefully

fixes #16
10.3.x-maintenance
cTn 2013-12-18 14:57:27 +01:00
parent 078d305259
commit ad8304f7a8
12 changed files with 143 additions and 134 deletions

View File

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

View File

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

View File

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

View File

@ -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) {

View File

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

View File

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

View File

@ -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;
}

View File

@ -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 />

View File

@ -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');

View File

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

View File

@ -22,12 +22,11 @@
border: 1px solid silver;
}
.tab-receiver .bars .value {
width: 60px;
width: 50px;
padding-left: 20px;
}
.tab-receiver .tunings {
float: left;
border: 1p xsolid red;
float: right;
}
.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;
margin-right: 10px;
}
.tab-receiver .throttle_curve {
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-right: 10px;
margin: 0 10px 0 10px;
width: 220px;
height: 58px;

View File

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