mirror/NetAlertX
1
0
Fork 0
mirror of https://github.com/jokob-sk/NetAlertX.git synced 2026-06-26 17:06:42 -04:00
Code Issues Packages Projects Releases Wiki Activity

FE: skeleton uplift

Browse Source
This commit is contained in:
jokob-sk
2026-06-23 22:30:40 +10:00
parent c98e068272
commit 942c4a6e8b
10 changed files with 101 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
front/appEvents.php
View File

@@ -6,7 +6,7 @@
<!-- Page ------------------------------------------------------------------ -->
<div class="content-wrapper">
<div id="appEvents" class="content-wrapper">
<?php
require 'appEventsCore.php';
@@ -15,6 +15,7 @@
</div>
<?php
require 'php/templates/footer.php';
?>

19
front/appEventsCore.php
View File

@@ -1,21 +1,21 @@
<span class="helpIcon">
<a target="_blank" href="https://docs.netalertx.com/WORKFLOWS_DEBUGGING">
<i class="fa fa-circle-question"></i>
</a>
</span>
<section class="content">
</span>
<?php require 'php/templates/skel_app_events.php'; ?>
<section class="content">
<div class="nav-tabs-custom app-event-content" style="margin-bottom: 0px;">
<ul id="tabs-location" class="nav nav-tabs col-sm-2 hidden">
<li class="left-nav"><a class="col-sm-12" href="#" id="" data-toggle="tab">Events</a></li>
</ul>
<div id="tabs-content-location" class="tab-content col-sm-12">
<div id="tabs-content-location" class="tab-content col-sm-12 table-responsive">
<table class="table table-striped" id="appevents-table" data-my-dbtable="AppEvents"></table>
</div>
</div>
</div>
</section>
<script>
// show loading dialog
@@ -116,6 +116,7 @@ $(document).ready(function () {
});
hideSpinner();
hideAppEventsSkeleton();
},
error: function () {
callback({
@@ -181,8 +182,14 @@ $(document).ready(function () {
}
]
});
});
function hideAppEventsSkeleton() {
$('#skel-app-events').fadeOut(50, function () { $(this).remove(); });
}
window.addEventListener('load', function () {
setTimeout(hideAppEventsSkeleton, 15000);
});

38
front/css/app.css
View File

@@ -11,6 +11,7 @@
Global Variables
----------------------------------------------------------------------------- */
:root {
--color-white: #fff;
--color-aqua: #00c0ef;
--color-lightblue: #3c8dbc;
--color-blue: #0060df;
@@ -18,6 +19,7 @@
--color-yellow: #f39c12;
--color-red: #dd4b39;
--color-gray: #8c8c8c;
--color-darkgray: #3f3e3e;
--color-black: #000;
}
@@ -652,15 +654,15 @@ hr
.btn-outline:hover
{
border: 1px solid var(--color-black);
background: transparent;
color: var(--color-black);
background-color: var(--color-black);
color: var(--color-white);
}
.btn-outline
{
border: 1px solid var(--color-gray);
background: transparent;
color: var(--color-gray);
border: 1px solid var(--color-darkgray);
background-color: var(--color-white);
color: var(--color-darkgray);
}
/* -----------------------------------------------------------------------------
@@ -1069,6 +1071,8 @@ height: 50px;
#settingsPage
{
display: grid;
margin-top: 50px;
padding-top: 0px;
}
@@ -2535,6 +2539,14 @@ textarea[readonly],
width: 100%;
}
/* -----------------------------------------------------------------------------
Sys info
----------------------------------------------------------------------------- */
#appEvents
{
display: flow-root;
}
/* -----------------------------------------------------------------------------
Floating edit button
----------------------------------------------------------------------------- */
@@ -2606,9 +2618,9 @@ table.dataTable tbody > tr.selected
--skel-base: #e2e2e2;
--skel-shine: #f0f0f0;
--skel-section: #d4d4d4;
--skel-panel-bg: #f5f5f5;
--skel-panel-bg: #fff;
--skel-border: #ddd;
--skel-bg: #ecf0f5;
--skel-bg: #fff;
}
@keyframes settingsShimmer {
@@ -2632,7 +2644,7 @@ table.dataTable tbody > tr.selected
/* Positioning anchors */
#settingsPage, #devicesPage, #deviceDetailsPage,
#eventsPage, #presencePage, #reportPage, #notifications, #wf-content-wrapper, #pluginsPage,
#panDetails, #panSessions, #panPresence, #panEvents {
#panDetails, #panSessions, #panPresence, #panEvents, #appEvents {
position: relative;
}
@@ -2640,7 +2652,7 @@ table.dataTable tbody > tr.selected
/* Page-level overlay base */
#settings-skeleton, #devices-skeleton, #device-details-skeleton,
#events-skeleton, #presence-skeleton, #report-skeleton,
#events-skeleton, #presence-skeleton, #report-skeleton, #skel-app-events,
#notifications-skeleton, #workflows-skeleton, #plugins-skeleton, .skel-tab-pane {
position: absolute;
top: 0;
@@ -2649,11 +2661,12 @@ table.dataTable tbody > tr.selected
background-color: var(--skel-bg);
}
#settings-skeleton, #devices-skeleton, #device-details-skeleton,
#events-skeleton, #presence-skeleton, #report-skeleton,
#events-skeleton, #presence-skeleton, #report-skeleton, #skel-app-event,
#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; padding-top: 50px; min-height: 500px; }
#settings-skeleton { margin: 15px; min-height: 500px; }
#devices-skeleton { margin: 15px; top: 50px; min-height: 500px; }
#skel-app-events { margin: 15px; top: 50px; min-height: 500px; z-index: inherit;}
#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; }
@@ -2779,6 +2792,9 @@ table.dataTable tbody > tr.selected
.skel-workflow-card { border: 1px solid var(--skel-border); border-radius: 4px; margin-bottom: 8px; overflow: hidden; }
.skel-workflow-header { display: flex; align-items: center; height: 48px; padding: 0 15px; background: var(--skel-section); }
/* ----- AppEvents -------------------------------------------------------- */
#skel-app-event { display: flex; gap: 0; min-height: 400px; }
/* ----- Plugins ---------------------------------------------------------- */
.skel-plugins-wrap { display: flex; gap: 0; min-height: 400px; }
.skel-plugins-nav { flex-shrink: 0; border-right: 1px solid var(--skel-border); padding: 8px 0; }

32
front/css/dark-patch.css
View File

@@ -14,6 +14,7 @@
--color-aqua: #00c0ef;
--color-lightblue: #3c8dbc;
--color-blue: #0060df;
--color-white: #fff;
--color-green: #00a65a;
--color-yellow: #f39c12;
--color-red: #dd4b39;
@@ -389,18 +390,25 @@ pre {
td.highlight {
background-color: rgba(255, 204, 0, 0.333);
}
.btn-default {
box-shadow: none;
background-color: #3e464c;
color: #bec5cb;
border: 1px solid #353c42;
}
.btn-default {
box-shadow: none;
background-color: #3e464c;
color: #bec5cb;
border: 1px solid #353c42;
}
.btn-outline {
border: 1px solid var(--color-black);
background: transparent;
color: var(--color-white);
}
.btn-outline {
border: 1px solid var(--color-black);
background: transparent;
color: var(--color-white);
}
.btn-outline:hover
{
border: 1px solid var(--color-black);
background-color: var(--color-black);;
color: var(--color-white);
}
/* Used in debug log page */
.log-red {
@@ -747,7 +755,7 @@ table.dataTable tbody tr.selected, table.dataTable tbody tr .selected
.btn:hover
{
color: var(--color-gray);
color: var(--color-white);
}
.logs, .log-area textarea

27
front/css/system-dark-patch.css
View File

@@ -20,7 +20,14 @@
--color-yellow: #f39c12;
--color-red: #dd4b39;
--color-gray: #8c8c8c;
--color-darkgray: #3f3e3e;
--color-white: #fff;
--skel-base: #353c42;
--skel-shine: #272c30;
--skel-section: #272c30;
--skel-panel-bg: #272c30;
--skel-border: #2a323e;
--skel-bg: #353c42;
}
:root {
@@ -402,6 +409,13 @@
color: var(--color-white);
}
.btn-outline:hover
{
border: 1px solid var(--color-black);
background-color: var(--color-black);;
color: var(--color-white);
}
/* Used in debug log page */
.log-red {
color: #ff4038;
@@ -721,10 +735,10 @@
color:#000;
}
.btn:hover
/* .btn:hover
{
color: var(--color-white);
}
} */
.logs, .log-area textarea
@@ -736,12 +750,3 @@
cursor: pointer;
}
/* Settings skeleton - dark theme */
:root {
--skel-base: #353c42;
--skel-shine: #272c30;
--skel-section: #272c30;
--skel-panel-bg: #272c30;
--skel-border: #2a323e;
--skel-bg: #353c42;
}

2
front/devices.php
View File

@@ -185,7 +185,7 @@
// -----------------------------------------------------------------------------
function hideDevicesSkeleton() {
$('#devices-skeleton').fadeOut(50, function() { $(this).remove(); });
$('#devices-skeleton').fadeOut(50, function() { $(this).remove(); });
}
// Fallback: ensure skeleton is removed even if DataTable fails to initialize

2
front/php/templates/header.php
View File

@@ -391,7 +391,7 @@
<!-- Settings menu item -->
<li class=" treeview <?php if (in_array (basename($_SERVER['SCRIPT_NAME']), array('settings.php') ) ){ echo 'active menu-open'; } ?>">
<a href="#" onclick="openUrl(['./settings.php'])">
<a href="settings.php" onclick="openUrl(['./settings.php'])">
<i class="fa fa-fw fa-cog"></i> <span><?= lang('Navigation_Settings');?></span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>

16
front/php/templates/skel_app_events.php Normal file
View File

@@ -0,0 +1,16 @@
<!-- AppEvents Skeleton ================================================= -->
<div id="skel-app-events" >
<div class="skel-table-header-row">
<?php for ($i = 0; $i < 5; $i++): ?>
<span class="skel-th skel-shimmer"></span>
<?php endfor; ?>
</div>
<?php for ($i = 0; $i < 25; $i++): ?>
<div class="skel-tr">
<?php for ($j = 0; $j < 5; $j++): ?>
<span class="skel-td skel-shimmer"></span>
<?php endfor; ?>
</div>
<?php endfor; ?>
</div>
<!-- /AppEvents Skeleton ================================================ -->

2
front/settings.php
View File

@@ -67,7 +67,7 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
<script src="lib/bcrypt/bcrypt.min.js"></script>
<div id="settingsPage" class="content-wrapper">
<div id="settingsPage" class="content-wrapper spinnerTarget">
<?php require 'php/templates/skel_settings.php'; ?>

8
front/systeminfoNetwork.php
View File

@@ -89,10 +89,10 @@ echo '<div class="box box-solid">
// Network ----------------------------------------------------------
echo '<div class="box box-solid">
<div class="box-header">
<h3 class="box-title sysinfo_headline"><i class="fas fa-ethernet"></i> ' . lang('Systeminfo_Network') . '</h3>
</div>
<div class="box-body">
<div class="box-header">
<h3 class="box-title sysinfo_headline"><i class="fas fa-ethernet"></i> ' . lang('Systeminfo_Network') . '</h3>
</div>
<div class="box-body">
<div class="row">
<div class="col-sm-3 sysinfo_network_a">' . lang('Systeminfo_Network_IP') . '</div>
<div class="col-sm-9 sysinfo_network_b" id="external-ip">' .$externalIp. '</div>