From 9271c21fbaaeace5ad48e576c55703df68508b41 Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Mon, 24 Jan 2022 21:15:33 +0100
Subject: [PATCH] Optimize column display in the booking page.

---
 .../views/components/booking_info_step.php      |  4 ++--
 assets/js/pages/booking.js                      | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/application/views/components/booking_info_step.php b/application/views/components/booking_info_step.php
index 76532b41..7b2f9820 100644
--- a/application/views/components/booking_info_step.php
+++ b/application/views/components/booking_info_step.php
@@ -27,7 +27,7 @@
         <h2 class="frame-title"><?= lang('customer_information') ?></h2>
 
         <div class="row frame-content">
-            <div class="col-12 col-md-6">
+            <div class="col-12 col-md-6 field-col m-auto">
                 <?php if ($display_first_name): ?>
                     <div class="mb-3">
                         <label for="first-name" class="form-label">
@@ -81,7 +81,7 @@
                 <?php endif ?>
             </div>
 
-            <div class="col-12 col-md-6">
+            <div class="col-12 col-md-6 field-col m-auto">
                 <?php if ($display_address) : ?>
                     <div class="mb-3">
                         <label for="address" class="form-label">
diff --git a/assets/js/pages/booking.js b/assets/js/pages/booking.js
index 56cf9515..83e962dd 100644
--- a/assets/js/pages/booking.js
+++ b/assets/js/pages/booking.js
@@ -169,6 +169,8 @@ App.Pages.Booking = (function () {
         // Bind the event handlers (might not be necessary every time we use this class).
         addEventListeners();
 
+        optimizeContactInfoDisplay();
+
         // If the manage mode is true, the appointments data should be loaded by default.
         if (manageMode) {
             applyAppointmentData(vars('appointment_data'), vars('provider_data'), vars('customer_data'));
@@ -218,6 +220,21 @@ App.Pages.Booking = (function () {
         }
     }
 
+    /**
+     * Remove empty columns and center elements if needed.
+     */
+    function optimizeContactInfoDisplay() {
+        const $fieldCols = $(document).find('#wizard-frame-3 .field-col');
+
+        $fieldCols.each((index, fieldColEl) => {
+            const $fieldCol = $(fieldColEl);
+
+            if (!$fieldCol.find('.form-control').length) {
+                $fieldCol.hide();
+            }
+        });
+    }
+
     /**
      * Add the page event listeners.
      */