From 68fbf4ac7d41887bfa9350da84af8828477380cb Mon Sep 17 00:00:00 2001
From: Tony BONNIN <stopyz@gmail.com>
Date: Wed, 4 Sep 2024 22:16:16 +0200
Subject: [PATCH] Improve Template
Signed-off-by: Tony BONNIN <stopyz@gmail.com>
---
app/acf-util/welcome-html.lsp | 10 ++++----
app/alpine-baselayout/health-proc-html.lsp | 6 ++---
app/template-html.lsp | 2 +-
.../dashboard/css/dashboard-main/dark.css | 4 ++++
.../dashboard/css/dashboard-main/footer.css | 4 ++++
.../dashboard/css/dashboard-main/header.css | 8 +++----
.../dashboard/css/dashboard-main/icons.css | 4 ++--
.../dashboard/css/dashboard-main/logon.css | 5 ++--
.../dashboard/css/dashboard-main/nav.css | 6 ++---
.../dashboard/css/dashboard-main/page.css | 2 +-
.../dashboard/css/dashboard-main/tags.css | 6 ++---
.../dashboard/css/dashboard-pages/welcome.css | 23 +++++++++----------
www/skins/dashboard/dashboard.js | 4 ++--
13 files changed, 46 insertions(+), 38 deletions(-)
diff --git a/app/acf-util/welcome-html.lsp b/app/acf-util/welcome-html.lsp
index d694a90..296013a 100644
--- a/app/acf-util/welcome-html.lsp
+++ b/app/acf-util/welcome-html.lsp
@@ -30,15 +30,15 @@
local patch_distver = string.gsub(string.match(actual_distver, ".[^.]*$"), "%D", "") -- Parse Patch for Fix
if major_sysver == major_distver and minor_sysver == minor_distver and patch_sysver == patch_distver then
blockcolor = "<div class='data-block data-system system-uptodate'>"
- chkres = "<span id='alpine-version-link' class='version-link version-ok'><span class='version-check'>Up To Date <span class='version-number-uptodate'>â—</span> Alpine <a class='version-number-uptodate' href='https://www.alpinelinux.org/releases/#content' title='🟩 Up to Date' target='_blank'>" .. check_sysver .. "</a></span></span>"
+ chkres = "<span id='alpine-version-link' class='version-link version-ok'><span class='version-check'>Up To Date <span class='version-number-uptodate'> ◠</span> Alpine <a class='version-number-uptodate' href='https://www.alpinelinux.org/releases/#content' title='🟩 Up to Date' target='_blank'>" .. check_sysver .. "</a></span></span>"
else
blockcolor = "<div class='data-block data-system system-update'>"
- chkres = "<span id='alpine-version-link' class='version-link version-update'><span class='version-check'>Update Needed <span class='version-number-update'>â—</span> Alpine <a class='version-number-update' href='https://www.alpinelinux.org/releases/#content' title='🟧 Update Needed' target='_blank'>" .. check_sysver .. "</a></span></span>"
+ chkres = "<span id='alpine-version-link' class='version-link version-update'><span class='version-check'>Update Needed <span class='version-number-update'> ◠</span> Alpine <a class='version-number-update' href='https://www.alpinelinux.org/releases/#content' title='🟧 Update Needed' target='_blank'>" .. check_sysver .. "</a></span></span>"
kernres = "<i class='fa-solid fa-exclamation icon-kernel-warn'></i>"
end
if major_sysver ~= major_distver then
blockcolor = "<div class='data-block data-system system-upgrade'>"
- chkres = "<span id='alpine-version-link' class='version-link version-upgrade'><span class='version-check'>Upgrade Required <span class='version-number-upgrade'>â—</span> Alpine <a class='version-number-upgrade' href='https://www.alpinelinux.org/releases/#content' title='🟥 Upgrade Needed' target='_blank'>" .. check_sysver .. "</a></span></span>"
+ chkres = "<span id='alpine-version-link' class='version-link version-upgrade'><span class='version-check'>Upgrade Required <span class='version-number-upgrade'> ◠</span> Alpine <a class='version-number-upgrade' href='https://www.alpinelinux.org/releases/#content' title='🟥 Upgrade Needed' target='_blank'>" .. check_sysver .. "</a></span></span>"
kernres = "<i class='fa-solid fa-xmark icon-kernel-err'></i>"
end
-- GET DIST VERSION CHANGES
@@ -306,10 +306,10 @@ end
io.write(' <td id="legend-object" width="100px"><b><span class="linux-name"><i class="fa-solid fa-database icon-disk">\n')
if (disk.model ~= nil) then
io.write('</i> Disk '..html.html_escape(name)..'</span> <span class="hdivider"> | </span> <span class="brand-name" style="color:'..used_color..'">'..html.html_escape(disk.model)..'</span>')
- io.write('<span class="disk-size"><span class="hdivider">|</span> '.. string.gsub((math.floor(tonumber((bytesToSize(disk.size * 1024)):match("%d+%.?%d*"))) .. " " .. (bytesToSize(disk.size * 1024)):match("%a+")), "%D+%S%A+", " ") ..'</span>\n')
+ io.write('<span class="disk-size"><span class="hdivider">|</span> '.. string.gsub((math.floor(tonumber((bytesToSize(disk.size * 1024)):match("%d+%.?%d*"))) .. " " .. (bytesToSize(disk.size * 1024)):match("%a+")), "%D+%S%A+", " ") ..'</span>\n')
else
io.write('</i> Disk '..html.html_escape(name)..'</span>')
- io.write('<span class="disk-size"><span class="hdivider">|</span> '.. string.gsub((math.floor(tonumber((bytesToSize(disk.size * 1024)):match("%d+%.?%d*"))) .. " " .. (bytesToSize(disk.size * 1024)):match("%a+")), "%D+%S%A+", " ") ..'</span>\n')
+ io.write('<span class="disk-size"><span class="hdivider">|</span> '.. string.gsub((math.floor(tonumber((bytesToSize(disk.size * 1024)):match("%d+%.?%d*"))) .. " " .. (bytesToSize(disk.size * 1024)):match("%a+")), "%D+%S%A+", " ") ..'</span>\n')
end
io.write('<span class="disk-right-inf"><span class="mount-point"><i class="fa-solid fa-folder-closed icon-disk icon-disk-right"></i> '..html.html_escape(disk.mount_point)..'</span>')
io.write('<i class="fa-solid fa-chart-simple icon-disk icon-disk-right"></i> Used <span class="disk-used" style="color:'..used_color..'">'..html.html_escape(disk.used) .. "%" .. '</span></span></b></td>\n')
diff --git a/app/alpine-baselayout/health-proc-html.lsp b/app/alpine-baselayout/health-proc-html.lsp
index 8e50551..9121106 100644
--- a/app/alpine-baselayout/health-proc-html.lsp
+++ b/app/alpine-baselayout/health-proc-html.lsp
@@ -8,15 +8,15 @@ local header_level2 = htmlviewfunctions.incrementheader(header_level)
%>
<% htmlviewfunctions.displaysectionstart(cfe({label="CPU Model"}), page_info, header_level2) %>
-<pre><%= html.html_escape(view.value.model.value) %></pre>
+<pre><code><%= html.html_escape(view.value.model.value) %></code></pre>
<% htmlviewfunctions.displaysectionend(header_level2) %>
<% htmlviewfunctions.displaysectionstart(cfe({label="Processor"}), page_info, header_level2) %>
-<pre><%= html.html_escape(view.value.processor.value) %></pre>
+<pre><code><%= html.html_escape(view.value.processor.value) %></code></pre>
<% htmlviewfunctions.displaysectionend(header_level2) %>
<% htmlviewfunctions.displaysectionstart(cfe({label="Memory"}), page_info, header_level2) %>
-<pre><%= html.html_escape(view.value.memory.value) %></pre>
+<pre><code><%= html.html_escape(view.value.memory.value) %></code></pre>
<% htmlviewfunctions.displaysectionend(header_level2) %>
<% htmlviewfunctions.displaysectionend(header_level) %>
\ No newline at end of file
diff --git a/app/template-html.lsp b/app/template-html.lsp
index 0ff4c6f..a01cbca 100644
--- a/app/template-html.lsp
+++ b/app/template-html.lsp
@@ -113,7 +113,7 @@ end
%>
<a id="about-link" class="icon-header" href="https://gitlab.alpinelinux.org/trinity-labs/trinity" target="_blank" title="About"><i class="fa-brands fa-gitlab fa-2x about-icon"></i></a>
<!-- Theme Toggle -->
- <a class='icon-header' id='toggle-theme' title='Dark Mode' onclick='toggleTheme()' href='javascript:void(0);'><i class="fa-solid fa-circle-half-stroke"></i></a>
+ <a class='icon-header' id='toggle-theme' title='Dark Mode' onclick='toggleTheme()' href='javascript:void(0);'><i class="fa-solid fa-circle-half-stroke fa-2x"></i></a>
<%
if session.userinfo and session.userinfo.userid then
print("<a href=".. html.html_escape(pageinfo.wwwprefix) .. "/cgi-bin/acf/acf-util/roles/read".."><span id='text-user-logon' class='text-user-"..(session.userinfo.userid).."' title='User @ HOST'>"..(session.userinfo.userid).." @ "..string.upper(hostname or "unknown").."</span></a>")
diff --git a/www/skins/dashboard/css/dashboard-main/dark.css b/www/skins/dashboard/css/dashboard-main/dark.css
index 5682d09..4981567 100644
--- a/www/skins/dashboard/css/dashboard-main/dark.css
+++ b/www/skins/dashboard/css/dashboard-main/dark.css
@@ -37,6 +37,10 @@
color: #767676;
}
+.dark-theme .version-link.version-external-link {
+ color: #626262 !important;
+}
+
.dark-theme .data-block {
padding: 0.25rem 1.5rem 1rem;
background: #282828 !important;
diff --git a/www/skins/dashboard/css/dashboard-main/footer.css b/www/skins/dashboard/css/dashboard-main/footer.css
index 66b63f6..193bbe8 100644
--- a/www/skins/dashboard/css/dashboard-main/footer.css
+++ b/www/skins/dashboard/css/dashboard-main/footer.css
@@ -15,4 +15,8 @@
#footer a {
color: #939393 !important;
+}
+
+#footer a:hover {
+ opacity: 0.4;
}
\ No newline at end of file
diff --git a/www/skins/dashboard/css/dashboard-main/header.css b/www/skins/dashboard/css/dashboard-main/header.css
index 75db6d9..b6189c7 100644
--- a/www/skins/dashboard/css/dashboard-main/header.css
+++ b/www/skins/dashboard/css/dashboard-main/header.css
@@ -113,17 +113,17 @@ header {
cursor: pointer;
display: inline-block;
border-radius: 50em;
- padding: 1rem;
+ padding: 0.85rem;
}
#text-user-logon {
color: #d2d2d2;
- font-size: 0.7rem;
- font-weight: bold;
+ font-size: 0.6rem;
+ font-weight: 900;
cursor: pointer;
margin: 0 1.75rem 0 0;
font-family: Arial Black;
- padding: 0.33rem 1.5rem;
+ padding: 0.25rem 1rem;
vertical-align: middle;
border-radius: 2.5px;
}
diff --git a/www/skins/dashboard/css/dashboard-main/icons.css b/www/skins/dashboard/css/dashboard-main/icons.css
index 0eb5be0..cbf052f 100644
--- a/www/skins/dashboard/css/dashboard-main/icons.css
+++ b/www/skins/dashboard/css/dashboard-main/icons.css
@@ -14,7 +14,7 @@
}
.fa-2x {
- font-size: 1rem !important;
+ font-size: 0.75rem !important;
color: rgb(203 203 203 / 87%) !important;
}
@@ -47,7 +47,7 @@
position: relative;
margin: 0 0.5rem 0 0;
color: #e5e5e5 !important;
- font-size: 1.5rem;
+ font-size: 1rem;
top: -0.2rem;
}
diff --git a/www/skins/dashboard/css/dashboard-main/logon.css b/www/skins/dashboard/css/dashboard-main/logon.css
index 37d84bb..740edbc 100644
--- a/www/skins/dashboard/css/dashboard-main/logon.css
+++ b/www/skins/dashboard/css/dashboard-main/logon.css
@@ -28,8 +28,8 @@ html.app-logon {
}
.logon-logon input.submit:hover {
- background: #40404087 !important;
- border-color: #40404087 !important;
+ background-color: #5a329f !important;
+ opacity: 0.5 !important;
}
.logon-logon #header {
@@ -285,6 +285,7 @@ button#showPass {
.logon .icon-header .fa-2x:hover {
color: #5a329f !important;
+ opacity: 0.5;
}
.logon button#showPass:hover {
diff --git a/www/skins/dashboard/css/dashboard-main/nav.css b/www/skins/dashboard/css/dashboard-main/nav.css
index 4189b8a..e28128e 100644
--- a/www/skins/dashboard/css/dashboard-main/nav.css
+++ b/www/skins/dashboard/css/dashboard-main/nav.css
@@ -5,8 +5,8 @@
#nav {
margin: 0;
- padding: 0rem 3rem 3rem 1rem;
- width: 13rem;
+ padding: 0rem 1rem 3rem;
+ width: 10rem;
top: 0 !important;
flex-direction: row;
flex-wrap: nowrap;
@@ -47,7 +47,7 @@
padding: 1em 1em 1em 2em;
color: #aaa;
text-transform: capitalize;
- font-size: 0.66rem;
+ font-size: 0.6rem;
list-style-type: none;
}
diff --git a/www/skins/dashboard/css/dashboard-main/page.css b/www/skins/dashboard/css/dashboard-main/page.css
index 1bf8af6..beddbc8 100644
--- a/www/skins/dashboard/css/dashboard-main/page.css
+++ b/www/skins/dashboard/css/dashboard-main/page.css
@@ -29,7 +29,7 @@ body {
.page {
background: #fefefe;
flex: 1;
- padding: 0.5rem 0 0 1rem;
+ padding: 0.5rem 0 0;
}
#main {
diff --git a/www/skins/dashboard/css/dashboard-main/tags.css b/www/skins/dashboard/css/dashboard-main/tags.css
index f357c85..5318844 100644
--- a/www/skins/dashboard/css/dashboard-main/tags.css
+++ b/www/skins/dashboard/css/dashboard-main/tags.css
@@ -239,19 +239,19 @@ input.submit:hover {
}
.version-number-uptodate {
- font-size: 1rem;
+ font-weight: 900;
color: #3cdd4f !important;
font-family: sans-serif;
}
.version-number-update {
- font-size: 1rem;
+ font-weight: 900;
color: #ffac00 !important;
font-family: sans-serif;
}
.version-number-upgrade {
- font-size: 1rem;
+ font-weight: 900;
color: #f74b00 !important;
font-family: sans-serif;
}
diff --git a/www/skins/dashboard/css/dashboard-pages/welcome.css b/www/skins/dashboard/css/dashboard-pages/welcome.css
index 17723de..c1487ec 100644
--- a/www/skins/dashboard/css/dashboard-pages/welcome.css
+++ b/www/skins/dashboard/css/dashboard-pages/welcome.css
@@ -2,7 +2,7 @@
* PAGE > WELCOME
*----------------------------------------------------------------------------------
*/
-
+
.dashboard-system .fa-docker {
font-size: 0.75rem;
margin: 0 0.25rem 0 0;
@@ -74,10 +74,9 @@ span.dashboard-infos {
text-transform: uppercase;
margin: 0.5rem 0 1.75rem;
font-family: Arial Black;
- box-shadow: 2px 2px 30px #4e4e4e20;
color: #b7b7b7;
border: 2px solid #f7f7f7;
- font-size: 0.8rem;
+ font-size: 0.75rem;
letter-spacing: -0.05rem;
}
@@ -526,7 +525,7 @@ span.dashboard-infos {
}
.dashboard-main .version-check a:hover {
- border-bottom: 2px solid #3cdd4f;
+ border-bottom: 2px solid;
}
.version-link.version-external-link {
@@ -652,8 +651,8 @@ input:checked + .slider:before {
text-decoration: none !important;
border-radius: 2px;
position: relative;
- font-size: 1.15rem;
- top: 0.75rem;
+ font-size: 0.75rem;
+ top: 1rem;
}
.dashboard-infos.dash-info-version {
@@ -822,7 +821,7 @@ input:checked + .slider:before {
}
.data-block {
- min-width: 25%;
+ min-width: 30%;
height: 8rem;
}
@@ -838,7 +837,7 @@ input:checked + .slider:before {
.data-block.data-system.system-uptodate {
box-shadow: 2px 2px 30px #00000020;
- border-left: 33px solid #3cdd4f;
+ /*border-left: 33px solid #3cdd4f;*/
background: #ffffff;
padding: 1.5rem 0.75rem;
border-radius: 4px;
@@ -847,7 +846,7 @@ input:checked + .slider:before {
.data-block.data-system.system-update {
box-shadow: 2px 2px 30px #00000020;
- border-left: 33px solid #ffac00;
+ /*border-left: 33px solid #ffac00;*/
background: #ffffff;
padding: 1.5rem 0.75rem;
border-radius: 4px;
@@ -856,7 +855,7 @@ input:checked + .slider:before {
.data-block.data-system.system-upgrade {
box-shadow: 2px 2px 30px #00000020;
- border-left: 33px solid #f74b00;
+ /*border-left: 33px solid #f74b00;*/
background: #ffffff;
padding: 1.5rem 0.75rem;
border-radius: 4px;
@@ -865,7 +864,7 @@ input:checked + .slider:before {
.data-block.data-hardware {
box-shadow: 2px 2px 30px #00000020;
- border-left: 33px solid #0078cf;
+ /*border-left: 33px solid #0078cf;*/
background: #ffffff;
padding: 1.5rem 0.75rem;
border-radius: 4px;
@@ -874,7 +873,7 @@ input:checked + .slider:before {
.data-block.data-monitoring {
box-shadow: 2px 2px 30px #00000020;
- border-left: 33px solid #00bac9;
+ /*border-left: 33px solid #00bac9;*/
background: #ffffff;
padding: 1.5rem 0.75rem;
border-radius: 4px;
diff --git a/www/skins/dashboard/dashboard.js b/www/skins/dashboard/dashboard.js
index e8d0ddc..9b51cea 100644
--- a/www/skins/dashboard/dashboard.js
+++ b/www/skins/dashboard/dashboard.js
@@ -13,7 +13,7 @@ function toggleMenu() {
$("#content, #subnav").css("width", "100%");
} else {
$("#nav").slideDown(900);
- $("#content, #subnav").css("width", "80%");
+ $("#content, #subnav").css("width", "85%");
}
window.localStorage.setItem('nav', isActive ? 'not_active' : 'active');
}
@@ -80,7 +80,7 @@ $(function() {
let menuState = window.localStorage.getItem('nav') || 'active';
setClassAndProp("#nav", menuState, null, null);
setClassAndProp("#toggle-menu", menuState, null, null);
- const menuWidth = menuState === 'active' ? '80%' : '100%';
+ const menuWidth = menuState === 'active' ? '85%' : '100%';
$("#nav").css('display', menuState === 'active' ? 'block' : 'none');
$("#content, #subnav").css('width', menuWidth);
let themeState = window.localStorage.getItem('html') || 'dark-theme';
--
GitLab