From 159225a7c7662f3bbdc2a9db51227861e639b433 Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Thu, 3 Sep 2020 14:14:34 +0300
Subject: [PATCH] Changed the display of the availability in the booking page
 for a better user experience (buttons are used now).

---
 application/views/appointments/book.php       | 10 ++---
 .../views/appointments/book_success.php       |  2 +-
 application/views/appointments/message.php    |  2 +-
 assets/css/frontend.css                       | 37 +++++++++----------
 assets/js/frontend_book_api.js                | 34 ++---------------
 5 files changed, 28 insertions(+), 57 deletions(-)
diff --git a/application/views/appointments/book.php b/application/views/appointments/book.php
index d473339b..94060842 100755
--- a/application/views/appointments/book.php
+++ b/application/views/appointments/book.php
@@ -184,7 +184,7 @@
                 </div>
 
                 <div class="command-buttons">
-                    <button type="button" id="button-next-1" class="btn button-next btn-primary"
+                    <button type="button" id="button-next-1" class="btn button-next btn-info"
                             data-step_index="1">
                         <?= lang('next') ?>
                         <i class="fas fa-long-arrow-alt-right"></i>
@@ -200,11 +200,11 @@
                     <h2 class="frame-title"><?= lang('step_two_title') ?></h2>
 
                     <div class="row frame-content">
-                        <div class="col-12 col-md-7">
+                        <div class="col-12 col-md-6">
                             <div id="select-date"></div>
                         </div>
 
-                        <div class="col-12 col-sm-5">
+                        <div class="col-12 col-sm-6">
                             <div id="select-time">
                                 <div class="form-group">
                                     <label for="select-timezone"><?= lang('timezone') ?></label>
@@ -223,7 +223,7 @@
                         <i class="fas fa-long-arrow-alt-left"></i>
                         <?= lang('back') ?>
                     </button>
-                    <button type="button" id="button-next-2" class="btn button-next btn-primary"
+                    <button type="button" id="button-next-2" class="btn button-next btn-info"
                             data-step_index="2">
                         <?= lang('next') ?>
                         <i class="fas fa-long-arrow-alt-right"></i>
@@ -320,7 +320,7 @@
                             data-step_index="3"><i class="fas fa-long-arrow-alt-left"></i>
                         <?= lang('back') ?>
                     </button>
-                    <button type="button" id="button-next-3" class="btn button-next btn-primary"
+                    <button type="button" id="button-next-3" class="btn button-next btn-info"
                             data-step_index="3">
                         <?= lang('next') ?>
                         <i class="fas fa-long-arrow-alt-right"></i>
diff --git a/application/views/appointments/book_success.php b/application/views/appointments/book_success.php
index 88a64f2e..021edc81 100755
--- a/application/views/appointments/book_success.php
+++ b/application/views/appointments/book_success.php
@@ -17,7 +17,7 @@
 <body>
     <div id="main" class="container">
         <div class="row wrapper">
-            <div id="success-frame" class="col-12 my-auto frame-container">
+            <div id="success-frame" class="col-12 border my-auto frame-container">
                 <div>
                     <img id="success-icon" class="mt-0 mb-2" src="<?= base_url('assets/img/success.png') ?>" />
                 </div>
diff --git a/application/views/appointments/message.php b/application/views/appointments/message.php
index 8b395570..0ea2c232 100644
--- a/application/views/appointments/message.php
+++ b/application/views/appointments/message.php
@@ -27,7 +27,7 @@
 <body>
     <div id="main" class="container">
         <div class="row wrapper">
-            <div id="message-frame" class="col-12 my-auto frame-container">
+            <div id="message-frame" class="col-12 border my-auto frame-container">
                 <div>
                     <img id="message-icon" src="<?= $message_icon ?>" alt="warning">
                 </div>
diff --git a/assets/css/frontend.css b/assets/css/frontend.css
index eda291d6..955255e1 100644
--- a/assets/css/frontend.css
+++ b/assets/css/frontend.css
@@ -19,7 +19,7 @@ body {
 }
 
 body {
-    background-color: #FAFAFA;
+    background-color: #F2F2F2;
 }
 
 #main {
@@ -68,7 +68,7 @@ body {
 
 #book-appointment-wizard #form-message {
     text-align: center;
-    margin: 15px 0;
+    margin-bottom: 30px;
 }
 
 #book-appointment-wizard .wizard-frame {
@@ -78,6 +78,7 @@ body {
 
 #book-appointment-wizard .wizard-frame .frame-container {
     height: auto;
+    min-height: 500px;
     padding: 15px 0;
 }
 
@@ -125,7 +126,7 @@ body {
 
 #book-appointment-wizard .wizard-frame .command-buttons #button-next-1 {
     width: 100%;
-    max-width: 300px;
+    max-width: 200px;
     margin: auto;
 }
 
@@ -137,7 +138,7 @@ body {
     background: #225d4d;
     padding: 8px;
     margin-right: 12px;
-    margin-top: 5px;
+    margin-top: 6px;
     border-radius: 8px;
 }
 
@@ -182,7 +183,9 @@ body {
 #book-appointment-wizard #available-hours {
     overflow: auto;
     margin: 15px 0;
+    padding-right: 10px;
     width: auto;
+    max-height: 255px;
 }
 
 #book-appointment-wizard #available-hours div {
@@ -190,21 +193,13 @@ body {
 }
 
 #book-appointment-wizard #available-hours .available-hour {
-    display: inline-block;
-    font-size: 15px;
-    padding: 5px;
-    margin-bottom: 5px;
-    border-radius: 4px;
-}
-
-#book-appointment-wizard #available-hours .available-hour:hover {
-    background-color: #d6eaf5;
-    cursor: pointer;
+    margin-bottom: 10px;
 }
 
 #book-appointment-wizard #available-hours .selected-hour {
-    background-color: #d6eaf5;
-    color: #0088cc;
+    background-color: #439a82;
+    border-color: #439a82;
+    color: white;
 }
 
 #book-appointment-wizard .span3 {
@@ -298,10 +293,6 @@ body {
         padding: 10px 20px;
     }
 
-    #book-appointment-wizard .wizard-frame .frame-container {
-        height: 440px;
-    }
-
     #book-appointment-wizard .wizard-frame .command-buttons {
         display: flex;
         justify-content: center;
@@ -315,6 +306,12 @@ body {
     #book-appointment-wizard .captcha-image {
         float: right;
     }
+
+    #book-appointment-wizard #select-language {
+        width: 100px;
+        padding: 5px;
+        margin: 5px auto;
+    }
 }
 
 /* BOOK SUCCESS & MESSAGE
diff --git a/assets/js/frontend_book_api.js b/assets/js/frontend_book_api.js
index df7f8e20..d3093f96 100755
--- a/assets/js/frontend_book_api.js
+++ b/assets/js/frontend_book_api.js
@@ -87,45 +87,19 @@ window.FrontendBookApi = window.FrontendBookApi || {};
                     }
 
                     var providerTimezone = provider.timezone;
-
                     var selectedTimezone = $('#select-timezone').val();
-
-                    var currentColumn = 1;
-
-                    $('#available-hours').html(
-                        $('<div/>', {
-                            'css': {
-                                'width': '80px',
-                                'float': 'left'
-                            }
-                        })
-                    );
-
                     var timeFormat = GlobalVariables.timeFormat === 'regular' ? 'h:mm a' : 'HH:mm';
 
                     response.forEach(function (availableHour, index) {
-                        if ((currentColumn * 10) < (index + 1)) {
-                            currentColumn++;
-                            $('#available-hours').append(
-                                $('<div/>', {
-                                    'css': {
-                                        'width': '80px',
-                                        'float': 'left'
-                                    }
-                                })
-                            );
-                        }
-
                         var availableHourMoment = moment
                             .tz(selectedDate + ' ' + availableHour + ':00', providerTimezone)
                             .tz(selectedTimezone);
 
-                        $('#available-hours div:eq(' + (currentColumn - 1) + ')').append(
-                            $('<span/>', {
-                                'class': 'available-hour',
+                        $('#available-hours').append(
+                            $('<button/>', {
+                                'class': 'btn btn-outline-info btn-block shadow-none available-hour',
                                 'text': availableHourMoment.format(timeFormat)
-                            }),
-                            $('<br/>')
+                            })
                         );
                     });
 
