mobile ui improvement

alfio-event · Jun 15, 2019 · b584dc1 · b584dc1
1 parent 7a527ef
commit b584dc1
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/src/app/event-display/event-display.component.html b/src/app/event-display/event-display.component.html
@@ -197,7 +197,7 @@ <h2 translate="show-event.donations"></h2>
           <app-recaptcha [apiKey]="event.captchaConfiguration.recaptchaApiKey" (recaptchaResponse)="handleRecaptchaResponse($event)" *ngIf="event.captchaConfiguration.captchaForTicketSelection && event.captchaConfiguration.recaptchaApiKey"></app-recaptcha>
 
           <hr>
-          <div class="row d-flex justify-content-between">
+          <div class="row d-flex justify-content-between mobile-add-margin-bottom">
             <div class="col-md-5 order-1 col-12"><button type="submit" class="block-button btn btn-success" translate="show-event.continue"></button></div>
             <div class="col-md-5 order-0 col-12 "><a [href]="event.websiteUrl" class="block-button btn btn-outline-dark" translate="to-event-site"></a></div>
           </div>

diff --git a/src/app/reservation/booking/booking.component.html b/src/app/reservation/booking/booking.component.html
@@ -87,7 +87,7 @@ <h3>
 
     <p><strong>*</strong>{{' '}}<span translate="common.required-fields"></span></p>
 
-    <div class="row d-flex justify-content-between">
+    <div class="row d-flex justify-content-between mobile-add-margin-bottom">
       <div class="col-md-5 order-1 col-12">
         <button type="submit" class="block-button btn btn-success" translate="reservation-page.continue" [disabled]="expired"></button>
       </div>

diff --git a/src/app/reservation/overview/overview.component.html b/src/app/reservation/overview/overview.component.html
@@ -96,7 +96,7 @@ <h4 class="wMarginTop" [ngSwitch]="getSinglePaymentMethod(event)">
       <strong ><span translate="reservation.payment-in-progress"></span><span class="dots"><span>.</span><span>.</span><span>.</span></span></strong>
     </div>
 
-    <div class="row d-flex justify-content-between" *ngIf="!submitting">
+    <div class="row d-flex justify-content-between mobile-add-margin-bottom" *ngIf="!submitting">
       <div class="col-md-5 order-1 col-12">
         <button *ngIf="reservationInfo.orderSummary.free" type="submit" class="block-button btn btn-success" translate="reservation-page.continue" [disabled]="expired"></button>
         <button *ngIf="!reservationInfo.orderSummary.free" type="submit" class="block-button btn btn-success" [disabled]="expired || !selectedPaymentProvider">

diff --git a/src/styles.scss b/src/styles.scss
@@ -49,8 +49,10 @@ body {
     transform: rotate(-45deg);
 }
 
-label.col-form-label {
-    text-align: right;
+@media (min-width: 576px) {
+    label.col-form-label {
+        text-align: right;
+    }
 }
 
 .list-group-item {
@@ -142,4 +144,12 @@ label.radio-inline {
     font-size: .875rem;
     line-height: .5;
     border-radius: .2rem;
+}
+
+@media (max-width: 767px) {
+    .mobile-add-margin-bottom button.btn,
+    .mobile-add-margin-bottom a.btn
+    {
+        margin-bottom: 1rem;
+    }
 }