Styling changes

getodk · Jul 16, 2024 · d631f03 · d631f03
1 parent 56c7d66
commit d631f03
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 4 deletions.
diff --git a/packages/web-forms/src/components/FormGroup.vue b/packages/web-forms/src/components/FormGroup.vue
@@ -20,7 +20,7 @@ const tableLayout = computed(() => {
 
 <template>
 	<FormPanel :title="node.currentState.label?.asString" :no-ui="!node.currentState.label" :class="classes">
-		<div :class="{ 'table-layout': tableLayout }">
+		<div :class="{ 'table-layout': tableLayout, 'gap-2': !tableLayout }" class="flex flex-column">
 			<QuestionList :nodes="node.currentState.children" />
 		</div>
 	</FormPanel>

diff --git a/packages/web-forms/src/components/FormQuestion.vue b/packages/web-forms/src/components/FormQuestion.vue
@@ -38,7 +38,7 @@ const isSelectNode = (n: AnyLeafNode) : n is SelectNode => n.nodeType === 'selec
 }
 
 .validation-placeholder{
-	height: 2rem;
+	min-height: 2rem;
 
 	.validation-message {
 		display: none;

diff --git a/packages/web-forms/src/components/appearances/FieldListTable.vue b/packages/web-forms/src/components/appearances/FieldListTable.vue
@@ -84,6 +84,19 @@ defineProps<{ appearances: SelectNodeAppearances}>();
     }
   }
 }
+// No need to have validation message placeholder for field-list related appearance
+:global(.question-container:has(.table-row) .validation-placeholder){
+  min-height: 0;
+}
+:global(.submit-pressed .question-container.invalid:has(.table-row) .validation-placeholder){
+  min-height: 1.5rem;
+}
+:global(.submit-pressed .question-container.invalid:has(.table-row) .validation-placeholder .validation-message){
+  margin-top:0;
+}
+:global(.submit-pressed .question-container.invalid:has(.table-row)){
+  margin-bottom: 0.5rem;
+}
 
 .table-row.list {
   margin-top: -30px;

diff --git a/packages/web-forms/src/components/widgets/CheckboxWidget.vue b/packages/web-forms/src/components/widgets/CheckboxWidget.vue
@@ -52,7 +52,7 @@ const isDirty = ref(false);
 	outline: 1px solid var(--surface-300);
 	border-radius: 10px;
 	padding: 15px;
-	margin: 20px 0;
+	margin: 20px 0 0 0;
 	cursor: pointer;
 
   &:has(.p-checkbox-input:hover),

diff --git a/packages/web-forms/src/components/widgets/MultiselectDropdown.vue b/packages/web-forms/src/components/widgets/MultiselectDropdown.vue
@@ -54,6 +54,7 @@ const isDirty = ref(false);
 	border-radius: 10px;
 	border-color: var(--surface-300);
 	border-radius: 10px;
+	margin-top: 0.5rem;
 
 	&:not(.p-disabled):hover {
 		border-color: var(--primary-500);

diff --git a/packages/web-forms/src/components/widgets/RadioButton.vue b/packages/web-forms/src/components/widgets/RadioButton.vue
@@ -49,7 +49,7 @@ const isDirty = ref(false);
   outline: 1px solid var(--surface-300);
 	border-radius: 10px;
   padding: 15px;
-	margin: 20px 0;
+	margin: 20px 0 0 0;
   cursor: pointer;
 
   .label-text {

diff --git a/packages/web-forms/src/components/widgets/SearchableDropdown.vue b/packages/web-forms/src/components/widgets/SearchableDropdown.vue
@@ -33,6 +33,7 @@ const getOptionLabel = (o:SelectItem) => {
 	width: 100%;
 	border-radius: 10px;
 	border-color: var(--surface-300);
+	margin-top: 0.5rem;
 
 	&:not(.p-disabled):hover {
 		border-color: var(--primary-500);