mirror/webgui
1
0
Fork 0
mirror of https://github.com/unraid/webgui.git synced 2026-02-27 04:41:20 -06:00
Code Issues Packages Projects Releases Wiki Activity

refactor: update footer layout and styles for improved responsiveness

Browse Source 
- Restructured footer HTML to use flexbox for better alignment and spacing.
- Adjusted CSS styles for #footer, including padding and box-sizing.
- Removed unnecessary float properties and improved layout consistency.
This commit is contained in:
Zack Spear
2025-05-06 15:54:52 -07:00
parent 2401c2b8d3
commit f2e4d6fb18
3 changed files with 50 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
View File

@@ -234,8 +234,6 @@ $(window).scroll(function() {
$('.back_to_top').fadeOut(scrollDuration);
}
<?if ($themeHelper->isTopNavTheme()):?>
var top = $('div#header').height()-1; // header height has 1 extra pixel to cover overlap
$('div#menu').css($(this).scrollTop() > top ? {position:'fixed',top:'0'} : {position:'absolute',top:top+'px'});
// banner
$('div.upgrade_notice').css($(this).scrollTop() > 24 ? {position:'fixed',top:'0'} : {position:'absolute',top:'24px'});
<?endif;?>

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

@@ -42,31 +42,40 @@ function getArrayStatus($var) {
?>
<footer id="footer">
<span id="statusraid">
<span id="statusbar">
<? $status = getArrayStatus($var); ?>
<span class="<?=$status['class']?> strong">
<i class="fa fa-<?=$status['icon']?>"></i> <?=$status['text']?>
<div class="footer-left">
<span id="statusraid">
<span id="statusbar">
<? $status = getArrayStatus($var); ?>
<span class="<?=$status['class']?> strong">
<i class="fa fa-<?=$status['icon']?>"></i> <?=$status['text']?>
</span>
<? if ($status['progress']): ?>
&bullet;<span class="blue strong tour"><?=$status['progress']?></span>
<? endif; ?>
</span>
<? if ($status['progress']): ?>
&bullet;<span class="blue strong tour"><?=$status['progress']?></span>
<? endif; ?>
</span>
</span>
<span id="user-notice" class="red-text"></span>
<? if ($wlan0): ?>
<span id="wlan0" class="grey-text" onclick="wlanSettings()">
<i class="fa fa-wifi fa-fw"></i>
<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"
title="<?=_('Online manual')?>"
>
<i class="fa fa-book"></i> <?=_('manual')?>
</a>
</span>
<? endif; ?>
<span id="copyright">
Unraid&reg; webGui &copy;<?=releaseDateYear()?>, Lime Technology, Inc.
<a href="https://docs.unraid.net/go/manual/" target="_blank" title="<?=_('Online manual')?>">
<i class="fa fa-book"></i> <?=_('manual')?>
</a>
<unraid-theme-switcher
current="<?=$theme?>"
themes='<?=htmlspecialchars(json_encode(['azure', 'gray', 'black', 'white']), ENT_QUOTES, 'UTF-8')?>'>
</unraid-theme-switcher>
</span>
<? if ($wlan0): ?>
<span id="wlan0" class="grey-text" onclick="wlanSettings()">
<i class="fa fa-wifi fa-fw"></i>
</span>
<? endif; ?>
</div>
</footer>

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

@@ -564,30 +564,38 @@ div.title.shift {
clear: both;
}
#footer {
box-sizing: border-box;
position: fixed;
bottom: 0;
left: 0;
color: var(--footer-text);
background-color: var(--footer-background-color);
padding: 5px 0;
padding: .5rem 1rem;
width: 100%;
height: 1.6rem;
line-height: 1.6rem;
text-align: center;
z-index: 10000;
}
#statusraid {
float: left;
padding-left: 10px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
#countdown {
margin: 0 auto;
}
.footer-right {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.footer-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
#copyright {
font-family: bitstream;
font-size: 1.1rem;
float: right;
padding-right: 10px;
}
.green {
color: var(--green-800);
@@ -1537,8 +1545,6 @@ pre#swalbody p {
margin-block-end: 1em;
}
span#wlan0 {
float: right;
margin-right: 10px;
cursor: pointer;
}