1
0
Fork 0
mirror of https://github.com/betaflight/betaflight-configurator.git synced 2025-07-27 02:05:21 +03:00

Style Fix: Adjust layout for fixed toolbar (#4086)

This commit is contained in:
Vít Semrád 2024-07-05 12:45:51 +02:00 committed by GitHub
parent d31a21bfc7
commit 787bd1743b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 72 additions and 136 deletions

View file

@ -649,7 +649,6 @@ input[type="number"] {
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
background-color: var(--surface-100); background-color: var(--surface-100);
-webkit-transform: rotateX(0deg);
width: 100%; width: 100%;
} }
.tab_container.logopen { .tab_container.logopen {
@ -1122,6 +1121,7 @@ dialog {
} }
.content_wrapper { .content_wrapper {
padding: 1.25rem; padding: 1.25rem;
padding-bottom: 4rem;
height: 100%; height: 100%;
position: relative; position: relative;
>.note { >.note {
@ -1222,10 +1222,9 @@ dialog {
&.content_toolbar { &.content_toolbar {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
position: sticky; position: absolute;
bottom: 0; bottom: 2.25rem;
left: 100%; right: 0;
z-index: 2000;
} }
} }
.content_toolbar.xs-compressed { .content_toolbar.xs-compressed {
@ -1570,92 +1569,28 @@ table {
font-size: 11px; font-size: 11px;
margin-left: 3px; margin-left: 3px;
} }
.tab-setup { .tab-setup,
height: fit-content; .tab-landing,
position: relative; .tab-adjustments,
} .tab-auxiliary,
.tab-landing { .tab-cli,
height: fit-content; .tab-configuration,
position: relative; .tab-failsafe,
} .tab-firmware_flasher,
.tab-adjustments { .tab-gps,
height: fit-content; .tab-help,
position: relative; .tab-led-strip,
} .tab-logging,
.tab-auxiliary { .tab-modes,
height: fit-content; .tab-motors,
position: relative; .tab-pid_tuning,
} .tab-ports,
.tab-cli { .tab-receiver,
height: fit-content; .tab-sensors,
position: relative; .tab-servos,
} .tab-osd,
.tab-configuration { .tab-power,
height: fit-content;
position: relative;
}
.tab-failsafe {
height: fit-content;
position: relative;
}
.tab-firmware_flasher {
height: fit-content;
position: relative;
}
.tab-gps {
height: fit-content;
position: relative;
}
.tab-help {
height: fit-content;
position: relative;
}
.tab-led-strip {
height: 100%;
position: relative;
}
.tab-logging {
height: fit-content;
position: relative;
}
.tab-modes {
height: fit-content;
position: relative;
}
.tab-motors {
height: fit-content;
position: relative;
}
.tab-pid_tuning {
height: fit-content;
position: relative;
}
.tab-ports {
height: fit-content;
position: relative;
}
.tab-receiver {
height: fit-content;
position: relative;
}
.tab-sensors {
height: fit-content;
position: relative;
}
.tab-servos {
height: fit-content;
position: relative;
}
.tab-osd {
height: fit-content;
position: relative;
}
.tab-power {
height: 100%;
position: relative;
}
.tab-vtx { .tab-vtx {
height: 100%;
position: relative; position: relative;
} }
.properties { .properties {
@ -2105,7 +2040,8 @@ button.active {
width: calc(100% - 3.5rem); width: calc(100% - 3.5rem);
} }
.content_wrapper { .content_wrapper {
padding: 15px 15px 15px 14px; padding: 1rem;
padding-bottom: 4rem;
} }
.tab_title { .tab_title {
font-size: 16px; font-size: 16px;
@ -2160,6 +2096,9 @@ button.active {
overflow-y: auto; overflow-y: auto;
position: initial; position: initial;
} }
&.content_toolbar {
bottom: 0;
}
} }
} }
@media only screen and (max-device-width: 1055px) { @media only screen and (max-device-width: 1055px) {

View file

@ -1,5 +1,5 @@
.tab-cli { .tab-cli {
height: 100%; height: calc(100% - 6rem);
.content_wrapper { .content_wrapper {
flex-direction: column; flex-direction: column;
display: flex; display: flex;

View file

@ -1,6 +1,4 @@
.tab-logging { .tab-logging {
height: 100%;
.properties { .properties {
margin-top: 10px; margin-top: 10px;
dt { dt {

View file

@ -1,5 +1,4 @@
.tab-motors { .tab-motors {
height: 100%;
.spacer { .spacer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View file

@ -1,5 +1,4 @@
.tab-ports { .tab-ports {
height: 100%;
table { table {
border-collapse: collapse; border-collapse: collapse;
border-left: 0; border-left: 0;

View file

@ -11,26 +11,6 @@
</div> </div>
<textarea name="commands" i18n_placeholder="cliInputPlaceholder" rows="1" cols="0"></textarea> <textarea name="commands" i18n_placeholder="cliInputPlaceholder" rows="1" cols="0"></textarea>
</div> </div>
<div class="content_toolbar xs-compressed toolbar_fixed_bottom">
<div class="toolbar_expand_btn" nbrow="2">
<em class="fas fa-ellipsis-h"></em>
</div>
<div class="btn save_btn">
<a class="save" href="#" i18n="cliSaveToFileBtn"></a>
</div>
<div class="btn save_btn">
<a class="load" href="#" i18n="cliLoadFromFileBtn"></a>
</div>
<div class="btn save_btn">
<a class="clear" href="#" i18n="cliClearOutputHistoryBtn"></a>
</div>
<div class="btn save_btn">
<a class="copy" href="#" i18n="cliCopyToClipboardBtn"></a>
</div>
<div class="btn save_btn">
<a class="support" href="#" i18n="cliSupportRequestBtn"></a>
</div>
</div>
<!-- Snippet preview dialog --> <!-- Snippet preview dialog -->
<div id="snippetpreviewcontent" style="display: none"> <div id="snippetpreviewcontent" style="display: none">
@ -57,3 +37,24 @@
</div> </div>
</dialog> </dialog>
</div> </div>
<div class="content_toolbar xs-compressed toolbar_fixed_bottom">
<div class="toolbar_expand_btn" nbrow="2">
<em class="fas fa-ellipsis-h"></em>
</div>
<div class="btn save_btn">
<a class="save" href="#" i18n="cliSaveToFileBtn"></a>
</div>
<div class="btn save_btn">
<a class="load" href="#" i18n="cliLoadFromFileBtn"></a>
</div>
<div class="btn save_btn">
<a class="clear" href="#" i18n="cliClearOutputHistoryBtn"></a>
</div>
<div class="btn save_btn">
<a class="copy" href="#" i18n="cliCopyToClipboardBtn"></a>
</div>
<div class="btn save_btn">
<a class="support" href="#" i18n="cliSupportRequestBtn"></a>
</div>
</div>

View file

@ -65,16 +65,16 @@
</dl> </dl>
</div> </div>
</div> </div>
<div class="content_toolbar toolbar_fixed_bottom">
<div class="btn file_btn">
<a class="log_file" href="#" i18n="loggingButtonLogFile"></a>
</div>
<div class="btn back_btn">
<a class="back" href="#" i18n="loggingBack"></a>
</div>
<div class="btn logging_btn">
<a class="logging disabled" href="#" i18n="loggingStart"></a>
</div>
</div>
</div> </div>
<div class="content_toolbar toolbar_fixed_bottom">
<div class="btn file_btn">
<a class="log_file" href="#" i18n="loggingButtonLogFile"></a>
</div>
<div class="btn back_btn">
<a class="back" href="#" i18n="loggingBack"></a>
</div>
<div class="btn logging_btn">
<a class="logging disabled" href="#" i18n="loggingStart"></a>
</div>
</div>

View file

@ -361,15 +361,6 @@
</div> <!-- END CONTENT_WRAPPER --> </div> <!-- END CONTENT_WRAPPER -->
<div class="content_toolbar toolbar_fixed_bottom">
<div class="btn">
<a class="save disabled" href="#" i18n="motorsButtonSave"></a>
</div>
<div class="btn">
<a class="stop disabled" href="#" i18n="escDshotDirectionDialog-StopWizard"></a>
</div>
</div>
<dialog id="dialog-mixer-reset"> <dialog id="dialog-mixer-reset">
<div id="dialog-mixer-reset-content-wrapper"> <div id="dialog-mixer-reset-content-wrapper">
<div id="dialog-mixer-reset-content"></div> <div id="dialog-mixer-reset-content"></div>
@ -407,3 +398,12 @@
</div> </div>
</dialog> </dialog>
</div> </div>
<div class="content_toolbar toolbar_fixed_bottom">
<div class="btn">
<a class="save disabled" href="#" i18n="motorsButtonSave"></a>
</div>
<div class="btn">
<a class="stop disabled" href="#" i18n="escDshotDirectionDialog-StopWizard"></a>
</div>
</div>