Improved the footer display for mobile and desktop viewports

This commit is contained in:
Alex Tselegidis 2021-12-18 19:32:26 +01:00
parent 8ea5b1c4eb
commit 84df2423c2
2 changed files with 22 additions and 45 deletions

View file

@ -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>

View file

@ -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
-------------------------------------------------------------------- */