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"> <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; ?>

View file

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

View file

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

View file

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