mirrors/easyappointments
1
0
Fork 1
mirror of https://github.com/alextselegidis/easyappointments.git synced 2024-11-21 23:42:21 +03:00
Code Issues Projects Releases Packages Wiki Activity

The booking page styling is now mobile-first oriented.

Browse source
This commit is contained in:
Alex Tselegidis 2020-08-31 17:02:54 +03:00
parent e1053dd33a
commit 2c330a0a86
12 changed files with 531 additions and 541 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

589
application/views/appointments/book.php
View file

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#35A768">
<title><?= lang('page_title') . ' ' . $company_name ?></title>
<title><?= lang('page_title') . ' ' . $company_name ?></title>
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/ext/bootstrap/css/bootstrap.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/ext/jquery-ui/jquery-ui.min.css') ?>">
@ -21,138 +21,153 @@
</head>
<body>
<div id="main" class="container">
<div class="wrapper row d-md-flex align-items-center justify-content-center">
<div id="book-appointment-wizard" class="col-xs-12 col-md-10 col-lg-8">
<div id="main" class="container">
<div class="row wrapper">
<div id="book-appointment-wizard" class="col-12 col-lg-10 col-xl-8">
<!-- FRAME TOP BAR -->
<!-- FRAME TOP BAR -->
<div id="header">
<span id="company-name"><?= $company_name ?></span>
<div id="header">
<span id="company-name"><?= $company_name ?></span>
<div id="steps">
<div id="step-1" class="book-step active-step" title="<?= lang('step_one_title') ?>">
<strong>1</strong>
</div>
<div id="steps">
<div id="step-1" class="book-step active-step" title="<?= lang('step_one_title') ?>">
<strong>1</strong>
</div>
<div id="step-2" class="book-step" title="<?= lang('step_two_title') ?>">
<strong>2</strong>
</div>
<div id="step-3" class="book-step" title="<?= lang('step_three_title') ?>">
<strong>3</strong>
</div>
<div id="step-4" class="book-step" title="<?= lang('step_four_title') ?>">
<strong>4</strong>
</div>
<div id="step-2" class="book-step" title="<?= lang('step_two_title') ?>">
<strong>2</strong>
</div>
<div id="step-3" class="book-step" title="<?= lang('step_three_title') ?>">
<strong>3</strong>
</div>
<div id="step-4" class="book-step" title="<?= lang('step_four_title') ?>">
<strong>4</strong>
</div>
</div>
</div>
<?php if ($manage_mode): ?>
<?php if ($manage_mode): ?>
<div id="cancel-appointment-frame" class="booking-header-bar row">
<div class="col-xs-12 col-md-10">
<div class="col-12 col-md-10">
<p><?= lang('cancel_appointment_hint') ?></p>
</div>
<div class="col-xs-12 col-md-2">
<div class="col-12 col-md-2">
<form id="cancel-appointment-form" method="post"
action="<?= site_url('appointments/cancel/' . $appointment_data['hash']) ?>">
<input type="hidden" name="csrfToken" value="<?= $this->security->get_csrf_hash() ?>" />
<input type="hidden" name="csrfToken" value="<?= $this->security->get_csrf_hash() ?>"/>
<textarea name="cancel_reason" style="display:none"></textarea>
<button id="cancel-appointment" class="btn btn-light btn-sm"><?= lang('cancel') ?></button>
</form>
</div>
</div>
<div class="booking-header-bar row">
<div class="col-xs-12 col-md-10">
<div class="col-12 col-md-10">
<p><?= lang('delete_personal_information_hint') ?></p>
</div>
<div class="col-xs-12 col-md-2">
<button id="delete-personal-information" class="btn btn-danger btn-sm"><?= lang('delete') ?></button>
<div class="col-12 col-md-2">
<button id="delete-personal-information"
class="btn btn-danger btn-sm"><?= lang('delete') ?></button>
</div>
</div>
<?php endif; ?>
<?php endif; ?>
<?php if (isset($exceptions)): ?>
<?php if (isset($exceptions)): ?>
<div style="margin: 10px">
<h4><?= lang('unexpected_issues') ?></h4>
<?php foreach($exceptions as $exception): ?>
<?php foreach ($exceptions as $exception): ?>
<?= exceptionToHtml($exception) ?>
<?php endforeach ?>
</div>
<?php endif ?>
<?php endif ?>
<!-- SELECT SERVICE AND PROVIDER -->
<!-- SELECT SERVICE AND PROVIDER -->
<div id="wizard-frame-1" class="wizard-frame">
<div class="frame-container">
<h4 class="frame-title"><?= lang('step_one_title') ?></h4>
<div id="wizard-frame-1" class="wizard-frame">
<div class="frame-container">
<h3 class="frame-title"><?= lang('step_one_title') ?></h3>
<div class="frame-content">
<div class="row frame-content">
<div class="col">
<div class="form-group">
<label for="select-service">
<strong><?= lang('select_service') ?></strong>
<strong><?= lang('service') ?></strong>
</label>
<select id="select-service" class="form-control">
<?php
// Group services by category, only if there is at least one service with a parent category.
$has_category = FALSE;
foreach($available_services as $service) {
if ($service['category_id'] != NULL) {
$has_category = TRUE;
break;
// Group services by category, only if there is at least one service with a parent category.
$has_category = FALSE;
foreach ($available_services as $service)
{
if ($service['category_id'] != NULL)
{
$has_category = TRUE;
break;
}
}
if ($has_category)
{
$grouped_services = [];
foreach ($available_services as $service)
{
if ($service['category_id'] != NULL)
{
if ( ! isset($grouped_services[$service['category_name']]))
{
$grouped_services[$service['category_name']] = [];
}
$grouped_services[$service['category_name']][] = $service;
}
}
if ($has_category) {
$grouped_services = array();
foreach($available_services as $service) {
if ($service['category_id'] != NULL) {
if (!isset($grouped_services[$service['category_name']])) {
$grouped_services[$service['category_name']] = array();
}
$grouped_services[$service['category_name']][] = $service;
}
}
// We need the uncategorized services at the end of the list so we will use
// another iteration only for the uncategorized services.
$grouped_services['uncategorized'] = array();
foreach($available_services as $service) {
if ($service['category_id'] == NULL) {
$grouped_services['uncategorized'][] = $service;
}
}
foreach($grouped_services as $key => $group) {
$group_label = ($key != 'uncategorized')
? $group[0]['category_name'] : 'Uncategorized';
if (count($group) > 0) {
echo '<optgroup label="' . $group_label . '">';
foreach($group as $service) {
echo '<option value="' . $service['id'] . '">'
. $service['name'] . '</option>';
}
echo '</optgroup>';
}
}
} else {
foreach($available_services as $service) {
echo '<option value="' . $service['id'] . '">' . $service['name'] . '</option>';
// We need the uncategorized services at the end of the list so we will use
// another iteration only for the uncategorized services.
$grouped_services['uncategorized'] = [];
foreach ($available_services as $service)
{
if ($service['category_id'] == NULL)
{
$grouped_services['uncategorized'][] = $service;
}
}
foreach ($grouped_services as $key => $group)
{
$group_label = ($key != 'uncategorized')
? $group[0]['category_name'] : 'Uncategorized';
if (count($group) > 0)
{
echo '<optgroup label="' . $group_label . '">';
foreach ($group as $service)
{
echo '<option value="' . $service['id'] . '">'
. $service['name'] . '</option>';
}
echo '</optgroup>';
}
}
}
else
{
foreach ($available_services as $service)
{
echo '<option value="' . $service['id'] . '">' . $service['name'] . '</option>';
}
}
?>
</select>
</div>
<div class="form-group">
<label for="select-provider">
<strong><?= lang('select_provider') ?></strong>
<strong><?= lang('provider') ?></strong>
</label>
<select id="select-provider" class="form-control"></select>
@ -161,258 +176,268 @@
<div id="service-description"></div>
</div>
</div>
<div class="command-buttons">
<button type="button" id="button-next-1" class="btn button-next btn-primary"
data-step_index="1">
<?= lang('next') ?>
<i class="fas fa-long-arrow-alt-right"></i>
</button>
</div>
</div>
<!-- SELECT APPOINTMENT DATE -->
<div class="command-buttons">
<button type="button" id="button-next-1" class="btn button-next btn-primary"
data-step_index="1">
<?= lang('next') ?>
<i class="fas fa-long-arrow-alt-right"></i>
</button>
</div>
</div>
<div id="wizard-frame-2" class="wizard-frame" style="display:none;">
<div class="frame-container">
<!-- SELECT APPOINTMENT DATE -->
<h3 class="frame-title"><?= lang('step_two_title') ?></h3>
<div id="wizard-frame-2" class="wizard-frame" style="display:none;">
<div class="frame-container">
<div class="frame-content row">
<div class="col-xs-12 col-md-7 pl-0 pr-0 pr-md-3 mb-4 mb-md-0 d-flex">
<div id="select-date"></div>
</div>
<h4 class="frame-title"><?= lang('step_two_title') ?></h4>
<div class="col-xs-12 col-sm-5 px-0">
<label for="select-timezone"><?= lang('timezone') ?></label>
<?= render_timezone_dropdown('id="select-timezone" class="form-control" value="UTC"'); ?>
<div class="row frame-content">
<div class="col-12 col-md-7">
<div id="select-date"></div>
</div>
<div class="col-12 col-sm-5">
<div id="select-time">
<div class="form-group">
<label for="select-timezone"><?= lang('timezone') ?></label>
<?= render_timezone_dropdown('id="select-timezone" class="form-control" value="UTC"'); ?>
</div>
<div id="available-hours"></div>
</div>
</div>
</div>
<div class="command-buttons">
<button type="button" id="button-back-2" class="btn button-back btn-light"
data-step_index="2">
<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"
data-step_index="2">
<?= lang('next') ?>
<i class="fas fa-long-arrow-alt-right"></i>
</button>
</div>
</div>
<!-- ENTER CUSTOMER DATA -->
<div class="command-buttons">
<button type="button" id="button-back-2" class="btn button-back btn-light"
data-step_index="2">
<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"
data-step_index="2">
<?= lang('next') ?>
<i class="fas fa-long-arrow-alt-right"></i>
</button>
</div>
</div>
<div id="wizard-frame-3" class="wizard-frame" style="display:none;">
<div class="frame-container">
<!-- ENTER CUSTOMER DATA -->
<h3 class="frame-title"><?= lang('step_three_title') ?></h3>
<div id="wizard-frame-3" class="wizard-frame" style="display:none;">
<div class="frame-container">
<div class="frame-content row">
<div class="col-xs-12 col-md-6">
<div class="form-group">
<label for="first-name" class="control-label"><?= lang('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"><?= lang('last_name') ?> *</label>
<input type="text" id="last-name" class="required form-control" maxlength="120" />
</div>
<div class="form-group">
<label for="email" class="control-label"><?= lang('email') ?> *</label>
<input type="text" id="email" class="required form-control" maxlength="120" />
</div>
<div class="form-group">
<label for="phone-number" class="control-label">
<?= lang('phone_number') ?>
<?= $require_phone_number === '1' ? '*' : '' ?>
</label>
<input type="text" id="phone-number" maxlength="60"
class="<?= $require_phone_number === '1' ? 'required' : '' ?> form-control" />
</div>
<h4 class="frame-title"><?= lang('step_three_title') ?></h4>
<div class="row frame-content">
<div class="col-12 col-md-6">
<div class="form-group">
<label for="first-name" class="control-label"><?= lang('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"><?= lang('last_name') ?> *</label>
<input type="text" id="last-name" class="required form-control" maxlength="120"/>
</div>
<div class="form-group">
<label for="email" class="control-label"><?= lang('email') ?> *</label>
<input type="text" id="email" class="required form-control" maxlength="120"/>
</div>
<div class="form-group">
<label for="phone-number" class="control-label">
<?= lang('phone_number') ?>
<?= $require_phone_number === '1' ? '*' : '' ?>
</label>
<input type="text" id="phone-number" maxlength="60"
class="<?= $require_phone_number === '1' ? 'required' : '' ?> form-control"/>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="form-group">
<label for="address" class="control-label"><?= lang('address') ?></label>
<input type="text" id="address" class="form-control" maxlength="120" />
</div>
<div class="form-group">
<label for="city" class="control-label"><?= lang('city') ?></label>
<input type="text" id="city" class="form-control" maxlength="120" />
</div>
<div class="form-group">
<label for="zip-code" class="control-label"><?= lang('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"><?= lang('notes') ?></label>
<textarea id="notes" maxlength="500" class="form-control" rows="3"></textarea>
</div>
<div class="col-12 col-md-6">
<div class="form-group">
<label for="address" class="control-label"><?= lang('address') ?></label>
<input type="text" id="address" class="form-control" maxlength="120"/>
</div>
<div class="form-group">
<label for="city" class="control-label"><?= lang('city') ?></label>
<input type="text" id="city" class="form-control" maxlength="120"/>
</div>
<div class="form-group">
<label for="zip-code" class="control-label"><?= lang('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"><?= lang('notes') ?></label>
<textarea id="notes" maxlength="500" class="form-control" rows="3"></textarea>
</div>
</div>
</div>
<?php if ($display_terms_and_conditions): ?>
<div class="form-check mb-3">
<input type="checkbox" class="required form-check-input" id="accept-to-terms-and-conditions">
<label class="form-check-label" for="accept-to-terms-and-conditions">
<?= strtr(lang('read_and_agree_to_terms_and_conditions'),
[
'{$link}' => '<a href="#" data-toggle="modal" data-target="#terms-and-conditions-modal">',
'{/$link}' => '</a>'
])
?>
</label>
</div>
<?php endif ?>
<?php if ($display_privacy_policy): ?>
<div class="form-check mb-3">
<input type="checkbox" class="required form-check-input" id="accept-to-privacy-policy">
<label class="form-check-label" for="accept-to-privacy-policy">
<?= strtr(lang('read_and_agree_to_privacy_policy'),
[
'{$link}' => '<a href="#" data-toggle="modal" data-target="#privacy-policy-modal">',
'{/$link}' => '</a>'
])
?>
</label>
</div>
<?php endif ?>
<span id="form-message" class="text-danger d-block"><?= lang('fields_are_required') ?></span>
<div class="command-buttons">
<button type="button" id="button-back-3" class="btn button-back btn-light"
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"
data-step_index="3">
<?= lang('next') ?>
<i class="fas fa-long-arrow-alt-right"></i>
</button>
</div>
</div>
<!-- APPOINTMENT DATA CONFIRMATION -->
<?php if ($display_terms_and_conditions): ?>
<div class="form-check mb-3">
<input type="checkbox" class="required form-check-input" id="accept-to-terms-and-conditions">
<label class="form-check-label" for="accept-to-terms-and-conditions">
<?= strtr(lang('read_and_agree_to_terms_and_conditions'),
[
'{$link}' => '<a href="#" data-toggle="modal" data-target="#terms-and-conditions-modal">',
'{/$link}' => '</a>'
])
?>
</label>
</div>
<?php endif ?>
<div id="wizard-frame-4" class="wizard-frame" style="display:none;">
<div class="frame-container">
<h3 class="frame-title"><?= lang('step_four_title') ?></h3>
<div class="frame-content row">
<div id="appointment-details" class="col-xs-12 col-md-6"></div>
<div id="customer-details" class="col-xs-12 col-md-6"></div>
</div>
<?php if ($this->settings_model->get_setting('require_captcha') === '1'): ?>
<div class="frame-content row">
<div class="col-xs-12 col-md-6">
<?php if ($display_privacy_policy): ?>
<div class="form-check mb-3">
<input type="checkbox" class="required form-check-input" id="accept-to-privacy-policy">
<label class="form-check-label" for="accept-to-privacy-policy">
<?= strtr(lang('read_and_agree_to_privacy_policy'),
[
'{$link}' => '<a href="#" data-toggle="modal" data-target="#privacy-policy-modal">',
'{/$link}' => '</a>'
])
?>
</label>
</div>
<?php endif ?>
<div id="form-message" class="text-danger">
<?= lang('fields_are_required') ?>
</div>
<div class="command-buttons">
<button type="button" id="button-back-3" class="btn button-back btn-light"
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"
data-step_index="3">
<?= lang('next') ?>
<i class="fas fa-long-arrow-alt-right"></i>
</button>
</div>
</div>
<!-- APPOINTMENT DATA CONFIRMATION -->
<div id="wizard-frame-4" class="wizard-frame" style="display:none;">
<div class="frame-container">
<h4 class="frame-title"><?= lang('step_four_title') ?></h4>
<div class="row frame-content">
<div id="appointment-details" class="col-12 col-md-6"></div>
<div id="customer-details" class="col-12 col-md-6"></div>
</div>
<?php if ($this->settings_model->get_setting('require_captcha') === '1'): ?>
<div class="row frame-content">
<div class="col-12 col-md-6">
<h4 class="captcha-title">
CAPTCHA
<small class="fas fa-sync-alt"></small>
</h4>
<img class="captcha-image" src="<?= site_url('captcha') ?>">
<input class="captcha-text" type="text" value="" />
<input class="captcha-text" type="text" value=""/>
<span id="captcha-hint" class="help-block" style="opacity:0">&nbsp;</span>
</div>
</div>
<?php endif; ?>
</div>
<div class="command-buttons">
<button type="button" id="button-back-4" class="btn button-back btn-light"
data-step_index="4">
<i class="fas fa-long-arrow-alt-left"></i>
<?= lang('back') ?>
</button>
<form id="book-appointment-form" style="display:inline-block" method="post">
<button id="book-appointment-submit" type="button" class="btn btn-success">
<i class="far fa-check-circle"></i>
<?= !$manage_mode ? lang('confirm') : lang('update') ?>
</button>
<input type="hidden" name="csrfToken" />
<input type="hidden" name="post_data" />
</form>
</div>
<?php endif; ?>
</div>
<!-- FRAME FOOTER -->
<div class="command-buttons">
<button type="button" id="button-back-4" class="btn button-back btn-light"
data-step_index="4">
<i class="fas fa-long-arrow-alt-left"></i>
<?= lang('back') ?>
</button>
<form id="book-appointment-form" style="display:inline-block" method="post">
<button id="book-appointment-submit" type="button" class="btn btn-success">
<i class="far fa-check-circle"></i>
<?= ! $manage_mode ? lang('confirm') : lang('update') ?>
</button>
<input type="hidden" name="csrfToken"/>
<input type="hidden" name="post_data"/>
</form>
</div>
</div>
<div id="frame-footer">
<!-- FRAME FOOTER -->
<div id="frame-footer">
<small>
Powered By
<a href="https://easyappointments.org" target="_blank">Easy!Appointments</a>
|
<span id="select-language" class="badge badge-success">
<?= ucfirst(config('language')) ?>
</span>
|
<a href="<?= site_url('backend'); ?>">
<?= $this->session->user_id ? lang('backend_section') : lang('login') ?>
</a>
</div>
</small>
</div>
</div>
</div>
</div>
<?php if ($display_cookie_notice === '1'): ?>
<?php require 'cookie_notice_modal.php' ?>
<?php endif ?>
<?php if ($display_cookie_notice === '1'): ?>
<?php require 'cookie_notice_modal.php' ?>
<?php endif ?>
<?php if ($display_terms_and_conditions === '1'): ?>
<?php require 'terms_and_conditions_modal.php' ?>
<?php endif ?>
<?php if ($display_terms_and_conditions === '1'): ?>
<?php require 'terms_and_conditions_modal.php' ?>
<?php endif ?>
<?php if ($display_privacy_policy === '1'): ?>
<?php require 'privacy_policy_modal.php' ?>
<?php endif ?>
<?php if ($display_privacy_policy === '1'): ?>
<?php require 'privacy_policy_modal.php' ?>
<?php endif ?>
<script>
var GlobalVariables = {
availableServices : <?= json_encode($available_services) ?>,
availableProviders : <?= json_encode($available_providers) ?>,
baseUrl : <?= json_encode(config('base_url')) ?>,
manageMode : <?= $manage_mode ? 'true' : 'false' ?>,
customerToken : <?= json_encode($customer_token) ?>,
dateFormat : <?= json_encode($date_format) ?>,
timeFormat : <?= json_encode($time_format) ?>,
firstWeekday : <?= json_encode($first_weekday) ?>,
displayCookieNotice : <?= json_encode($display_cookie_notice === '1') ?>,
appointmentData : <?= json_encode($appointment_data) ?>,
providerData : <?= json_encode($provider_data) ?>,
customerData : <?= json_encode($customer_data) ?>,
displayAnyProvider : <?= json_encode($display_any_provider) ?>,
csrfToken : <?= json_encode($this->security->get_csrf_hash()) ?>
};
<script>
var GlobalVariables = {
availableServices: <?= json_encode($available_services) ?>,
availableProviders: <?= json_encode($available_providers) ?>,
baseUrl: <?= json_encode(config('base_url')) ?>,
manageMode: <?= $manage_mode ? 'true' : 'false' ?>,
customerToken: <?= json_encode($customer_token) ?>,
dateFormat: <?= json_encode($date_format) ?>,
timeFormat: <?= json_encode($time_format) ?>,
firstWeekday: <?= json_encode($first_weekday) ?>,
displayCookieNotice: <?= json_encode($display_cookie_notice === '1') ?>,
appointmentData: <?= json_encode($appointment_data) ?>,
providerData: <?= json_encode($provider_data) ?>,
customerData: <?= json_encode($customer_data) ?>,
displayAnyProvider: <?= json_encode($display_any_provider) ?>,
csrfToken: <?= json_encode($this->security->get_csrf_hash()) ?>
};
var EALang = <?= json_encode($this->lang->language) ?>;
var availableLanguages = <?= json_encode(config('available_languages')) ?>;
</script>
var EALang = <?= json_encode($this->lang->language) ?>;
var availableLanguages = <?= json_encode(config('available_languages')) ?>;
</script>
<script src="<?= asset_url('assets/js/general_functions.js') ?>"></script>
<script src="<?= asset_url('assets/ext/jquery/jquery.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/jquery-ui/jquery-ui.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/jquery-qtip/jquery.qtip.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/cookieconsent/cookieconsent.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/bootstrap/js/bootstrap.bundle.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/datejs/date.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/moment/moment.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/moment/moment-timezone-with-data.min.js') ?>"></script>
<script src="<?= asset_url('assets/js/frontend_book_api.js') ?>"></script>
<script src="<?= asset_url('assets/js/frontend_book.js') ?>"></script>
<script src="<?= asset_url('assets/js/general_functions.js') ?>"></script>
<script src="<?= asset_url('assets/ext/jquery/jquery.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/jquery-ui/jquery-ui.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/jquery-qtip/jquery.qtip.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/cookieconsent/cookieconsent.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/bootstrap/js/bootstrap.bundle.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/datejs/date.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/moment/moment.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/moment/moment-timezone-with-data.min.js') ?>"></script>
<script src="<?= asset_url('assets/js/frontend_book_api.js') ?>"></script>
<script src="<?= asset_url('assets/js/frontend_book.js') ?>"></script>
<script>
$(document).ready(function() {
FrontendBook.initialize(true, GlobalVariables.manageMode);
GeneralFunctions.enableLanguageSelection($('#select-language'));
});
</script>
<script>
$(document).ready(function () {
FrontendBook.initialize(true, GlobalVariables.manageMode);
GeneralFunctions.enableLanguageSelection($('#select-language'));
});
</script>
<?php google_analytics_script(); ?>
<?php google_analytics_script(); ?>
</body>
</html>

8
application/views/appointments/book_success.php
View file

@ -17,11 +17,11 @@
<body>
<div id="main" class="container">
<div class="wrapper row d-md-flex align-items-center justify-content-center">
<div id="success-frame" class="frame-container col-xs-12 d-md-flex">
<div class="col-xs-12">
<div id="success-frame" class="frame-container col-12 d-md-flex">
<div class="col-12">
<img id="success-icon" class="mt-0 mb-2" src="<?= base_url('assets/img/success.png') ?>" />
</div>
<div class="col-xs-12">
<div class="col-12">
<h3><?= lang('appointment_registered') ?></h3>
<p>
@ -47,7 +47,7 @@
<?php endif ?>
<?php if (isset($exceptions)): ?>
<div class="col-xs-12" style="margin:10px">
<div class="col-12" style="margin:10px">
<h4><?= lang('unexpected_issues') ?></h4>
<?php foreach($exceptions as $exception): ?>

6
application/views/appointments/message.php
View file

@ -27,12 +27,12 @@
<body>
<div id="main" class="container">
<div class="wrapper row d-md-flex align-items-center justify-content-center">
<div id="message-frame" class="frame-container col-xs-12 d-md-flex">
<div class="col-xs-12">
<div id="message-frame" class="frame-container col-12 d-md-flex">
<div class="col-12">
<img id="message-icon" src="<?= $message_icon ?>" alt="warning">
</div>
<div class="col-xs-12">
<div class="col-12">
<h3><?= $message_title ?></h3>
<p><?= $message_text ?></p>

8
application/views/backend/customers.php
View file

@ -28,7 +28,7 @@
<div id="customers-page" class="container-fluid backend-page">
<div class="row">
<div id="filter-customers" class="filter-records col col-xs-12 col-md-5">
<div id="filter-customers" class="filter-records col col-12 col-md-5">
<form class="mb-4">
<div class="input-group">
<input type="text" class="key form-control">
@ -50,7 +50,7 @@
<div class="results"></div>
</div>
<div class="record-details col-xs-12 col-md-7">
<div class="record-details col-12 col-md-7">
<div class="btn-toolbar mb-4">
<div id="add-edit-delete-group" class="btn-group">
<?php if ($privileges[PRIV_CUSTOMERS]['add'] === TRUE): ?>
@ -90,7 +90,7 @@
<input id="customer-id" type="hidden">
<div class="row">
<div class="col-xs-12 col-md-6" style="margin-left: 0;">
<div class="col-12 col-md-6" style="margin-left: 0;">
<h3><?= lang('details') ?></h3>
<div id="form-message" class="alert" style="display:none;"></div>
@ -147,7 +147,7 @@
</p>
</div>
<div class="col-xs-12 col-md-6">
<div class="col-12 col-md-6">
<h3><?= lang('appointments') ?></h3>
<div id="customer-appointments" class="card card-body bg-light border-light"></div>
<div id="appointment-details" class="card card-body bg-light border-light d-none"></div>

4
application/views/backend/footer.php
View file

@ -1,5 +1,5 @@
<div id="footer">
<div id="footer-content" class="col-xs-12 col-sm-8">
<div id="footer-content" class="col-12 col-sm-8">
Powered by
<a href="https://easyappointments.org">
Easy!Appointments
@ -26,7 +26,7 @@
</a>
</div>
<div id="footer-user-display-name" class="col-xs-12 col-sm-4">
<div id="footer-user-display-name" class="col-12 col-sm-4">
<?= lang('hello') . ', ' . $user_display_name ?>!
</div>
</div>

8
application/views/backend/services.php
View file

@ -36,7 +36,7 @@
<div role="tabpanel" class="tab-pane active" id="services">
<div class="row">
<div id="filter-services" class="filter-records col col-xs-12 col-md-5">
<div id="filter-services" class="filter-records col col-12 col-md-5">
<form class="mb-4">
<div class="input-group">
<input type="text" class="key form-control">
@ -58,7 +58,7 @@
<div class="results"></div>
</div>
<div class="record-details column col-xs-12 col-md-5">
<div class="record-details column col-12 col-md-5">
<div class="btn-toolbar mb-4">
<div class="add-edit-delete-group btn-group">
<button id="add-service" class="btn btn-primary">
@ -156,7 +156,7 @@
<div role="tabpanel" class="tab-pane" id="categories">
<div class="row">
<div id="filter-categories" class="filter-records column col-xs-12 col-md-5">
<div id="filter-categories" class="filter-records column col-12 col-md-5">
<form class="input-append mb-4">
<div class="input-group">
<input type="text" class="key form-control">
@ -178,7 +178,7 @@
<div class="results"></div>
</div>
<div class="record-details col-xs-12 col-md-5">
<div class="record-details col-12 col-md-5">
<div class="btn-toolbar mb-4">
<div class="add-edit-delete-group btn-group">
<button id="add-category" class="btn btn-primary">

14
application/views/backend/settings.php
View file

@ -78,7 +78,7 @@
</legend>
<div class="wrapper row">
<div class="col-xs-12 col-sm-6">
<div class="col-12 col-sm-6">
<div class="form-group">
<label for="company-name"><?= lang('company_name') ?> *</label>
<input id="company-name" data-field="company_name" class="required form-control">
@ -145,7 +145,7 @@
</span>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="col-12 col-sm-6">
<div class="form-group">
<label for="google-analytics-code">
Google Analytics ID</label>
@ -237,7 +237,7 @@
</legend>
<div class="row">
<div class="col-xs-12 col-sm-7 working-plan-wrapper">
<div class="col-12 col-sm-7 working-plan-wrapper">
<h4><?= lang('working_plan') ?></h4>
<span class="form-text text-muted mb-4">
<?= lang('edit_working_plan_hint') ?>
@ -272,7 +272,7 @@
</p>
</div>
</div>
<div class="col-xs-12 col-sm-5 breaks-wrapper">
<div class="col-12 col-sm-5 breaks-wrapper">
<h4><?= lang('breaks') ?></h4>
<span class="form-text text-muted">
@ -323,7 +323,7 @@
</legend>
<div class="row">
<div class="col-xs-12 col-sm-11 col-md-10 col-lg-9">
<div class="col-12 col-sm-11 col-md-10 col-lg-9">
<h4><?= lang('cookie_notice') ?></h4>
<div class="form-group">
@ -389,7 +389,7 @@
<div role="tabpanel" class="tab-pane <?= $hidden ?>" id="current-user">
<form>
<div class="row">
<fieldset class="col-xs-12 col-sm-6 personal-info-wrapper">
<fieldset class="col-12 col-sm-6 personal-info-wrapper">
<legend class="border-bottom mb-4">
<?= lang('personal_information') ?>
<?php if ($privileges[PRIV_USER_SETTINGS]['edit'] == TRUE): ?>
@ -454,7 +454,7 @@
</div>
</fieldset>
<fieldset class="col-xs-12 col-sm-6 miscellaneous-wrapper">
<fieldset class="col-12 col-sm-6 miscellaneous-wrapper">
<legend class="border-bottom mb-4"><?= lang('system_login') ?></legend>
<div class="form-group">

24
application/views/backend/users.php
View file

@ -48,7 +48,7 @@
<div role="tabpanel" class="tab-pane active" id="providers">
<div class="row">
<div id="filter-providers" class="filter-records column col-xs-12 col-md-5">
<div id="filter-providers" class="filter-records column col-12 col-md-5">
<form class="mb-4">
<div class="input-group">
<input type="text" class="key form-control">
@ -70,7 +70,7 @@
<div class="results"></div>
</div>
<div class="record-details column col-xs-12 col-md-7">
<div class="record-details column col-12 col-md-7">
<div class="float-md-left mb-4">
<div class="add-edit-delete-group btn-group">
<button id="add-provider" class="btn btn-primary">
@ -115,7 +115,7 @@
<input type="hidden" id="provider-id" class="record-id">
<div class="row">
<div class="provider-details col-xs-12 col-md-6">
<div class="provider-details col-12 col-md-6">
<div class="form-group">
<label for="provider-first-name"><?= lang('first_name') ?> *</label>
<input id="provider-first-name" class="form-control required" maxlength="256">
@ -166,7 +166,7 @@
<textarea id="provider-notes" class="form-control" rows="3"></textarea>
</div>
</div>
<div class="provider-settings col-xs-12 col-md-6">
<div class="provider-settings col-12 col-md-6">
<div class="form-group">
<label for="provider-username"><?= lang('username') ?> *</label>
<input id="provider-username" class="form-control required" maxlength="256">
@ -293,7 +293,7 @@
<div role="tabpanel" class="tab-pane" id="secretaries">
<div class="row">
<div id="filter-secretaries" class="filter-records column col-xs-12 col-md-5">
<div id="filter-secretaries" class="filter-records column col-12 col-md-5">
<form class="mb-4">
<div class="input-group">
<input type="text" class="key form-control">
@ -316,7 +316,7 @@
<div class="results"></div>
</div>
<div class="record-details column col-xs-12 col-md-7">
<div class="record-details column col-12 col-md-7">
<div class="btn-toolbar mb-4">
<div class="add-edit-delete-group btn-group">
<button id="add-secretary" class="btn btn-primary">
@ -352,7 +352,7 @@
<input type="hidden" id="secretary-id" class="record-id">
<div class="row">
<div class="secretary-details col-xs-12 col-md-6">
<div class="secretary-details col-12 col-md-6">
<div class="form-group">
<label for="secretary-first-name"><?= lang('first_name') ?> *</label>
<input id="secretary-first-name" class="form-control required" maxlength="256">
@ -403,7 +403,7 @@
<textarea id="secretary-notes" class="form-control" rows="3"></textarea>
</div>
</div>
<div class="secretary-settings col-xs-12 col-md-6">
<div class="secretary-settings col-12 col-md-6">
<div class="form-group">
<label for="secretary-username"><?= lang('username') ?> *</label>
<input id="secretary-username" class="form-control required" maxlength="256">
@ -453,7 +453,7 @@
<div role="tabpanel" class="tab-pane" id="admins">
<div class="row">
<div id="filter-admins" class="filter-records column col-xs-12 col-md-5">
<div id="filter-admins" class="filter-records column col-12 col-md-5">
<form class="mb-4">
<div class="input-group">
<input type="text" class="key form-control">
@ -476,7 +476,7 @@
<div class="results"></div>
</div>
<div class="record-details column col-xs-12 col-md-7">
<div class="record-details column col-12 col-md-7">
<div class="btn-toolbar mb-4">
<div class="add-edit-delete-group btn-group">
<button id="add-admin" class="btn btn-primary">
@ -512,7 +512,7 @@
<input type="hidden" id="admin-id" class="record-id">
<div class="row">
<div class="admin-details col-xs-12 col-md-6">
<div class="admin-details col-12 col-md-6">
<div class="form-group">
<label for="first-name"><?= lang('first_name') ?> *</label>
<input id="admin-first-name" class="form-control required" maxlength="256">
@ -563,7 +563,7 @@
<textarea id="admin-notes" class="form-control" rows="3"></textarea>
</div>
</div>
<div class="admin-settings col-xs-12 col-md-6">
<div class="admin-settings col-12 col-md-6">
<div class="form-group">
<label for="admin-username"><?= lang('username') ?> *</label>
<input id="admin-username" class="form-control required" maxlength="256">

4
application/views/general/installation.php
View file

@ -80,7 +80,7 @@
<div class="alert d-none"></div>
<div class="row">
<div class="admin-settings col-xs-12 col-sm-5">
<div class="admin-settings col-12 col-sm-5">
<h3>Administrator</h3>
<div class="form-group">
@ -119,7 +119,7 @@
</div>
</div>
<div class="company-settings col-xs-12 col-sm-5">
<div class="company-settings col-12 col-sm-5">
<h3>Company</h3>
<div class="form-group">

6
assets/css/backend.css
View file

@ -19,6 +19,7 @@ root {
/* BACKEND GENERAL ELEMENTS
-------------------------------------------------------------------- */
#header {
background-color: #429a82;
box-shadow: none;
@ -269,6 +270,7 @@ body legend {
/* BACKEND CALENDAR PAGE
-------------------------------------------------------------------- */
#calendar-page #calendar-toolbar {
border-bottom: 1px solid #D6D6D6;
border-radius: 3px;
@ -292,7 +294,6 @@ body legend {
display: inline-block;
margin: 0 10px 0 0;
margin-right: 7px;
margin-bottom: 0;
font-size: 18px;
font-weight: lighter;
}
@ -590,6 +591,7 @@ body .form-horizontal .controls {
/* BACKEND SERVICES PAGE
-------------------------------------------------------------------- */
#services-page h2 {
color: #525252;
}
@ -618,6 +620,7 @@ body .form-horizontal .controls {
/* BACKEND USERS PAGE
-------------------------------------------------------------------- */
#users-page h2 {
color: #525252;
}
@ -746,6 +749,7 @@ body .form-horizontal .controls {
/* BACKEND SETTINGS PAGE
-------------------------------------------------------------------- */
#settings-page h2 {
color: #525252;
}

394
assets/css/frontend.css
View file

@ -19,87 +19,116 @@ body {
}
body {
background-color: #f1f3f3;
background-color: #FAFAFA; /* #f1f3f3 */
}
#main {
display: flex;
flex-direction: column;
}
#main .wrapper {
height: 100vh;
display: table-cell;
vertical-align: middle;
min-height: 100%;
}
/* BOOK APPOINTMENT WIZARD
------------------------------------------------------------------------------ */
#book-appointment-wizard {
background: #FFF;
box-shadow: 0 1px 1px #e6e6e6;
min-height: 480px;
padding: 0;
margin: auto;
}
#book-appointment-wizard #header {
align-items: center;
display: flex;
padding: 5px;
height: 90px;
overflow: auto;
height: auto;
padding: 15px;
background: #429a82;
justify-content: space-between;
margin-bottom: 1rem;
}
#book-appointment-wizard #company-name {
display: inline-block;
float: none;
display: block;
text-align: center;
font-size: 24px;
font-weight: lighter;
color: #FFF;
margin: 0 10px 0 15px;
float: left;
margin: 20px 0;
}
#book-appointment-wizard #steps {
width: 200px;
display: inline-block;
float: right;
float: none;
display: block;
overflow: auto;
margin: 15px auto;
width: 186px;
}
#book-appointment-wizard #book-appointment-form #book-appointment-submit {
width: 100%;
margin-right: 0;
}
#book-appointment-wizard #form-message {
text-align: center;
margin: 15px 0;
}
#book-appointment-wizard .wizard-frame {
padding: 10px 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: auto;
padding: 15px;
}
#book-appointment-wizard .wizard-frame .frame-container {
height: 440px;
margin-bottom: 10px;
height: auto;
padding: 15px 0;
}
#book-appointment-wizard .frame-container .frame-title {
font-weight: lighter;
text-align: center;
margin-bottom: 28px;
margin-bottom: 15px;
color: #666;
}
#book-appointment-wizard .frame-container .frame-content {
margin: auto;
float: none;
}
#book-appointment-wizard .wizard-frame .command-buttons {
display: flex;
justify-content: flex-end;
float: none;
margin: 15px auto;
text-align: center;
}
#book-appointment-wizard .wizard-frame .command-buttons .btn {
min-width: 80px;
min-width: 120px;
margin-right: 10px;
}
#book-appointment-wizard .wizard-frame .command-buttons .btn:last-child {
margin-right: 0;
}
#book-appointment-wizard .wizard-frame #select-date {
max-width: 288px;
margin: auto;
padding: 15px 0;
}
#book-appointment-wizard .wizard-frame #select-date > .ui-datepicker {
margin: auto;
}
#book-appointment-wizard .wizard-frame #select-time {
max-width: 288px;
margin: auto;
padding: 15px 0;
}
#book-appointment-wizard .wizard-frame .command-buttons #button-next-1 {
width: 100%;
max-width: 300px;
margin: auto;
}
#book-appointment-wizard .book-step {
display: inline-block;
height: 35px;
@ -112,6 +141,10 @@ body {
border-radius: 8px;
}
#book-appointment-wizard .book-step:last-child {
margin-right: 0;
}
#book-appointment-wizard .book-step strong {
font-size: 12px;
display: block;
@ -125,7 +158,7 @@ body {
width: 45px;
float: left;
background: #FFF;
padding: 6px;
padding: 7px;
margin-right: 12px;
margin-top: 0;
}
@ -136,7 +169,7 @@ body {
}
#book-appointment-wizard #frame-footer {
padding: 10px;
padding: 15px;
text-align: center;
border-top: 1px solid #EEE;
background: #FAFAFA;
@ -146,21 +179,32 @@ body {
border-width: 2px;
}
#book-appointment-wizard #available-hours {
overflow: auto;
margin: 15px 0;
width: auto;
}
#book-appointment-wizard #available-hours div {
margin-right: 30px;
}
#book-appointment-wizard #available-hours .available-hour {
font-size: 15px;
padding: 1px;
display: inline-block;
font-size: 15px;
padding: 5px;
margin-bottom: 5px;
border-radius: 4px;
}
#book-appointment-wizard #available-hours .available-hour:hover {
font-weight: bold;
background-color: #f1f3f3;
background-color: #d6eaf5;
cursor: pointer;
}
#book-appointment-wizard #available-hours .selected-hour {
background-color: #d6eaf5;
color: #0088cc;
font-weight: bold;
}
#book-appointment-wizard .span3 {
@ -188,8 +232,7 @@ body {
#book-appointment-wizard .captcha-title {
float: left;
margin-right: 20px;
margin-top: 7px;
margin: 7px 0 10px 0;
}
#book-appointment-wizard .captcha-title .fa-sync-alt {
@ -202,7 +245,7 @@ body {
}
#book-appointment-wizard .captcha-image {
float: right;
float: left;
margin-bottom: 20px;
border-radius: 3px;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
@ -217,10 +260,64 @@ body {
overflow-y: auto;
clear: both;
max-height: 153px;
box-shadow: none;
}
#book-appointment-wizard #select-language {
display: block;
width: 150px;
margin: 15px auto;
}
.popover .popover-title {
text-align: center;
}
.popover .popover-content #language-list .language {
margin: 15px 0;
}
@media (min-width: 768px) {
.wrapper {
min-height: 100vh;
}
#book-appointment-wizard #company-name {
display: inline-block;
float: left;
}
#book-appointment-wizard #steps {
display: inline-block;
float: right;
}
#book-appointment-wizard .wizard-frame {
padding: 10px 20px;
}
#book-appointment-wizard .wizard-frame .frame-container {
height: 440px;
}
#book-appointment-wizard .wizard-frame .command-buttons {
display: flex;
justify-content: center;
}
#book-appointment-wizard .captcha-title {
margin-right: 20px;
margin-top: 7px;
}
#book-appointment-wizard .captcha-image {
float: right;
}
}
/* BOOK SUCCESS & MESSAGE
------------------------------------------------------------------------- */
#message-frame,
#success-frame {
background: #FFF;
@ -239,6 +336,35 @@ body {
margin-top: 20px;
}
#message-frame,
#success-frame {
text-align: center;
height: auto;
border: none;
padding: 35px;
}
#message-frame #message-icon,
#success-frame #success-icon {
width: 64px;
display: block;
margin: auto;
float: none !important;
}
#success-frame .btn {
margin-bottom: 10px;
width: 80%;
max-width: 250px;
}
@media (min-width: 768px) {
#message-frame,
#success-frame {
height: 100%;
}
}
/* CANCEL APPOINTMENT
------------------------------------------------------------------------- */
@ -254,182 +380,12 @@ body {
margin-bottom: 0;
}
/* MOBILE DEVICES
------------------------------------------------------------------------- */
@media (max-width: 768px) {
/**
* BOOKING WIZARD
*/
html,
body {
min-height: 100%;
}
#main {
min-height: 100%;
padding: 0 5vw;
}
#main .wrapper {
width: 100vw;
}
#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-2,
#book-appointment-wizard .wizard-frame .command-buttons #button-next-3 {
float: right;
}
#book-appointment-wizard .wizard-frame .command-buttons #button-next-1 {
width: 100%;
max-width: 300px;
margin: auto;
display: block;
}
#book-appointment-wizard .wizard-frame #select-date {
margin: auto; /* center */
}
#book-appointment-wizard #available-hours {
overflow: auto;
margin: 20px auto;
width: 260px;
padding-left: 20px; /* center at the bottom of datepicker */
}
#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%;
float: right;
}
#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;
}
/**
* BOOK SUCCESS
*/
#message-frame,
#success-frame {
text-align: center;
height: auto;
border: none;
padding: 35px;
}
#message-frame #message-icon,
#success-frame #success-icon {
width: 64px;
display: block;
margin: auto;
float: none !important;
}
#success-frame .btn {
margin-bottom: 10px;
width: 80%;
max-width: 250px;
}
/**
* CANCEL APPOINTMENT
*/
#cancel-appointment-frame {
text-align: center;
}
.ui-dialog .ui-dialog-title {
font-size: 1.2em;
}
#cancel-appointment-frame {
text-align: center;
}
@media (max-width: 480px) {
body {
background-color: #FAFAFA;
}
#main {
padding: 0;
}
#main .wrapper {
width: 100vw;
margin: 0;
display: block;
}
#book-appointment-wizard {
box-shadow: none;
}
#book-appointment-wizard .captcha-title {
margin: 7px 0 10px 0
}
#book-appointment-wizard .captcha-image {
float: left;
}
#message-frame,
#success-frame {
height: 100%;
}
.ui-dialog .ui-dialog-title {
font-size: 1.2em;
}

7
assets/css/general.css
View file

@ -82,6 +82,11 @@ body #ui-datepicker-div {
margin-top: 4px;
}
body .ui-datepicker {
width: auto;
max-width: 288px;
}
body .ui-datepicker .ui-widget-header {
border: none;
background: #429a82;
@ -203,7 +208,7 @@ li.language:hover {
#select-language {
cursor: pointer;
display: inline-block;
padding: 4px 5px;
padding: 10px 5px;
}
#select-language.active {