Mirror/inav-configurator
1
0
Fork 0
mirror of https://github.com/iNavFlight/inav-configurator.git synced 2025-07-26 01:35:23 +03:00
Code Wiki Activity

Initial HTML updates and CSS for bottom toolbar.

Browse source
This commit is contained in:
Kristjan Vaga 2015-11-05 17:47:11 +02:00
parent 2167850322
commit 86c9733e52
13 changed files with 166 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

98
main.css
View file

@ -18,6 +18,7 @@ body {
background-color:#3d3f3e; background-color:#3d3f3e;
margin:0px; margin:0px;
padding:0px; padding:0px;
overflow: hidden;
} }
a { a {
@ -108,7 +109,12 @@ input[type="number"]::-webkit-inner-spin-button {
#main-wrapper { #main-wrapper {
padding: 0px 0px 0 0px; /* padding: 5px 5px 0 5px; */ padding: 0px 0px 0 0px; /* padding: 5px 5px 0 5px; */
height: calc(100% - 7px); height: calc(100% - 7px);
}
.margin-top {
margin-top: 20px;
}
.margin-bottom {
margin-bottom: 20px;
} }
.headerbar { .headerbar {
@ -990,6 +996,61 @@ dialog {
padding-bottom:15px; 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> */ /* Colums START> */
.cf_column { .cf_column {
@ -1394,12 +1455,9 @@ dialog {
/* fixing padding for all Tabs*/ /* 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 { .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; height: 100%;
float:left; position: relative;
width:calc(100% - 40px); }
height:calc(100% - 40px) !important;
position:absolute !important;
}
/* fixing logging tab*/ /* fixing logging tab*/
@ -1443,18 +1501,17 @@ dialog {
color:#fff; color:#fff;
font-size: 10px; font-size: 10px;
} }
@media only screen and (max-width: 1055px), only screen and (max-device-width: 1055px) { @media only screen and (max-width: 1055px), only screen and (max-device-width: 1055px) {
.tab_title { .tab_title {
font-size:16px; font-size:16px;
line-height:18px; line-height:18px;
height:24px;
font-family: 'open_sanslight', Arial; font-family: 'open_sanslight', Arial;
margin-bottom:10px; margin-bottom:10px;
display:; margin-top: 20px;
} }
.cf_doc_version_bt a { .cf_doc_version_bt a {
@ -1463,7 +1520,7 @@ dialog {
font-size:9px; font-size:9px;
line-height:15px; line-height:15px;
} }
#content { #content {
height:calc(100% - 151px); /* (port picker 105px, log CLOSED 25px, status bar: 20px + padding) - was: calc(100% - 171px)*/ 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 { .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 { .cf_table td {
padding-top:2px; padding-top:2px;
padding-bottom:2px; padding-bottom:2px;
@ -1494,7 +1546,7 @@ body {
.default_btn a { .default_btn a {
font-size:12px; font-size:12px;
} }
#tabs li a { #tabs li a {
font-family: 'open_sansregular', Arial; font-family: 'open_sansregular', Arial;
font-size:12px; font-size:12px;
@ -1521,7 +1573,7 @@ body {
padding-bottom:0px; padding-bottom:0px;
margin-bottom:5px; margin-bottom:5px;
} }
.spacer_box_title { .spacer_box_title {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
@ -1529,7 +1581,7 @@ body {
margin-bottom: 0px; margin-bottom: 0px;
} }
input { input {
font-size:11px !important; font-size:11px !important;
} }
@ -1545,4 +1597,4 @@ input {
} }
} }

11
tabs/adjustments.html
View file

@ -1,4 +1,5 @@
<div class="tab-adjustments"> <div class="tab-adjustments toolbar_fixed_bottom">
<div class="content_wrapper">
<div class="help"> <div class="help">
<p i18n="adjustmentsHelp"></p> <p i18n="adjustmentsHelp"></p>
<p i18n="adjustmentsExamples"></p> <p i18n="adjustmentsExamples"></p>
@ -27,10 +28,10 @@
<tbody> <tbody>
</tbody> </tbody>
</table> </table>
</div>
<div class="buttons"> <div class="content_toolbar">
<a class="save" href="#" i18n="adjustmentsSave"></a> <div class="btn save_btn"><a class="save" href="#" i18n="adjustmentsSave"></a></div>
</div> </div>
</div> </div>
<div id="tab-adjustments-templates"> <div id="tab-adjustments-templates">

10
tabs/auxiliary.html
View file

@ -1,4 +1,5 @@
<div class="tab-auxiliary"> <div class="tab-auxiliary toolbar_fixed_bottom">
<div class="content_wrapper">
<div class="help"> <div class="help">
<p i18n="auxiliaryHelp"></p> <p i18n="auxiliaryHelp"></p>
</div> </div>
@ -6,9 +7,10 @@
<tbody> <tbody>
</tbody> </tbody>
</table> </table>
<div class="buttons"> </div>
<a class="save" href="#" i18n="auxiliaryButtonSave"></a> <div class="content_toolbar">
</div> <div class="btn save_btn"><a class="save" href="#" i18n="auxiliaryButtonSave"></a></div>
</div>
</div> </div>
<div id="tab-auxiliary-templates"> <div id="tab-auxiliary-templates">

12
tabs/configuration.html
View file

@ -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="tab_title" i18n="tabConfiguration">Configuration</div>
<div class="cf_doc_version_bt"> <div class="cf_doc_version_bt">
<a id="button-documentation" href="https://github.com/cleanflight/cleanflight/releases" target="_blank"></a> <a id="button-documentation" href="https://github.com/cleanflight/cleanflight/releases" target="_blank"></a>
@ -425,7 +426,8 @@
</div> </div>
</div> </div>
<div class="clear-both"></div> <div class="clear-both"></div>
<div class="fixed_band"> </div>
<div class="save_btn"><a class="save" href="#" i18n="configurationButtonSave"></a></div> <div class="content_toolbar">
</div> <div class="btn save_btn"><a class="save" href="#" i18n="configurationButtonSave"></a></div>
</div> </div>
</div>

31
tabs/dataflash.html
View file

@ -1,34 +1,35 @@
<div id="content-watermark"></div> <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="require-dataflash">
<div class="note" i18n="dataflashNote"> <div class="note" i18n="dataflashNote">
</div> </div>
<dialog class="dataflash-confirm-erase"> <dialog class="dataflash-confirm-erase">
<h3 i18n="dataflashConfirmEraseTitle"></h3> <h3 i18n="dataflashConfirmEraseTitle"></h3>
<div class="dataflash-confirm-erase-note" i18n="dataflashConfirmEraseNote"> <div class="dataflash-confirm-erase-note" i18n="dataflashConfirmEraseNote">
</div> </div>
<div class="dataflash-erase-progress"> <div class="dataflash-erase-progress">
<div class="data-loading"> <div class="data-loading">
<p>Erase in progress, please wait...</p> <p>Erase in progress, please wait...</p>
</div> </div>
</div> </div>
<div class="buttons"> <div class="buttons">
<a href="#" class="erase-flash-cancel" i18n="dataflashButtonEraseCancel"></a> <a href="#" class="erase-flash-cancel" i18n="dataflashButtonEraseCancel"></a>
<a href="#" class="erase-flash-confirm" i18n="dataflashButtonEraseConfirm"></a> <a href="#" class="erase-flash-confirm" i18n="dataflashButtonEraseConfirm"></a>
</div> </div>
</dialog> </dialog>
<dialog class="dataflash-saving"> <dialog class="dataflash-saving">
<h3 i18n="dataflashSavingTitle"></h3> <h3 i18n="dataflashSavingTitle"></h3>
<div class="dataflash-saving-before"> <div class="dataflash-saving-before">
<div i18n="dataflashSavingNote"> <div i18n="dataflashSavingNote">
</div> </div>
<progress value="0" min="0" max="100"></progress> <progress value="0" min="0" max="100"></progress>
<div class="buttons"> <div class="buttons">
<a href="#" class="save-flash-cancel" i18n="dataflashButtonSaveCancel"></a> <a href="#" class="save-flash-cancel" i18n="dataflashButtonSaveCancel"></a>
</div> </div>
@ -36,13 +37,13 @@
<div class="dataflash-saving-after"> <div class="dataflash-saving-after">
<div i18n="dataflashSavingNoteAfter"> <div i18n="dataflashSavingNoteAfter">
</div> </div>
<div class="buttons"> <div class="buttons">
<a href="#" class="save-flash-dismiss" i18n="dataflashButtonSaveDismiss"></a> <a href="#" class="save-flash-dismiss" i18n="dataflashButtonSaveDismiss"></a>
</div> </div>
</div> </div>
</dialog> </dialog>
<h3>Dataflash contents</h3> <h3>Dataflash contents</h3>
<ul class="dataflash-contents"> <ul class="dataflash-contents">
<li class="dataflash-used"> <li class="dataflash-used">
@ -56,12 +57,12 @@
</div> </div>
</li> </li>
</ul> </ul>
<div class="buttons">
<a href="#" class="erase-flash" i18n="dataflashButtonErase"></a>
<a href="#" class="save-flash" i18n="dataflashButtonSaveFile"></a>
</div>
</div> </div>
<div class="note require-no-dataflash"> <div class="note require-no-dataflash">
</div> </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>

15
tabs/firmware_flasher.html
View file

@ -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="options">
<div class="option releases"> <div class="option releases">
<select name="release"> <select name="release">
@ -85,9 +86,15 @@
<progress class="progress" value="0" min="0" max="100"></progress> <progress class="progress" value="0" min="0" max="100"></progress>
<span class="progressLabel" i18n="firmwareFlasherLoadFirmwareFile"></span> <span class="progressLabel" i18n="firmwareFlasherLoadFirmwareFile"></span>
</div> </div>
<div class="buttons"> <!--div class="buttons">
<a class="load_file" href="#" i18n="firmwareFlasherButtonLoadLocal"></a> <a class="load_file" href="#" i18n="firmwareFlasherButtonLoadLocal"></a>
<a class="load_remote_file locked" href="#" i18n="firmwareFlasherButtonLoadOnline"></a> <a class="load_remote_file locked" href="#" i18n="firmwareFlasherButtonLoadOnline"></a>
<a class="flash_firmware locked" href="#" i18n="firmwareFlasherFlashFirmware"></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>

5
tabs/help.html
View file

@ -1,4 +1,5 @@
<div class="tab-help"> <div class="tab-help">
<div class="content_wrapper">
<div class="left"> <div class="left">
<div class="section documentation"> <div class="section documentation">
<div class="title" i18n="defaultDocumentationHead"></div> <div class="title" i18n="defaultDocumentationHead"></div>
@ -12,6 +13,6 @@
<p i18n="defaultSupport"></p> <p i18n="defaultSupport"></p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>

6
tabs/landing.html
View file

@ -1,4 +1,5 @@
<div class="tab-landing"> <div class="tab-landing">
<div class="content_wrapper">
<div class="section optional_permissions"> <div class="section optional_permissions">
<div class="title" i18n="default_optional_permissions_head"></div> <div class="title" i18n="default_optional_permissions_head"></div>
<p i18n="default_optional_permissions_text"></p> <p i18n="default_optional_permissions_text"></p>
@ -22,7 +23,7 @@
</div> </div>
</div> </div>
<div class="row contributing_and_sponsors"> <div class="row contributing_and_sponsors">
<div class="left"> <div class="left">
<div class="section contributing"> <div class="section contributing">
<div class="title" i18n="defaultContributingHead"></div> <div class="title" i18n="defaultContributingHead"></div>
@ -64,4 +65,5 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>

16
tabs/logging.html
View file

@ -1,5 +1,6 @@
<div id="content-watermark"></div> <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 class="note" i18n="loggingNote">
</div> </div>
<div class="properties"> <div class="properties">
@ -33,9 +34,10 @@
<dt i18n="loggingLogSize"></dt><dd class="size">0 Bytes</dd> <dt i18n="loggingLogSize"></dt><dd class="size">0 Bytes</dd>
</dl> </dl>
</div> </div>
<div class="buttons"> </div>
<a href="#" class="back" i18n="loggingBack"></a> <div class="content_toolbar">
<a href="#" class="logging" i18n="loggingStart"></a> <div class="btn back_btn"><a class="back" href="#" i18n="loggingBack"></a></div>
<a href="#" class="log_file" i18n="loggingButtonLogFile"></a> <div class="btn logging_btn"><a class="logging" href="#" i18n="loggingStart"></a></div>
</div> <div class="btn file_btn"><a class="log_file" href="#" i18n="loggingButtonLogFile"></a></div>
</div> </div>
</div>

10
tabs/modes.html
View file

@ -1,4 +1,5 @@
<div class="tab-modes"> <div class="tab-modes toolbar_fixed_bottom">
<div class="content_wrapper">
<table class="boxes"> <table class="boxes">
<tr class="heads"> <tr class="heads">
<th style="width: 18%"></th> <th style="width: 18%"></th>
@ -7,7 +8,8 @@
<th i18n="auxiliaryName"></th> <th i18n="auxiliaryName"></th>
</tr> </tr>
</table> </table>
<div class="buttons"> </div>
<a class="update" href="#" i18n="auxiliaryButtonSave"></a> <div class="content_toolbar">
</div> <div class="btn save_btn"><a class="update" href="#" i18n="auxiliaryButtonSave"></a></div>
</div>
</div> </div>

15
tabs/pid_tuning.html
View file

@ -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="tab_title" i18n="tabPidTuning">Ports</div>
<div class="cf_doc_version_bt"> <div class="cf_doc_version_bt">
<a id="button-documentation" href="https://github.com/cleanflight/cleanflight/releases" target="_blank"></a> <a id="button-documentation" href="https://github.com/cleanflight/cleanflight/releases" target="_blank"></a>
@ -178,9 +179,9 @@
</div> </div>
</form> </form>
<div class="clear-both"></div> <div class="clear-both"></div>
<div class="fixed_band"> </div>
<div class="save_btn"><a class="update" href="#" i18n="pidTuningButtonSave"></a> <div class="content_toolbar">
<a class="refresh" href="#" i18n="pidTuningButtonRefresh"></a> <div class="btn save_btn"><a class="update" href="#" i18n="pidTuningButtonSave"></a></div>
</div> <div class="btn refresh_btn"><a class="refresh" href="#" i18n="pidTuningButtonRefresh"></a></div>
</div> </div>
</div> </div>

12
tabs/ports.html
View file

@ -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="tab_title" i18n="tabPorts">Ports</div>
<div class="cf_doc_version_bt"> <div class="cf_doc_version_bt">
<a id="button-documentation" href="https://github.com/cleanflight/cleanflight/releases" target="_blank"></a> <a id="button-documentation" href="https://github.com/cleanflight/cleanflight/releases" target="_blank"></a>
@ -28,9 +29,10 @@
</div> </div>
<div class="note require-upgrade" i18n="portsFirmwareUpgradeRequired"> <div class="note require-upgrade" i18n="portsFirmwareUpgradeRequired">
</div> </div>
<div class="fixed_band" style="position:fixed; bottom:0px; width:100%;"> </div>
<div class="save_btn"><a class="save" href="#" i18n="configurationButtonSave"></a></div> <div class="content_toolbar">
</div> <div class="btn save_btn"><a class="save" href="#" i18n="configurationButtonSave"></a></div>
</div>
</div> </div>
<div id="tab-ports-templates"> <div id="tab-ports-templates">
<table class="ports"> <table class="ports">
@ -66,4 +68,4 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>

14
tabs/receiver.html
View file

@ -1,5 +1,6 @@
<div id="content-watermark"></div> <div id="content-watermark"></div>
<div class="tab-receiver"> <div class="tab-receiver toolbar_fixed_bottom">
<div class="content_wrapper">
<div class="help"> <div class="help">
<p i18n="receiverHelp"></p> <p i18n="receiverHelp"></p>
</div> </div>
@ -83,9 +84,10 @@
<g class="axis x" transform="translate(40, 180)"></g> <g class="axis x" transform="translate(40, 180)"></g>
<g class="axis y" transform="translate(40, 10)"></g> <g class="axis y" transform="translate(40, 10)"></g>
</svg> </svg>
<div class="buttons"> </div>
<a class="update" href="#" i18n="receiverButtonSave"></a> <div class="content_toolbar">
<a class="refresh" href="#" i18n="receiverButtonRefresh"></a> <div class="btn update_btn"><a class="update" href="#" i18n="receiverButtonSave"></a></div>
<a class="sticks" href="#" i18n="receiverButtonSticks"></a> <div class="btn refresh_btn"><a class="refresh" href="#" i18n="receiverButtonRefresh"></a></div>
</div> <div class="btn sticks_btn"><a class="sticks" href="#" i18n="receiverButtonSticks"></a></div>
</div>
</div> </div>