mirrors/easyappointments
1
0
Fork 1
mirror of https://github.com/alextselegidis/easyappointments.git synced 2024-11-08 17:12:25 +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

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

@ -22,8 +22,8 @@
<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 class="row wrapper">
<div id="book-appointment-wizard" class="col-12 col-lg-10 col-xl-8">
<!-- FRAME TOP BAR -->
@ -49,10 +49,10 @@
<?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() ?>"/>
@ -62,11 +62,12 @@
</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; ?>
@ -82,37 +83,43 @@
<?php endif ?>
<!-- SELECT SERVICE AND PROVIDER -->
<div id="wizard-frame-1" class="wizard-frame">
<div class="frame-container">
<h3 class="frame-title"><?= lang('step_one_title') ?></h3>
<h4 class="frame-title"><?= lang('step_one_title') ?></h4>
<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) {
foreach ($available_services as $service)
{
if ($service['category_id'] != NULL)
{
$has_category = TRUE;
break;
}
}
if ($has_category) {
$grouped_services = array();
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']] = array();
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;
@ -121,28 +128,36 @@
// 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'] = [];
foreach ($available_services as $service)
{
if ($service['category_id'] == NULL)
{
$grouped_services['uncategorized'][] = $service;
}
}
foreach($grouped_services as $key => $group) {
foreach ($grouped_services as $key => $group)
{
$group_label = ($key != 'uncategorized')
? $group[0]['category_name'] : 'Uncategorized';
if (count($group) > 0) {
if (count($group) > 0)
{
echo '<optgroup label="' . $group_label . '">';
foreach($group as $service) {
foreach ($group as $service)
{
echo '<option value="' . $service['id'] . '">'
. $service['name'] . '</option>';
}
echo '</optgroup>';
}
}
} else {
foreach($available_services as $service) {
}
else
{
foreach ($available_services as $service)
{
echo '<option value="' . $service['id'] . '">' . $service['name'] . '</option>';
}
}
@ -152,7 +167,7 @@
<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,6 +176,7 @@
<div id="service-description"></div>
</div>
</div>
</div>
<div class="command-buttons">
<button type="button" id="button-next-1" class="btn button-next btn-primary"
@ -176,21 +192,25 @@
<div id="wizard-frame-2" class="wizard-frame" style="display:none;">
<div class="frame-container">
<h3 class="frame-title"><?= lang('step_two_title') ?></h3>
<h4 class="frame-title"><?= lang('step_two_title') ?></h4>
<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 class="row frame-content">
<div class="col-12 col-md-7">
<div id="select-date"></div>
</div>
<div class="col-xs-12 col-sm-5 px-0">
<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>
<div class="command-buttons">
<button type="button" id="button-back-2" class="btn button-back btn-light"
@ -211,10 +231,10 @@
<div id="wizard-frame-3" class="wizard-frame" style="display:none;">
<div class="frame-container">
<h3 class="frame-title"><?= lang('step_three_title') ?></h3>
<h4 class="frame-title"><?= lang('step_three_title') ?></h4>
<div class="frame-content row">
<div class="col-xs-12 col-md-6">
<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"/>
@ -237,7 +257,7 @@
</div>
</div>
<div class="col-xs-12 col-md-6">
<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"/>
@ -286,7 +306,9 @@
</div>
<?php endif ?>
<span id="form-message" class="text-danger d-block"><?= lang('fields_are_required') ?></span>
<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"
@ -305,14 +327,14 @@
<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>
<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="frame-content row">
<div class="col-xs-12 col-md-6">
<div class="row frame-content">
<div class="col-12 col-md-6">
<h4 class="captcha-title">
CAPTCHA
<small class="fas fa-sync-alt"></small>
@ -345,16 +367,19 @@
<!-- 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>
</small>
</div>
</div>
</div>

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;
}

368
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,134 +336,6 @@ body {
margin-top: 20px;
}
/* CANCEL APPOINTMENT
------------------------------------------------------------------------- */
.booking-header-bar {
padding: 10px 0;
margin: 0;
background: #FAFAFA;
border-bottom: 1px solid #E2E2E2;
}
.booking-header-bar p {
margin-top: 2px;
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;
@ -389,9 +358,28 @@ body {
max-width: 250px;
}
/**
* CANCEL APPOINTMENT
*/
@media (min-width: 768px) {
#message-frame,
#success-frame {
height: 100%;
}
}
/* CANCEL APPOINTMENT
------------------------------------------------------------------------- */
.booking-header-bar {
padding: 10px 0;
margin: 0;
background: #FAFAFA;
border-bottom: 1px solid #E2E2E2;
}
.booking-header-bar p {
margin-top: 2px;
margin-bottom: 0;
}
#cancel-appointment-frame {
text-align: center;
}
@ -399,37 +387,5 @@ body {
.ui-dialog .ui-dialog-title {
font-size: 1.2em;
}
}
@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%;
}
}

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 {