Applied Bootstrap 3 to frontend book.
This commit is contained in:
Alex Tselegidis
parent
716a6fad30
commit
2f1b0efd1f
5 changed files with 113 additions and 99 deletions
|
|
@ -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'];
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'] +
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -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'];
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue