From 84df2423c23a707de4957a4727cd5d5dc02692f9 Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Sat, 18 Dec 2021 19:32:26 +0100
Subject: [PATCH] Improved the footer display for mobile and desktop viewports

---
 .../views/components/backend_footer.php       | 46 +++++++++----------
 assets/css/layouts/backend_layout.scss        | 21 ---------
 2 files changed, 22 insertions(+), 45 deletions(-)

diff --git a/application/views/components/backend_footer.php b/application/views/components/backend_footer.php
index 767aae71..322da8c4 100644
--- a/application/views/components/backend_footer.php
+++ b/application/views/components/backend_footer.php
@@ -3,49 +3,47 @@
  * @var string $user_display_name
  */
 ?>
-<div id="footer" class="d-md-flex justify-content-md-between">
-    <div id="footer-content">
+<div id="footer" class="d-lg-flex justify-content-lg-start align-items-lg-center p-2 text-center text-lg-left">
+    <div class="mb-3 me-lg-5 mb-lg-0">
         <img class="me-1" src="<?= base_url('assets/img/logo-16x16.png') ?>" alt="Easy!Appointments Logo">
-        <a href="https://easyappointments.org">
-            Easy!Appointments
-        </a>
+        
+        <a href="https://easyappointments.org">Easy!Appointments</a>
 
-        v<?= config('version') ?>
-        <?php if (config('release_label')): ?>
-            - <?= config('release_label') ?>
-        <?php endif ?>
-
-        |
-
-        <img class="mx-1" src="<?= base_url('assets/img/alextselegidis-logo-16x16.png') ?>" alt="Alex Tselegidis Logo">
-        <a href="https://alextselegidis.com">
-            Alex Tselegidis
-        </a>
+        <span>v<?= config('version') ?></span>
+    </div>
+    
+    <div class="mb-3 me-lg-5 mb-lg-0">
+        <img class="me-1" src="<?= base_url('assets/img/alextselegidis-logo-16x16.png') ?>" alt="Alex Tselegidis Logo">
+        
+        <a href="https://alextselegidis.com">Alex Tselegidis</a>
+        
         &copy; <?= date('Y') ?> - Software Development
+    </div>
 
-        |
-
+    <div class="mb-3 me-lg-5 mb-lg-0">
         <?= lang('licensed_under') ?>
         <a href="https://www.gnu.org/licenses/gpl-3.0.en.html">
             GPL-3.0
         </a>
+    </div>
 
-        |
-
+    <div class="mb-3 me-lg-5 mb-lg-0">
         <span id="select-language" class="badge bg-secondary">
             <i class="fas fa-language me-2"></i>
         	<?= ucfirst(config('language')) ?>
         </span>
+    </div>
 
-        |
-
+    <div class="mb-3 me-lg-5 mb-lg-0">
         <a href="<?= site_url('appointments') ?>">
             <?= lang('go_to_booking_page') ?>
         </a>
     </div>
 
-    <div id="footer-user-display-name">
-        <?= lang('hello') . ', ' . $user_display_name ?>!
+    <div class="ms-lg-auto">
+        <strong id="footer-user-display-name">
+            <?= lang('hello') . ', ' . $user_display_name ?>!
+        </strong>
     </div>
 </div>
 
diff --git a/assets/css/layouts/backend_layout.scss b/assets/css/layouts/backend_layout.scss
index 5c2f20f4..52e632ed 100644
--- a/assets/css/layouts/backend_layout.scss
+++ b/assets/css/layouts/backend_layout.scss
@@ -77,20 +77,6 @@ root {
     background-color: #f7f7f7;
     border-top: 1px solid #ddd;
     font-size: 11px;
-    overflow: auto;
-}
-
-#footer #footer-content {
-    padding: 10px 15px;
-    display: inline-block;
-    float: left;
-    line-height: 2;
-}
-
-#footer #footer-user-display-name {
-    display: inline-block;
-    padding: 10px 15px;
-    font-weight: bold;
 }
 
 #notification strong {
@@ -207,13 +193,6 @@ body legend {
     color: #666;
 }
 
-@media (min-width: 768px) {
-    #footer #footer-user-display-name {
-        float: right;
-        text-align: right;
-    }
-}
-
 /* BACKEND COMPONENTS
    -------------------------------------------------------------------- */