Mirror/betaflight-configurator
1
0
Fork 0
mirror of https://github.com/betaflight/betaflight-configurator.git synced 2025-07-23 16:25:22 +03:00
Code Issues Wiki Activity

Some work on configuration tab

Browse source
This commit is contained in:
skaman82 2015-10-23 07:03:02 +02:00
parent 1ed7629f97
commit a5f60b6dfb
4 changed files with 81 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

46
main.css
View file

@ -21,6 +21,30 @@ body {
/* Help-Icon */
.helpicon {
float:right;
margin-top:-18px;
margin-right:7px;
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:hover {
opacity: 1.0;
background-image:url(images/icons/cf_icon_info_green.svg);
}
/* Change here the content of the documentation button in all tabs!!! */ /* Change here the content of the documentation button in all tabs!!! */
.cf_doc_version_bt a:before { .cf_doc_version_bt a:before {
@ -739,30 +763,8 @@ dialog {
} }
/* Help Icon */
.helpicon {
float:right;
margin-top:-14px;
margin-right:7px;
display:block;
height:14px;
width:14px;
opacity: 0.2;
background-image:url(rescources/icons/cf_icon_info_grey.svg);
background-size:contain;
background-position:center;
}
.helpicon:hover {
background-image:url(rescources/icons/cf_icon_info_green.svg);
opacity: 1.0;}
/* Table styling */ /* Table styling */

2
main.html
View file

@ -10,7 +10,7 @@
<link type="text/css" rel="stylesheet" href="./js/libraries/flightindicators.css"> <link type="text/css" rel="stylesheet" href="./js/libraries/flightindicators.css">
<link type="text/css" rel="stylesheet" href="./tabs/landing.css" media="all" /> <link type="text/css" rel="stylesheet" href="./tabs/landing.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/setup.cssxxx" media="all" /> <link type="text/css" rel="stylesheet" href="./tabs/setup.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/help.css" media="all" /> <link type="text/css" rel="stylesheet" href="./tabs/help.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/ports.css" media="all" /> <link type="text/css" rel="stylesheet" href="./tabs/ports.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/configuration.css" media="all" /> <link type="text/css" rel="stylesheet" href="./tabs/configuration.css" media="all" />

72
tabs/setup.css
View file

@ -1,36 +1,28 @@
.tab-setup .model-and-info { .tab-setup .model-and-info {
height: calc(100% - 138px); height: calc(100% - 155px);
} }
.tab-setup { .tab-setup {
height: 100%; height: 100%;
background-color:#ccc;
} }
.cell_setup {
min-height:20px;
border-bottom: solid 1px #ddd;
margin-bottom:13px;
float:left;}
.tab-setup #interactive_block {
float: left;
position: relative;
#interactive_block {
position: absolute;
width:calc(71% + 8px);
height:100%; height:100%;
width: calc(100% - 0px); max-height:417px;
background-color:#f5f5f5;
border-radius: 5px;
border:1px solid #e4e4e4;
border: 1px solid silver;
background-color: white;
} }
.tab-setup #interactive_block .heading { .heading_info {
float: right; position:absolute;
height: 15px; height: 25px;
margin: 10px 0px 10px 10px;
margin: 10px 10px 0 0;
font-weight: bold; font-weight: bold;
} }
.tab-setup #interactive_block a.reset { #interactive_block a.reset {
position: absolute; position: absolute;
display: block; display: block;
@ -47,25 +39,25 @@ float:left;}
border: 1px solid silver; border: 1px solid silver;
background-color: #ececec; background-color: #ececec;
border-radius: 3px:
z-index: 100; z-index: 100;
} }
.tab-setup #interactive_block a.reset:hover { #interactive_block a.reset:hover {
background-color: #dedcdc; background-color: #dedcdc;
} }
.tab-setup #canvas_wrapper { #canvas_wrapper {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0; top: 0;
left: 0; left: 0;
} }
.tab-setup .block_wrapper { .block_wrapper {
font-size: 0; font-size: 0;
} }
.tab-setup .block { .block {
float: left; float: left;
display: block; display: block;
@ -73,7 +65,7 @@ float:left;}
border: 1px solid silver; border: 1px solid silver;
} }
.tab-setup .block .head { .block .head {
display: block; display: block;
text-align: center; text-align: center;
@ -83,7 +75,7 @@ float:left;}
border-bottom: 1px solid silver; border-bottom: 1px solid silver;
background-color: #ececec; background-color: #ececec;
} }
.tab-setup .block.info { .block.info {
display: inline-block; display: inline-block;
margin-bottom: 10px; margin-bottom: 10px;
@ -126,24 +118,20 @@ float:left;}
line-height: 20px; line-height: 20px;
} }
.tab-setup .block.gps dd {
height: 20px;
margin-left: 85px; .block.instruments {
margin-bottom: 2px; width: 285px;
align-content:center;
line-height: 20px; text-align:center;
ma
} }
.tab-setup .block.instruments { .buttons {
width: 185px;
}
.tab-setup .buttons {
width: calc(100% - 20px); width: calc(100% - 20px);
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;
} }
.tab-setup .update { .update {
display: block; display: block;
float: right; float: right;
@ -161,3 +149,9 @@ float:left;}
.tab-setup .update:hover { .tab-setup .update:hover {
background-color: #dedcdc; background-color: #dedcdc;
} }
.cell_setup {
border-bottom: solid 1px #ddd;
padding-bottom:8px;
padding-top:7px;
}

46
tabs/setup.html
View file

@ -23,31 +23,28 @@
</div> </div>
<div class="threefourth_right"> <div class="threefourth_right"><div class="spacer_left">
<div class="cell_setup" i18n="initialSetupCalibrateAccelText"></div> <div class="cell_setup"><span i18n="initialSetupCalibrateAccelText"></span></div>
<div class="cell_setup" i18n="initialSetupCalibrateMagText"></div> <div class="cell_setup"><span i18n="initialSetupCalibrateMagText"></span></div>
<div class="cell_setup" i18n="initialSetupResetText"></div> <div class="cell_setup"><span i18n="initialSetupResetText"></span></div>
<div class="cell_setup" i18n="initialSetupBackupRestoreText"></div> <div class="cell_setup"><span i18n="initialSetupBackupRestoreText"></span></div>
</div> </div></div>
<div style="clear:both;"></div> <div style="clear:both; margin-bottom:5px;"></div>
<div class="cf_column threefourth_left" > <div class="cf_column threefourth_left" >
<div class="spacer_right"> <div class="spacer_right">
<div class="gui_box grey">
<div class="model-and-info"> <div class="model-and-info">
<div id="interactive_block"> <div id="interactive_block">
<div id="canvas_wrapper"> <div id="canvas_wrapper" style="max-height:400px; min-height:300px; width:100%;">
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
</div> </div>
<span class="heading"></span> <div class="heading_info"><span class="heading"></span></div>
<a class="reset" href="#" i18n="initialSetupButtonResetZaxis"></a> <a class="reset" href="#" i18n="initialSetupButtonResetZaxis"></a>
</div>
</div></div></div> </div> </div></div></div> </div>
@ -107,7 +104,7 @@
<div class="spacer"><div class="gui_box grey"> <div class="spacer"><div class="gui_box grey">
<div class="gui_box_titlebar"><div class="spacer_box_title" i18n="initialSetupInstrumentsHead"></div> <div class="gui_box_titlebar"><div class="spacer_box_title" i18n="initialSetupInstrumentsHead"></div>
<div class="helpicon"></div></div><div class="spacer_box"> <div class="helpicon"></div></div><div class="spacer_box" align="center">
<span id="attitude"></span> <span id="attitude"></span>
<span id="heading"></span> <span id="heading"></span>
@ -118,18 +115,15 @@
</div></div> </div></div>
</div> </div>