From fe4869caf81a0e3f261b740e31a9e9d991680069 Mon Sep 17 00:00:00 2001 From: jokob-sk Date: Tue, 23 Jun 2026 08:53:58 +1000 Subject: [PATCH 1/5] FE: skeleton uplift, mqtt --- front/css/app.css | 4 +-- front/php/templates/skel_settings.php | 31 ++++++++++++++----- .../php/templates/skel_tab_maint_logging.php | 6 +++- front/plugins/_publisher_mqtt/mqtt.py | 3 +- front/plugins/_publisher_telegram/config.json | 2 +- front/settings.php | 2 +- 6 files changed, 34 insertions(+), 14 deletions(-) diff --git a/front/css/app.css b/front/css/app.css index 960a13681..852a185de 100755 --- a/front/css/app.css +++ b/front/css/app.css @@ -2716,8 +2716,8 @@ table.dataTable tbody > tr.selected /* ----- Settings --------------------------------------------------------- */ .skel-overview-panel { margin-bottom: 10px; } .skel-overview-heading { gap: 12px; } -.skel-overview-body { padding: 12px; display: flex; gap: 12px; flex-wrap: wrap; } -.skel-overview-card { min-width: 100px; height: 76px; border-radius: 4px; } +.skel-overview-body { padding: 12px; } +.skel-overview-card { min-width: 100%; height: 76px; border-radius: 4px; padding: 5px;} .skel-section { margin-bottom: 8px; } .skel-overview-header { gap: 14px; } .skel-section-header { gap: 14px; } diff --git a/front/php/templates/skel_settings.php b/front/php/templates/skel_settings.php index f230a6899..e06ead88b 100644 --- a/front/php/templates/skel_settings.php +++ b/front/php/templates/skel_settings.php @@ -7,19 +7,34 @@ -
-
-
-
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/front/php/templates/skel_tab_maint_logging.php b/front/php/templates/skel_tab_maint_logging.php index 74ce9a6f7..4b7e228e3 100644 --- a/front/php/templates/skel_tab_maint_logging.php +++ b/front/php/templates/skel_tab_maint_logging.php @@ -6,5 +6,9 @@
- + + + + + diff --git a/front/plugins/_publisher_mqtt/mqtt.py b/front/plugins/_publisher_mqtt/mqtt.py index 0c01c33b3..73e151923 100755 --- a/front/plugins/_publisher_mqtt/mqtt.py +++ b/front/plugins/_publisher_mqtt/mqtt.py @@ -173,7 +173,8 @@ def initialize_message(self): "device": { "identifiers": [f"{self.deviceId}_sensor"], "manufacturer": "NetAlertX", - "name": self.deviceName + "name": self.deviceName, + "connections": connections_snippet }, "icon": f'mdi:{self.icon}' }) diff --git a/front/plugins/_publisher_telegram/config.json b/front/plugins/_publisher_telegram/config.json index 7786acd1d..1819aef04 100755 --- a/front/plugins/_publisher_telegram/config.json +++ b/front/plugins/_publisher_telegram/config.json @@ -426,7 +426,7 @@ "description": [ { "language_code": "en_us", - "string": "Telegram bot token. You cat get at from BotFather" + "string": "Telegram bot token. You cat get one from BotFather" } ] }, diff --git a/front/settings.php b/front/settings.php index 0be479cea..342e880b2 100755 --- a/front/settings.php +++ b/front/settings.php @@ -545,7 +545,7 @@ function hideSettingsSkeleton() { var $skel = $('#settings-skeleton'); if (!$skel.length) return; $('#settingsPage').removeClass('settings-loading'); - $skel.fadeOut(250, function() { $(this).remove(); }); + $skel.fadeOut(10, function() { $(this).remove(); }); } // display the name of the first person From 7977ed8cc1f2c529fb48dafdc23af35011b202c9 Mon Sep 17 00:00:00 2001 From: jokob-sk Date: Tue, 23 Jun 2026 15:47:57 +1000 Subject: [PATCH 2/5] FE: skeleton uplift --- front/css/app.css | 44 +++++-- front/css/dark-patch.css | 12 +- front/css/system-dark-patch.css | 12 +- front/deviceDetails.php | 22 +--- front/deviceDetailsEdit.php | 2 +- front/deviceDetailsEvents.php | 2 +- front/deviceDetailsPresence.php | 2 +- front/deviceDetailsSessions.php | 2 +- front/devices.php | 2 +- front/events.php | 6 +- front/maintenance.php | 8 +- front/php/templates/skel_devices.php | 110 +++++++++--------- front/php/templates/skel_presence.php | 2 +- .../php/templates/skel_tab_plugins_table.php | 2 +- front/plugins/_publisher_telegram/config.json | 2 +- front/pluginsCore.php | 7 +- front/presence.php | 2 +- front/report.php | 2 +- front/settings.php | 30 +++-- front/systeminfo.php | 2 +- front/systeminfoInitCheck.php | 13 +-- front/userNotifications.php | 2 +- front/workflowsCore.php | 2 +- 23 files changed, 148 insertions(+), 142 deletions(-) diff --git a/front/css/app.css b/front/css/app.css index 852a185de..b0c1c8de0 100755 --- a/front/css/app.css +++ b/front/css/app.css @@ -2527,6 +2527,14 @@ textarea[readonly], padding-left: 10px; } +/* ----------------------------------------------------------------------------- + Sys info +----------------------------------------------------------------------------- */ +#panInitCheck .row +{ + width: 100%; +} + /* ----------------------------------------------------------------------------- Floating edit button ----------------------------------------------------------------------------- */ @@ -2627,7 +2635,7 @@ table.dataTable tbody > tr.selected #panDetails, #panSessions, #panPresence, #panEvents { position: relative; } -#panDetails, #panSessions, #panPresence, #panEvents { min-height: 420px; } + #tab_DBTools, #tab_BackupRestore, #tab_Logging, #tab_multiEdit { position: relative; min-height: 320px; } /* Page-level overlay base */ @@ -2639,27 +2647,37 @@ table.dataTable tbody > tr.selected left: 0; right: 0; background-color: var(--skel-bg); - padding: 15px; } #settings-skeleton, #devices-skeleton, #device-details-skeleton, #events-skeleton, #presence-skeleton, #report-skeleton, #notifications-skeleton, #workflows-skeleton, #plugins-skeleton { z-index: 50; } -.skel-tab-pane { z-index: 10; min-height: 400px; } -#settings-skeleton { padding-top: 50px; padding-left: 20px; padding-right: 20px; min-height: 500px; } -#devices-skeleton { top: 50px; min-height: 500px; } -#device-details-skeleton { top: 45px; min-height: 100px; } -#events-skeleton { top: 50px; min-height: 500px; } -#presence-skeleton { top: 50px; min-height: 500px; } -#report-skeleton { min-height: 400px; } -#notifications-skeleton { top: 50px; min-height: 400px; } +.skel-tab-pane { z-index: 10; min-height: 400px; background-color: var(--skel-panel-bg);} +#settings-skeleton { margin: 15px; padding-top: 50px; min-height: 500px; } +#devices-skeleton { margin: 15px; top: 50px; min-height: 500px; } +#device-details-skeleton { margin: 15px; top: 42px; } +#events-skeleton { margin: 15px; top: 50px; min-height: 500px; } +#presence-skeleton { margin: 15px; top: 50px; min-height: 500px; } +#report-skeleton { margin: 15px; top: 50px; min-height: 400px; } +#notifications-skeleton { margin: 15px; top: 50px; min-height: 400px; } #workflows-skeleton { top: 50px; width: 770px; margin: 0 auto; min-height: 300px; } #plugins-skeleton { top: 50px; padding: 0; min-height: 400px; } +#skel-tab-sessions, #skel-tab-events, #skel-tab-presence { margin: 0px; } + +/* Hide scrollbars */ +#skel-tab-sessions, #skel-tab-events, #skel-tab-presence { + overflow: hidden; /* Hides the scrollbar */ + -ms-overflow-style: none; /* Internet Explorer 10+ */ + scrollbar-width: none; /* Firefox */ +} +#skel-tab-sessions::-webkit-scrollbar, #skel-tab-events::-webkit-scrollbar, #skel-tab-presence::-webkit-scrollbar { + display: none; /* Safari and Chrome */ +} /* Bordered containers */ .skel-overview-panel, .skel-section, .skel-plugin-block, .skel-chart-box, .skel-table-box, .skel-detail-info-panel, .skel-detail-form, .skel-tabs-bar { - border: 1px solid var(--skel-border); + border: 1px none var(--skel-border); } /* Clipped rounded containers */ @@ -2729,7 +2747,8 @@ table.dataTable tbody > tr.selected .skel-cell-input { height: 32px; } /* ----- Devices ---------------------------------------------------------- */ -.skel-tile { display: flex; height: 80px; } +.skel-tile-row { margin-right: -30px; margin-left: -30px;} +.skel-tile { display: flex; height: 80px; margin-bottom: 15px;} #device-details-skeleton .skel-tile { display: flex; height: 45px; } .skel-tile-inner { display: flex; flex-direction: column; padding: 12px 15px; justify-content: center; gap: 10px; } .skel-tile-num { height: 26px; width: 55%; } @@ -2753,6 +2772,7 @@ table.dataTable tbody > tr.selected .skel-form-label { width: 18%; min-width: 100px; } .skel-form-input { height: 32px; } .skel-form-footer { display: flex; justify-content: flex-end; gap: 10px; padding-top: 15px; } +.skel-form-footer-left { display: flex; justify-content: flex-start; gap: 10px; padding-top: 15px; } .skel-form-btn { height: 34px; width: 100px; } /* ----- Workflows -------------------------------------------------------- */ diff --git a/front/css/dark-patch.css b/front/css/dark-patch.css index 63ef5de0c..b9ce841cc 100755 --- a/front/css/dark-patch.css +++ b/front/css/dark-patch.css @@ -761,10 +761,10 @@ table.dataTable tbody tr.selected, table.dataTable tbody tr .selected /* Settings skeleton - dark theme */ :root { - --skel-base: #2e3540; - --skel-shine: #3d4555; - --skel-section: #252c38; - --skel-panel-bg: #1e242e; - --skel-border: #2a323e; - --skel-bg: #292e33; + --skel-base: #353c42; + --skel-shine: #272c30; + --skel-section: #272c30; + --skel-panel-bg: #272c30; + --skel-border: #2a323e; + --skel-bg: #353c42; } \ No newline at end of file diff --git a/front/css/system-dark-patch.css b/front/css/system-dark-patch.css index f6cf4e154..8e96f6012 100755 --- a/front/css/system-dark-patch.css +++ b/front/css/system-dark-patch.css @@ -738,10 +738,10 @@ /* Settings skeleton - dark theme */ :root { - --skel-base: #2e3540; - --skel-shine: #3d4555; - --skel-section: #252c38; - --skel-panel-bg: #1e242e; - --skel-border: #2a323e; - --skel-bg: #292e33; + --skel-base: #353c42; + --skel-shine: #272c30; + --skel-section: #272c30; + --skel-panel-bg: #272c30; + --skel-border: #2a323e; + --skel-bg: #353c42; } \ No newline at end of file diff --git a/front/deviceDetails.php b/front/deviceDetails.php index f77c7a94d..2168a5bf9 100755 --- a/front/deviceDetails.php +++ b/front/deviceDetails.php @@ -124,48 +124,34 @@ -
- - - +
- -
- - -
- -
- -
- -
diff --git a/front/deviceDetailsEvents.php b/front/deviceDetailsEvents.php index 184e2d32a..1791d259a 100755 --- a/front/deviceDetailsEvents.php +++ b/front/deviceDetailsEvents.php @@ -203,7 +203,7 @@ function deviceEventsPageUpdater() { // ----------------------------------------------------------------------------- function hideEventsTabSkeleton() { - $('#skel-tab-events').fadeOut(250, function() { $(this).remove(); }); + $('#skel-tab-events').fadeOut(50, function() { $(this).remove(); }); } \ No newline at end of file diff --git a/front/deviceDetailsPresence.php b/front/deviceDetailsPresence.php index 70f0e1f89..e70966062 100755 --- a/front/deviceDetailsPresence.php +++ b/front/deviceDetailsPresence.php @@ -212,7 +212,7 @@ function devicePresencePageUpdater() { // ----------------------------------------------------------------------------- function hidePresenceTabSkeleton() { - $('#skel-tab-presence').fadeOut(250, function() { $(this).remove(); }); + $('#skel-tab-presence').fadeOut(50, function() { $(this).remove(); }); } diff --git a/front/deviceDetailsSessions.php b/front/deviceDetailsSessions.php index 856f6e9b3..450447dbc 100755 --- a/front/deviceDetailsSessions.php +++ b/front/deviceDetailsSessions.php @@ -179,7 +179,7 @@ function deviceSessionsPageUpdater() { // ----------------------------------------------------------------------------- function hideSessionsTabSkeleton() { - $('#skel-tab-sessions').fadeOut(250, function() { $(this).remove(); }); + $('#skel-tab-sessions').fadeOut(50, function() { $(this).remove(); }); } \ No newline at end of file diff --git a/front/devices.php b/front/devices.php index 784c781f3..0de11b63a 100755 --- a/front/devices.php +++ b/front/devices.php @@ -185,7 +185,7 @@ // ----------------------------------------------------------------------------- function hideDevicesSkeleton() { - $('#devices-skeleton').fadeOut(250, function() { $(this).remove(); }); + $('#devices-skeleton').fadeOut(50, function() { $(this).remove(); }); } // Fallback: ensure skeleton is removed even if DataTable fails to initialize diff --git a/front/events.php b/front/events.php index 72eac8e2f..6a856bae7 100755 --- a/front/events.php +++ b/front/events.php @@ -6,7 +6,7 @@ showSpinner(); // Show initial page loading spinner -
+
@@ -59,7 +59,7 @@
- +
@@ -258,7 +258,7 @@ function getEvents(type) { } function hideEventsSkeleton() { - $('#events-skeleton').fadeOut(250, function () { $(this).remove(); }); + $('#events-skeleton').fadeOut(50, function () { $(this).remove(); }); } window.addEventListener('load', function () { diff --git a/front/maintenance.php b/front/maintenance.php index d401ecf8c..f99ea6fb1 100755 --- a/front/maintenance.php +++ b/front/maintenance.php @@ -878,10 +878,10 @@ function renderLogs(customData) { -
+
diff --git a/front/systeminfoNetwork.php b/front/systeminfoNetwork.php index 8692d0aca..377841b60 100755 --- a/front/systeminfoNetwork.php +++ b/front/systeminfoNetwork.php @@ -89,10 +89,10 @@ function getExternalIp() { // Network ---------------------------------------------------------- echo '
-
-

' . lang('Systeminfo_Network') . '

-
-
+
+

' . lang('Systeminfo_Network') . '

+
+
' . lang('Systeminfo_Network_IP') . '
' .$externalIp. '
From ac210170870e4e81ecf5e6d24d46a2e61827e24f Mon Sep 17 00:00:00 2001 From: jokob-sk Date: Tue, 23 Jun 2026 22:43:38 +1000 Subject: [PATCH 5/5] FE: skeleton uplift --- front/css/app.css | 2 +- front/php/templates/language/en_us.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/front/css/app.css b/front/css/app.css index b1d11d5e8..55fbae07c 100755 --- a/front/css/app.css +++ b/front/css/app.css @@ -2661,7 +2661,7 @@ table.dataTable tbody > tr.selected background-color: var(--skel-bg); } #settings-skeleton, #devices-skeleton, #device-details-skeleton, -#events-skeleton, #presence-skeleton, #report-skeleton, #skel-app-event, +#events-skeleton, #presence-skeleton, #report-skeleton, #skel-app-events, #notifications-skeleton, #workflows-skeleton, #plugins-skeleton { z-index: 50; } .skel-tab-pane { z-index: 10; min-height: 400px; background-color: var(--skel-panel-bg);} #settings-skeleton { margin: 15px; min-height: 500px; } diff --git a/front/php/templates/language/en_us.json b/front/php/templates/language/en_us.json index cfefcac55..63478f085 100755 --- a/front/php/templates/language/en_us.json +++ b/front/php/templates/language/en_us.json @@ -790,7 +790,7 @@ "settings_device_scanners_icon": "fa-solid fa-magnifying-glass-plus", "settings_device_scanners_info": "Load more device scanners with the LOADED_PLUGINS setting", "settings_device_scanners_label": "Device scanners", - "settings_enabled": "Enabled settings", + "settings_enabled": "Enabled plugins", "settings_enabled_icon": "fa-solid fa-toggle-on", "settings_expand_all": "Expand all", "settings_imported": "Last time settings were imported from the app.conf file",