mirror/webgui
1
0
Fork 0
mirror of https://github.com/unraid/webgui.git synced 2026-01-06 09:39:58 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat: footer layout, right side horizontally scrolls for improved responsiveness and UX

Browse Source
This commit is contained in:
Zack Spear
2025-07-22 11:51:00 -07:00
parent 52b1315b20
commit 1b95edc9e1
2 changed files with 62 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php
View File

@@ -56,23 +56,21 @@ function getArrayStatus($var) {
</span>
<span id="user-notice" class="red-text"></span>
</div>
<div class="footer-right">
<span id="copyright">
<unraid-theme-switcher
current="<?=$theme?>"
themes='<?=htmlspecialchars(json_encode(['azure', 'gray', 'black', 'white']), ENT_QUOTES, 'UTF-8')?>'>
</unraid-theme-switcher>
Unraid&reg; webGui &copy;<?=releaseDateYear()?>, Lime Technology, Inc.
<a
class="footer-link"
href="https://docs.unraid.net/go/manual/"
target="_blank"
rel="noopener noreferrer"
title="<?=_('Online manual')?>"
>
<i class="fa fa-book"></i> <?=_('manual')?>
</a>
</span>
<div id="copyright" class="footer-right">
<unraid-theme-switcher
current="<?=$theme?>"
themes='<?=htmlspecialchars(json_encode(['azure', 'gray', 'black', 'white']), ENT_QUOTES, 'UTF-8')?>'>
</unraid-theme-switcher>
<span>Unraid&reg; webGui &copy;<?=releaseDateYear()?>, Lime Technology, Inc.</span>
<a
class="footer-link"
href="https://docs.unraid.net/go/manual/"
target="_blank"
rel="noopener noreferrer"
title="<?=_('Online manual')?>"
>
<i class="fa fa-book"></i> <?=_('manual')?>
</a>
<? if ($wlan0): ?>
<span id="wlan0" class="grey-text" onclick="wlanSettings()">
<i class="fa fa-wifi fa-fw"></i>

62
emhttp/plugins/dynamix/styles/default-base.css
View File

@@ -657,15 +657,25 @@ div.title span img {
padding: .5rem 1rem;
width: 100%;
text-align: center;
display: grid;
grid-template-columns: 1fr;
grid-gap: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: auto;
/* for some reason these have padding by default...so we're removing it in the footer without needing to refactor all usages of these classes throughout the webgui */
.green,
.red,
.orange,
.blue {
padding-left: 0;
padding-right: 0;
}
}
@media (min-width: 768px) {
#footer {
grid-template-columns: minmax(0, auto) minmax(0, auto);
flex-direction: row;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
@@ -689,21 +699,47 @@ div.title span img {
justify-content: center;
align-items: center;
gap: 1rem;
flex: 1 1 auto; /* Take available space */
}
.footer-right {
.footer-right,
#copyright {
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
flex-wrap: nowrap;
align-items: center;
gap: 1rem;
overflow-x: auto;
overflow-y: hidden;
font-family: bitstream;
font-size: 1.1rem;
flex: 0 0 auto; /* Default: natural size for mobile column layout */
width: 100%; /* Full width on mobile */
min-width: 0; /* Critical: allows flex item to shrink below content size */
-webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS */
scrollbar-width: thin; /* Firefox */
}
.footer-right > *,
#copyright > * {
flex: 0 0 auto; /* Prevent shrinking and growing */
white-space: nowrap;
}
/* Show scrollbar on hover for better UX */
.footer-right:hover,
#copyright:hover {
scrollbar-width: auto;
}
@media (min-width: 768px) {
.footer-left,
.footer-right {
.footer-left {
justify-content: flex-start;
flex: 0 0 auto; /* Only take needed space on desktop */
}
.footer-right {
justify-content: flex-end;
.footer-right,
#copyright {
text-align: right;
justify-content: flex-start; /* Start from left to enable overflow */
flex: 1 1 0; /* Take remaining space */
width: auto; /* Override mobile full width */
min-width: 0; /* Critical for overflow to work */
}
}
.footer-link {
@@ -711,10 +747,6 @@ div.title span img {
align-items: center;
gap: 0.5rem;
}
#copyright {
font-family: bitstream;
font-size: 1.1rem;
}
.green {
color: var(--green-800);
padding-left: 5px;