From f822779a9569b4fcfff2597202e57607e1298e1e Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Thu, 23 Apr 2015 21:46:52 +0200
Subject: [PATCH] Converted booking wizard to responsive (still needs to be
 polished)

---
 src/application/views/appointments/book.php | 13 +--
 src/assets/css/frontend.css                 | 93 +++++++++++++++++++++
 2 files changed, 100 insertions(+), 6 deletions(-)
diff --git a/src/application/views/appointments/book.php b/src/application/views/appointments/book.php
index cba0193e..ac7ad899 100644
--- a/src/application/views/appointments/book.php
+++ b/src/application/views/appointments/book.php
@@ -94,7 +94,7 @@
 <body>
     <div id="main" class="container">
         <div class="wrapper row">
-            <div id="book-appointment-wizard" class="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
+            <div id="book-appointment-wizard" class="col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
                 
                 <?php 
                     // ------------------------------------------------------
@@ -162,7 +162,7 @@
                     <div class="frame-container">
                         <h3 class="frame-title"><?php echo $this->lang->line('step_one_title'); ?></h3>
                         
-                        <div class="frame-content" style="width:520px">
+                        <div class="frame-content">
                             <div class="form-group">
                                 <label for="select-service">
                                     <strong><?php echo $this->lang->line('select_service'); ?></strong>
@@ -253,7 +253,7 @@
                         
                         <h3 class="frame-title"><?php echo $this->lang->line('step_two_title'); ?></h3>
                         
-                        <div class="frame-content row" style="width:600px">
+                        <div class="frame-content row">
                             <div class="col-md-6">
                                 <div id="select-date"></div>
                             </div>
@@ -287,7 +287,7 @@
                         
                         <h3 class="frame-title"><?php echo $this->lang->line('step_three_title'); ?></h3>
                         
-                        <div class="frame-content row" style="width:600px">
+                        <div class="frame-content row">
                             <div class="col-md-6">
                                 <div class="form-group">
                                     <label for="first-name" class="control-label"><?php echo $this->lang->line('first_name'); ?> *</label>
@@ -305,7 +305,6 @@
                                     <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="col-md-6">
@@ -326,6 +325,8 @@
                                     <textarea id="notes" maxlength="500" class="form-control" rows="3"></textarea>
                                 </div>
                             </div>
+
+                            <em id="form-message" class="text-danger"><?php echo $this->lang->line('fields_are_required'); ?></em>
                         </div>
                     </div>
                     
@@ -349,7 +350,7 @@
                 <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 row" style="width:600px">
+                        <div class="frame-content row">
                             <div id="appointment-details" class="col-md-6"></div>
                             <div id="customer-details" class="col-md-6"></div>
                         </div>
diff --git a/src/assets/css/frontend.css b/src/assets/css/frontend.css
index 1876f87e..6883e56e 100644
--- a/src/assets/css/frontend.css
+++ b/src/assets/css/frontend.css
@@ -213,4 +213,97 @@ body {
 
 #cancel-appointment-frame form {
     display: inline;
+}
+
+/* Mobile Devices
+   ------------------------------------------------------------------------- */
+@media(max-width:400px) {
+    html, 
+    body {
+        height: auto;
+    }
+
+    #main {
+        display: block; /* reset display */
+    }
+
+    #main .wrapper {
+        height: auto;
+        display: block; /* reset display */
+    }
+
+    #book-appointment-wizard #header {
+        overflow: auto;
+        height: auto;
+    }
+
+    #book-appointment-wizard #company-name { 
+        float: none;
+        display: block;
+        text-align: center;    
+    }
+
+    #book-appointment-wizard #steps { 
+        float: none; 
+        display: block;
+        overflow: auto; 
+        margin: 20px auto; 
+    }
+
+    #book-appointment-wizard .wizard-frame {
+        padding: 0 10px;
+        height: auto;
+    }
+
+    #book-appointment-wizard .wizard-frame .frame-container {
+        height: auto;
+    }
+
+    #book-appointment-wizard .wizard-frame .command-buttons {
+        float: none;
+        width: 80%;
+        margin: 20px auto;
+    }
+
+    #book-appointment-wizard .wizard-frame .command-buttons .btn {
+        width: 45%;
+    }
+
+    #book-appointment-wizard .wizard-frame .command-buttons #button-next-1 {
+        width: 100%;
+    }
+
+    #book-appointment-wizard #available-hours {
+        overflow: auto;
+        margin: 20px 0;
+    }
+
+    #book-appointment-wizard #available-hours div {
+        margin-right: 30px;
+    }
+
+    #book-appointment-wizard #available-hours .available-hour {
+        padding: 8px 3px;
+    }
+
+    #book-appointment-wizard #form-message {
+        display: block;
+        text-align: center;
+    }
+
+    #book-appointment-wizard #book-appointment-form {
+        width: 45%;
+    }
+
+    #book-appointment-wizard #book-appointment-form  #book-appointment-submit{
+        width: 100%;
+    }
+
+    .popover .popover-title {
+        text-align: center;   
+    }
+
+    .popover .popover-content #language-list .language {
+        margin: 10px 0;
+    }
 }
\ No newline at end of file
