fix vertical spacing in booking+additional-field+ticket-form forms #96

alfio-event · Aug 6, 2022 · 45455d6 · 45455d6
1 parent ed1fc0f
commit 45455d6
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 29 deletions.
diff --git a/src/app/additional-field/additional-field.component.html b/src/app/additional-field/additional-field.component.html
@@ -1,4 +1,4 @@
-<div [formGroup]="form">
+<ng-container [formGroup]="form">
   <div class="form-group" [formArrayName]="field.name">
     <label class="form-label" [attr.for]="ticketUUID + '-' + field.name" [id]="labelId" [attr.aria-hidden]="hideLabelForAssistiveTechnologies">{{labelValue + (field.required ? ' *' : '')}}</label>
     <ng-container [ngSwitch]="field.type" *ngIf="editAllowed">
@@ -30,4 +30,4 @@
       {{ getRestrictedValueLabel(field.value) }}
     </div>
   </div>
-</div>
+</ng-container>
diff --git a/src/app/reservation/booking/booking.component.html b/src/app/reservation/booking/booking.component.html
@@ -20,7 +20,7 @@ <h2 translate="reservation-page.your-details"></h2>
       <div *ngFor="let err of globalErrors"><strong>{{err.code | translate: err.arguments}}</strong></div>
     </div>
 
-    <div class="row">
+    <div class="row g-2">
       <div class="col-12 col-sm-6">
         <div class="form-group">
           <label class="form-label" for="first-name">{{'common.first-name'|translate}}{{' '}}*</label>
@@ -33,8 +33,6 @@ <h2 translate="reservation-page.your-details"></h2>
           <input id="last-name" class="form-control" formControlName="lastName" aria-required="true" type="text" #contactLastName autocomplete="lname" [attr.maxlength]="255" appInvalidFeedback (change)="handleAutocomplete('lastName', contactLastName.value)">
         </div>
       </div>
-    </div>
-    <div class="row">
       <div class="col-12">
         <div class="form-group">
             <label class="form-label" for="email">{{'common.email'|translate}}{{' '}}*</label>
@@ -100,7 +98,7 @@ <h3 class="card-title">
         <label class="custom-control-label" for="show-subscription-owner">{{' '}}{{'reservation-page.subscription.different-owner' | translate}}</label>
       </div>
       <div *ngIf="contactAndTicketsForm.value.differentSubscriptionOwner" [formGroup]="getSubscriptionForm()">
-        <div class="row">
+        <div class="row g-2">
           <div class="col-12 col-md-6">
             <div class="form-group">
               <label class="form-label" for="subscription-first-name">{{'common.first-name' | translate}} *</label>
@@ -113,11 +111,12 @@ <h3 class="card-title">
               <input class="form-control" id="subscription-last-name" formControlName="lastName" type="text" appInvalidFeedback>
             </div>
           </div>
-        </div>
-
-        <div class="form-group">
-          <label class="form-label" class="form-label" for="subscription-email">{{'common.email' | translate}} *</label>
-          <input id="subscription-email" formControlName="email" type="email" class="form-control" appInvalidFeedback>
+          <div class="col-12">
+            <div class="form-group">
+              <label class="form-label" class="form-label" for="subscription-email">{{'common.email' | translate}} *</label>
+              <input id="subscription-email" formControlName="email" type="email" class="form-control" appInvalidFeedback>
+            </div>
+          </div>
         </div>
       </div>
     </ng-container>

diff --git a/src/app/reservation/ticket-form/ticket-form.component.html b/src/app/reservation/ticket-form/ticket-form.component.html
@@ -4,7 +4,7 @@
       <app-additional-field [field]="field" [ticketUUID]="ticket.uuid" [form]="getAdditional(form)" [ticketAcquired]="ticket.acquired"></app-additional-field>
     </div>
 
-    <div class="row">
+    <div class="row g-2">
       <div class="col-12 col-md-6">
         <div class="form-group">
           <label class="form-label" [attr.for]="ticket.uuid + '-first-name'">{{'common.first-name' | translate}} *</label>
@@ -17,23 +17,25 @@
           <input [attr.id]="ticket.uuid + '-last-name'" formControlName="lastName" type="text" [ngClass]="{'form-control': ticket.locked !== true, 'form-control-plaintext': ticket.locked}" appInvalidFeedback [readonly]="ticket.locked === true">
         </div>
       </div>
+      <div class="col-12">
+        <div class="form-group">
+          <label class="form-label" [attr.for]="ticket.uuid + '-email'">{{'common.email' | translate}} *</label>
+          <input [attr.id]="ticket.uuid + '-email'" formControlName="email" type="email" [ngClass]="{'form-control': ticket.locked !== true, 'form-control-plaintext': ticket.locked}" appInvalidFeedback [readonly]="ticket.locked === true">
+        </div>
+      </div>
+      <div *ngFor="let field of ticket.ticketFieldConfigurationAfterStandard" class="col-12">
+        <app-additional-field [field]="field" [ticketUUID]="ticket.uuid" [form]="getAdditional(form)" [ticketAcquired]="ticket.acquired"></app-additional-field>
+      </div>
+      <div class="col-12">
+        <div class="form-group" *ngIf="purchaseContext && purchaseContext.contentLanguages.length > 1">
+            <label class="form-label" [attr.for]="ticket.uuid + '-userLanguage'" translate="reservation-page-complete.language"></label>
+            <select [attr.id]="ticket.uuid + '-userLanguage'" formControlName="userLanguage" class="form-select" appInvalidFeedback>
+              <option value=""></option>
+              <option *ngFor="let lang of purchaseContext.contentLanguages" [ngValue]="lang.locale">{{lang.displayLanguage}}</option>
+            </select>
+          </div>
+        </div>
+      </div>
     </div>
 
-    <div class="form-group">
-      <label class="form-label" [attr.for]="ticket.uuid + '-email'">{{'common.email' | translate}} *</label>
-      <input [attr.id]="ticket.uuid + '-email'" formControlName="email" type="email" [ngClass]="{'form-control': ticket.locked !== true, 'form-control-plaintext': ticket.locked}" appInvalidFeedback [readonly]="ticket.locked === true">
-    </div>
-
-    <div *ngFor="let field of ticket.ticketFieldConfigurationAfterStandard">
-      <app-additional-field [field]="field" [ticketUUID]="ticket.uuid" [form]="getAdditional(form)" [ticketAcquired]="ticket.acquired"></app-additional-field>
-    </div>
-
-    <div class="form-group" *ngIf="purchaseContext && purchaseContext.contentLanguages.length > 1">
-      <label class="form-label" [attr.for]="ticket.uuid + '-userLanguage'" translate="reservation-page-complete.language"></label>
-      <select [attr.id]="ticket.uuid + '-userLanguage'" formControlName="userLanguage" class="form-select" appInvalidFeedback>
-        <option value=""></option>
-        <option *ngFor="let lang of purchaseContext.contentLanguages" [ngValue]="lang.locale">{{lang.displayLanguage}}</option>
-      </select>
-    </div>
-  </div>
 </div>