mirror of
https://github.com/alextselegidis/easyappointments.git
synced 2024-11-08 17:12:25 +03:00
Changed the display of the availability in the booking page for a better user experience (buttons are used now).
This commit is contained in:
parent
a7eecb1a4c
commit
159225a7c7
5 changed files with 28 additions and 57 deletions
|
@ -184,7 +184,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="command-buttons">
|
<div class="command-buttons">
|
||||||
<button type="button" id="button-next-1" class="btn button-next btn-primary"
|
<button type="button" id="button-next-1" class="btn button-next btn-info"
|
||||||
data-step_index="1">
|
data-step_index="1">
|
||||||
<?= lang('next') ?>
|
<?= lang('next') ?>
|
||||||
<i class="fas fa-long-arrow-alt-right"></i>
|
<i class="fas fa-long-arrow-alt-right"></i>
|
||||||
|
@ -200,11 +200,11 @@
|
||||||
<h2 class="frame-title"><?= lang('step_two_title') ?></h2>
|
<h2 class="frame-title"><?= lang('step_two_title') ?></h2>
|
||||||
|
|
||||||
<div class="row frame-content">
|
<div class="row frame-content">
|
||||||
<div class="col-12 col-md-7">
|
<div class="col-12 col-md-6">
|
||||||
<div id="select-date"></div>
|
<div id="select-date"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12 col-sm-5">
|
<div class="col-12 col-sm-6">
|
||||||
<div id="select-time">
|
<div id="select-time">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="select-timezone"><?= lang('timezone') ?></label>
|
<label for="select-timezone"><?= lang('timezone') ?></label>
|
||||||
|
@ -223,7 +223,7 @@
|
||||||
<i class="fas fa-long-arrow-alt-left"></i>
|
<i class="fas fa-long-arrow-alt-left"></i>
|
||||||
<?= lang('back') ?>
|
<?= lang('back') ?>
|
||||||
</button>
|
</button>
|
||||||
<button type="button" id="button-next-2" class="btn button-next btn-primary"
|
<button type="button" id="button-next-2" class="btn button-next btn-info"
|
||||||
data-step_index="2">
|
data-step_index="2">
|
||||||
<?= lang('next') ?>
|
<?= lang('next') ?>
|
||||||
<i class="fas fa-long-arrow-alt-right"></i>
|
<i class="fas fa-long-arrow-alt-right"></i>
|
||||||
|
@ -320,7 +320,7 @@
|
||||||
data-step_index="3"><i class="fas fa-long-arrow-alt-left"></i>
|
data-step_index="3"><i class="fas fa-long-arrow-alt-left"></i>
|
||||||
<?= lang('back') ?>
|
<?= lang('back') ?>
|
||||||
</button>
|
</button>
|
||||||
<button type="button" id="button-next-3" class="btn button-next btn-primary"
|
<button type="button" id="button-next-3" class="btn button-next btn-info"
|
||||||
data-step_index="3">
|
data-step_index="3">
|
||||||
<?= lang('next') ?>
|
<?= lang('next') ?>
|
||||||
<i class="fas fa-long-arrow-alt-right"></i>
|
<i class="fas fa-long-arrow-alt-right"></i>
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="main" class="container">
|
<div id="main" class="container">
|
||||||
<div class="row wrapper">
|
<div class="row wrapper">
|
||||||
<div id="success-frame" class="col-12 my-auto frame-container">
|
<div id="success-frame" class="col-12 border my-auto frame-container">
|
||||||
<div>
|
<div>
|
||||||
<img id="success-icon" class="mt-0 mb-2" src="<?= base_url('assets/img/success.png') ?>" />
|
<img id="success-icon" class="mt-0 mb-2" src="<?= base_url('assets/img/success.png') ?>" />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -27,7 +27,7 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="main" class="container">
|
<div id="main" class="container">
|
||||||
<div class="row wrapper">
|
<div class="row wrapper">
|
||||||
<div id="message-frame" class="col-12 my-auto frame-container">
|
<div id="message-frame" class="col-12 border my-auto frame-container">
|
||||||
<div>
|
<div>
|
||||||
<img id="message-icon" src="<?= $message_icon ?>" alt="warning">
|
<img id="message-icon" src="<?= $message_icon ?>" alt="warning">
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -19,7 +19,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #FAFAFA;
|
background-color: #F2F2F2;
|
||||||
}
|
}
|
||||||
|
|
||||||
#main {
|
#main {
|
||||||
|
@ -68,7 +68,7 @@ body {
|
||||||
|
|
||||||
#book-appointment-wizard #form-message {
|
#book-appointment-wizard #form-message {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 15px 0;
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#book-appointment-wizard .wizard-frame {
|
#book-appointment-wizard .wizard-frame {
|
||||||
|
@ -78,6 +78,7 @@ body {
|
||||||
|
|
||||||
#book-appointment-wizard .wizard-frame .frame-container {
|
#book-appointment-wizard .wizard-frame .frame-container {
|
||||||
height: auto;
|
height: auto;
|
||||||
|
min-height: 500px;
|
||||||
padding: 15px 0;
|
padding: 15px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -125,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: 300px;
|
max-width: 200px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -137,7 +138,7 @@ body {
|
||||||
background: #225d4d;
|
background: #225d4d;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
margin-top: 5px;
|
margin-top: 6px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -182,7 +183,9 @@ body {
|
||||||
#book-appointment-wizard #available-hours {
|
#book-appointment-wizard #available-hours {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
margin: 15px 0;
|
margin: 15px 0;
|
||||||
|
padding-right: 10px;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
max-height: 255px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#book-appointment-wizard #available-hours div {
|
#book-appointment-wizard #available-hours div {
|
||||||
|
@ -190,21 +193,13 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
#book-appointment-wizard #available-hours .available-hour {
|
#book-appointment-wizard #available-hours .available-hour {
|
||||||
display: inline-block;
|
margin-bottom: 10px;
|
||||||
font-size: 15px;
|
|
||||||
padding: 5px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#book-appointment-wizard #available-hours .available-hour:hover {
|
|
||||||
background-color: #d6eaf5;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#book-appointment-wizard #available-hours .selected-hour {
|
#book-appointment-wizard #available-hours .selected-hour {
|
||||||
background-color: #d6eaf5;
|
background-color: #439a82;
|
||||||
color: #0088cc;
|
border-color: #439a82;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
#book-appointment-wizard .span3 {
|
#book-appointment-wizard .span3 {
|
||||||
|
@ -298,10 +293,6 @@ body {
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#book-appointment-wizard .wizard-frame .frame-container {
|
|
||||||
height: 440px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#book-appointment-wizard .wizard-frame .command-buttons {
|
#book-appointment-wizard .wizard-frame .command-buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
@ -315,6 +306,12 @@ body {
|
||||||
#book-appointment-wizard .captcha-image {
|
#book-appointment-wizard .captcha-image {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#book-appointment-wizard #select-language {
|
||||||
|
width: 100px;
|
||||||
|
padding: 5px;
|
||||||
|
margin: 5px auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* BOOK SUCCESS & MESSAGE
|
/* BOOK SUCCESS & MESSAGE
|
||||||
|
|
|
@ -87,45 +87,19 @@ window.FrontendBookApi = window.FrontendBookApi || {};
|
||||||
}
|
}
|
||||||
|
|
||||||
var providerTimezone = provider.timezone;
|
var providerTimezone = provider.timezone;
|
||||||
|
|
||||||
var selectedTimezone = $('#select-timezone').val();
|
var selectedTimezone = $('#select-timezone').val();
|
||||||
|
|
||||||
var currentColumn = 1;
|
|
||||||
|
|
||||||
$('#available-hours').html(
|
|
||||||
$('<div/>', {
|
|
||||||
'css': {
|
|
||||||
'width': '80px',
|
|
||||||
'float': 'left'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
var timeFormat = GlobalVariables.timeFormat === 'regular' ? 'h:mm a' : 'HH:mm';
|
var timeFormat = GlobalVariables.timeFormat === 'regular' ? 'h:mm a' : 'HH:mm';
|
||||||
|
|
||||||
response.forEach(function (availableHour, index) {
|
response.forEach(function (availableHour, index) {
|
||||||
if ((currentColumn * 10) < (index + 1)) {
|
|
||||||
currentColumn++;
|
|
||||||
$('#available-hours').append(
|
|
||||||
$('<div/>', {
|
|
||||||
'css': {
|
|
||||||
'width': '80px',
|
|
||||||
'float': 'left'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
var availableHourMoment = moment
|
var availableHourMoment = moment
|
||||||
.tz(selectedDate + ' ' + availableHour + ':00', providerTimezone)
|
.tz(selectedDate + ' ' + availableHour + ':00', providerTimezone)
|
||||||
.tz(selectedTimezone);
|
.tz(selectedTimezone);
|
||||||
|
|
||||||
$('#available-hours div:eq(' + (currentColumn - 1) + ')').append(
|
$('#available-hours').append(
|
||||||
$('<span/>', {
|
$('<button/>', {
|
||||||
'class': 'available-hour',
|
'class': 'btn btn-outline-info btn-block shadow-none available-hour',
|
||||||
'text': availableHourMoment.format(timeFormat)
|
'text': availableHourMoment.format(timeFormat)
|
||||||
}),
|
})
|
||||||
$('<br/>')
|
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue