fix calendar height to just adjust depending on the content and other fixes

This commit is contained in:
Janina Phillips 2020-07-01 09:02:11 -04:00
parent a4056eb50b
commit b6391ab668
4 changed files with 39 additions and 28 deletions

View file

@ -178,7 +178,7 @@
<h3 class="frame-title"><?= lang('step_two_title') ?></h3> <h3 class="frame-title"><?= lang('step_two_title') ?></h3>
<div class="frame-content row"> <div class="frame-content row">
<div class="col-xs-12 col-md-7 pl-0"> <div class="col-xs-12 col-md-7 pl-0 pr-0 pr-md-3 mb-4 mb-md-0 d-flex">
<div id="select-date"></div> <div id="select-date"></div>
</div> </div>
@ -256,28 +256,21 @@
</div> </div>
<?php if ($display_terms_and_conditions): ?> <?php if ($display_terms_and_conditions): ?>
<label> <div class="form-check mb-3">
<input type="checkbox" class="required" id="accept-to-terms-and-conditions"> <input type="checkbox" class="required form-check-input" id="accept-to-terms-and-conditions">
<?= strtr(lang('read_and_agree_to_terms_and_conditions'), <label class="form-check-label" for="accept-to-terms-and-conditions">
[ <?= strtr(lang('read_and_agree_to_terms_and_conditions'),
'{$link}' => '<a href="#" data-toggle="modal" data-target="#terms-and-conditions-modal">', [
'{/$link}' => '</a>' '{$link}' => '<a href="#" data-toggle="modal" data-target="#terms-and-conditions-modal">',
]) '{/$link}' => '</a>'
?> ])
</label> ?>
</label>
</div>
<?php endif ?> <?php endif ?>
<?php if ($display_privacy_policy): ?> <?php if ($display_privacy_policy): ?>
<!-- <label> <div class="form-check mb-3">
<input type="checkbox" class="required" id="accept-to-privacy-policy">
<?= strtr(lang('read_and_agree_to_privacy_policy'),
[
'{$link}' => '<a href="#" data-toggle="modal" data-target="#privacy-policy-modal">',
'{/$link}' => '</a>'
])
?>
</label> -->
<div class="form-check">
<input type="checkbox" class="required form-check-input" id="accept-to-privacy-policy"> <input type="checkbox" class="required form-check-input" id="accept-to-privacy-policy">
<label class="form-check-label" for="accept-to-privacy-policy"> <label class="form-check-label" for="accept-to-privacy-policy">
<?= strtr(lang('read_and_agree_to_privacy_policy'), <?= strtr(lang('read_and_agree_to_privacy_policy'),

View file

@ -23,8 +23,8 @@ body {
} }
#main { #main {
display: table; display:flex;
vertical-align: middle; flex-direction: column;
} }
#main .wrapper { #main .wrapper {
@ -43,17 +43,21 @@ body {
} }
#book-appointment-wizard #header { #book-appointment-wizard #header {
align-items: center;
display: flex;
padding: 5px; padding: 5px;
height: 90px; height: 90px;
background: #3DD481; background: #3DD481;
border-bottom: 4px solid #c0f1d6; border-bottom: 4px solid #c0f1d6;
justify-content: space-between;
margin-bottom: 1rem;
} }
#book-appointment-wizard #company-name { #book-appointment-wizard #company-name {
display: inline-block; display: inline-block;
font-size: 24px; font-size: 24px;
color: #FFF; color: #FFF;
margin: 16px 10px 0 15px; margin: 0 10px 0 15px;
float: left; float: left;
} }
@ -61,12 +65,10 @@ body {
width: 180px; width: 180px;
display: inline-block; display: inline-block;
float: right; float: right;
margin-top: 17px;
} }
#book-appointment-wizard .wizard-frame { #book-appointment-wizard .wizard-frame {
padding: 10px 20px; padding: 10px 20px;
height: 570px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@ -322,7 +324,6 @@ body {
} }
#book-appointment-wizard .wizard-frame #select-date { #book-appointment-wizard .wizard-frame #select-date {
width: 260px;
margin: auto; /* center */ margin: auto; /* center */
} }

View file

@ -304,6 +304,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
$html = $('<div/>', { $html = $('<div/>', {
'html': [ 'html': [
$('<strong/>', { $('<strong/>', {
'class': 'd-inline-block mr-2',
'text': EALang.start 'text': EALang.start
}), }),
$('<span/>', { $('<span/>', {
@ -312,6 +313,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
$('<br/>'), $('<br/>'),
$('<strong/>', { $('<strong/>', {
'class': 'd-inline-block mr-2',
'text': EALang.end 'text': EALang.end
}), }),
$('<span/>', { $('<span/>', {
@ -361,6 +363,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
$html = $('<div/>', { $html = $('<div/>', {
'html': [ 'html': [
$('<strong/>', { $('<strong/>', {
'class': 'd-inline-block mr-2',
'text': EALang.provider 'text': EALang.provider
}), }),
$('<span/>', { $('<span/>', {
@ -369,6 +372,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
$('<br/>'), $('<br/>'),
$('<strong/>', { $('<strong/>', {
'class': 'd-inline-block mr-2',
'text': EALang.start 'text': EALang.start
}), }),
$('<span/>', { $('<span/>', {
@ -377,6 +381,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
$('<br/>'), $('<br/>'),
$('<strong/>', { $('<strong/>', {
'class': 'd-inline-block mr-2',
'text': EALang.end 'text': EALang.end
}), }),
$('<span/>', { $('<span/>', {
@ -385,6 +390,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
$('<br/>'), $('<br/>'),
$('<strong/>', { $('<strong/>', {
'class': 'd-inline-block mr-2',
'text': EALang.timezone 'text': EALang.timezone
}), }),
$('<span/>', { $('<span/>', {
@ -418,6 +424,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
$html = $('<div/>', { $html = $('<div/>', {
'html': [ 'html': [
$('<strong/>', { $('<strong/>', {
'class': 'd-inline-block mr-2',
'text': EALang.start 'text': EALang.start
}), }),
$('<span/>', { $('<span/>', {
@ -426,6 +433,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
$('<br/>'), $('<br/>'),
$('<strong/>', { $('<strong/>', {
'class': 'd-inline-block mr-2',
'text': EALang.end 'text': EALang.end
}), }),
$('<span/>', { $('<span/>', {
@ -434,6 +442,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
$('<br/>'), $('<br/>'),
$('<strong/>', { $('<strong/>', {
'class': 'd-inline-block mr-2',
'text': EALang.timezone 'text': EALang.timezone
}), }),
$('<span/>', { $('<span/>', {
@ -442,6 +451,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
$('<br/>'), $('<br/>'),
$('<strong/>', { $('<strong/>', {
'class': 'd-inline-block mr-2',
'text': EALang.service 'text': EALang.service
}), }),
$('<span/>', { $('<span/>', {
@ -450,6 +460,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
$('<br/>'), $('<br/>'),
$('<strong/>', { $('<strong/>', {
'class': 'd-inline-block mr-2',
'text': EALang.provider 'text': EALang.provider
}), }),
GeneralFunctions.renderMapIcon(event.data.provider), GeneralFunctions.renderMapIcon(event.data.provider),
@ -459,28 +470,34 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
$('<br/>'), $('<br/>'),
$('<strong/>', { $('<strong/>', {
'class': 'd-inline-block mr-2',
'text': EALang.customer 'text': EALang.customer
}), }),
GeneralFunctions.renderMapIcon(event.data.customer), GeneralFunctions.renderMapIcon(event.data.customer),
$('<span/>', { $('<span/>', {
'class': 'd-inline-block ml-1',
'text': event.data.customer.first_name + ' ' + event.data.customer.last_name 'text': event.data.customer.first_name + ' ' + event.data.customer.last_name
}), }),
$('<br/>'), $('<br/>'),
$('<strong/>', { $('<strong/>', {
'class': 'd-inline-block mr-2',
'text': EALang.email 'text': EALang.email
}), }),
GeneralFunctions.renderMailIcon(event.data.customer.email), GeneralFunctions.renderMailIcon(event.data.customer.email),
$('<span/>', { $('<span/>', {
'class': 'd-inline-block ml-1',
'text': event.data.customer.email 'text': event.data.customer.email
}), }),
$('<br/>'), $('<br/>'),
$('<strong/>', { $('<strong/>', {
'class': 'd-inline-block mr-2',
'text': EALang.phone_number 'text': EALang.phone_number
}), }),
GeneralFunctions.renderPhoneIcon(event.data.customer.phone_number), GeneralFunctions.renderPhoneIcon(event.data.customer.phone_number),
$('<span/>', { $('<span/>', {
'class': 'd-inline-block ml-1',
'text': event.data.customer.phone_number 'text': event.data.customer.phone_number
}), }),
$('<br/>'), $('<br/>'),

View file

@ -471,13 +471,13 @@ window.FrontendBook = window.FrontendBook || {};
var $acceptToTermsAndConditions = $('#accept-to-terms-and-conditions'); var $acceptToTermsAndConditions = $('#accept-to-terms-and-conditions');
if ($acceptToTermsAndConditions.length && !$acceptToTermsAndConditions.prop('checked')) { if ($acceptToTermsAndConditions.length && !$acceptToTermsAndConditions.prop('checked')) {
$acceptToTermsAndConditions.parents('label').addClass('text-danger'); $acceptToTermsAndConditions.parents('.form-check').addClass('text-danger');
throw new Error(EALang.fields_are_required); throw new Error(EALang.fields_are_required);
} }
var $acceptToPrivacyPolicy = $('#accept-to-privacy-policy'); var $acceptToPrivacyPolicy = $('#accept-to-privacy-policy');
if ($acceptToPrivacyPolicy.length && !$acceptToPrivacyPolicy.prop('checked')) { if ($acceptToPrivacyPolicy.length && !$acceptToPrivacyPolicy.prop('checked')) {
$acceptToPrivacyPolicy.parents('label').addClass('text-danger'); $acceptToPrivacyPolicy.parents('.form-check').addClass('text-danger');
throw new Error(EALang.fields_are_required); throw new Error(EALang.fields_are_required);
} }