127705: Cleanup input form spacing

Author: Joran De Braekeleer

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html

@@ -1,5 +1,6 @@
 <div [class.form-group]="(model.type !== 'GROUP' && asBootstrapFormGroup) || getClass('element', 'container').includes('form-group')"
      [class.d-none]="model.hidden"
+     [class.mb-2]="hasLabel || model.type === 'DATE'"
      [formGroup]="group"
      [ngClass]="[getClass('element', 'container'), getClass('grid', 'container')]">
   <label *ngIf="!isCheckbox && hasLabel"
@@ -19,8 +20,7 @@
       <small *ngIf="hasHint && (formBuilderService.hasArrayGroupValue(model) || (!model.repeatable && (isRelationship === false || value?.value === null)) || (model.repeatable === true && context?.index === context?.context?.groups?.length - 1)) && (!showErrorMessages || errorMessages.length === 0)"
              class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
       <!-- In case of repeatable fields show empty space for all elements except the first -->
-      <div *ngIf="context?.index !== null
-              && (!showErrorMessages || errorMessages.length === 0)" class="clearfix w-100 mb-2"></div>
+      <div *ngIf="context?.parent?.groups?.length > 1 && (!showErrorMessages || errorMessages.length === 0)" class="clearfix w-100 mb-2"></div>
 
       <div *ngIf="!model.hideErrorMessages && showErrorMessages" [id]="id + '_errors'"
            [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">
@@ -76,7 +76,7 @@
     </ds-existing-relation-list-element>
     <small *ngIf="hasHint && (model.repeatable === false || context?.index === context?.context?.groups?.length - 1) && (!showErrorMessages || errorMessages.length === 0)"
            class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
-    <div class="clearfix w-100 mb-2"></div>
+    <div *ngIf="context?.parent?.groups?.length > 1 && (!showErrorMessages || errorMessages.length === 0)" class="clearfix w-100 mb-2"></div>
   </ng-container>
   <ng-content></ng-content>
 </div>

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.scss

@@ -14,3 +14,13 @@
   -moz-appearance: none;
   appearance: none;
 }
+
+.invalid-feedback {
+  margin-top: 0;
+}
+
+.col-form-label {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-bottom: 0.5rem;
+}

src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.html

@@ -1,5 +1,5 @@
 <div class="d-flex">
-    <span class="mr-auto text-contents">
+    <span class="mr-auto text-contents align-self-center">
         <ng-container *ngIf="!(metadataRepresentation$ | async)">
             <ds-themed-loading [showMessage]="false"></ds-themed-loading>
         </ng-container>

src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.scss

@@ -4,4 +4,5 @@
 
 legend {
   font-size: initial;
+  margin-bottom: 0;
 }

src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html

@@ -28,7 +28,6 @@
           <span [ngClass]="model.layout.element?.label" [innerHTML]="item.label"></span>
         </label>
       </div>
-      <br>
     </div>
 
   </div>
@@ -60,7 +59,6 @@
           <span [ngClass]="model.layout.element?.label" [innerHTML]="item.label"></span>
         </label>
       </div>
-      <br>
     </div>
 
   </div>