Added additional styling for the appointment cancellation and customer data removal modals.

This commit is contained in:
Alex Tselegidis 2020-08-31 17:26:28 +03:00
parent ad320cab52
commit 7a496f0166
4 changed files with 43 additions and 30 deletions

View file

@ -55,9 +55,14 @@
<div class="col-12 col-md-2">
<form id="cancel-appointment-form" method="post"
action="<?= site_url('appointments/cancel/' . $appointment_data['hash']) ?>">
<input type="hidden" name="csrfToken" value="<?= $this->security->get_csrf_hash() ?>"/>
<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>
</div>
</div>
@ -67,7 +72,7 @@
</div>
<div class="col-12 col-md-2">
<button id="delete-personal-information"
class="btn btn-danger btn-sm"><?= lang('delete') ?></button>
class="btn btn-danger"><?= lang('delete') ?></button>
</div>
</div>
<?php endif; ?>

View file

@ -369,9 +369,9 @@ body {
------------------------------------------------------------------------- */
.booking-header-bar {
padding: 10px 0;
padding: 15px 0;
margin: 0;
background: #FAFAFA;
background: #f6f5ee;
border-bottom: 1px solid #E2E2E2;
}
@ -380,10 +380,6 @@ body {
margin-bottom: 0;
}
#cancel-appointment-frame {
text-align: center;
}
.ui-dialog .ui-dialog-title {
font-size: 1.2em;
}

View file

@ -27,7 +27,7 @@ body .custom-qtip {
}
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;
}
@ -42,14 +42,14 @@ body .ui-dialog .ui-dialog-titlebar-close {
}
body .ui-draggable .ui-dialog-titlebar {
background: #39c678;
background: #429a82;
color: #FFF;
font-size: 1.5em;
font-size: 1.2em;
font-weight: lighter;
padding: 12px 10px;
border: none;
border-bottom: 4px solid #c0f1d6;
margin-bottom: 10px;
border: none;
border-radius: 0;
}
body .ui-dialog {
@ -64,6 +64,10 @@ body .ui-dialog .ui-dialog-buttonpane {
border: none;
}
body .ui-dialog .ui-dialog-buttonpane .btn {
min-width: 120px;
}
body .ui-button .ui-icon,
body .ui-button:hover .ui-icon {
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 textarea,
body .ui-widget button {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
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: 1rem;
}
body .ui-datepicker .ui-datepicker-buttonpane button {

View file

@ -368,46 +368,54 @@ window.FrontendBook = window.FrontendBook || {};
*/
$('#cancel-appointment').click(function (event) {
var buttons = [
{
text: EALang.cancel,
click: function () {
$('#message_box').dialog('close');
}
},
{
text: 'OK',
click: function () {
if ($('#cancel-reason').val() === '') {
$('#cancel-reason').css('border', '2px solid red');
$('#cancel-reason').css('border', '2px solid #DC3545');
return;
}
$('#cancel-appointment-form textarea').val($('#cancel-reason').val());
$('#cancel-appointment-form').submit();
}
},
{
text: EALang.cancel,
click: function () {
$('#message_box').dialog('close');
}
}
];
GeneralFunctions.displayMessageBox(EALang.cancel_appointment_title,
EALang.write_appointment_removal_reason, buttons);
$('#message_box').append('<textarea id="cancel-reason" rows="3"></textarea>');
$('#cancel-reason').css('width', '100%');
$('<textarea/>', {
'class': 'form-control',
'id': 'cancel-reason',
'rows': '3',
'css': {
'width': '100%'
}
})
.appendTo('#message_box');
return false;
});
$('#delete-personal-information').on('click', function () {
var buttons = [
{
text: EALang.delete,
click: function () {
FrontendBookApi.deletePersonalInformation(GlobalVariables.customerToken);
}
},
{
text: EALang.cancel,
click: function () {
$('#message_box').dialog('close');
}
},
{
text: EALang.delete,
click: function () {
FrontendBookApi.deletePersonalInformation(GlobalVariables.customerToken);
}
}
];