mirror of
https://github.com/betaflight/betaflight-configurator.git
synced 2025-07-25 09:15:49 +03:00
Initial HTML updates and CSS for bottom toolbar.
This commit is contained in:
Kristjan Vaga
parent
2167850322
commit
86c9733e52
13 changed files with 166 additions and 89 deletions
98
main.css
98
main.css
|
|
@ -18,6 +18,7 @@ body {
|
|||
background-color:#3d3f3e;
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -108,7 +109,12 @@ input[type="number"]::-webkit-inner-spin-button {
|
|||
#main-wrapper {
|
||||
padding: 0px 0px 0 0px; /* padding: 5px 5px 0 5px; */
|
||||
height: calc(100% - 7px);
|
||||
|
||||
}
|
||||
.margin-top {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.margin-bottom {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.headerbar {
|
||||
|
|
@ -990,6 +996,61 @@ dialog {
|
|||
padding-bottom:15px;
|
||||
}
|
||||
|
||||
.content_wrapper {
|
||||
/* leave 20px side padding always */
|
||||
/*padding: 0 20px 0 20px;
|
||||
for testing: */
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.content_toolbar {
|
||||
/* content toolbar panel */
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background: silver;
|
||||
padding: 10px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content_toolbar .btn {
|
||||
/* common styles for content toolbar buttons */
|
||||
display: block;
|
||||
float: right;
|
||||
margin-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;
|
||||
}
|
||||
|
||||
.toolbar_scroll_bottom .content_wrapper {
|
||||
/* content wrapper in view with toolbar in scroll bottom
|
||||
leave 50px space for the toolbar
|
||||
*/
|
||||
height: 100%;
|
||||
margin: 0 0 -50px;
|
||||
}
|
||||
|
||||
.toolbar_fixed_bottom .content_wrapper {
|
||||
/* content wrapper in view with toolbar fixed over bottom edge
|
||||
leave 50px space for the toolbar
|
||||
*/
|
||||
height: calc(100% - 50px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.toolbar_fixed_bottom .content_toolbar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Colums START> */
|
||||
|
||||
.cf_column {
|
||||
|
|
@ -1394,12 +1455,9 @@ dialog {
|
|||
/* 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:20px;
|
||||
float:left;
|
||||
width:calc(100% - 40px);
|
||||
height:calc(100% - 40px) !important;
|
||||
position:absolute !important;
|
||||
}
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
/* fixing logging tab*/
|
||||
|
|
@ -1443,18 +1501,17 @@ dialog {
|
|||
color:#fff;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media only screen and (max-width: 1055px), only screen and (max-device-width: 1055px) {
|
||||
|
||||
|
||||
|
||||
.tab_title {
|
||||
font-size:16px;
|
||||
line-height:18px;
|
||||
height:24px;
|
||||
font-family: 'open_sanslight', Arial;
|
||||
margin-bottom:10px;
|
||||
display:;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.cf_doc_version_bt a {
|
||||
|
|
@ -1463,7 +1520,7 @@ dialog {
|
|||
font-size:9px;
|
||||
line-height:15px;
|
||||
}
|
||||
|
||||
|
||||
#content {
|
||||
height:calc(100% - 151px); /* (port picker 105px, log CLOSED 25px, status bar: 20px + padding) - was: calc(100% - 171px)*/
|
||||
}
|
||||
|
|
@ -1475,13 +1532,8 @@ body {
|
|||
}
|
||||
|
||||
.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:10px;
|
||||
float:left;
|
||||
width:calc(100% - 20px);
|
||||
height:calc(100% - 20px) !important;
|
||||
position:absolute !important;
|
||||
}
|
||||
|
||||
|
||||
.cf_table td {
|
||||
padding-top:2px;
|
||||
padding-bottom:2px;
|
||||
|
|
@ -1494,7 +1546,7 @@ body {
|
|||
.default_btn a {
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
|
||||
#tabs li a {
|
||||
font-family: 'open_sansregular', Arial;
|
||||
font-size:12px;
|
||||
|
|
@ -1521,7 +1573,7 @@ body {
|
|||
padding-bottom:0px;
|
||||
margin-bottom:5px;
|
||||
}
|
||||
|
||||
|
||||
.spacer_box_title {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
|
|
@ -1529,7 +1581,7 @@ body {
|
|||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
input {
|
||||
font-size:11px !important;
|
||||
}
|
||||
|
|
@ -1545,4 +1597,4 @@ input {
|
|||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<div class="tab-adjustments">
|
||||
<div class="tab-adjustments toolbar_fixed_bottom">
|
||||
<div class="content_wrapper">
|
||||
<div class="help">
|
||||
<p i18n="adjustmentsHelp"></p>
|
||||
<p i18n="adjustmentsExamples"></p>
|
||||
|
|
@ -27,10 +28,10 @@
|
|||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="buttons">
|
||||
<a class="save" href="#" i18n="adjustmentsSave"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_toolbar">
|
||||
<div class="btn save_btn"><a class="save" href="#" i18n="adjustmentsSave"></a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tab-adjustments-templates">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<div class="tab-auxiliary">
|
||||
<div class="tab-auxiliary toolbar_fixed_bottom">
|
||||
<div class="content_wrapper">
|
||||
<div class="help">
|
||||
<p i18n="auxiliaryHelp"></p>
|
||||
</div>
|
||||
|
|
@ -6,9 +7,10 @@
|
|||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="buttons">
|
||||
<a class="save" href="#" i18n="auxiliaryButtonSave"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_toolbar">
|
||||
<div class="btn save_btn"><a class="save" href="#" i18n="auxiliaryButtonSave"></a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tab-auxiliary-templates">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<div class="tab-configuration">
|
||||
<div class="tab-configuration toolbar_fixed_bottom">
|
||||
<div class="content_wrapper">
|
||||
<div class="tab_title" i18n="tabConfiguration">Configuration</div>
|
||||
<div class="cf_doc_version_bt">
|
||||
<a id="button-documentation" href="https://github.com/cleanflight/cleanflight/releases" target="_blank"></a>
|
||||
|
|
@ -425,7 +426,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="clear-both"></div>
|
||||
<div class="fixed_band">
|
||||
<div class="save_btn"><a class="save" href="#" i18n="configurationButtonSave"></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_toolbar">
|
||||
<div class="btn save_btn"><a class="save" href="#" i18n="configurationButtonSave"></a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,35 @@
|
|||
<div id="content-watermark"></div>
|
||||
<div class="tab-dataflash">
|
||||
<div class="tab-dataflash toolbar_fixed_bottom">
|
||||
<div class="content_wrapper">
|
||||
<div class="require-dataflash">
|
||||
<div class="note" i18n="dataflashNote">
|
||||
</div>
|
||||
|
||||
|
||||
<dialog class="dataflash-confirm-erase">
|
||||
<h3 i18n="dataflashConfirmEraseTitle"></h3>
|
||||
<div class="dataflash-confirm-erase-note" i18n="dataflashConfirmEraseNote">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="dataflash-erase-progress">
|
||||
<div class="data-loading">
|
||||
<p>Erase in progress, please wait...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="buttons">
|
||||
<a href="#" class="erase-flash-cancel" i18n="dataflashButtonEraseCancel"></a>
|
||||
<a href="#" class="erase-flash-confirm" i18n="dataflashButtonEraseConfirm"></a>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
|
||||
<dialog class="dataflash-saving">
|
||||
<h3 i18n="dataflashSavingTitle"></h3>
|
||||
<div class="dataflash-saving-before">
|
||||
<div i18n="dataflashSavingNote">
|
||||
</div>
|
||||
|
||||
|
||||
<progress value="0" min="0" max="100"></progress>
|
||||
|
||||
|
||||
<div class="buttons">
|
||||
<a href="#" class="save-flash-cancel" i18n="dataflashButtonSaveCancel"></a>
|
||||
</div>
|
||||
|
|
@ -36,13 +37,13 @@
|
|||
<div class="dataflash-saving-after">
|
||||
<div i18n="dataflashSavingNoteAfter">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="buttons">
|
||||
<a href="#" class="save-flash-dismiss" i18n="dataflashButtonSaveDismiss"></a>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
|
||||
<h3>Dataflash contents</h3>
|
||||
<ul class="dataflash-contents">
|
||||
<li class="dataflash-used">
|
||||
|
|
@ -56,12 +57,12 @@
|
|||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="buttons">
|
||||
<a href="#" class="erase-flash" i18n="dataflashButtonErase"></a>
|
||||
<a href="#" class="save-flash" i18n="dataflashButtonSaveFile"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="note require-no-dataflash">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_toolbar">
|
||||
<div class="btn erase_btn"><a class="erase-flash" href="#" i18n="dataflashButtonErase"></a></div>
|
||||
<div class="btn save_btn"><a class="save-flash" href="#" i18n="dataflashButtonSaveFile"></a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<div class="tab-firmware_flasher">
|
||||
<div class="tab-firmware_flasher toolbar_fixed_bottom">
|
||||
<div class="content_wrapper">
|
||||
<div class="options">
|
||||
<div class="option releases">
|
||||
<select name="release">
|
||||
|
|
@ -85,9 +86,15 @@
|
|||
<progress class="progress" value="0" min="0" max="100"></progress>
|
||||
<span class="progressLabel" i18n="firmwareFlasherLoadFirmwareFile"></span>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<!--div class="buttons">
|
||||
<a class="load_file" href="#" i18n="firmwareFlasherButtonLoadLocal"></a>
|
||||
<a class="load_remote_file locked" href="#" i18n="firmwareFlasherButtonLoadOnline"></a>
|
||||
<a class="flash_firmware locked" href="#" i18n="firmwareFlasherFlashFirmware"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div-->
|
||||
</div>
|
||||
<div class="content_toolbar">
|
||||
<div class="btn"><a class="load_file" href="#" i18n="firmwareFlasherButtonLoadLocal"></a></div>
|
||||
<div class="btn"><a class="load_remote_file locked" href="#" i18n="firmwareFlasherButtonLoadOnline"></a></div>
|
||||
<div class="btn"><a class="flash_firmware locked" href="#" i18n="firmwareFlasherFlashFirmware"></a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<div class="tab-help">
|
||||
<div class="content_wrapper">
|
||||
<div class="left">
|
||||
<div class="section documentation">
|
||||
<div class="title" i18n="defaultDocumentationHead"></div>
|
||||
|
|
@ -12,6 +13,6 @@
|
|||
<p i18n="defaultSupport"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<div class="tab-landing">
|
||||
<div class="content_wrapper">
|
||||
<div class="section optional_permissions">
|
||||
<div class="title" i18n="default_optional_permissions_head"></div>
|
||||
<p i18n="default_optional_permissions_text"></p>
|
||||
|
|
@ -22,7 +23,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row contributing_and_sponsors">
|
||||
<div class="left">
|
||||
<div class="left">
|
||||
|
||||
<div class="section contributing">
|
||||
<div class="title" i18n="defaultContributingHead"></div>
|
||||
|
|
@ -64,4 +65,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<div id="content-watermark"></div>
|
||||
<div class="tab-logging">
|
||||
<div class="tab-logging toolbar_fixed_bottom">
|
||||
<div class="content_wrapper">
|
||||
<div class="note" i18n="loggingNote">
|
||||
</div>
|
||||
<div class="properties">
|
||||
|
|
@ -33,9 +34,10 @@
|
|||
<dt i18n="loggingLogSize"></dt><dd class="size">0 Bytes</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a href="#" class="back" i18n="loggingBack"></a>
|
||||
<a href="#" class="logging" i18n="loggingStart"></a>
|
||||
<a href="#" class="log_file" i18n="loggingButtonLogFile"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_toolbar">
|
||||
<div class="btn back_btn"><a class="back" href="#" i18n="loggingBack"></a></div>
|
||||
<div class="btn logging_btn"><a class="logging" href="#" i18n="loggingStart"></a></div>
|
||||
<div class="btn file_btn"><a class="log_file" href="#" i18n="loggingButtonLogFile"></a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<div class="tab-modes">
|
||||
<div class="tab-modes toolbar_fixed_bottom">
|
||||
<div class="content_wrapper">
|
||||
<table class="boxes">
|
||||
<tr class="heads">
|
||||
<th style="width: 18%"></th>
|
||||
|
|
@ -7,7 +8,8 @@
|
|||
<th i18n="auxiliaryName"></th>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="buttons">
|
||||
<a class="update" href="#" i18n="auxiliaryButtonSave"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_toolbar">
|
||||
<div class="btn save_btn"><a class="update" href="#" i18n="auxiliaryButtonSave"></a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<div class="tab-pid_tuning">
|
||||
<div class="tab-pid_tuning toolbar_fixed_bottom">
|
||||
<div class="content_wrapper">
|
||||
<div class="tab_title" i18n="tabPidTuning">Ports</div>
|
||||
<div class="cf_doc_version_bt">
|
||||
<a id="button-documentation" href="https://github.com/cleanflight/cleanflight/releases" target="_blank"></a>
|
||||
|
|
@ -178,9 +179,9 @@
|
|||
</div>
|
||||
</form>
|
||||
<div class="clear-both"></div>
|
||||
<div class="fixed_band">
|
||||
<div class="save_btn"><a class="update" href="#" i18n="pidTuningButtonSave"></a>
|
||||
<a class="refresh" href="#" i18n="pidTuningButtonRefresh"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_toolbar">
|
||||
<div class="btn save_btn"><a class="update" href="#" i18n="pidTuningButtonSave"></a></div>
|
||||
<div class="btn refresh_btn"><a class="refresh" href="#" i18n="pidTuningButtonRefresh"></a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<div class="tab-ports">
|
||||
<div class="tab-ports toolbar_fixed_bottom">
|
||||
<div class="content_wrapper">
|
||||
<div class="tab_title" i18n="tabPorts">Ports</div>
|
||||
<div class="cf_doc_version_bt">
|
||||
<a id="button-documentation" href="https://github.com/cleanflight/cleanflight/releases" target="_blank"></a>
|
||||
|
|
@ -28,9 +29,10 @@
|
|||
</div>
|
||||
<div class="note require-upgrade" i18n="portsFirmwareUpgradeRequired">
|
||||
</div>
|
||||
<div class="fixed_band" style="position:fixed; bottom:0px; width:100%;">
|
||||
<div class="save_btn"><a class="save" href="#" i18n="configurationButtonSave"></a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_toolbar">
|
||||
<div class="btn save_btn"><a class="save" href="#" i18n="configurationButtonSave"></a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab-ports-templates">
|
||||
<table class="ports">
|
||||
|
|
@ -66,4 +68,4 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<div id="content-watermark"></div>
|
||||
<div class="tab-receiver">
|
||||
<div class="tab-receiver toolbar_fixed_bottom">
|
||||
<div class="content_wrapper">
|
||||
<div class="help">
|
||||
<p i18n="receiverHelp"></p>
|
||||
</div>
|
||||
|
|
@ -83,9 +84,10 @@
|
|||
<g class="axis x" transform="translate(40, 180)"></g>
|
||||
<g class="axis y" transform="translate(40, 10)"></g>
|
||||
</svg>
|
||||
<div class="buttons">
|
||||
<a class="update" href="#" i18n="receiverButtonSave"></a>
|
||||
<a class="refresh" href="#" i18n="receiverButtonRefresh"></a>
|
||||
<a class="sticks" href="#" i18n="receiverButtonSticks"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_toolbar">
|
||||
<div class="btn update_btn"><a class="update" href="#" i18n="receiverButtonSave"></a></div>
|
||||
<div class="btn refresh_btn"><a class="refresh" href="#" i18n="receiverButtonRefresh"></a></div>
|
||||
<div class="btn sticks_btn"><a class="sticks" href="#" i18n="receiverButtonSticks"></a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue