ifl/iflrandevu
1
1
Fork 0
forked from mirrors/easyappointments
Code Issues 6 Pull requests Releases 3 Activity

Changed the display of the availability in the booking page for a better user experience (buttons are used now).

Browse source
This commit is contained in:
Alex Tselegidis 2020-09-03 14:14:34 +03:00
parent a7eecb1a4c
commit 159225a7c7
5 changed files with 28 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -184,7 +184,7 @@
</div>
<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">
<?= lang('next') ?>
<i class="fas fa-long-arrow-alt-right"></i>
@ -200,11 +200,11 @@
<h2 class="frame-title"><?= lang('step_two_title') ?></h2>
<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>
<div class="col-12 col-sm-5">
<div class="col-12 col-sm-6">
<div id="select-time">
<div class="form-group">
<label for="select-timezone"><?= lang('timezone') ?></label>
@ -223,7 +223,7 @@
<i class="fas fa-long-arrow-alt-left"></i>
<?= lang('back') ?>
</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">
<?= lang('next') ?>
<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>
<?= lang('back') ?>
</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">
<?= lang('next') ?>
<i class="fas fa-long-arrow-alt-right"></i>

2
application/views/appointments/book_success.php
View file

@ -17,7 +17,7 @@
<body>
<div id="main" class="container">
<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>
<img id="success-icon" class="mt-0 mb-2" src="<?= base_url('assets/img/success.png') ?>" />
</div>

2
application/views/appointments/message.php
View file

@ -27,7 +27,7 @@
<body>
<div id="main" class="container">
<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>
<img id="message-icon" src="<?= $message_icon ?>" alt="warning">
</div>

37
assets/css/frontend.css
View file

@ -19,7 +19,7 @@ body {
}
body {
background-color: #FAFAFA;
background-color: #F2F2F2;
}
#main {
@ -68,7 +68,7 @@ body {
#book-appointment-wizard #form-message {
text-align: center;
margin: 15px 0;
margin-bottom: 30px;
}
#book-appointment-wizard .wizard-frame {
@ -78,6 +78,7 @@ body {
#book-appointment-wizard .wizard-frame .frame-container {
height: auto;
min-height: 500px;
padding: 15px 0;
}
@ -125,7 +126,7 @@ body {
#book-appointment-wizard .wizard-frame .command-buttons #button-next-1 {
width: 100%;
max-width: 300px;
max-width: 200px;
margin: auto;
}
@ -137,7 +138,7 @@ body {
background: #225d4d;
padding: 8px;
margin-right: 12px;
margin-top: 5px;
margin-top: 6px;
border-radius: 8px;
}
@ -182,7 +183,9 @@ body {
#book-appointment-wizard #available-hours {
overflow: auto;
margin: 15px 0;
padding-right: 10px;
width: auto;
max-height: 255px;
}
#book-appointment-wizard #available-hours div {
@ -190,21 +193,13 @@ body {
}
#book-appointment-wizard #available-hours .available-hour {
display: inline-block;
font-size: 15px;
padding: 5px;
margin-bottom: 5px;
border-radius: 4px;
}
#book-appointment-wizard #available-hours .available-hour:hover {
background-color: #d6eaf5;
cursor: pointer;
margin-bottom: 10px;
}
#book-appointment-wizard #available-hours .selected-hour {
background-color: #d6eaf5;
color: #0088cc;
background-color: #439a82;
border-color: #439a82;
color: white;
}
#book-appointment-wizard .span3 {
@ -298,10 +293,6 @@ body {
padding: 10px 20px;
}
#book-appointment-wizard .wizard-frame .frame-container {
height: 440px;
}
#book-appointment-wizard .wizard-frame .command-buttons {
display: flex;
justify-content: center;
@ -315,6 +306,12 @@ body {
#book-appointment-wizard .captcha-image {
float: right;
}
#book-appointment-wizard #select-language {
width: 100px;
padding: 5px;
margin: 5px auto;
}
}
/* BOOK SUCCESS & MESSAGE

34
assets/js/frontend_book_api.js
View file

@ -87,45 +87,19 @@ window.FrontendBookApi = window.FrontendBookApi || {};
}
var providerTimezone = provider.timezone;
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';
response.forEach(function (availableHour, index) {
if ((currentColumn * 10) < (index + 1)) {
currentColumn++;
$('#available-hours').append(
$('<div/>', {
'css': {
'width': '80px',
'float': 'left'
}
})
);
}
var availableHourMoment = moment
.tz(selectedDate + ' ' + availableHour + ':00', providerTimezone)
.tz(selectedTimezone);
$('#available-hours div:eq(' + (currentColumn - 1) + ')').append(
$('<span/>', {
'class': 'available-hour',
$('#available-hours').append(
$('<button/>', {
'class': 'btn btn-outline-info btn-block shadow-none available-hour',
'text': availableHourMoment.format(timeFormat)
}),
$('<br/>')
})
);
});