mirrors/easyappointments
1
0
Fork 1
mirror of https://github.com/alextselegidis/easyappointments.git synced 2024-11-22 07:52:29 +03:00
Code Issues Projects Releases Packages Wiki 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>
<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>

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

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

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

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

37
assets/css/frontend.css
View file

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

34
assets/js/frontend_book_api.js
View file

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