Further styling for the cancel/delete header rows of the booking page.

This commit is contained in:
Alex Tselegidis 2020-08-31 18:34:06 +03:00
parent 935c36be60
commit 4b69cf1797
3 changed files with 29 additions and 19 deletions

View file

@ -48,9 +48,9 @@
</div> </div>
<?php if ($manage_mode): ?> <?php if ($manage_mode): ?>
<div id="cancel-appointment-frame" class="booking-header-bar row"> <div id="cancel-appointment-frame" class="row booking-header-bar">
<div class="col-12 col-md-10"> <div class="col-12 col-md-10">
<p><?= lang('cancel_appointment_hint') ?></p> <small><?= lang('cancel_appointment_hint') ?></small>
</div> </div>
<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"
@ -60,7 +60,7 @@
<textarea name="cancel_reason" style="display:none"></textarea> <textarea name="cancel_reason" style="display:none"></textarea>
<button id="cancel-appointment" class="btn btn-warning"> <button id="cancel-appointment" class="btn btn-warning btn-sm">
<?= lang('cancel') ?> <?= lang('cancel') ?>
</button> </button>
</form> </form>
@ -68,11 +68,11 @@
</div> </div>
<div class="booking-header-bar row"> <div class="booking-header-bar row">
<div class="col-12 col-md-10"> <div class="col-12 col-md-10">
<p><?= lang('delete_personal_information_hint') ?></p> <small><?= lang('delete_personal_information_hint') ?></small>
</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"><?= lang('delete') ?></button> class="btn btn-danger btn-sm"><?= lang('delete') ?></button>
</div> </div>
</div> </div>
<?php endif; ?> <?php endif; ?>
@ -92,7 +92,7 @@
<div id="wizard-frame-1" class="wizard-frame"> <div id="wizard-frame-1" class="wizard-frame">
<div class="frame-container"> <div class="frame-container">
<h4 class="frame-title"><?= lang('step_one_title') ?></h4> <h2 class="frame-title"><?= lang('step_one_title') ?></h2>
<div class="row frame-content"> <div class="row frame-content">
<div class="col"> <div class="col">
@ -197,7 +197,7 @@
<div id="wizard-frame-2" class="wizard-frame" style="display:none;"> <div id="wizard-frame-2" class="wizard-frame" style="display:none;">
<div class="frame-container"> <div class="frame-container">
<h4 class="frame-title"><?= lang('step_two_title') ?></h4> <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-7">
@ -236,7 +236,7 @@
<div id="wizard-frame-3" class="wizard-frame" style="display:none;"> <div id="wizard-frame-3" class="wizard-frame" style="display:none;">
<div class="frame-container"> <div class="frame-container">
<h4 class="frame-title"><?= lang('step_three_title') ?></h4> <h2 class="frame-title"><?= lang('step_three_title') ?></h2>
<div class="row frame-content"> <div class="row frame-content">
<div class="col-12 col-md-6"> <div class="col-12 col-md-6">
@ -332,7 +332,7 @@
<div id="wizard-frame-4" class="wizard-frame" style="display:none;"> <div id="wizard-frame-4" class="wizard-frame" style="display:none;">
<div class="frame-container"> <div class="frame-container">
<h4 class="frame-title"><?= lang('step_four_title') ?></h4> <h2 class="frame-title"><?= lang('step_four_title') ?></h2>
<div class="row frame-content"> <div class="row frame-content">
<div id="appointment-details" class="col-12 col-md-6"></div> <div id="appointment-details" class="col-12 col-md-6"></div>
<div id="customer-details" class="col-12 col-md-6"></div> <div id="customer-details" class="col-12 col-md-6"></div>

View file

@ -19,7 +19,7 @@ body {
} }
body { body {
background-color: #FAFAFA; /* #f1f3f3 */ background-color: #FAFAFA;
} }
#main { #main {
@ -84,7 +84,7 @@ body {
#book-appointment-wizard .frame-container .frame-title { #book-appointment-wizard .frame-container .frame-title {
font-weight: lighter; font-weight: lighter;
text-align: center; text-align: center;
margin-bottom: 15px; margin-bottom: 30px;
color: #666; color: #666;
} }
@ -285,11 +285,13 @@ body {
#book-appointment-wizard #company-name { #book-appointment-wizard #company-name {
display: inline-block; display: inline-block;
float: left; float: left;
margin: 10px auto;
} }
#book-appointment-wizard #steps { #book-appointment-wizard #steps {
display: inline-block; display: inline-block;
float: right; float: right;
margin: 5px auto;
} }
#book-appointment-wizard .wizard-frame { #book-appointment-wizard .wizard-frame {
@ -371,17 +373,23 @@ body {
.booking-header-bar { .booking-header-bar {
padding: 15px 0; padding: 15px 0;
margin: 0; margin: 0;
background: #f6f5ee; background: #f3f2e7;
border-bottom: 1px solid #E2E2E2; border-bottom: 1px solid #e4e1c9;
} text-align: center;
.booking-header-bar p {
margin-top: 2px;
margin-bottom: 0;
} }
.ui-dialog .ui-dialog-title { .ui-dialog .ui-dialog-title {
font-size: 1.2em; font-size: 1.2em;
} }
@media (min-width: 768px) {
.booking-header-bar {
padding: 15px 0;
margin: 0;
background: #f3f2e7;
border-bottom: 1px solid #e4e1c9;
text-align: left;
}
}

View file

@ -400,8 +400,10 @@ li.language:hover {
margin-bottom: -30px; margin-bottom: -30px;
} }
#message_box pre { #message_box pre,
#message_box .card {
max-height: 250px; max-height: 250px;
max-width: 500px;
} }
body .popover-content strong { body .popover-content strong {