Several little UI adjustments (#4045)

betaflight · Jun 20, 2024 · a4c32c4 · a4c32c4
1 parent badc070
commit a4c32c4
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 41 deletions.
diff --git a/src/css/tabs/configuration.less b/src/css/tabs/configuration.less
@@ -28,7 +28,6 @@
         .board_align_inputs {
             display: flex;
             label {
-                display: flex;
                 white-space: nowrap;
             }
         }

diff --git a/src/css/tabs/firmware_flasher.less b/src/css/tabs/firmware_flasher.less
@@ -80,7 +80,7 @@
         .detect-board {
             position: absolute;
             top: 0;
-            height: 1.5rem;
+            height: 1.7rem;
             right: 1.25rem;
             z-index: 10;
             pointer-events: all;

diff --git a/src/css/tabs/pid_tuning.less b/src/css/tabs/pid_tuning.less
@@ -125,6 +125,7 @@
 			text-align-last: right;
 			border-radius: 3px;
 			border: 1px solid var(--surface-500);
+			width: 75px;
 		}
 	}
 	.gui_box {
@@ -359,7 +360,7 @@
 		margin-right: 5px;
 		.head {
 			text-align: left;
-			border-bottom: 1px solid var(--surface-500);
+			border-radius: 4px;
 			background-color: var(--surface-300);
 			color: var(--text);
 			height: 19px;
@@ -480,19 +481,6 @@
 	.topspacer {
 		margin-top: 5px;
 	}
-	.bottomarea {
-		float: left;
-		width: calc(100% - 2px);
-		border-bottom: 1px solid var(--surface-500);
-		border-left: 1px solid var(--surface-500);
-		border-right: 1px solid var(--surface-500);
-		border-bottom-right-radius: 3px;
-		border-bottom-left-radius: 3px;
-		padding-top: 5px;
-		padding-bottom: 5px;
-		background-color: var(--surface-200);
-		height: 20px;
-	}
 	.profile {
 		min-width: 130px;
 		select {

diff --git a/src/css/tabs/sensors.less b/src/css/tabs/sensors.less
@@ -20,9 +20,12 @@
 	}
 	.plot_control {
         width: fit-content;
-        .title {
+		.title {
 			font-weight: bold;
-            margin-bottom: 0.75rem;
+			margin-bottom: 0.75rem;
+		}
+		.helpicon {
+			margin: 2px 4px;
 		}
         dl {
             display: grid;

diff --git a/src/css/tabs/setup.less b/src/css/tabs/setup.less
@@ -23,14 +23,18 @@
 			}
 		}
 	}
-	#canvas_wrapper {
-		position: relative;
-		width: 100%;
-		height: 100%;
-        max-height: 32rem;
-		top: 0;
-		left: 0;
-		border-radius: 1rem;
+	.model-and-info {
+		margin-top: 0.75rem;
+
+		#canvas_wrapper {
+			position: relative;
+			width: 100%;
+			height: 100%;
+			max-height: 32rem;
+			top: 0;
+			left: 0;
+			border-radius: 1rem;
+		}
 	}
     @media only screen and (max-width: 1055px) {
         .grid-box {

diff --git a/src/css/tabs/static_tab.less b/src/css/tabs/static_tab.less
@@ -21,12 +21,13 @@
 		font-weight: normal;
 		margin-bottom: 5px;
 	}
-}
-#tab-static-contents {
-	padding-top: 10px;
-	padding-left: 16px;
-	padding-right: 16px;
-	padding-bottom: 40px;
-	background-color: inherit;
-	max-width: 650px;
+	#tab-static-contents {
+		margin: auto;
+		padding-top: 10px;
+		padding-left: 16px;
+		padding-right: 16px;
+		padding-bottom: 40px;
+		background-color: inherit;
+		max-width: max(60%,650px);
+	}
 }
diff --git a/src/tabs/pid_tuning.html b/src/tabs/pid_tuning.html
@@ -8,7 +8,7 @@
             <div class="profile single-field">
                 <div class="helpicon cf_tip topspacer" i18n_title="pidTuningProfileTip"></div>
                 <div class="head" i18n="pidTuningProfile"></div>
-                <div class="bottomarea">
+                <div>
                     <select name="profile">
                         <!--  list generated here -->
                     </select>
@@ -17,7 +17,7 @@
             <div class="rate_profile single-field">
                 <div class="helpicon cf_tip topspacer" i18n_title="pidTuningRateProfileTip"></div>
                 <div class="head" i18n="pidTuningRateProfile"></div>
-                <div class="bottomarea">
+                <div>
                     <select name="rate_profile">
                         <!--  list generated here -->
                     </select>
@@ -26,7 +26,7 @@
             <div class="controller single-field">
                 <div class="helpicon cf_tip topspacer" i18n_title="pidTuningPidControllerTip"></div>
                 <div class="head" i18n="pidTuningControllerHead"></div>
-                <div class="bottomarea">
+                <div>
                     <select name="controller">
                         <!-- list generated here -->
                     </select>

diff --git a/src/tabs/presets/presets.less b/src/tabs/presets/presets.less
@@ -231,7 +231,7 @@
 .presets_fitler_table_header {
 	background: var(--surface-300);
 	color: var(--text);
-	border-right: 1px solid var(--surface-500);
+	border-radius: 4px;
 	font-weight: normal;
 	text-align: left;
 	padding: 4px 4px 4px 6px;

diff --git a/src/tabs/sensors.html b/src/tabs/sensors.html
@@ -173,10 +173,10 @@
         <div class="wrapper altitude">
             <div class="gui_box grey">
                 <div class="plot_control">
-                    <div>
-                        <div class="title" i18n="sensorsAltitudeTitle"></div>
+                    <div class="title">
+                        <span i18n="sensorsAltitudeTitle"></span>
                         <div id="sensorsAltitudeHint" class="helpicon cf_tip" i18n_title="sensorsAltitudeHint"></div>
-                    </div>
+                    </div> 
                     <dl>
                         <dt i18n="sensorsRefresh"></dt>
                         <dd class="rate">