From 7977ed8cc1f2c529fb48dafdc23af35011b202c9 Mon Sep 17 00:00:00 2001 From: jokob-sk Date: Tue, 23 Jun 2026 15:47:57 +1000 Subject: [PATCH] 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 852a185d..b0c1c8de 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 63ef5de0..b9ce841c 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 f6cf4e15..8e96f601 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 f77c7a94..2168a5bf 100755 --- a/front/deviceDetails.php +++ b/front/deviceDetails.php @@ -124,48 +124,34 @@ -
- - - +
- -
- - -
- -
- -
- -
diff --git a/front/deviceDetailsEvents.php b/front/deviceDetailsEvents.php index 184e2d32..1791d259 100755 --- a/front/deviceDetailsEvents.php +++ b/front/deviceDetailsEvents.php @@ -203,7 +203,7 @@ 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 70f0e1f8..e7096606 100755 --- a/front/deviceDetailsPresence.php +++ b/front/deviceDetailsPresence.php @@ -212,7 +212,7 @@ 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 856f6e9b..450447db 100755 --- a/front/deviceDetailsSessions.php +++ b/front/deviceDetailsSessions.php @@ -179,7 +179,7 @@ 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 784c781f..0de11b63 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 72eac8e2..6a856bae 100755 --- a/front/events.php +++ b/front/events.php @@ -6,7 +6,7 @@ require 'php/templates/header.php'; showSpinner(); // Show initial page loading spinner -
+
@@ -59,7 +59,7 @@ require 'php/templates/header.php';
- +
@@ -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 d401ecf8..f99ea6fb 100755 --- a/front/maintenance.php +++ b/front/maintenance.php @@ -878,10 +878,10 @@ window.onload = function asyncFooter() {