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

Additional styling for the frontend pages.

Browse source
This commit is contained in:
Alex Tselegidis 2020-09-28 14:26:12 +03:00
parent 0cd6e793c2
commit d9985643f3
9 changed files with 77 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -185,10 +185,10 @@
</div> </div>
<div class="command-buttons"> <div class="command-buttons">
<button type="button" id="button-next-1" class="btn button-next btn-info" <button type="button" id="button-next-1" class="btn button-next btn-dark"
data-step_index="1"> data-step_index="1">
<?= lang('next') ?> <?= lang('next') ?>
<i class="fas fa-long-arrow-alt-right ml-2"></i> <i class="fas fa-chevron-right ml-2"></i>
</button> </button>
</div> </div>
</div> </div>
@ -219,15 +219,15 @@
</div> </div>
<div class="command-buttons"> <div class="command-buttons">
<button type="button" id="button-back-2" class="btn button-back btn-light" <button type="button" id="button-back-2" class="btn button-back btn-secondary"
data-step_index="2"> data-step_index="2">
<i class="fas fa-long-arrow-alt-left mr-2"></i> <i class="fas fa-chevron-left mr-2"></i>
<?= lang('back') ?> <?= lang('back') ?>
</button> </button>
<button type="button" id="button-next-2" class="btn button-next btn-info" <button type="button" id="button-next-2" class="btn button-next btn-dark"
data-step_index="2"> data-step_index="2">
<?= lang('next') ?> <?= lang('next') ?>
<i class="fas fa-long-arrow-alt-right ml-2"></i> <i class="fas fa-chevron-right ml-2"></i>
</button> </button>
</div> </div>
</div> </div>
@ -242,21 +242,21 @@
<div class="row frame-content"> <div class="row frame-content">
<div class="col-12 col-md-6"> <div class="col-12 col-md-6">
<div class="form-group"> <div class="form-group">
<label for="first-name" class="control-label"><?= lang('first_name') ?> *</label> <label for="first-name" class="control-label"><?= lang('first_name') ?> <span class="text-danger">*</span></label>
<input type="text" id="first-name" class="required form-control" maxlength="100"/> <input type="text" id="first-name" class="required form-control" maxlength="100"/>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="last-name" class="control-label"><?= lang('last_name') ?> *</label> <label for="last-name" class="control-label"><?= lang('last_name') ?> <span class="text-danger">*</span></label>
<input type="text" id="last-name" class="required form-control" maxlength="120"/> <input type="text" id="last-name" class="required form-control" maxlength="120"/>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="email" class="control-label"><?= lang('email') ?> *</label> <label for="email" class="control-label"><?= lang('email') ?> <span class="text-danger">*</span></label>
<input type="text" id="email" class="required form-control" maxlength="120"/> <input type="text" id="email" class="required form-control" maxlength="120"/>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="phone-number" class="control-label"> <label for="phone-number" class="control-label">
<?= lang('phone_number') ?> <?= lang('phone_number') ?>
<?= $require_phone_number === '1' ? '*' : '' ?> <?= $require_phone_number === '1' ? '<span class="text-danger">*</span>' : '' ?>
</label> </label>
<input type="text" id="phone-number" maxlength="60" <input type="text" id="phone-number" maxlength="60"
class="<?= $require_phone_number === '1' ? 'required' : '' ?> form-control"/> class="<?= $require_phone_number === '1' ? 'required' : '' ?> form-control"/>
@ -278,10 +278,16 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="notes" class="control-label"><?= lang('notes') ?></label> <label for="notes" class="control-label"><?= lang('notes') ?></label>
<textarea id="notes" maxlength="500" class="form-control" rows="3"></textarea> <textarea id="notes" maxlength="500" class="form-control" rows="1"></textarea>
</div> </div>
</div> </div>
</div> </div>
<div id="form-message" class="text-danger" hidden>
<small>
<?= lang('fields_are_required') ?>
</small>
</div>
</div> </div>
<?php if ($display_terms_and_conditions): ?> <?php if ($display_terms_and_conditions): ?>
@ -312,22 +318,16 @@
</div> </div>
<?php endif ?> <?php endif ?>
<div id="form-message" class="text-danger">
<small>
<?= lang('fields_are_required') ?>
</small>
</div>
<div class="command-buttons"> <div class="command-buttons">
<button type="button" id="button-back-3" class="btn button-back btn-light" <button type="button" id="button-back-3" class="btn button-back btn-secondary"
data-step_index="3"> data-step_index="3">
<i class="fas fa-long-arrow-alt-left mr-2"></i> <i class="fas fa-chevron-left mr-2"></i>
<?= lang('back') ?> <?= lang('back') ?>
</button> </button>
<button type="button" id="button-next-3" class="btn button-next btn-info" <button type="button" id="button-next-3" class="btn button-next btn-dark"
data-step_index="3"> data-step_index="3">
<?= lang('next') ?> <?= lang('next') ?>
<i class="fas fa-long-arrow-alt-right ml-2"></i> <i class="fas fa-chevron-right ml-2"></i>
</button> </button>
</div> </div>
</div> </div>
@ -357,14 +357,14 @@
</div> </div>
<div class="command-buttons"> <div class="command-buttons">
<button type="button" id="button-back-4" class="btn button-back btn-light" <button type="button" id="button-back-4" class="btn button-back btn-secondary"
data-step_index="4"> data-step_index="4">
<i class="fas fa-long-arrow-alt-left mr-2"></i> <i class="fas fa-chevron-left mr-2"></i>
<?= lang('back') ?> <?= lang('back') ?>
</button> </button>
<form id="book-appointment-form" style="display:inline-block" method="post"> <form id="book-appointment-form" style="display:inline-block" method="post">
<button id="book-appointment-submit" type="button" class="btn btn-success"> <button id="book-appointment-submit" type="button" class="btn btn-success">
<i class="far fa-plus-square mr-2"></i> <i class="far fa-check-square mr-2"></i>
<?= ! $manage_mode ? lang('confirm') : lang('update') ?> <?= ! $manage_mode ? lang('confirm') : lang('update') ?>
</button> </button>
<input type="hidden" name="csrfToken"/> <input type="hidden" name="csrfToken"/>

2
assets/css/error404.css
View file

@ -3,7 +3,7 @@ body {
height: 100vh; height: 100vh;
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
background-color: #F2F2F2; background-color: #f5f8fa;
} }
#message-frame { #message-frame {

2
assets/css/forgot_password.css
View file

@ -3,7 +3,7 @@ body {
height: 100vh; height: 100vh;
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
background-color: #F2F2F2; background-color: #f5f8fa;
} }
#forgot-password-frame { #forgot-password-frame {

31
assets/css/frontend.css
View file

@ -19,7 +19,7 @@ body {
} }
body { body {
background-color: #F2F2F2; background-color: #f5f8fa;
} }
#main { #main {
@ -39,7 +39,7 @@ body {
#book-appointment-wizard #header { #book-appointment-wizard #header {
overflow: auto; overflow: auto;
height: auto; height: auto;
padding: 15px; padding: 20px 15px;
background: #429a82; background: #429a82;
} }
@ -58,7 +58,7 @@ body {
display: block; display: block;
overflow: auto; overflow: auto;
margin: 15px auto; margin: 15px auto;
width: 186px; width: 190px;
} }
#book-appointment-wizard #book-appointment-form #book-appointment-submit { #book-appointment-wizard #book-appointment-form #book-appointment-submit {
@ -126,7 +126,7 @@ body {
#book-appointment-wizard .wizard-frame .command-buttons #button-next-1 { #book-appointment-wizard .wizard-frame .command-buttons #button-next-1 {
width: 100%; width: 100%;
max-width: 200px; max-width: 150px;
margin: auto; margin: auto;
} }
@ -139,7 +139,8 @@ body {
padding: 8px; padding: 8px;
margin-right: 12px; margin-right: 12px;
margin-top: 6px; margin-top: 6px;
border-radius: 8px; border-radius: .25rem;
transition: all .3s linear;
} }
#book-appointment-wizard .book-step:last-child { #book-appointment-wizard .book-step:last-child {
@ -151,6 +152,7 @@ body {
display: block; display: block;
text-align: center; text-align: center;
color: #0bb98d; color: #0bb98d;
transition: all .3s linear;
} }
#book-appointment-wizard .active-step { #book-appointment-wizard .active-step {
@ -160,20 +162,19 @@ body {
float: left; float: left;
background: #FFF; background: #FFF;
padding: 7px; padding: 7px;
margin-right: 12px; margin-right: 13px;
margin-top: 0; margin-top: 0;
} }
#book-appointment-wizard .active-step strong { #book-appointment-wizard .active-step strong {
color: #429a82; color: #429a82;
font-size: 20px; font-size: 21px;
} }
#book-appointment-wizard #frame-footer { #book-appointment-wizard #frame-footer {
padding: 15px; padding: 15px;
text-align: center; text-align: center;
border-top: 1px solid #EEE; border-top: 1px solid #ebeef1;
background: #FAFAFA;
} }
#book-appointment-wizard #steps .custom-qtip { #book-appointment-wizard #steps .custom-qtip {
@ -261,7 +262,7 @@ body {
#book-appointment-wizard #select-language, #book-appointment-wizard #select-language,
#book-appointment-wizard .backend-link { #book-appointment-wizard .backend-link {
display: block; display: block;
width: 150px; min-width: 120px;
margin: 15px auto; margin: 15px auto;
padding: 5px; padding: 5px;
} }
@ -279,6 +280,12 @@ body {
min-height: 100vh; min-height: 100vh;
} }
#book-appointment-wizard {
border-radius: .25rem;
overflow: hidden;
box-shadow: rgba(45, 62, 80, 0.12) 0 1px 5px 0;
}
#book-appointment-wizard #company-name { #book-appointment-wizard #company-name {
display: inline-block; display: inline-block;
float: left; float: left;
@ -297,7 +304,7 @@ body {
#book-appointment-wizard .wizard-frame .command-buttons { #book-appointment-wizard .wizard-frame .command-buttons {
display: flex; display: flex;
justify-content: center; justify-content: space-between;
} }
#book-appointment-wizard .captcha-title { #book-appointment-wizard .captcha-title {
@ -340,7 +347,7 @@ body {
#book-appointment-wizard .backend-link { #book-appointment-wizard .backend-link {
display: inline-block; display: inline-block;
width: 100px; min-width: 120px;
padding: 5px; padding: 5px;
margin: 5px auto; margin: 5px auto;
} }

2
assets/css/login.css
View file

@ -3,7 +3,7 @@ body {
height: 100vh; height: 100vh;
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
background-color: #F2F2F2; background-color: #f5f8fa;
} }
#login-frame { #login-frame {

2
assets/css/logout.css
View file

@ -3,7 +3,7 @@ body {
height: 100vh; height: 100vh;
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
background-color: #F2F2F2; background-color: #f5f8fa;
} }
#logout-frame { #logout-frame {

2
assets/css/no_privileges.php.css
View file

@ -3,7 +3,7 @@ body {
height: 100vh; height: 100vh;
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
background-color: #F2F2F2; background-color: #f5f8fa;
} }
#no-priv-frame { #no-priv-frame {

33
assets/js/frontend_book.js
View file

@ -536,27 +536,32 @@ window.FrontendBook = window.FrontendBook || {};
$('<div/>', { $('<div/>', {
'html': [ 'html': [
$('<h4/>', { $('<h4/>', {
'text': $('#select-service option:selected').text() 'text': EALang.appointment
}), }),
$('<p/>', { $('<p/>', {
'html': [
$('<strong/>', {
'class': 'text-info',
'html': [ 'html': [
$('<span/>', { $('<span/>', {
'text': $('#select-provider option:selected').text() 'text': EALang.service + ': ' + $('#select-service option:selected').text()
}), }),
$('<br/>'), $('<br/>'),
$('<span/>', { $('<span/>', {
'text': selectedDate + ' ' + $('.selected-hour').text() 'text': EALang.provider + ': ' + $('#select-provider option:selected').text()
}), }),
$('<br/>'), $('<br/>'),
$('<span/>', { $('<span/>', {
'text': $('#select-timezone option:selected').text() 'text': EALang.start + ': ' + selectedDate + ' ' + $('.selected-hour').text()
+ (servicePrice ? ' - ' + servicePrice + ' ' + serviceCurrency : '') }),
}) $('<br/>'),
] $('<span/>', {
}) 'text': EALang.timezone + ': ' + $('#select-timezone option:selected').text()
}),
$('<br/>'),
$('<span/>', {
'text': EALang.price + ': ' + servicePrice + ' ' + serviceCurrency,
'prop': {
'hidden': !servicePrice
}
}),
] ]
}) })
] ]
@ -577,10 +582,14 @@ window.FrontendBook = window.FrontendBook || {};
$('<div/>', { $('<div/>', {
'html': [ 'html': [
$('<h4/>)', { $('<h4/>)', {
'text': firstName + ' ' + lastName 'text': EALang.customer
}), }),
$('<p/>', { $('<p/>', {
'html': [ 'html': [
$('<span/>', {
'text': EALang.customer + ': ' + firstName + ' ' + lastName
}),
$('<br/>'),
$('<span/>', { $('<span/>', {
'text': EALang.phone_number + ': ' + phoneNumber 'text': EALang.phone_number + ': ' + phoneNumber
}), }),

2
assets/js/frontend_book_api.js
View file

@ -97,7 +97,7 @@ window.FrontendBookApi = window.FrontendBookApi || {};
$('#available-hours').append( $('#available-hours').append(
$('<button/>', { $('<button/>', {
'class': 'btn btn-outline-info btn-block shadow-none available-hour', 'class': 'btn btn-outline-secondary btn-block shadow-none available-hour',
'text': availableHourMoment.format(timeFormat) 'text': availableHourMoment.format(timeFormat)
}) })
); );