From de498ab5c26caa0c1603bce9c62627793e5cad91 Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Mon, 7 Sep 2020 13:18:25 +0300
Subject: [PATCH] Styling for the table view calendar header row.

---
 assets/css/backend.css                   | 40 ++++++++++--------------
 assets/css/general.css                   |  3 +-
 assets/js/backend_calendar_table_view.js |  5 ++-
 3 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/assets/css/backend.css b/assets/css/backend.css
index 7f7dae73..27cd4a2e 100644
--- a/assets/css/backend.css
+++ b/assets/css/backend.css
@@ -466,11 +466,7 @@ body .form-horizontal .controls {
 
 #calendar .calendar-header input {
     width: 120px;
-}
-
-#calendar .calendar-header .btn,
-#calendar .calendar-header input {
-    margin: 10px 10px 10px 0;
+    vertical-align: middle;
 }
 
 #calendar .calendar-header select {
@@ -478,31 +474,24 @@ body .form-horizontal .controls {
 }
 
 #calendar .calendar-header label {
-    margin: 0 10px;
+    margin: 10px 0;
+    vertical-align: middle;
+    display: block;
 }
 
 #calendar .calendar-header .select2-container--default .select2-selection--multiple {
-    border: none !important;
-    border-bottom: 1px solid #ddd !important;
-    border-radius: 0 !important;
-    height: 29px;
+    height: 38px;
 }
 
-#calendar .calendar-header .select2-search__field {
-    margin: 0 !important;
+#calendar .select2-container--default.select2-container--focus .select2-selection--multiple {
+    border-color: #80bdff;
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
 }
 
-#calendar .calendar-header .select2-container--default .select2-selection--multiple .select2-selection__choice {
-    margin-top: 0;
-    padding: 0 3px;
-    border-radius: 2px;
-    border: 1px solid #d9d9d9;
-    font-size: 12px;
-}
-
-.select2-dropdown {
-    border: 1px solid #ddd;
-    border-radius: 0;
+#calendar .select2-container--default .select2-selection--multiple .select2-selection__choice {
+    background-color: #f8f9fa;
+    border: 1px solid #ced4da;
 }
 
 #calendar .calendar-view {
@@ -600,6 +589,11 @@ body .form-horizontal .controls {
         font-size: 22px;
         display: inline-block;
     }
+
+    #calendar .calendar-header label {
+        display: inline-block;
+        margin: 0 10px;
+    }
 }
 
 
diff --git a/assets/css/general.css b/assets/css/general.css
index 4d596868..45a9fee4 100644
--- a/assets/css/general.css
+++ b/assets/css/general.css
@@ -83,7 +83,8 @@ body .ui-widget.ui-widget-content {
 }
 
 body #ui-datepicker-div {
-    margin-top: 4px;
+    margin-top: 5px;
+    z-index: 5 !important;
 }
 
 body .ui-datepicker {
diff --git a/assets/js/backend_calendar_table_view.js b/assets/js/backend_calendar_table_view.js
index 069f559b..d4d98825 100755
--- a/assets/js/backend_calendar_table_view.js
+++ b/assets/js/backend_calendar_table_view.js
@@ -267,7 +267,6 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
                     }
                 ];
 
-
                 GeneralFunctions.displayMessageBox(EALang.delete_appointment_title,
                     EALang.write_appointment_removal_reason, buttons);
 
@@ -318,7 +317,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
             .appendTo('#calendar');
 
         $('<button/>', {
-            'class': 'btn btn-xs btn-light previous',
+            'class': 'btn btn-xs btn-light previous mr-2',
             'html': [
                 $('<span/>', {
                     'class': 'fas fa-chevron-left'
@@ -329,7 +328,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
 
         $('<input/>', {
             'type': 'text',
-            'class': 'form-control d-inline-block select-date',
+            'class': 'form-control d-inline-block select-date mr-2',
             'value': GeneralFunctions.formatDate(new Date(), GlobalVariables.dateFormat)
         })
             .appendTo($calendarHeader);