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

application/views/appointments/book.php

@@ -178,7 +178,7 @@
                         <h3 class="frame-title"><?= lang('step_two_title') ?></h3>
 
                         <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>
 
@@ -256,8 +256,9 @@
                     </div>
 
                     <?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">
+                            <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">',
@@ -265,19 +266,11 @@
                                     ])
                                 ?>
                             </label>
+                        </div>
                     <?php endif ?>
 
                     <?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">
                             <label class="form-check-label" for="accept-to-privacy-policy">
                                 <?= strtr(lang('read_and_agree_to_privacy_policy'),

assets/css/frontend.css

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

assets/js/backend_calendar_default_view.js

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

assets/js/frontend_book.js

@@ -471,13 +471,13 @@ window.FrontendBook = window.FrontendBook || {};
 
             var $acceptToTermsAndConditions = $('#accept-to-terms-and-conditions');
             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);
             }
 
             var $acceptToPrivacyPolicy = $('#accept-to-privacy-policy');
             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);
             }