From 787bd1743bf69f14f77695852c43039f2315d7b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADt=20Semr=C3=A1d?=
<76877124+VitroidFPV@users.noreply.github.com>
Date: Fri, 5 Jul 2024 12:45:51 +0200
Subject: [PATCH] Style Fix: Adjust layout for fixed toolbar (#4086)
---
src/css/main.less | 121 ++++++++++----------------------------
src/css/tabs/cli.less | 2 +-
src/css/tabs/logging.less | 2 -
src/css/tabs/motors.less | 1 -
src/css/tabs/ports.less | 1 -
src/tabs/cli.html | 41 ++++++-------
src/tabs/logging.html | 22 +++----
src/tabs/motors.html | 18 +++---
8 files changed, 72 insertions(+), 136 deletions(-)
diff --git a/src/css/main.less b/src/css/main.less
index f011890019..8f92aabb19 100644
--- 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
index d165b65a8a..02b86c9b8f 100644
--- 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
index 61c3f1a155..4a26d9c4ef 100644
--- 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
index 8bcb562cd8..eac8ac8c46 100644
--- 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
index 6c72c55f74..2c560c693f 100644
--- 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
index cde9d19915..03e0d01bcc 100644
--- a/src/tabs/cli.html
+++ b/src/tabs/cli.html
@@ -11,26 +11,6 @@
-
@@ -57,3 +37,24 @@
+
+
diff --git a/src/tabs/logging.html b/src/tabs/logging.html
index f31450db87..1cc2da2834 100755
--- a/src/tabs/logging.html
+++ b/src/tabs/logging.html
@@ -65,16 +65,16 @@
-
+
diff --git a/src/tabs/motors.html b/src/tabs/motors.html
index e5590b1ac6..7df17c2528 100644
--- a/src/tabs/motors.html
+++ b/src/tabs/motors.html
@@ -361,15 +361,6 @@
-
-
+
+