mirror of
https://github.com/alextselegidis/easyappointments.git
synced 2024-11-08 17:12:25 +03:00
Additional styling for the frontend pages.
This commit is contained in:
parent
0cd6e793c2
commit
d9985643f3
9 changed files with 77 additions and 61 deletions
|
@ -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"/>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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': [
|
'html': [
|
||||||
$('<strong/>', {
|
$('<span/>', {
|
||||||
'class': 'text-info',
|
'text': EALang.service + ': ' + $('#select-service option:selected').text()
|
||||||
'html': [
|
}),
|
||||||
$('<span/>', {
|
$('<br/>'),
|
||||||
'text': $('#select-provider option:selected').text()
|
$('<span/>', {
|
||||||
}),
|
'text': EALang.provider + ': ' + $('#select-provider option:selected').text()
|
||||||
$('<br/>'),
|
}),
|
||||||
$('<span/>', {
|
$('<br/>'),
|
||||||
'text': selectedDate + ' ' + $('.selected-hour').text()
|
$('<span/>', {
|
||||||
}),
|
'text': EALang.start + ': ' + selectedDate + ' ' + $('.selected-hour').text()
|
||||||
$('<br/>'),
|
}),
|
||||||
$('<span/>', {
|
$('<br/>'),
|
||||||
'text': $('#select-timezone option:selected').text()
|
$('<span/>', {
|
||||||
+ (servicePrice ? ' - ' + servicePrice + ' ' + serviceCurrency : '')
|
'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
|
||||||
}),
|
}),
|
||||||
|
|
|
@ -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)
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue