mirror/webgui
1
0
Fork 0
mirror of https://github.com/unraid/webgui.git synced 2026-04-25 03:39:23 -05:00
Code Issues Packages Projects Releases Wiki Activity

style: refine layout and spacing in DashStats.page and CSS files

Browse Source 
- Adjusted gap values in DashStats.page for improved alignment and spacing.
- Updated CSS in DashStats.css to enhance layout controls and added new styles for tile-header-right-controls.
- Commented out letter-spacing in default-base.css for better text presentation and adjusted control styles for consistency.

This update aims to enhance the visual clarity and responsiveness of the dashboard layout.
This commit is contained in:
Zack Spear
2025-06-20 15:38:13 -07:00
parent a2973eba21
commit b05f819fac
3 changed files with 48 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
emhttp/plugins/dynamix/DashStats.page
+10 -10
View File
@@ -340,7 +340,7 @@ switch ($themeHelper->getThemeName()) { // $themeHelper set in DefaultPageLayout
</tr>
<tr>
<td>
<span class='flex flex-row flex-wrap items-center gap-8'>
<span class='flex flex-row flex-wrap items-center gap-4'>
<span class="head_info">
<span id='cpu-temp'></span>
</span>
@@ -421,7 +421,7 @@ switch ($themeHelper->getThemeName()) { // $themeHelper set in DefaultPageLayout
<i class='icon-ram f32'></i>
<div class='section'>
<h3 class='tile-header-main'>_(System)_</h3>
<span class='flex flex-row flex-wrap items-center gap-8'>
<span class='flex flex-row flex-wrap items-center gap-4'>
<span class="head_info">
<span>
<i class='ups fa fa-line-chart'></i>_(Memory)_: <?="$memory_installed $unit $memory_type $ecc"?>
@@ -503,7 +503,7 @@ switch ($themeHelper->getThemeName()) { // $themeHelper set in DefaultPageLayout
</select>
</span><br>
</span>
<span class='flex flex-row flex-wrap items-center gap-8'>
<span class='flex flex-row flex-wrap items-center gap-4'>
<span class='head_info'>
<i class='ups fa fa-angle-double-down'></i>_(Inbound)_: <span id='inbound'>---</span>
</span>
@@ -594,7 +594,7 @@ switch ($themeHelper->getThemeName()) { // $themeHelper set in DefaultPageLayout
<i class='icon-vpn f32'></i>
<div class='section'>
<h3 class='tile-header-main'>_(VPN)_</h3>
<span class='flex flex-row flex-wrap items-center gap-8'>
<span class='flex flex-row flex-wrap items-center gap-4'>
<span class='head_info'>
<i class='ups fa fa-play-circle'></i>_(Active tunnels)_: <span id='vpn-active'><?=$up?></span>
</span>
@@ -649,7 +649,7 @@ switch ($themeHelper->getThemeName()) { // $themeHelper set in DefaultPageLayout
<i class='icon-ups f32'></i>
<div class='section'>
<h3 class='tile-header-main'>_(Power)_</h3>
<span class="flex flex-row flex-wrap items-center gap-8">
<span class="flex flex-row flex-wrap items-center gap-4">
<span class='switch head_gap' id='ups_status_'></span>
<br>
<span class="head_info">
@@ -872,7 +872,7 @@ switch ($themeHelper->getThemeName()) { // $themeHelper set in DefaultPageLayout
<span class='tile-header-left'>
<i class='icon-folder f32'></i>
<div class='section'>
<span class='flex flex-row flex-wrap items-center gap-8'>
<span class='flex flex-row flex-wrap items-center gap-4'>
<h3 class='tile-header-main'>_(Shares)_</h3>
<?if ($group):?>
<i class='ups fa fa-angle-double-right'></i>
@@ -1899,14 +1899,14 @@ function sortTables() {
}
}
});
// $('table.dashboard tbody').before(stopgap);
$('table.dashboard tbody').before(stopgap);
}
function addProperties() {
$('div.frame tbody.system').addClass('sortable').attr('sort','_system_information_'.md5());
$('div.frame tbody.system').find('td:first .tile-header-right .tile-header-right-controls').prepend("<i class='fa fa-fw fa-eject control' onclick='openClose()' title=\"_(Show/Hide All Content)_\"></i>");
$('div.frame tbody.system').find('td:first .tile-header-right .tile-header-right-controls').append("<i class='fa fa-fw fa-eject control' onclick='openClose()' title=\"_(Show/Hide All Content)_\"></i>");
$('div.frame tbody').each(function(){
$(this).find('td:first .tile-header-right .tile-header-right-controls').prepend("<i class='fa fa-fw fa-chevron-up control openclose' onclick='openClose($(this))' title=\"_(Show/Hide Content)_\"></i>");
$(this).find('td:first .tile-header-right .tile-header-right-controls').append("<i class='fa fa-fw fa-chevron-up control openclose' onclick='openClose($(this))' title=\"_(Show/Hide Content)_\"></i>");
});
$('div.frame tbody').not('.system').each(function(){
$(this).addClass('sortable').attr('sort',$(this).attr('title').md5());
@@ -2202,7 +2202,7 @@ function LockButton() {
},
stop:function(e,ui){
var table = ui.item.parent(), index = [];
// if (ui.item.prev().html().search('stopgap')>0) ui.item.after(stopgap); else ui.item.before(stopgap);
if (ui.item.prev().html().search('stopgap')>0) ui.item.after(stopgap); else ui.item.before(stopgap);
table.find('tbody').each(function(){index.push($(this).attr('sort'));});
cookie[table.prop('id')] = index.join(';');
saveCookie();
emhttp/plugins/dynamix/sheets/DashStats.css
+16 -3
View File
@@ -417,12 +417,11 @@ legend {
align-items: start;
gap: 1rem;
}
.tile-header-main {
font-size: 1.6rem;
line-height: 1;
margin-top: 0;
margin-bottom: .5rem;
margin: 0;
}
.tile-header-left {
@@ -443,6 +442,20 @@ legend {
gap: 1rem;
}
.tile-header-right-controls {
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: .5rem;
/* prevents random spacing above the nested `i` */
a {
display: inline-flex;
}
}
.tile-ctrl span {
font-size: 2rem !important; /* tragic usage of !important */
}
emhttp/plugins/dynamix/styles/default-base.css
+22 -6
View File
@@ -1041,7 +1041,7 @@ table.dashboard tr:first-child > td {
padding-bottom: 1rem;
font-size: 1.6rem;
font-weight: bold;
letter-spacing: 1.8px;
/* letter-spacing: 1.8px; */
text-transform: none;
vertical-align: top;
}
@@ -1108,16 +1108,32 @@ table.dashboard td span.finish {
float: right;
margin-right: 24px;
}
table.dashboard i.control {
float: right;
table.dashboard .control {
font-size: 1.4rem !important;
margin: 0 3px 0 0;
cursor: pointer;
color: var(--dashboard-icon-color);
background-color: var(--dashboard-title-action-color);
padding: 2px;
border-radius: 5px;
padding: .25rem;
border-radius: .5rem;
opacity: 1;
&:hover {
opacity: .75;
}
}
.dashboard select {
/* color: var(--dashboard-icon-color);
background-color: var(--dashboard-title-action-color);
border-radius: .5rem;
opacity: 1;
&:hover,
&:focus {
opacity: .75;
} */
}
span.error {
color: var(--red-600);
background-color: var(--red-300);