mirror of
https://github.com/betaflight/betaflight-configurator.git
synced 2025-07-24 08:45:28 +03:00
fixing some things
This commit is contained in:
skaman82
parent
45fb19348d
commit
b65c4e738e
8 changed files with 576 additions and 265 deletions
145
main.css
145
main.css
|
|
@ -19,7 +19,18 @@ body {
|
|||
padding:0px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration:none;
|
||||
color:#000;
|
||||
font-family: 'open_sanssemibold', Arial;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Help-Icon */
|
||||
|
||||
|
|
@ -79,19 +90,7 @@ body {
|
|||
/* documentation button end */
|
||||
|
||||
|
||||
a {
|
||||
text-decoration:none;
|
||||
color:#59aa29;
|
||||
font-family: 'open_sanssemibold', Arial;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
transition: all ease 0.2s;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button {
|
||||
opacity: 1; /* required for chromium 33+ beta */
|
||||
|
|
@ -108,7 +107,8 @@ input[type="number"]::-webkit-inner-spin-button {
|
|||
}
|
||||
#main-wrapper {
|
||||
padding: 0px 0px 0 0px; /* padding: 5px 5px 0 5px; */
|
||||
height: calc(100% - 5px);
|
||||
height: calc(100% - 7px);
|
||||
|
||||
}
|
||||
|
||||
.headerbar {
|
||||
|
|
@ -291,6 +291,11 @@ input[type="number"]::-webkit-inner-spin-button {
|
|||
margin-top: 3px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
|
||||
/* Log setup*/
|
||||
|
||||
|
||||
#log {
|
||||
margin-bottom: 0px;
|
||||
border: 0px solid silver; /* was 1px*/
|
||||
|
|
@ -357,6 +362,24 @@ margin-right:20px;
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Log switch */
|
||||
|
||||
|
||||
.logswitch {
|
||||
position:fixed;
|
||||
right: 7px;
|
||||
margin-top:-1px;
|
||||
float:right;
|
||||
padding:5px;
|
||||
z-index:10;
|
||||
}
|
||||
.logswitch a {
|
||||
color:#656565;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.tab_container {
|
||||
float:left;
|
||||
height:100%;
|
||||
|
|
@ -451,9 +474,6 @@ transition: none;
|
|||
color: #fff;
|
||||
background-image:url(images/icons/cf_icon_info_grey.svg);
|
||||
transition: none;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -463,8 +483,8 @@ transition: none;
|
|||
}
|
||||
#content {
|
||||
margin-top: 0px; /* 31 */
|
||||
padding: 0px; /* 10 */
|
||||
height:calc(100% - 150px); /* (port picker 105px, log 25px, tab 0px, status bar: 20px) - was: calc(100% - 171px)*/
|
||||
padding: 10px; /* 10 */
|
||||
height:calc(100% - 170px); /* (port picker 105px, log 25px, tab 0px, status bar: 20px) - was: calc(100% - 171px)*/
|
||||
|
||||
background-color: white;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -558,62 +578,7 @@ dialog {
|
|||
}
|
||||
|
||||
|
||||
/* Colums START> */
|
||||
|
||||
.cf_column {
|
||||
margin-bottom:20px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.full {
|
||||
float:left;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.half {
|
||||
float:left;
|
||||
width:50%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.third_left {
|
||||
float:left;
|
||||
width:33%;
|
||||
}
|
||||
|
||||
.third_center {
|
||||
display: inline-block;
|
||||
width:34%;
|
||||
}
|
||||
|
||||
.third_right {
|
||||
float:right;
|
||||
width:33%;
|
||||
}
|
||||
|
||||
|
||||
.fourth {
|
||||
float:left;
|
||||
width:25%;
|
||||
}
|
||||
|
||||
|
||||
.threefourth_right {
|
||||
float:right;
|
||||
width:75%;
|
||||
}
|
||||
|
||||
.threefourth_left {
|
||||
float:left;
|
||||
width:75%;
|
||||
}
|
||||
|
||||
.twothird {
|
||||
float:left;
|
||||
width:67%;
|
||||
}
|
||||
|
||||
.tab_wrapper {
|
||||
padding-left:20px;
|
||||
|
|
@ -879,7 +844,7 @@ dialog {
|
|||
margin-left:3px;
|
||||
}
|
||||
|
||||
/* note */
|
||||
/* connect button */
|
||||
|
||||
|
||||
.connect_contols {
|
||||
|
|
@ -945,15 +910,25 @@ background-color:#e60000;
|
|||
|
||||
}
|
||||
|
||||
.logswitch {
|
||||
position:fixed;
|
||||
right: 7px;
|
||||
margin-top:-1px;
|
||||
float:right;
|
||||
padding:5px;
|
||||
z-index:10;
|
||||
}
|
||||
.logswitch a {
|
||||
color:#656565;
|
||||
/* fixing padding for all Tabs*/
|
||||
|
||||
}
|
||||
.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 {
|
||||
padding:;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.properties {
|
||||
width:800px;
|
||||
}
|
||||
|
||||
|
||||
.properties dl {
|
||||
width:200px;
|
||||
}
|
||||
|
||||
|
||||
.properties dd {
|
||||
width:400px;
|
||||
height:auto !important;
|
||||
}
|
||||
17
main.html
17
main.html
|
|
@ -235,20 +235,7 @@
|
|||
<p>Waiting for data ...</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
/** log trigger **/
|
||||
$("#showlog").on('click', function() {
|
||||
var state = $(this).data('state');
|
||||
if ( state ) {
|
||||
$("#log").animate({height: 27}, 800);
|
||||
state = false;
|
||||
}else{
|
||||
$("#log").animate({height: 100}, 800);
|
||||
state = true;
|
||||
}
|
||||
$(this).text(state ? 'Close' : 'Open');
|
||||
$(this).data('state', state);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
0
tabs/logging.css
Normal file → Executable file
0
tabs/logging.css
Normal file → Executable file
0
tabs/logging.html
Normal file → Executable file
0
tabs/logging.html
Normal file → Executable file
136
tabs/setup.css
Normal file → Executable file
136
tabs/setup.css
Normal file → Executable file
|
|
@ -1,28 +1,92 @@
|
|||
.tab-setup .model-and-info {
|
||||
height: calc(100% - 155px);
|
||||
height: calc(100% - 138px);
|
||||
}
|
||||
.tab-setup {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
#interactive_block {
|
||||
position: absolute;
|
||||
width:calc(71% + 8px);
|
||||
height:100%;
|
||||
max-height:417px;
|
||||
background-color:#f5f5f5;
|
||||
border-radius: 5px;
|
||||
border:1px solid #e4e4e4;
|
||||
|
||||
.tab-setup .section {
|
||||
clear: both;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.heading_info {
|
||||
position:absolute;
|
||||
height: 25px;
|
||||
margin: 10px 0px 10px 10px;
|
||||
.tab-setup .section a {
|
||||
display: block;
|
||||
|
||||
float: left;
|
||||
|
||||
width: 190px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
|
||||
border: 1px solid silver;
|
||||
background-color: #ececec;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
#interactive_block a.reset {
|
||||
.tab-setup .section a:hover {
|
||||
background-color: #dedcdc;
|
||||
}
|
||||
.tab-setup .section a.calibrating {
|
||||
background-color: #c1c1c1;
|
||||
}
|
||||
.tab-setup .section a.calibrating:hover {
|
||||
cursor: default;
|
||||
background-color: #c1c1c1;
|
||||
}
|
||||
.tab-setup .section a.disabled {
|
||||
background-color: #c1c1c1;
|
||||
}
|
||||
.tab-setup .section a.disabled:hover {
|
||||
cursor: default;
|
||||
}
|
||||
.tab-setup .section a.backup {
|
||||
width: 90px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.tab-setup .section a.restore {
|
||||
width: 90px;
|
||||
}
|
||||
.tab-setup .section p {
|
||||
margin-left: 200px;
|
||||
|
||||
padding: 0 0 0 5px;
|
||||
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
.tab-setup #interactive_block {
|
||||
float: left;
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
width: calc(100% - 199px);
|
||||
|
||||
border: 1px solid silver;
|
||||
background-color: white;
|
||||
}
|
||||
.tab-setup #interactive_block .attitude {
|
||||
float: right;
|
||||
margin: 10px 10px 0px 0px
|
||||
}
|
||||
|
||||
.tab-setup #interactive_block .attitude dt {
|
||||
float: left;
|
||||
width: 64px;
|
||||
font-weight: 700;
|
||||
text-align: right
|
||||
}
|
||||
|
||||
.tab-setup #interactive_block .attitude dd {
|
||||
display: block;
|
||||
margin-left: 64px;
|
||||
width: 64px;
|
||||
text-align: right
|
||||
}
|
||||
.tab-setup #interactive_block a.reset {
|
||||
position: absolute;
|
||||
display: block;
|
||||
|
||||
|
|
@ -39,25 +103,25 @@
|
|||
|
||||
border: 1px solid silver;
|
||||
background-color: #ececec;
|
||||
border-radius: 3px:
|
||||
|
||||
z-index: 100;
|
||||
}
|
||||
#interactive_block a.reset:hover {
|
||||
.tab-setup #interactive_block a.reset:hover {
|
||||
background-color: #dedcdc;
|
||||
}
|
||||
#canvas_wrapper {
|
||||
.tab-setup #canvas_wrapper {
|
||||
position: absolute;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.block_wrapper {
|
||||
.tab-setup .block_wrapper {
|
||||
font-size: 0;
|
||||
}
|
||||
.block {
|
||||
.tab-setup .block {
|
||||
float: left;
|
||||
display: block;
|
||||
|
||||
|
|
@ -65,7 +129,7 @@
|
|||
|
||||
border: 1px solid silver;
|
||||
}
|
||||
.block .head {
|
||||
.tab-setup .block .head {
|
||||
display: block;
|
||||
|
||||
text-align: center;
|
||||
|
|
@ -75,7 +139,7 @@
|
|||
border-bottom: 1px solid silver;
|
||||
background-color: #ececec;
|
||||
}
|
||||
.block.info {
|
||||
.tab-setup .block.info {
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
|
||||
|
|
@ -118,20 +182,24 @@
|
|||
|
||||
line-height: 20px;
|
||||
}
|
||||
.tab-setup .block.gps dd {
|
||||
height: 20px;
|
||||
|
||||
.block.instruments {
|
||||
width: 285px;
|
||||
align-content:center;
|
||||
text-align:center;
|
||||
ma
|
||||
margin-left: 85px;
|
||||
margin-bottom: 2px;
|
||||
|
||||
line-height: 20px;
|
||||
}
|
||||
.buttons {
|
||||
.tab-setup .block.instruments {
|
||||
width: 185px;
|
||||
}
|
||||
.tab-setup .buttons {
|
||||
width: calc(100% - 20px);
|
||||
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
}
|
||||
.update {
|
||||
.tab-setup .update {
|
||||
display: block;
|
||||
float: right;
|
||||
|
||||
|
|
@ -149,9 +217,3 @@
|
|||
.tab-setup .update:hover {
|
||||
background-color: #dedcdc;
|
||||
}
|
||||
|
||||
.cell_setup {
|
||||
border-bottom: solid 1px #ddd;
|
||||
padding-bottom:8px;
|
||||
padding-top:7px;
|
||||
}
|
||||
180
tabs/setup.html
Normal file → Executable file
180
tabs/setup.html
Normal file → Executable file
|
|
@ -1,141 +1,65 @@
|
|||
|
||||
<div class="tab_setup"> <!-- should be the first DIV on each tab -->
|
||||
<div class="tab_wrapper">
|
||||
|
||||
<div class="cf_column full" style="margin-bottom:10px;">
|
||||
<div class="tab_title">Setup
|
||||
<div class="cf_doc_version_bt"><a href="https://github.com/cleanflight/cleanflight/releases" target="_blank"></a></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="cf_column fourth" style="min-height:100px;">
|
||||
<div class="spacer_right">
|
||||
<div class="default_btn" style="margin-bottom:10px;"><a class="calibrateAccel" id="default_btn green" href="#" i18n="initialSetupButtonCalibrateAccel"></a></div>
|
||||
<div class="default_btn" style="margin-bottom:10px;"><a class="calibrateMag" href="#" i18n="initialSetupButtonCalibrateMag" ></a></div>
|
||||
<div class="default_btn" style="margin-bottom:10px;"><a class="resetSettings" href="#" i18n="initialSetupButtonReset"></a></div>
|
||||
|
||||
<div class="half"><div class="spacer_right">
|
||||
<div class="default_btn half"><a class="backup" href="#" i18n="initialSetupButtonBackup"></a></div>
|
||||
</div></div>
|
||||
<div class="half"><div class="spacer_left">
|
||||
<div class="default_btn half"><a class="restore" href="#" i18n="initialSetupButtonRestore"></a></div>
|
||||
</div></div></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="threefourth_right"><div class="spacer_left">
|
||||
<div class="cell_setup"><span i18n="initialSetupCalibrateAccelText"></span></div>
|
||||
<div class="cell_setup"><span i18n="initialSetupCalibrateMagText"></span></div>
|
||||
<div class="cell_setup"><span i18n="initialSetupResetText"></span></div>
|
||||
<div class="cell_setup"><span i18n="initialSetupBackupRestoreText"></span></div>
|
||||
</div></div>
|
||||
|
||||
<div style="clear:both; margin-bottom:5px;"></div>
|
||||
|
||||
|
||||
|
||||
<div class="cf_column threefourth_left" >
|
||||
|
||||
<div class="spacer_right">
|
||||
|
||||
<div class="model-and-info">
|
||||
<div class="tab-setup">
|
||||
<div class="section">
|
||||
<a class="calibrateAccel" href="#" i18n="initialSetupButtonCalibrateAccel"></a>
|
||||
<p i18n="initialSetupCalibrateAccelText">
|
||||
</p>
|
||||
</div>
|
||||
<div class="section">
|
||||
<a class="calibrateMag" href="#" i18n="initialSetupButtonCalibrateMag"></a>
|
||||
<p i18n="initialSetupCalibrateMagText">
|
||||
</p>
|
||||
</div>
|
||||
<div class="section">
|
||||
<a class="resetSettings" href="#" i18n="initialSetupButtonReset"></a>
|
||||
<p i18n="initialSetupResetText">
|
||||
</p>
|
||||
</div>
|
||||
<div class="section">
|
||||
<a class="backup" href="#" i18n="initialSetupButtonBackup"></a>
|
||||
<a class="restore" href="#" i18n="initialSetupButtonRestore"></a>
|
||||
<p i18n="initialSetupBackupRestoreText">
|
||||
</p>
|
||||
</div>
|
||||
<div class="model-and-info">
|
||||
<div id="interactive_block">
|
||||
<div id="canvas_wrapper" style="max-height:400px; min-height:300px; width:100%;">
|
||||
<div id="canvas_wrapper">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="attitude">
|
||||
<dl>
|
||||
<dt>Heading:</dt><dd class="heading"> </dd>
|
||||
<dt>Pitch:</dt><dd class="pitch"> </dd>
|
||||
<dt>Roll:</dt><dd class="roll"> </dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<a class="reset" href="#" i18n="initialSetupButtonResetZaxis"></a>
|
||||
|
||||
|
||||
</div></div></div> </div>
|
||||
|
||||
<div class="cf_column fourth">
|
||||
|
||||
<div class="spacer"><div class="gui_box grey">
|
||||
<div class="gui_box_titlebar"><div class="spacer_box_title" i18n="initialSetupInfoHead"></div>
|
||||
<div class="helpicon"></div></div><div class="spacer_box">
|
||||
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="cf_table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td i18n="initialSetupBattery"></td>
|
||||
<td class="bat-voltage">0 V</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td i18n="initialSetupDrawn"></td>
|
||||
<td class="bat-mah-drawn">0 mAh</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td i18n="initialSetupDrawing"></td>
|
||||
<td class="bat-mah-drawing">0.00 A</td>
|
||||
</tr>
|
||||
<tr class="noboarder">
|
||||
<td i18n="initialSetupRSSI"></td>
|
||||
<td class="rssi"> 0 %</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div></div></div>
|
||||
|
||||
|
||||
|
||||
<div class="spacer"><div class="gui_box grey">
|
||||
<div class="gui_box_titlebar"><div class="spacer_box_title" i18n="initialSetupGPSHead"></div>
|
||||
<div class="helpicon"></div></div><div class="spacer_box">
|
||||
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="cf_table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td i18n="gps3dFix"></td>
|
||||
<td class="gpsFix"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td i18n="gpsSats"></td>
|
||||
<td class="gpsSats"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td i18n="gpsLat"></td>
|
||||
<td class="gpsLat"></td>
|
||||
</tr>
|
||||
<tr class="noboarder">
|
||||
<td i18n="gpsLon"></td>
|
||||
<td class="gpsLon"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div></div></div>
|
||||
|
||||
|
||||
<div class="spacer"><div class="gui_box grey">
|
||||
<div class="gui_box_titlebar"><div class="spacer_box_title" i18n="initialSetupInstrumentsHead"></div>
|
||||
<div class="helpicon"></div></div><div class="spacer_box" align="center">
|
||||
</div>
|
||||
<div class="block info">
|
||||
<span class="head" i18n="initialSetupInfoHead"></span>
|
||||
<div class="fields">
|
||||
<dl>
|
||||
<dt i18n="initialSetupBattery"></dt><dd class="bat-voltage">0 V</dd>
|
||||
<dt i18n="initialSetupDrawn"></dt><dd class="bat-mah-drawn">0 mAh</dd>
|
||||
<dt i18n="initialSetupDrawing"></dt><dd class="bat-mah-drawing">0 A</dd>
|
||||
<dt i18n="initialSetupRSSI"></dt><dd class="rssi">0 %</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block gps">
|
||||
<span class="head" i18n="initialSetupGPSHead"></span>
|
||||
<div class="fields">
|
||||
<dl>
|
||||
<dt i18n="gps3dFix"></dt><dd class="gpsFix"></dd>
|
||||
<dt i18n="gpsSats"></dt><dd class="gpsSats"></dd>
|
||||
<dt i18n="gpsLat"></dt><dd class="gpsLat"></dd>
|
||||
<dt i18n="gpsLon"></dt><dd class="gpsLon"></dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block instruments">
|
||||
<span class="head" i18n="initialSetupInstrumentsHead"></span>
|
||||
<span id="attitude"></span>
|
||||
<span id="heading"></span>
|
||||
|
||||
|
||||
|
||||
</div></div></div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
222
tabs/setup_new.css
Normal file
222
tabs/setup_new.css
Normal file
|
|
@ -0,0 +1,222 @@
|
|||
.tab-setup .model-and-info {
|
||||
height: calc(100% - 155px);
|
||||
}
|
||||
.tab-setup {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
#interactive_block {
|
||||
position: absolute;
|
||||
width:calc(71% + 8px);
|
||||
height:100%;
|
||||
max-height:417px;
|
||||
background-color:#f5f5f5;
|
||||
border-radius: 5px;
|
||||
border:1px solid #e4e4e4;
|
||||
|
||||
}
|
||||
.heading_info {
|
||||
position:absolute;
|
||||
height: 25px;
|
||||
margin: 10px 0px 10px 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
#interactive_block a.reset {
|
||||
position: absolute;
|
||||
display: block;
|
||||
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
|
||||
padding: 0 15px 0 15px;
|
||||
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
|
||||
border: 1px solid silver;
|
||||
background-color: #ececec;
|
||||
border-radius: 3px:
|
||||
|
||||
z-index: 100;
|
||||
}
|
||||
#interactive_block a.reset:hover {
|
||||
background-color: #dedcdc;
|
||||
}
|
||||
#canvas_wrapper {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.block_wrapper {
|
||||
font-size: 0;
|
||||
}
|
||||
.block {
|
||||
float: left;
|
||||
display: block;
|
||||
|
||||
margin-left: 10px;
|
||||
|
||||
border: 1px solid silver;
|
||||
}
|
||||
.block .head {
|
||||
display: block;
|
||||
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
font-weight: bold;
|
||||
|
||||
border-bottom: 1px solid silver;
|
||||
background-color: #ececec;
|
||||
}
|
||||
.block.info {
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
|
||||
vertical-align: top;
|
||||
font-size: 12px;
|
||||
|
||||
border: 1px solid silver;
|
||||
}
|
||||
.tab-setup .block.info .fields {
|
||||
padding: 5px 5px 3px 5px;
|
||||
}
|
||||
.tab-setup .block.info dt {
|
||||
float: left;
|
||||
|
||||
width: 99px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.tab-setup .block.info dd {
|
||||
width: 76px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
|
||||
margin-left: 99px;
|
||||
}
|
||||
.tab-setup .block.gps {
|
||||
width: 185px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.tab-setup .block.gps .fields {
|
||||
padding: 5px 5px 3px 5px;
|
||||
}
|
||||
.tab-setup .block.gps dt {
|
||||
float: left;
|
||||
|
||||
width: 85px;
|
||||
height: 20px;
|
||||
|
||||
margin-bottom: 2px;
|
||||
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.block.instruments {
|
||||
width: 285px;
|
||||
align-content:center;
|
||||
text-align:center;
|
||||
ma
|
||||
}
|
||||
.buttons {
|
||||
width: calc(100% - 20px);
|
||||
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
}
|
||||
.update {
|
||||
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;
|
||||
}
|
||||
.tab-setup .update:hover {
|
||||
background-color: #dedcdc;
|
||||
}
|
||||
|
||||
.cell_setup {
|
||||
border-bottom: solid 1px #ddd;
|
||||
padding-bottom:8px;
|
||||
padding-top:7px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Colums START> */
|
||||
|
||||
.cf_column {
|
||||
margin-bottom:20px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.full {
|
||||
float:left;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.half {
|
||||
float:left;
|
||||
width:50%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.third_left {
|
||||
float:left;
|
||||
width:33%;
|
||||
}
|
||||
|
||||
.third_center {
|
||||
display: inline-block;
|
||||
width:34%;
|
||||
}
|
||||
|
||||
.third_right {
|
||||
float:right;
|
||||
width:33%;
|
||||
}
|
||||
|
||||
|
||||
.fourth {
|
||||
float:left;
|
||||
width:25%;
|
||||
}
|
||||
|
||||
|
||||
.threefourth_right {
|
||||
float:right;
|
||||
width:75%;
|
||||
}
|
||||
|
||||
.threefourth_left {
|
||||
float:left;
|
||||
width:75%;
|
||||
}
|
||||
|
||||
.twothird {
|
||||
float:left;
|
||||
width:67%;
|
||||
}
|
||||
|
||||
|
||||
141
tabs/setup_new.html
Normal file
141
tabs/setup_new.html
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
|
||||
<div class="tab_setup"> <!-- should be the first DIV on each tab -->
|
||||
<div class="tab_wrapper">
|
||||
|
||||
<div class="cf_column full" style="margin-bottom:10px;">
|
||||
<div class="tab_title">Setup
|
||||
<div class="cf_doc_version_bt"><a href="https://github.com/cleanflight/cleanflight/releases" target="_blank"></a></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="cf_column fourth" style="min-height:100px;">
|
||||
<div class="spacer_right">
|
||||
<div class="default_btn" style="margin-bottom:10px;"><a class="calibrateAccel" id="default_btn green" href="#" i18n="initialSetupButtonCalibrateAccel"></a></div>
|
||||
<div class="default_btn" style="margin-bottom:10px;"><a class="calibrateMag" href="#" i18n="initialSetupButtonCalibrateMag" ></a></div>
|
||||
<div class="default_btn" style="margin-bottom:10px;"><a class="resetSettings" href="#" i18n="initialSetupButtonReset"></a></div>
|
||||
|
||||
<div class="half"><div class="spacer_right">
|
||||
<div class="default_btn half"><a class="backup" href="#" i18n="initialSetupButtonBackup"></a></div>
|
||||
</div></div>
|
||||
<div class="half"><div class="spacer_left">
|
||||
<div class="default_btn half"><a class="restore" href="#" i18n="initialSetupButtonRestore"></a></div>
|
||||
</div></div></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="threefourth_right"><div class="spacer_left">
|
||||
<div class="cell_setup"><span i18n="initialSetupCalibrateAccelText"></span></div>
|
||||
<div class="cell_setup"><span i18n="initialSetupCalibrateMagText"></span></div>
|
||||
<div class="cell_setup"><span i18n="initialSetupResetText"></span></div>
|
||||
<div class="cell_setup"><span i18n="initialSetupBackupRestoreText"></span></div>
|
||||
</div></div>
|
||||
|
||||
<div style="clear:both; margin-bottom:5px;"></div>
|
||||
|
||||
|
||||
|
||||
<div class="cf_column threefourth_left" >
|
||||
|
||||
<div class="spacer_right">
|
||||
|
||||
<div class="model-and-info">
|
||||
<div id="interactive_block">
|
||||
<div id="canvas_wrapper" style="max-height:400px; min-height:300px; width:100%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="attitude">
|
||||
<dl>
|
||||
<dt>Heading:</dt><dd class="heading"> </dd>
|
||||
<dt>Pitch:</dt><dd class="pitch"> </dd>
|
||||
<dt>Roll:</dt><dd class="roll"> </dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
|
||||
<a class="reset" href="#" i18n="initialSetupButtonResetZaxis"></a>
|
||||
|
||||
|
||||
</div></div></div> </div>
|
||||
|
||||
<div class="cf_column fourth">
|
||||
|
||||
<div class="spacer"><div class="gui_box grey">
|
||||
<div class="gui_box_titlebar"><div class="spacer_box_title" i18n="initialSetupInfoHead"></div>
|
||||
<div class="helpicon"></div></div><div class="spacer_box">
|
||||
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="cf_table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td i18n="initialSetupBattery"></td>
|
||||
<td class="bat-voltage">0 V</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td i18n="initialSetupDrawn"></td>
|
||||
<td class="bat-mah-drawn">0 mAh</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td i18n="initialSetupDrawing"></td>
|
||||
<td class="bat-mah-drawing">0.00 A</td>
|
||||
</tr>
|
||||
<tr class="noboarder">
|
||||
<td i18n="initialSetupRSSI"></td>
|
||||
<td class="rssi"> 0 %</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div></div></div>
|
||||
|
||||
|
||||
|
||||
<div class="spacer"><div class="gui_box grey">
|
||||
<div class="gui_box_titlebar"><div class="spacer_box_title" i18n="initialSetupGPSHead"></div>
|
||||
<div class="helpicon"></div></div><div class="spacer_box">
|
||||
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="cf_table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td i18n="gps3dFix"></td>
|
||||
<td class="gpsFix"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td i18n="gpsSats"></td>
|
||||
<td class="gpsSats"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td i18n="gpsLat"></td>
|
||||
<td class="gpsLat"></td>
|
||||
</tr>
|
||||
<tr class="noboarder">
|
||||
<td i18n="gpsLon"></td>
|
||||
<td class="gpsLon"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></div></div></div>
|
||||
|
||||
|
||||
<div class="spacer"><div class="gui_box grey">
|
||||
<div class="gui_box_titlebar"><div class="spacer_box_title" i18n="initialSetupInstrumentsHead"></div>
|
||||
<div class="helpicon"></div></div><div class="spacer_box" align="center">
|
||||
<span id="attitude"></span>
|
||||
<span id="heading"></span>
|
||||
|
||||
|
||||
|
||||
</div></div></div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue