Merge pull request writer#452 from FabienArcellier/62-improve-ui-cons…

…istency-padding-content-align chore: improve UI consistency (padding, content align)
raaymax · Jun 14, 2024 · 67e7f31 · 67e7f31
2 parents 24f7764 + 7123f3e
commit 67e7f31
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/src/ui/src/builder/BuilderFieldsPadding.vue b/src/ui/src/builder/BuilderFieldsPadding.vue
@@ -42,7 +42,7 @@
 					@select="handleInputSelect"
 				/>
 				<div v-if="subMode == SubMode.all_sides" class="row">
-					<i class="material-symbols-outlined">padding</i>
+					<i>All</i>
 					<input
 						ref="fixedEl"
 						type="text"
@@ -53,7 +53,7 @@
 				</div>
 				<div v-if="subMode == SubMode.xy_sides">
 					<div class="row">
-						<i class="material-symbols-outlined">padding</i>
+						<i>X</i>
 						<input
 							ref="fixedEl"
 							type="text"
@@ -63,7 +63,7 @@
 						<div>px</div>
 					</div>
 					<div class="row">
-						<i class="material-symbols-outlined">padding</i>
+						<i>Y</i>
 						<input
 							type="text"
 							:value="valuePadding[2]"
@@ -74,7 +74,7 @@
 				</div>
 				<div v-if="subMode == SubMode.per_side">
 					<div class="row">
-						<i class="material-symbols-outlined">padding</i>
+						<i>Left</i>
 						<input
 							ref="fixedEl"
 							type="text"
@@ -84,7 +84,7 @@
 						<div>px</div>
 					</div>
 					<div class="row">
-						<i class="material-symbols-outlined">padding</i>
+						<i>Right</i>
 						<input
 							type="text"
 							:value="valuePadding[1]"
@@ -93,7 +93,7 @@
 						<div>px</div>
 					</div>
 					<div class="row">
-						<i class="material-symbols-outlined">padding</i>
+						<i>Top</i>
 						<input
 							type="text"
 							:value="valuePadding[2]"
@@ -102,7 +102,7 @@
 						<div>px</div>
 					</div>
 					<div class="row">
-						<i class="material-symbols-outlined">padding</i>
+						<i>Bottom</i>
 						<input
 							type="text"
 							:value="valuePadding[3]"
@@ -412,10 +412,11 @@ onBeforeUnmount(() => {
 	flex-direction: row;
 	gap: 8px;
 	padding: 8px;
-	align-items: center;
+	align-items: baseline;
 }
 
 .row input {
 	width: calc(100% - 32px) !important;
+	text-align: right;
 }
 </style>
diff --git a/src/ui/src/builder/BuilderSelect.vue b/src/ui/src/builder/BuilderSelect.vue
@@ -152,6 +152,7 @@ const select = (event) => {
 	display: block;
 	padding: 8px;
 	font-weight: 400;
+	font-size: 0.75rem;
 	color: #000000e6;
 	cursor: pointer;
 	transition: all 0.2s;
@@ -182,4 +183,8 @@ const select = (event) => {
 	flex-direction: row;
 	gap: 8px;
 }
+
+.selectContent {
+	font-size: 0.75rem;
+}
 </style>