mirror of
https://github.com/alextselegidis/easyappointments.git
synced 2024-11-22 07:52:29 +03:00
The booking page styling is now mobile-first oriented.
This commit is contained in:
Alex Tselegidis
parent
e1053dd33a
commit
2c330a0a86
12 changed files with 531 additions and 541 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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): ?>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue