Additional styling for the frontend pages.

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

View file

@ -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"/>

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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
}),

View file

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