mirror of
https://github.com/alextselegidis/easyappointments.git
synced 2024-11-08 17:12:25 +03:00
Added additional styling for the appointment cancellation and customer data removal modals.
This commit is contained in:
parent
ad320cab52
commit
7a496f0166
4 changed files with 43 additions and 30 deletions
|
@ -55,9 +55,14 @@
|
||||||
<div class="col-12 col-md-2">
|
<div class="col-12 col-md-2">
|
||||||
<form id="cancel-appointment-form" method="post"
|
<form id="cancel-appointment-form" method="post"
|
||||||
action="<?= site_url('appointments/cancel/' . $appointment_data['hash']) ?>">
|
action="<?= site_url('appointments/cancel/' . $appointment_data['hash']) ?>">
|
||||||
|
|
||||||
<input type="hidden" name="csrfToken" value="<?= $this->security->get_csrf_hash() ?>"/>
|
<input type="hidden" name="csrfToken" value="<?= $this->security->get_csrf_hash() ?>"/>
|
||||||
|
|
||||||
<textarea name="cancel_reason" style="display:none"></textarea>
|
<textarea name="cancel_reason" style="display:none"></textarea>
|
||||||
<button id="cancel-appointment" class="btn btn-light btn-sm"><?= lang('cancel') ?></button>
|
|
||||||
|
<button id="cancel-appointment" class="btn btn-warning">
|
||||||
|
<?= lang('cancel') ?>
|
||||||
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -67,7 +72,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md-2">
|
<div class="col-12 col-md-2">
|
||||||
<button id="delete-personal-information"
|
<button id="delete-personal-information"
|
||||||
class="btn btn-danger btn-sm"><?= lang('delete') ?></button>
|
class="btn btn-danger"><?= lang('delete') ?></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
|
@ -369,9 +369,9 @@ body {
|
||||||
------------------------------------------------------------------------- */
|
------------------------------------------------------------------------- */
|
||||||
|
|
||||||
.booking-header-bar {
|
.booking-header-bar {
|
||||||
padding: 10px 0;
|
padding: 15px 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background: #FAFAFA;
|
background: #f6f5ee;
|
||||||
border-bottom: 1px solid #E2E2E2;
|
border-bottom: 1px solid #E2E2E2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -380,10 +380,6 @@ body {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cancel-appointment-frame {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui-dialog .ui-dialog-title {
|
.ui-dialog .ui-dialog-title {
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
}
|
}
|
||||||
|
|
|
@ -27,7 +27,7 @@ body .custom-qtip {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-widget {
|
body .ui-widget {
|
||||||
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -42,14 +42,14 @@ body .ui-dialog .ui-dialog-titlebar-close {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-draggable .ui-dialog-titlebar {
|
body .ui-draggable .ui-dialog-titlebar {
|
||||||
background: #39c678;
|
background: #429a82;
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
font-size: 1.5em;
|
font-size: 1.2em;
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
padding: 12px 10px;
|
padding: 12px 10px;
|
||||||
border: none;
|
|
||||||
border-bottom: 4px solid #c0f1d6;
|
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-dialog {
|
body .ui-dialog {
|
||||||
|
@ -64,6 +64,10 @@ body .ui-dialog .ui-dialog-buttonpane {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body .ui-dialog .ui-dialog-buttonpane .btn {
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
body .ui-button .ui-icon,
|
body .ui-button .ui-icon,
|
||||||
body .ui-button:hover .ui-icon {
|
body .ui-button:hover .ui-icon {
|
||||||
background-image: url('../ext/jquery-ui/images/ui-icons_222222_256x240.png');
|
background-image: url('../ext/jquery-ui/images/ui-icons_222222_256x240.png');
|
||||||
|
@ -177,8 +181,8 @@ body .ui-widget-header .ui-priority-primary {
|
||||||
body .ui-widget input, .ui-widget select,
|
body .ui-widget input, .ui-widget select,
|
||||||
body .ui-widget textarea,
|
body .ui-widget textarea,
|
||||||
body .ui-widget button {
|
body .ui-widget button {
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
font-size: 12px;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-datepicker .ui-datepicker-buttonpane button {
|
body .ui-datepicker .ui-datepicker-buttonpane button {
|
||||||
|
|
|
@ -368,46 +368,54 @@ window.FrontendBook = window.FrontendBook || {};
|
||||||
*/
|
*/
|
||||||
$('#cancel-appointment').click(function (event) {
|
$('#cancel-appointment').click(function (event) {
|
||||||
var buttons = [
|
var buttons = [
|
||||||
|
{
|
||||||
|
text: EALang.cancel,
|
||||||
|
click: function () {
|
||||||
|
$('#message_box').dialog('close');
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
text: 'OK',
|
text: 'OK',
|
||||||
click: function () {
|
click: function () {
|
||||||
if ($('#cancel-reason').val() === '') {
|
if ($('#cancel-reason').val() === '') {
|
||||||
$('#cancel-reason').css('border', '2px solid red');
|
$('#cancel-reason').css('border', '2px solid #DC3545');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
$('#cancel-appointment-form textarea').val($('#cancel-reason').val());
|
$('#cancel-appointment-form textarea').val($('#cancel-reason').val());
|
||||||
$('#cancel-appointment-form').submit();
|
$('#cancel-appointment-form').submit();
|
||||||
}
|
}
|
||||||
},
|
|
||||||
{
|
|
||||||
text: EALang.cancel,
|
|
||||||
click: function () {
|
|
||||||
$('#message_box').dialog('close');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
GeneralFunctions.displayMessageBox(EALang.cancel_appointment_title,
|
GeneralFunctions.displayMessageBox(EALang.cancel_appointment_title,
|
||||||
EALang.write_appointment_removal_reason, buttons);
|
EALang.write_appointment_removal_reason, buttons);
|
||||||
|
|
||||||
$('#message_box').append('<textarea id="cancel-reason" rows="3"></textarea>');
|
$('<textarea/>', {
|
||||||
$('#cancel-reason').css('width', '100%');
|
'class': 'form-control',
|
||||||
|
'id': 'cancel-reason',
|
||||||
|
'rows': '3',
|
||||||
|
'css': {
|
||||||
|
'width': '100%'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.appendTo('#message_box');
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#delete-personal-information').on('click', function () {
|
$('#delete-personal-information').on('click', function () {
|
||||||
var buttons = [
|
var buttons = [
|
||||||
{
|
|
||||||
text: EALang.delete,
|
|
||||||
click: function () {
|
|
||||||
FrontendBookApi.deletePersonalInformation(GlobalVariables.customerToken);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
text: EALang.cancel,
|
text: EALang.cancel,
|
||||||
click: function () {
|
click: function () {
|
||||||
$('#message_box').dialog('close');
|
$('#message_box').dialog('close');
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: EALang.delete,
|
||||||
|
click: function () {
|
||||||
|
FrontendBookApi.deletePersonalInformation(GlobalVariables.customerToken);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue