From 18fa13733643292bfcd687b2357395f7cffb1824 Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Mon, 7 Sep 2020 13:04:07 +0300
Subject: [PATCH] Styling corrections to the popover buttons

---
 assets/css/general.css                   | 23 ++++++++++++++++-------
 assets/js/backend_calendar_table_view.js | 18 +++++++++++-------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/assets/css/general.css b/assets/css/general.css
index 2597a367..4d596868 100644
--- a/assets/css/general.css
+++ b/assets/css/general.css
@@ -400,21 +400,30 @@ li.language:hover {
     margin-bottom: -30px;
 }
 
-#message_box pre,
-#message_box .card {
+#message-box pre,
+#message-box .card {
     max-height: 250px;
     max-width: 500px;
 }
 
-body .popover-content strong {
-    min-width: 80px; display:inline-block;
+body .popover {
+    max-width: 300px;
 }
 
-body .popover-content button {
-    margin-right: 10px;
+body .popover-body strong {
+    min-width: 90px;
+    display:inline-block;
 }
 
-body .popover-content a {
+body .popover-body button {
+    font-size: 1em;
+    box-sizing: border-box;
+    margin: 0;
+    height: 2.1em;
+    padding: 0 .6em;
+}
+
+body .popover-body a {
     margin-right: 5px;
 }
 
diff --git a/assets/js/backend_calendar_table_view.js b/assets/js/backend_calendar_table_view.js
index bb274b9a..069f559b 100755
--- a/assets/js/backend_calendar_table_view.js
+++ b/assets/js/backend_calendar_table_view.js
@@ -132,7 +132,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
          * Hides the open popover element.
          */
         $calendar.on('click', '.close-popover', function () {
-            $(this).parents('.popover').popover('destroy');
+            $(this).parents('.popover').popover('dispose');
         });
 
         /**
@@ -141,7 +141,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
          * Enables the edit dialog of the selected table event.
          */
         $calendar.on('click', '.edit-popover', function () {
-            $(this).parents('.popover').popover('destroy');
+            $(this).parents('.popover').popover('dispose');
 
             var $dialog;
 
@@ -208,7 +208,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
          * deletion then an ajax call is made to the server and deletes the appointment from the database.
          */
         $calendar.on('click', '.delete-popover', function () {
-            $(this).parents('.popover').popover('destroy'); // Hide the popover.
+            $(this).parents('.popover').popover('dispose'); // Hide the popover.
 
             var url;
             var data;
@@ -271,8 +271,12 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
                 GeneralFunctions.displayMessageBox(EALang.delete_appointment_title,
                     EALang.write_appointment_removal_reason, buttons);
 
-                $('#message-box').append('<textarea id="delete-reason" rows="3"></textarea>');
-                $('#delete-reason').css('width', '100%');
+                $('<textarea/>', {
+                    'class': 'form-control w-100',
+                    'id': 'delete-reason',
+                    'rows': '3'
+                })
+                    .appendTo('#message-box');
             } else {
                 // Do not display confirmation prompt.
                 url = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_delete_unavailable';
@@ -1019,7 +1023,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
      * above the calendar item.
      */
     function onEventClick(event, jsEvent) {
-        $('.popover').popover('destroy'); // Close all open popovers.
+        $('.popover').popover('dispose'); // Close all open popovers.
 
         var $html;
         var displayEdit;
@@ -1263,7 +1267,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
                     $('<br/>'),
 
                     $('<strong/>', {
-                        'text': EALang.phone_number
+                        'text': EALang.phone
                     }),
                     GeneralFunctions.renderPhoneIcon(event.data.customer.phone_number),
                     $('<span/>', {