Additional styling for the frontend pages.
This commit is contained in:
Alex Tselegidis
parent
0cd6e793c2
commit
d9985643f3
9 changed files with 77 additions and 61 deletions
|
|
@ -185,10 +185,10 @@
|
|||
</div>
|
||||
|
||||
<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">
|
||||
<?= lang('next') ?>
|
||||
<i class="fas fa-long-arrow-alt-right ml-2"></i>
|
||||
<i class="fas fa-chevron-right ml-2"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -219,15 +219,15 @@
|
|||
</div>
|
||||
|
||||
<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">
|
||||
<i class="fas fa-long-arrow-alt-left mr-2"></i>
|
||||
<i class="fas fa-chevron-left mr-2"></i>
|
||||
<?= lang('back') ?>
|
||||
</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">
|
||||
<?= lang('next') ?>
|
||||
<i class="fas fa-long-arrow-alt-right ml-2"></i>
|
||||
<i class="fas fa-chevron-right ml-2"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -242,21 +242,21 @@
|
|||
<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>
|
||||
<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"/>
|
||||
</div>
|
||||
<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"/>
|
||||
</div>
|
||||
<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"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="phone-number" class="control-label">
|
||||
<?= lang('phone_number') ?>
|
||||
<?= $require_phone_number === '1' ? '*' : '' ?>
|
||||
<?= $require_phone_number === '1' ? '<span class="text-danger">*</span>' : '' ?>
|
||||
</label>
|
||||
<input type="text" id="phone-number" maxlength="60"
|
||||
class="<?= $require_phone_number === '1' ? 'required' : '' ?> form-control"/>
|
||||
|
|
@ -278,10 +278,16 @@
|
|||
</div>
|
||||
<div class="form-group">
|
||||
<label for="notes" class="control-label"><?= lang('notes') ?></label>
|
||||
<textarea id="notes" maxlength="500" class="form-control" rows="3"></textarea>
|
||||
<textarea id="notes" maxlength="500" class="form-control" rows="1"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="form-message" class="text-danger" hidden>
|
||||
<small>
|
||||
<?= lang('fields_are_required') ?>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if ($display_terms_and_conditions): ?>
|
||||
|
|
@ -312,22 +318,16 @@
|
|||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
<div id="form-message" class="text-danger">
|
||||
<small>
|
||||
<?= lang('fields_are_required') ?>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<i class="fas fa-long-arrow-alt-left mr-2"></i>
|
||||
<i class="fas fa-chevron-left mr-2"></i>
|
||||
<?= lang('back') ?>
|
||||
</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">
|
||||
<?= lang('next') ?>
|
||||
<i class="fas fa-long-arrow-alt-right ml-2"></i>
|
||||
<i class="fas fa-chevron-right ml-2"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -357,14 +357,14 @@
|
|||
</div>
|
||||
|
||||
<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">
|
||||
<i class="fas fa-long-arrow-alt-left mr-2"></i>
|
||||
<i class="fas fa-chevron-left mr-2"></i>
|
||||
<?= lang('back') ?>
|
||||
</button>
|
||||
<form id="book-appointment-form" style="display:inline-block" method="post">
|
||||
<button id="book-appointment-submit" type="button" class="btn btn-success">
|
||||
<i class="far fa-plus-square mr-2"></i>
|
||||
<i class="far fa-check-square mr-2"></i>
|
||||
<?= ! $manage_mode ? lang('confirm') : lang('update') ?>
|
||||
</button>
|
||||
<input type="hidden" name="csrfToken"/>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ body {
|
|||
height: 100vh;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
background-color: #F2F2F2;
|
||||
background-color: #f5f8fa;
|
||||
}
|
||||
|
||||
#message-frame {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ body {
|
|||
height: 100vh;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
background-color: #F2F2F2;
|
||||
background-color: #f5f8fa;
|
||||
}
|
||||
|
||||
#forgot-password-frame {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ body {
|
|||
}
|
||||
|
||||
body {
|
||||
background-color: #F2F2F2;
|
||||
background-color: #f5f8fa;
|
||||
}
|
||||
|
||||
#main {
|
||||
|
|
@ -39,7 +39,7 @@ body {
|
|||
#book-appointment-wizard #header {
|
||||
overflow: auto;
|
||||
height: auto;
|
||||
padding: 15px;
|
||||
padding: 20px 15px;
|
||||
background: #429a82;
|
||||
}
|
||||
|
||||
|
|
@ -58,7 +58,7 @@ body {
|
|||
display: block;
|
||||
overflow: auto;
|
||||
margin: 15px auto;
|
||||
width: 186px;
|
||||
width: 190px;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #book-appointment-form #book-appointment-submit {
|
||||
|
|
@ -126,7 +126,7 @@ body {
|
|||
|
||||
#book-appointment-wizard .wizard-frame .command-buttons #button-next-1 {
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
max-width: 150px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
|
|
@ -139,7 +139,8 @@ body {
|
|||
padding: 8px;
|
||||
margin-right: 12px;
|
||||
margin-top: 6px;
|
||||
border-radius: 8px;
|
||||
border-radius: .25rem;
|
||||
transition: all .3s linear;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .book-step:last-child {
|
||||
|
|
@ -151,6 +152,7 @@ body {
|
|||
display: block;
|
||||
text-align: center;
|
||||
color: #0bb98d;
|
||||
transition: all .3s linear;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .active-step {
|
||||
|
|
@ -160,20 +162,19 @@ body {
|
|||
float: left;
|
||||
background: #FFF;
|
||||
padding: 7px;
|
||||
margin-right: 12px;
|
||||
margin-right: 13px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .active-step strong {
|
||||
color: #429a82;
|
||||
font-size: 20px;
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #frame-footer {
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #EEE;
|
||||
background: #FAFAFA;
|
||||
border-top: 1px solid #ebeef1;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #steps .custom-qtip {
|
||||
|
|
@ -261,7 +262,7 @@ body {
|
|||
#book-appointment-wizard #select-language,
|
||||
#book-appointment-wizard .backend-link {
|
||||
display: block;
|
||||
width: 150px;
|
||||
min-width: 120px;
|
||||
margin: 15px auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
|
@ -279,6 +280,12 @@ body {
|
|||
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 {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
|
|
@ -297,7 +304,7 @@ body {
|
|||
|
||||
#book-appointment-wizard .wizard-frame .command-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .captcha-title {
|
||||
|
|
@ -340,7 +347,7 @@ body {
|
|||
|
||||
#book-appointment-wizard .backend-link {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
min-width: 120px;
|
||||
padding: 5px;
|
||||
margin: 5px auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ body {
|
|||
height: 100vh;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
background-color: #F2F2F2;
|
||||
background-color: #f5f8fa;
|
||||
}
|
||||
|
||||
#login-frame {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ body {
|
|||
height: 100vh;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
background-color: #F2F2F2;
|
||||
background-color: #f5f8fa;
|
||||
}
|
||||
|
||||
#logout-frame {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ body {
|
|||
height: 100vh;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
background-color: #F2F2F2;
|
||||
background-color: #f5f8fa;
|
||||
}
|
||||
|
||||
#no-priv-frame {
|
||||
|
|
|
|||
|
|
@ -536,27 +536,32 @@ window.FrontendBook = window.FrontendBook || {};
|
|||
$('<div/>', {
|
||||
'html': [
|
||||
$('<h4/>', {
|
||||
'text': $('#select-service option:selected').text()
|
||||
'text': EALang.appointment
|
||||
}),
|
||||
$('<p/>', {
|
||||
'html': [
|
||||
$('<strong/>', {
|
||||
'class': 'text-info',
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'text': $('#select-provider option:selected').text()
|
||||
'text': EALang.service + ': ' + $('#select-service option:selected').text()
|
||||
}),
|
||||
$('<br/>'),
|
||||
$('<span/>', {
|
||||
'text': selectedDate + ' ' + $('.selected-hour').text()
|
||||
'text': EALang.provider + ': ' + $('#select-provider option:selected').text()
|
||||
}),
|
||||
$('<br/>'),
|
||||
$('<span/>', {
|
||||
'text': $('#select-timezone option:selected').text()
|
||||
+ (servicePrice ? ' - ' + servicePrice + ' ' + serviceCurrency : '')
|
||||
})
|
||||
]
|
||||
})
|
||||
'text': EALang.start + ': ' + selectedDate + ' ' + $('.selected-hour').text()
|
||||
}),
|
||||
$('<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/>', {
|
||||
'html': [
|
||||
$('<h4/>)', {
|
||||
'text': firstName + ' ' + lastName
|
||||
'text': EALang.customer
|
||||
}),
|
||||
$('<p/>', {
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'text': EALang.customer + ': ' + firstName + ' ' + lastName
|
||||
}),
|
||||
$('<br/>'),
|
||||
$('<span/>', {
|
||||
'text': EALang.phone_number + ': ' + phoneNumber
|
||||
}),
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@ window.FrontendBookApi = window.FrontendBookApi || {};
|
|||
|
||||
$('#available-hours').append(
|
||||
$('<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)
|
||||
})
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue