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

haslinghuis · Jul 5, 2024 · 787bd17 · 787bd17
1 parent d31a21b
commit 787bd17
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 136 deletions.
diff --git a/src/css/main.less b/src/css/main.less
@@ -649,7 +649,6 @@ input[type="number"] {
     overflow-x: hidden;
     overflow-y: auto;
     background-color: var(--surface-100);
-    -webkit-transform: rotateX(0deg);
     width: 100%;
 }
 .tab_container.logopen {
@@ -1122,6 +1121,7 @@ dialog {
 }
 .content_wrapper {
     padding: 1.25rem;
+    padding-bottom: 4rem;
     height: 100%;
     position: relative;
     >.note {
@@ -1222,10 +1222,9 @@ dialog {
     &.content_toolbar {
         display: flex;
         flex-wrap: wrap;
-        position: sticky;
-        bottom: 0;
-        left: 100%;
-        z-index: 2000;
+        position: absolute;
+        bottom: 2.25rem;
+        right: 0;
     }
 }
 .content_toolbar.xs-compressed {
@@ -1570,92 +1569,28 @@ table {
     font-size: 11px;
     margin-left: 3px;
 }
-.tab-setup {
-    height: fit-content;
-    position: relative;
-}
-.tab-landing {
-    height: fit-content;
-    position: relative;
-}
-.tab-adjustments {
-    height: fit-content;
-    position: relative;
-}
-.tab-auxiliary {
-    height: fit-content;
-    position: relative;
-}
-.tab-cli {
-    height: fit-content;
-    position: relative;
-}
-.tab-configuration {
-    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-setup,
+.tab-landing,
+.tab-adjustments,
+.tab-auxiliary,
+.tab-cli,
+.tab-configuration,
+.tab-failsafe,
+.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-osd,
+.tab-power,
 .tab-vtx {
-    height: 100%;
     position: relative;
 }
 .properties {
@@ -2105,7 +2040,8 @@ button.active {
         width: calc(100% - 3.5rem);
     }
     .content_wrapper {
-        padding: 15px 15px 15px 14px;
+        padding: 1rem;
+        padding-bottom: 4rem;
     }
     .tab_title {
         font-size: 16px;
@@ -2160,6 +2096,9 @@ button.active {
             overflow-y: auto;
             position: initial;
         }
+        &.content_toolbar {
+            bottom: 0;
+        }
     }
 }
 @media only screen and (max-device-width: 1055px) {

diff --git a/src/css/tabs/cli.less b/src/css/tabs/cli.less
@@ -1,5 +1,5 @@
 .tab-cli {
-	height: 100%;
+	height: calc(100% - 6rem);
 	.content_wrapper {
 		flex-direction: column;
 		display: flex;

diff --git a/src/css/tabs/logging.less b/src/css/tabs/logging.less
@@ -1,6 +1,4 @@
 .tab-logging {
-	height: 100%;
-
 	.properties {
 		margin-top: 10px;
 		dt {

diff --git a/src/css/tabs/motors.less b/src/css/tabs/motors.less
@@ -1,5 +1,4 @@
 .tab-motors {
-	height: 100%;
     .spacer {
         display: flex;
         flex-direction: column;

diff --git a/src/css/tabs/ports.less b/src/css/tabs/ports.less
@@ -1,5 +1,4 @@
 .tab-ports {
-    height: 100%;
 	table {
 		border-collapse: collapse;
 		border-left: 0;

diff --git a/src/tabs/cli.html b/src/tabs/cli.html
@@ -11,26 +11,6 @@
         </div>
         <textarea name="commands" i18n_placeholder="cliInputPlaceholder" rows="1" cols="0"></textarea>
     </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 -->
     <div id="snippetpreviewcontent" style="display: none">
@@ -57,3 +37,24 @@ <h3 i18n="supportWarningDialogTitle"></h3>
         </div>
     </dialog>
 </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>
diff --git a/src/tabs/logging.html b/src/tabs/logging.html
@@ -65,16 +65,16 @@
             </dl>
         </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 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>
diff --git a/src/tabs/motors.html b/src/tabs/motors.html
@@ -361,15 +361,6 @@
 
     </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">
         <div id="dialog-mixer-reset-content-wrapper">
             <div id="dialog-mixer-reset-content"></div>
@@ -407,3 +398,12 @@
         </div>
     </dialog>
 </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>