From 2f1b0efd1f0f7a5e521e97f6e6a5d08b24ec7923 Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Thu, 9 Apr 2015 21:50:16 +0200
Subject: [PATCH] Applied Bootstrap 3 to frontend book.

---
 src/application/controllers/appointments.php  |   2 +-
 src/application/views/appointments/book.php   | 108 +++++++++---------
 .../views/appointments/book_success.php       |  22 ++--
 src/assets/css/frontend.css                   |  70 +++++++-----
 src/assets/js/frontend_book.js                |  10 +-
 5 files changed, 113 insertions(+), 99 deletions(-)
diff --git a/src/application/controllers/appointments.php b/src/application/controllers/appointments.php
index a972dbf1..410c0447 100644
--- a/src/application/controllers/appointments.php
+++ b/src/application/controllers/appointments.php
@@ -160,7 +160,7 @@ class Appointments extends CI_Controller {
                     
                     if (!$post_data['manage_mode']) {
                         $customer_title = $this->lang->line('appointment_booked');
-                        $customer_message = $this->lang->line('thank_your_for_appointment');
+                        $customer_message = $this->lang->line('thank_you_for_appointment');
                         $customer_link = $this->config->item('base_url') . '/appointments/index/' 
                                 . $appointment['hash'];
 
diff --git a/src/application/views/appointments/book.php b/src/application/views/appointments/book.php
index c5353724..9ab8d331 100644
--- a/src/application/views/appointments/book.php
+++ b/src/application/views/appointments/book.php
@@ -3,6 +3,9 @@
 <head>
     <title><?php echo $this->lang->line('page_title') . ' ' .  $company_name; ?></title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#35A768">
+
     
     <?php
         // ------------------------------------------------------------
@@ -11,11 +14,7 @@
     <link 
         rel="stylesheet" 
         type="text/css" 
-        href="<?php echo $this->config->base_url(); ?>/assets/css/libs/bootstrap/bootstrap.css">
-    <link 
-        rel="stylesheet" 
-        type="text/css" 
-        href="<?php echo $this->config->base_url(); ?>/assets/css/libs/bootstrap/bootstrap-responsive.css">
+        href="<?php echo $this->config->base_url(); ?>/assets/ext/bootstrap/css/bootstrap.min.css">
     <link 
         rel="stylesheet" 
         type="text/css" 
@@ -60,11 +59,12 @@
         // ------------------------------------------------------------
         // WEBPAGE FAVICON
         // ------------------------------------------------------------ ?>
-    <link 
-        rel="icon" 
-        type="image/x-icon" 
-        href="<?php echo $this->config->base_url(); ?>/assets/img/favicon.ico">
-    
+    <link rel="icon" type="image/x-icon" 
+            href="<?php echo $this->config->base_url(); ?>/assets/img/favicon.ico">
+
+    <link rel="icon" sizes="192x192" 
+            href="<?php echo $this->config->base_url(); ?>/assets/img/logo.png">
+
     <?php
         // ------------------------------------------------------------
         // VIEW FILE JAVASCRIPT CODE
@@ -73,7 +73,7 @@
         var GlobalVariables = {
             availableServices   : <?php echo json_encode($available_services); ?>,
             availableProviders  : <?php echo json_encode($available_providers); ?>,
-            baseUrl             : <?php echo '"' . $this->config->base_url() . '"'; ?>,
+            baseUrl             : <?php echo '"' . $this->config->item('base_url') . '"'; ?>,
             manageMode          : <?php echo ($manage_mode) ? 'true' : 'false'; ?>,
             appointmentData     : <?php echo json_encode($appointment_data); ?>,
             providerData        : <?php echo json_encode($provider_data); ?>,
@@ -167,7 +167,7 @@
                             <strong><?php echo $this->lang->line('select_service'); ?></strong>
                         </label>
                         
-                        <select id="select-service" class="span4">
+                        <select id="select-service" class="col-md-4 form-control">
                             <?php 
                                 // Group services by category, only if there is at least one service 
                                 // with a parent category.
@@ -226,7 +226,7 @@
                             <strong><?php echo $this->lang->line('select_provider'); ?></strong>
                         </label>
                         
-                        <select id="select-provider" class="span4"></select>
+                        <select id="select-provider" class="cold-md-4 form-control"></select>
                         
                         <div id="service-description" style="display:none;"></div>
                     </div>
@@ -249,12 +249,12 @@
                     
                     <h3 class="frame-title"><?php echo $this->lang->line('step_two_title'); ?></h3>
                     
-                    <div class="frame-content" style="width:600px">
-                        <div class="span3">
+                    <div class="frame-content row" style="width:600px">
+                        <div class="col-md-6">
                             <div id="select-date"></div>
                         </div>
 
-                        <div class="span3">
+                        <div class="col-md-6">
                             <?php // Available hours are going to be fetched via ajax call. ?>
                             <div id="available-hours"></div>
                         </div>
@@ -283,36 +283,44 @@
                     
                     <h3 class="frame-title"><?php echo $this->lang->line('step_three_title'); ?></h3>
                     
-                    <div class="frame-content" style="width:600px">
-                        <div class="span3">
-                            <label for="first-name"><?php echo $this->lang->line('first_name'); ?> *</label>
-                            <input type="text" id="first-name" class="required" maxlength="100" />
-                            
-                            <label for="last-name"><?php echo $this->lang->line('last_name'); ?> *</label>
-                            <input type="text" id="last-name" class="required" maxlength="250" />
-
-                            <label for="email"><?php echo $this->lang->line('email'); ?> *</label>
-                            <input type="text" id="email" class="required" maxlength="250" />
-
-                            <label for="phone-number"><?php echo $this->lang->line('phone_number'); ?> *</label>
-                            <input type="text" id="phone-number" class="required" maxlength="60" />
-
-                            <br/><br/>
-                            <em id="form-message" class="text-error"><?php echo $this->lang->line('fields_are_required'); ?></em>
+                    <div class="frame-content row" style="width:600px">
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label for="first-name" class="control-label"><?php echo $this->lang->line('first_name'); ?> *</label>
+                                <input type="text" id="first-name" class="required form-control" maxlength="100" />
+                            </div>
+                            <div class="form-group">
+                                <label for="last-name" class="control-label"><?php echo $this->lang->line('last_name'); ?> *</label>
+                                <input type="text" id="last-name" class="required form-control" maxlength="250" />
+                            </div>
+                            <div class="form-group">
+                                <label for="email" class="control-label"><?php echo $this->lang->line('email'); ?> *</label>
+                                <input type="text" id="email" class="required form-control" maxlength="250" />
+                            </div>
+                            <div class="form-group">
+                                <label for="phone-number" class="control-label"><?php echo $this->lang->line('phone_number'); ?> *</label>
+                                <input type="text" id="phone-number" class="required form-control" maxlength="60" />
+                            </div>
+                            <em id="form-message" class="text-danger"><?php echo $this->lang->line('fields_are_required'); ?></em>
                         </div>
 
-                        <div class="span3">
-                            <label for="address"><?php echo $this->lang->line('address'); ?></label>
-                            <input type="text" id="address" maxlength="250" />
-
-                            <label for="city"><?php echo $this->lang->line('city'); ?></label>
-                            <input type="text" id="city" maxlength="120" />
-
-                            <label for="zip-code"><?php echo $this->lang->line('zip_code'); ?></label>
-                            <input type="text" id="zip-code" maxlength="120" />
-
-                            <label for="notes"><?php echo $this->lang->line('notes'); ?></label>
-                            <textarea id="notes" maxlength="500" rows="3"></textarea>
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label for="address" class="control-label"><?php echo $this->lang->line('address'); ?></label>
+                                <input type="text" id="address" class="form-control" maxlength="250" />
+                            </div>
+                            <div class="form-group">
+                                <label for="city" class="control-label"><?php echo $this->lang->line('city'); ?></label>
+                                <input type="text" id="city" class="form-control" maxlength="120" />
+                            </div>
+                            <div class="form-group">
+                                <label for="zip-code" class="control-label"><?php echo $this->lang->line('zip_code'); ?></label>
+                                <input type="text" id="zip-code" class="form-control" maxlength="120" />
+                            </div>
+                            <div class="form-group">
+                                <label for="notes" class="control-label"><?php echo $this->lang->line('notes'); ?></label>
+                                <textarea id="notes" maxlength="500" class="form-control" rows="3"></textarea>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -337,9 +345,9 @@
             <div id="wizard-frame-4" class="wizard-frame" style="display:none;">
                 <div class="frame-container">
                     <h3 class="frame-title"><?php echo $this->lang->line('step_four_title'); ?></h3>
-                    <div class="frame-content" style="width:600px">
-                        <div id="appointment-details" class="span3"></div>
-                        <div id="customer-details" class="span3"></div>
+                    <div class="frame-content row" style="width:600px">
+                        <div id="appointment-details" class="col-md-6"></div>
+                        <div id="customer-details" class="col-md-6"></div>
                     </div>
                 </div>
                 
@@ -367,11 +375,9 @@
                 // ------------------------------------------------------ ?>
             <div id="frame-footer">
                 Powered By 
-                <a href="http://easyappointments.org" target="_blank">
-                    Easy!Appointments
-                </a>
+                <a href="http://easyappointments.org" target="_blank">Easy!Appointments</a>
                 |
-                <span id="select-language" class="badge badge-inverse">
+                <span id="select-language" class="label label-success">
 		        	<?php echo ucfirst($this->config->item('language')); ?>
 		        </span>
             </div>
diff --git a/src/application/views/appointments/book_success.php b/src/application/views/appointments/book_success.php
index b6b5b148..d25bf1d4 100644
--- a/src/application/views/appointments/book_success.php
+++ b/src/application/views/appointments/book_success.php
@@ -3,7 +3,9 @@
 <head>
     <title><?php echo $this->lang->line('appointment_registered') . ' - ' . $company_name; ?></title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
-    
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#35A768">
+
     <?php // INCLUDE JS FILES ?>
     <script 
         type="text/javascript" 
@@ -19,17 +21,13 @@
     <link 
         rel="stylesheet" 
         type="text/css" 
-        href="<?php echo $this->config->base_url(); ?>/assets/css/libs/bootstrap/bootstrap.css">
-    <link 
-        rel="stylesheet" 
-        type="text/css" 
-        href="<?php echo $this->config->base_url(); ?>/assets/css/libs/bootstrap/bootstrap-responsive.css">
+        href="<?php echo $this->config->base_url(); ?>/assets/ext/bootstrap/css/bootstrap.min.css">
     
     <?php // SET FAVICON FOR PAGE ?>
-    <link 
-        rel="icon" 
-        type="image/x-icon" 
+    <link rel="icon" type="image/x-icon" 
         href="<?php echo $this->config->base_url(); ?>/assets/img/favicon.ico">
+    <link rel="icon" sizes="192x192" 
+        href="<?php echo $this->config->base_url(); ?>/assets/img/logo.png">
     
     <style>
         body {
@@ -57,8 +55,8 @@
             'providerData'      : <?php echo json_encode($provider_data); ?>,
             'serviceData'       : <?php echo json_encode($service_data); ?>,
             'companyName'       : <?php echo '"' . $company_name . '"'; ?>,  
-            'googleApiKey'      : <?php echo '"' . SystemConfiguration::$google_api_key . '"'; ?>,
-            'googleClientId'    : <?php echo '"' . SystemConfiguration::$google_client_id . '"'; ?>,
+            'googleApiKey'      : <?php echo '"' . Config::$google_api_key . '"'; ?>,
+            'googleClientId'    : <?php echo '"' . Config::$google_client_id . '"'; ?>,
             'googleApiScope'    : 'https://www.googleapis.com/auth/calendar'
         };
         
@@ -165,7 +163,7 @@
                     // corresponding message on the screen.
                     $('#success-frame').append(
                         '<br><br>' +
-                        '<div class="alert alert-error">' + 
+                        '<div class="alert alert-danger">' + 
                             '<h4>' + EALang['oops_something_went_wrong'] + '</h4>' + 
                             '<p>' + 
                                 EALang['could_not_add_to_google_calendar'] +
diff --git a/src/assets/css/frontend.css b/src/assets/css/frontend.css
index 3847b5c3..b4afa4cc 100644
--- a/src/assets/css/frontend.css
+++ b/src/assets/css/frontend.css
@@ -1,6 +1,14 @@
-/**
- * MAIN CSS FILE FOR EASY!APPOINTMENTS
- */
+/* ----------------------------------------------------------------------------
+ * Easy!Appointments - Open Source Web Scheduler
+ *
+ * @package     EasyAppointments
+ * @author      A.Tselegidis <alextselegidis@gmail.com>
+ * @copyright   Copyright (c) 2013 - 2015, Alex Tselegidis
+ * @license     http://opensource.org/licenses/GPL-3.0 - GPLv3
+ * @link        http://easyappointments.org
+ * @since       v1.0.0
+ * ---------------------------------------------------------------------------- */
+
 root { 
     display: block;
 }
@@ -21,7 +29,7 @@ body {
 
 #book-appointment-wizard #header {
     padding: 5px;
-    height: 70px;
+    height: 80px;
     background: #3DD481;
     border-bottom: 4px solid #1A865F;
 }
@@ -30,26 +38,26 @@ body {
     font-weight: bold;
     color: #FFF;
     font-size: 22px;
-    margin: 27px 10px 0 14px;
+    margin: 18px 10px 0 14px;
     display: inline-block;
     text-shadow: 0px 1px 1px #8F8888;
     float: left;
 }
 
 #book-appointment-wizard #steps {
-    width: 204px;
+    width: 180px;
     display: inline-block;
     float: right;
-    margin-top: 15px;
+    margin-top: 12px;
 }
 
 #book-appointment-wizard .wizard-frame {
     padding: 10px 20px;
-    height: 434px;
+    height: 485px;
 }
 
 #book-appointment-wizard .wizard-frame .frame-container {
-    height: 370px;
+    height: 395px;
     margin-bottom: 10px;
 }
 
@@ -74,38 +82,38 @@ body {
 
 #book-appointment-wizard .book-step {
     display: inline-block;
-    height: 20px;
-    width: 20px;
+    height: 30px;
+    width: 30px;
     float: left;
     background: #FFF;
-    padding: 3px;
-    margin-right: 15px;
-    margin-top: 10px;
+    padding: 1px;
+    margin-right: 10px;
+    margin-top: 9px;
     border: 3px solid #38A07A;
 }
 
 #book-appointment-wizard .book-step strong {
-    font-size: 18px;
+    font-size: 15px;
     display: block;
     text-align: center;
-    color: #B6DFC6;
+    color: #A9C5BB;
 }
 
 #book-appointment-wizard .active-step {
     display: inline-block;
-    height: 20px;
-    width: 20px;
+    height: 40px;
+    width: 40px;
     float: left;
     background: #FFF;
-    padding: 10px;
-    margin-right: 15px;
-    margin-top: 0px;
+    padding: 1px;
+    margin-right: 10px;
+    margin-top: 3px;
     border: 3px solid #38A07A;
 }
 
 #book-appointment-wizard .active-step strong {
-    color: #396946;
-    font-size: 25px;
+    color: #38A07A;
+    font-size: 22px;
 }
 
 #book-appointment-wizard #frame-footer {
@@ -165,11 +173,16 @@ body {
     margin-bottom: 25px;
 }
 
+#language-list {
+    list-style: none;
+    padding-left: 0px;
+}
+
 
 /* CANCEL APPOINTMENT 
    ------------------------------------------------------------------------- */
 #cancel-appointment-frame {
-    padding: 12px 17px 0;
+    padding: 15px;
     background: #FAFAFA;
     border-bottom: 1px solid #E2E2E2;
     overflow: auto;
@@ -177,15 +190,10 @@ body {
 
 #cancel-appointment-frame p {
     display: inline-block;
-    margin-right: 10px;
-    margin-bottom: 0;
+    margin: 6px 10px 0;
     width: 515px;
 }
 
 #cancel-appointment-frame form {
     display: inline;
-}
-
-
-
-
+}
\ No newline at end of file
diff --git a/src/assets/js/frontend_book.js b/src/assets/js/frontend_book.js
index 151f38be..734213bf 100644
--- a/src/assets/js/frontend_book.js
+++ b/src/assets/js/frontend_book.js
@@ -147,7 +147,7 @@ var FrontendBook = {
                 if ($('.selected-hour').length == 0) {
                     if ($('#select-hour-prompt').length == 0) {
                         $('#available-hours').append('<br><br>'
-                                + '<strong id="select-hour-prompt" class="text-error">'
+                                + '<strong id="select-hour-prompt" class="text-danger">'
                                 + EALang['appointment_hour_missing'] 
                                 + '</strong>');
                     }
@@ -333,7 +333,7 @@ var FrontendBook = {
                 $('#available-hours').html('<div style="width:50px; float:left;"></div>');
 
                 $.each(response, function(index, availableHour) {
-                    if ((currColumn * 10) < (index + 1)) {
+                    if ((currColumn * 13) < (index + 1)) {
                         currColumn++;
                         $('#available-hours').append('<div style="width:50px; float:left;"></div>');
                     }
@@ -377,7 +377,8 @@ var FrontendBook = {
             var missingRequiredField = false;
             $('.required').each(function() {
                 if ($(this).val() == '') {
-                    $(this).css('border', '2px solid red');
+                    $(this).parents('.form-group').addClass('has-error');
+                    // $(this).css('border', '2px solid red');
                     missingRequiredField = true;
                 }
             });
@@ -387,7 +388,8 @@ var FrontendBook = {
             
             // Validate email address.
             if (!GeneralFunctions.validateEmail($('#email').val())) {
-                $('#email').css('border', '2px solid red');
+                $('#email').parents('.form-group').addClass('has-error');
+                // $('#email').css('border', '2px solid red');
                 throw EALang['invalid_email'];
             }
             
