mirrors/easyappointments
1
0
Fork 1
mirror of https://github.com/alextselegidis/easyappointments.git synced 2024-12-22 22:52:35 +03:00
Code Issues Projects Releases Packages Wiki Activity

Applied Bootstrap 3 to frontend book.

Browse source
This commit is contained in:
Alex Tselegidis 2015-04-09 21:50:16 +02:00
parent 716a6fad30
commit 2f1b0efd1f
5 changed files with 113 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/application/controllers/appointments.php
View file

@ -160,7 +160,7 @@ class Appointments extends CI_Controller {
if (!$post_data['manage_mode']) { if (!$post_data['manage_mode']) {
$customer_title = $this->lang->line('appointment_booked'); $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/' $customer_link = $this->config->item('base_url') . '/appointments/index/'
. $appointment['hash']; . $appointment['hash'];

106
src/application/views/appointments/book.php
View file

@ -3,6 +3,9 @@
<head> <head>
<title><?php echo $this->lang->line('page_title') . ' ' . $company_name; ?></title> <title><?php echo $this->lang->line('page_title') . ' ' . $company_name; ?></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <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 <?php
// ------------------------------------------------------------ // ------------------------------------------------------------
@ -11,11 +14,7 @@
<link <link
rel="stylesheet" rel="stylesheet"
type="text/css" type="text/css"
href="<?php echo $this->config->base_url(); ?>/assets/css/libs/bootstrap/bootstrap.css"> href="<?php echo $this->config->base_url(); ?>/assets/ext/bootstrap/css/bootstrap.min.css">
<link
rel="stylesheet"
type="text/css"
href="<?php echo $this->config->base_url(); ?>/assets/css/libs/bootstrap/bootstrap-responsive.css">
<link <link
rel="stylesheet" rel="stylesheet"
type="text/css" type="text/css"
@ -60,10 +59,11 @@
// ------------------------------------------------------------ // ------------------------------------------------------------
// WEBPAGE FAVICON // WEBPAGE FAVICON
// ------------------------------------------------------------ ?> // ------------------------------------------------------------ ?>
<link <link rel="icon" type="image/x-icon"
rel="icon" href="<?php echo $this->config->base_url(); ?>/assets/img/favicon.ico">
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 <?php
// ------------------------------------------------------------ // ------------------------------------------------------------
@ -73,7 +73,7 @@
var GlobalVariables = { var GlobalVariables = {
availableServices : <?php echo json_encode($available_services); ?>, availableServices : <?php echo json_encode($available_services); ?>,
availableProviders : <?php echo json_encode($available_providers); ?>, 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'; ?>, manageMode : <?php echo ($manage_mode) ? 'true' : 'false'; ?>,
appointmentData : <?php echo json_encode($appointment_data); ?>, appointmentData : <?php echo json_encode($appointment_data); ?>,
providerData : <?php echo json_encode($provider_data); ?>, providerData : <?php echo json_encode($provider_data); ?>,
@ -167,7 +167,7 @@
<strong><?php echo $this->lang->line('select_service'); ?></strong> <strong><?php echo $this->lang->line('select_service'); ?></strong>
</label> </label>
<select id="select-service" class="span4"> <select id="select-service" class="col-md-4 form-control">
<?php <?php
// Group services by category, only if there is at least one service // Group services by category, only if there is at least one service
// with a parent category. // with a parent category.
@ -226,7 +226,7 @@
<strong><?php echo $this->lang->line('select_provider'); ?></strong> <strong><?php echo $this->lang->line('select_provider'); ?></strong>
</label> </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 id="service-description" style="display:none;"></div>
</div> </div>
@ -249,12 +249,12 @@
<h3 class="frame-title"><?php echo $this->lang->line('step_two_title'); ?></h3> <h3 class="frame-title"><?php echo $this->lang->line('step_two_title'); ?></h3>
<div class="frame-content" style="width:600px"> <div class="frame-content row" style="width:600px">
<div class="span3"> <div class="col-md-6">
<div id="select-date"></div> <div id="select-date"></div>
</div> </div>
<div class="span3"> <div class="col-md-6">
<?php // Available hours are going to be fetched via ajax call. ?> <?php // Available hours are going to be fetched via ajax call. ?>
<div id="available-hours"></div> <div id="available-hours"></div>
</div> </div>
@ -283,36 +283,44 @@
<h3 class="frame-title"><?php echo $this->lang->line('step_three_title'); ?></h3> <h3 class="frame-title"><?php echo $this->lang->line('step_three_title'); ?></h3>
<div class="frame-content" style="width:600px"> <div class="frame-content row" style="width:600px">
<div class="span3"> <div class="col-md-6">
<label for="first-name"><?php echo $this->lang->line('first_name'); ?> *</label> <div class="form-group">
<input type="text" id="first-name" class="required" maxlength="100" /> <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" />
<label for="last-name"><?php echo $this->lang->line('last_name'); ?> *</label> </div>
<input type="text" id="last-name" class="required" maxlength="250" /> <div class="form-group">
<label for="last-name" class="control-label"><?php echo $this->lang->line('last_name'); ?> *</label>
<label for="email"><?php echo $this->lang->line('email'); ?> *</label> <input type="text" id="last-name" class="required form-control" maxlength="250" />
<input type="text" id="email" class="required" maxlength="250" /> </div>
<div class="form-group">
<label for="phone-number"><?php echo $this->lang->line('phone_number'); ?> *</label> <label for="email" class="control-label"><?php echo $this->lang->line('email'); ?> *</label>
<input type="text" id="phone-number" class="required" maxlength="60" /> <input type="text" id="email" class="required form-control" maxlength="250" />
</div>
<br/><br/> <div class="form-group">
<em id="form-message" class="text-error"><?php echo $this->lang->line('fields_are_required'); ?></em> <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>
<div class="span3"> <div class="col-md-6">
<label for="address"><?php echo $this->lang->line('address'); ?></label> <div class="form-group">
<input type="text" id="address" maxlength="250" /> <label for="address" class="control-label"><?php echo $this->lang->line('address'); ?></label>
<input type="text" id="address" class="form-control" maxlength="250" />
<label for="city"><?php echo $this->lang->line('city'); ?></label> </div>
<input type="text" id="city" maxlength="120" /> <div class="form-group">
<label for="city" class="control-label"><?php echo $this->lang->line('city'); ?></label>
<label for="zip-code"><?php echo $this->lang->line('zip_code'); ?></label> <input type="text" id="city" class="form-control" maxlength="120" />
<input type="text" id="zip-code" maxlength="120" /> </div>
<div class="form-group">
<label for="notes"><?php echo $this->lang->line('notes'); ?></label> <label for="zip-code" class="control-label"><?php echo $this->lang->line('zip_code'); ?></label>
<textarea id="notes" maxlength="500" rows="3"></textarea> <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> </div>
</div> </div>
@ -337,9 +345,9 @@
<div id="wizard-frame-4" class="wizard-frame" style="display:none;"> <div id="wizard-frame-4" class="wizard-frame" style="display:none;">
<div class="frame-container"> <div class="frame-container">
<h3 class="frame-title"><?php echo $this->lang->line('step_four_title'); ?></h3> <h3 class="frame-title"><?php echo $this->lang->line('step_four_title'); ?></h3>
<div class="frame-content" style="width:600px"> <div class="frame-content row" style="width:600px">
<div id="appointment-details" class="span3"></div> <div id="appointment-details" class="col-md-6"></div>
<div id="customer-details" class="span3"></div> <div id="customer-details" class="col-md-6"></div>
</div> </div>
</div> </div>
@ -367,11 +375,9 @@
// ------------------------------------------------------ ?> // ------------------------------------------------------ ?>
<div id="frame-footer"> <div id="frame-footer">
Powered By Powered By
<a href="http://easyappointments.org" target="_blank"> <a href="http://easyappointments.org" target="_blank">Easy!Appointments</a>
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')); ?> <?php echo ucfirst($this->config->item('language')); ?>
</span> </span>
</div> </div>

20
src/application/views/appointments/book_success.php
View file

@ -3,6 +3,8 @@
<head> <head>
<title><?php echo $this->lang->line('appointment_registered') . ' - ' . $company_name; ?></title> <title><?php echo $this->lang->line('appointment_registered') . ' - ' . $company_name; ?></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <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 ?> <?php // INCLUDE JS FILES ?>
<script <script
@ -19,17 +21,13 @@
<link <link
rel="stylesheet" rel="stylesheet"
type="text/css" type="text/css"
href="<?php echo $this->config->base_url(); ?>/assets/css/libs/bootstrap/bootstrap.css"> href="<?php echo $this->config->base_url(); ?>/assets/ext/bootstrap/css/bootstrap.min.css">
<link
rel="stylesheet"
type="text/css"
href="<?php echo $this->config->base_url(); ?>/assets/css/libs/bootstrap/bootstrap-responsive.css">
<?php // SET FAVICON FOR PAGE ?> <?php // SET FAVICON FOR PAGE ?>
<link <link rel="icon" type="image/x-icon"
rel="icon"
type="image/x-icon"
href="<?php echo $this->config->base_url(); ?>/assets/img/favicon.ico"> 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> <style>
body { body {
@ -57,8 +55,8 @@
'providerData' : <?php echo json_encode($provider_data); ?>, 'providerData' : <?php echo json_encode($provider_data); ?>,
'serviceData' : <?php echo json_encode($service_data); ?>, 'serviceData' : <?php echo json_encode($service_data); ?>,
'companyName' : <?php echo '"' . $company_name . '"'; ?>, 'companyName' : <?php echo '"' . $company_name . '"'; ?>,
'googleApiKey' : <?php echo '"' . SystemConfiguration::$google_api_key . '"'; ?>, 'googleApiKey' : <?php echo '"' . Config::$google_api_key . '"'; ?>,
'googleClientId' : <?php echo '"' . SystemConfiguration::$google_client_id . '"'; ?>, 'googleClientId' : <?php echo '"' . Config::$google_client_id . '"'; ?>,
'googleApiScope' : 'https://www.googleapis.com/auth/calendar' 'googleApiScope' : 'https://www.googleapis.com/auth/calendar'
}; };
@ -165,7 +163,7 @@
// corresponding message on the screen. // corresponding message on the screen.
$('#success-frame').append( $('#success-frame').append(
'<br><br>' + '<br><br>' +
'<div class="alert alert-error">' + '<div class="alert alert-danger">' +
'<h4>' + EALang['oops_something_went_wrong'] + '</h4>' + '<h4>' + EALang['oops_something_went_wrong'] + '</h4>' +
'<p>' + '<p>' +
EALang['could_not_add_to_google_calendar'] + EALang['could_not_add_to_google_calendar'] +

68
src/assets/css/frontend.css
View file

@ -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 { root {
display: block; display: block;
} }
@ -21,7 +29,7 @@ body {
#book-appointment-wizard #header { #book-appointment-wizard #header {
padding: 5px; padding: 5px;
height: 70px; height: 80px;
background: #3DD481; background: #3DD481;
border-bottom: 4px solid #1A865F; border-bottom: 4px solid #1A865F;
} }
@ -30,26 +38,26 @@ body {
font-weight: bold; font-weight: bold;
color: #FFF; color: #FFF;
font-size: 22px; font-size: 22px;
margin: 27px 10px 0 14px; margin: 18px 10px 0 14px;
display: inline-block; display: inline-block;
text-shadow: 0px 1px 1px #8F8888; text-shadow: 0px 1px 1px #8F8888;
float: left; float: left;
} }
#book-appointment-wizard #steps { #book-appointment-wizard #steps {
width: 204px; width: 180px;
display: inline-block; display: inline-block;
float: right; float: right;
margin-top: 15px; margin-top: 12px;
} }
#book-appointment-wizard .wizard-frame { #book-appointment-wizard .wizard-frame {
padding: 10px 20px; padding: 10px 20px;
height: 434px; height: 485px;
} }
#book-appointment-wizard .wizard-frame .frame-container { #book-appointment-wizard .wizard-frame .frame-container {
height: 370px; height: 395px;
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -74,38 +82,38 @@ body {
#book-appointment-wizard .book-step { #book-appointment-wizard .book-step {
display: inline-block; display: inline-block;
height: 20px; height: 30px;
width: 20px; width: 30px;
float: left; float: left;
background: #FFF; background: #FFF;
padding: 3px; padding: 1px;
margin-right: 15px; margin-right: 10px;
margin-top: 10px; margin-top: 9px;
border: 3px solid #38A07A; border: 3px solid #38A07A;
} }
#book-appointment-wizard .book-step strong { #book-appointment-wizard .book-step strong {
font-size: 18px; font-size: 15px;
display: block; display: block;
text-align: center; text-align: center;
color: #B6DFC6; color: #A9C5BB;
} }
#book-appointment-wizard .active-step { #book-appointment-wizard .active-step {
display: inline-block; display: inline-block;
height: 20px; height: 40px;
width: 20px; width: 40px;
float: left; float: left;
background: #FFF; background: #FFF;
padding: 10px; padding: 1px;
margin-right: 15px; margin-right: 10px;
margin-top: 0px; margin-top: 3px;
border: 3px solid #38A07A; border: 3px solid #38A07A;
} }
#book-appointment-wizard .active-step strong { #book-appointment-wizard .active-step strong {
color: #396946; color: #38A07A;
font-size: 25px; font-size: 22px;
} }
#book-appointment-wizard #frame-footer { #book-appointment-wizard #frame-footer {
@ -165,11 +173,16 @@ body {
margin-bottom: 25px; margin-bottom: 25px;
} }
#language-list {
list-style: none;
padding-left: 0px;
}
/* CANCEL APPOINTMENT /* CANCEL APPOINTMENT
------------------------------------------------------------------------- */ ------------------------------------------------------------------------- */
#cancel-appointment-frame { #cancel-appointment-frame {
padding: 12px 17px 0; padding: 15px;
background: #FAFAFA; background: #FAFAFA;
border-bottom: 1px solid #E2E2E2; border-bottom: 1px solid #E2E2E2;
overflow: auto; overflow: auto;
@ -177,15 +190,10 @@ body {
#cancel-appointment-frame p { #cancel-appointment-frame p {
display: inline-block; display: inline-block;
margin-right: 10px; margin: 6px 10px 0;
margin-bottom: 0;
width: 515px; width: 515px;
} }
#cancel-appointment-frame form { #cancel-appointment-frame form {
display: inline; display: inline;
} }

10
src/assets/js/frontend_book.js
View file

@ -147,7 +147,7 @@ var FrontendBook = {
if ($('.selected-hour').length == 0) { if ($('.selected-hour').length == 0) {
if ($('#select-hour-prompt').length == 0) { if ($('#select-hour-prompt').length == 0) {
$('#available-hours').append('<br><br>' $('#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'] + EALang['appointment_hour_missing']
+ '</strong>'); + '</strong>');
} }
@ -333,7 +333,7 @@ var FrontendBook = {
$('#available-hours').html('<div style="width:50px; float:left;"></div>'); $('#available-hours').html('<div style="width:50px; float:left;"></div>');
$.each(response, function(index, availableHour) { $.each(response, function(index, availableHour) {
if ((currColumn * 10) < (index + 1)) { if ((currColumn * 13) < (index + 1)) {
currColumn++; currColumn++;
$('#available-hours').append('<div style="width:50px; float:left;"></div>'); $('#available-hours').append('<div style="width:50px; float:left;"></div>');
} }
@ -377,7 +377,8 @@ var FrontendBook = {
var missingRequiredField = false; var missingRequiredField = false;
$('.required').each(function() { $('.required').each(function() {
if ($(this).val() == '') { if ($(this).val() == '') {
$(this).css('border', '2px solid red'); $(this).parents('.form-group').addClass('has-error');
// $(this).css('border', '2px solid red');
missingRequiredField = true; missingRequiredField = true;
} }
}); });
@ -387,7 +388,8 @@ var FrontendBook = {
// Validate email address. // Validate email address.
if (!GeneralFunctions.validateEmail($('#email').val())) { 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']; throw EALang['invalid_email'];
} }