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

FE: skeleton uplift

Browse Source
This commit is contained in:
jokob-sk
2026-06-24 17:35:31 +10:00
parent 155081dc31
commit 5b42dbf2d7
11 changed files with 133 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
front/css/app.css
View File

@@ -20,6 +20,7 @@
--color-red: #dd4b39;
--color-gray: #8c8c8c;
--color-darkgray: #3f3e3e;
--color-lightgray: #bec5cb;
--color-black: #000;
}

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

@@ -14,11 +14,20 @@
--color-aqua: #00c0ef;
--color-lightblue: #3c8dbc;
--color-blue: #0060df;
--color-black: #000;
--color-white: #fff;
--color-green: #00a65a;
--color-yellow: #f39c12;
--color-red: #dd4b39;
--color-gray: #8c8c8c;
--color-lightgray: #bec5cb;
--color-white: #fff;
--skel-base: #353c42;
--skel-shine: #272c30;
--skel-section: #272c30;
--skel-panel-bg: #272c30;
--skel-border: #2a323e;
--skel-bg: #353c42;
}
:root {
@@ -35,13 +44,13 @@ html {
body, .bg-yellow, .callout.callout-warning, .alert-warning, .label-warning, .modal-warning .modal-body {
background-color: #353c42 !important;
color: #bec5cb !important;
color: var(--color-lightgray) !important;
}
h4 {
color: #44def1;
}
.content-header > .breadcrumb > li > a {
color: #bec5cb;
color: var(--color-lightgray);
}
.table > thead > tr.odd,
@@ -69,7 +78,7 @@ h4 {
.dataTables_wrapper input[type="search"] {
background-color: #353c42;
border: 0;
color: #bec5cb;
color: var(--color-lightgray);
}
.dataTables_paginate .pagination li > a {
background-color: #353c42;
@@ -82,7 +91,7 @@ h4 {
.pagination > .disabled > span:focus,
.pagination > .disabled > span:hover {
cursor: not-allowed;
color: #bec5cb;
color: var(--color-lightgray);
background-color: #353c42;
border-color: #353c42;
}
@@ -91,7 +100,7 @@ h4 {
.pagination > li > span:focus,
.pagination > li > span:hover {
z-index: 2;
color: #bec5cb;
color: var(--color-lightgray);
background-color: #54606b;
border-color: #54606b;
}
@@ -122,7 +131,7 @@ h4 {
background-color: #32393e;
}
.sidebar a {
color: #bec5cb;
color: var(--color-lightgray);
}
.sidebar a:hover {
text-decoration: none;
@@ -172,7 +181,7 @@ h4 {
.box-comment,
.comment-text,
.comment-text .username {
color: #bec5cb;
color: var(--color-lightgray);
background-color: #272c30;
}
.box-comments .box-comment {
@@ -190,11 +199,11 @@ h4 {
}
.box-solid > .box-header,
.box > .box-header {
color: #bec5cb;
color: var(--color-lightgray);
}
.box-solid > .box-header .btn,
.box > .box-header .btn {
color: #bec5cb;
color: var(--color-lightgray);
}
.main-header .navbar {
@@ -202,7 +211,7 @@ h4 {
}
.main-header .navbar .nav > li > a,
.main-header .navbar .nav > li > .navbar-text {
color: #bec5cb;
color: var(--color-lightgray);
}
.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:active,
@@ -215,14 +224,14 @@ h4 {
color: #f6f6f6;
}
.main-header .navbar .sidebar-toggle {
color: #bec5cb;
color: var(--color-lightgray);
}
.main-header .navbar .sidebar-toggle:hover {
color: #f6f6f6;
background-color: rgba(0, 0, 0, 0.1);
}
.timeline li .timeline-item {
color: #bec5cb;
color: var(--color-lightgray);
background-color: #272c30;
border-color: #353c42;
}
@@ -230,7 +239,7 @@ h4 {
border-bottom-color: #353c42;
}
.nav-stacked > li > a {
color: #bec5cb;
color: var(--color-lightgray);
}
.nav-stacked > li > a:hover {
color: white;
@@ -244,7 +253,7 @@ h4 {
.nav-tabs-custom {
background-color: #272c30;
border-top-color: #353c42;
color: #bec5cb;
color: var(--color-lightgray);
}
.main-footer .nav-tabs,
.nav-tabs-custom .nav-tabs {
@@ -259,14 +268,14 @@ h4 {
background: rgba(64, 72, 80, 0.666);
}
.nav-tabs-custom > .nav-tabs > li {
color: #bec5cb;
color: var(--color-lightgray);
}
.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active:hover > a {
border-left-color: #30383f;
border-right-color: #30383f;
background-color: #30383f;
color: #bec5cb;
color: var(--color-lightgray);
}
.nav-tabs-custom > .nav-tabs > li:not(.active):hover {
border-top-color: #d2d6de;
@@ -281,11 +290,11 @@ h4 {
.nav-tabs-custom > .nav-tabs > li:hover > a,
.nav-tabs-custom > .nav-tabs > li.active:hover > a {
background-color: #353c42;
color: #bec5cb;
color: var(--color-lightgray);
}
.list-group {
color: #bec5cb;
color: var(--color-lightgray);
background-color: #272c30;
}
.list-group .list-group-item {
@@ -297,23 +306,23 @@ h4 {
}
.select2 .select2-selection {
background-color: #353c42;
color: #bec5cb;
color: var(--color-lightgray);
border: 1px solid #353c42;
}
.select2 .select2-selection .select2-container--default,
.select2 .select2-selection .select2-selection--single,
.select2 .select2-selection .select2-selection--multiple,
.select2 .select2-selection .select2-selection__rendered {
color: #bec5cb;
color: var(--color-lightgray);
}
.select2-dropdown {
background-color: #353c42;
color: #bec5cb;
color: var(--color-lightgray);
border: 1px solid #353c42;
}
.select2-dropdown .select2-search__field {
background-color: #272c30;
color: #bec5cb;
color: var(--color-lightgray);
border: 1px solid #353c42;
}
.select2-container--default.select2-container--open {
@@ -367,7 +376,7 @@ h4 {
code,
pre {
color: #bec5cb;
color: var(--color-lightgray);
background-color: #353c42;
}
@@ -393,7 +402,7 @@ td.highlight {
.btn-default {
box-shadow: none;
background-color: #3e464c;
color: #bec5cb;
color: var(--color-lightgray);
border: 1px solid #353c42;
}
@@ -406,7 +415,7 @@ td.highlight {
.btn-outline:hover
{
border: 1px solid var(--color-black);
background-color: var(--color-black);;
background-color: var(--color-black);
color: var(--color-white);
}
@@ -472,7 +481,7 @@ td.highlight {
}
.daterangepicker td.in-range {
background-color: #1e2226;
color: #bec5cb;
color: var(--color-lightgray);
}
input,
select,
@@ -490,7 +499,7 @@ select.form-control,
.form-control,
div.dataTables_wrapper div.dataTables_length select {
background-color: #353c42;
color: #bec5cb;
color: var(--color-lightgray);
border: 1px solid #3d444b;
}
.form-control[disabled],
@@ -510,7 +519,7 @@ textarea[readonly],
.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
background-color: #4c5761;
color: #bec5cb;
color: var(--color-lightgray);
border: 1px solid #171c20;
}
.table-striped > tbody > tr:nth-of-type(2n + 1) {
@@ -522,14 +531,14 @@ textarea[readonly],
background-color: #3e464c;
border: 1px solid #353c42;
color: #bec5cb;
color: var(--color-lightgray);
}
#settingsPage .panel-heading:hover {
background-color: #272c30;
}
.box.box-solid.box-info,
.box.box-solid.box-info > .box-header {
color: #bec5cb;
color: var(--color-lightgray);
background-color: #367fa9 !important;
border: 1px solid #367fa9;
}
@@ -564,7 +573,7 @@ input[type="password"]::-webkit-caps-lock-indicator {
.box .overlay > .fa,
.overlay-wrapper .overlay > .fa,
.navbar-nav > .user-menu > .dropdown-menu > .user-body a {
color: #bec5cb !important;
color: var(--color-lightgray) !important;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
@@ -643,6 +652,9 @@ input[type="password"]::-webkit-caps-lock-indicator {
background-color: #353c42;
border-color: #888888;
}
#txtRecord:hover {
color: var(--color-lightgray);
}
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
background-color: var(--datatable-bgcolor);
color: var(--fbc-white);
@@ -663,14 +675,14 @@ table.dataTable tbody tr.selected, table.dataTable tbody tr .selected
.nav-tabs-custom > .nav-tabs > li:hover > a, .nav-tabs-custom > .nav-tabs > li.active:hover > a {
background-color: #272c30;
color: #bec5cb;
color: var(--color-lightgray);
}
.nav-tabs-custom > .nav-tabs > li.active > a, .nav-tabs-custom > .nav-tabs > li.active:hover > a {
border-left-color: #30383f;
border-right-color: #30383f;
background-color: #272c30;
color: #bec5cb;
color: var(--color-lightgray);
}
.nav-tabs-custom > .nav-tabs {
background-color: #353c42;
@@ -700,7 +712,7 @@ table.dataTable tbody tr.selected, table.dataTable tbody tr .selected
}
.login-box-body {
color: #bec5cb;
color: var(--color-lightgray);
background-color: #272c30;
}
@@ -716,12 +728,12 @@ table.dataTable tbody tr.selected, table.dataTable tbody tr .selected
/* Chevron color */
.select2-container .select2-selection__arrow::after {
color: #bec5cb;
color: var(--color-lightgray);
}
/* Chevron color */
.select2-selection .select2-selection--single {
color: #bec5cb;
color: var(--color-lightgray);
}
.select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--single {
@@ -730,12 +742,12 @@ table.dataTable tbody tr.selected, table.dataTable tbody tr .selected
.select2-container--default .select2-selection--multiple {
background-color: #353c42 !important;
color: #bec5cb;
color: var(--color-lightgray);
}
.select2-container--default .select2-selection--single .select2-selection__rendered .custom-chip
{
color: #bec5cb;
color: var(--color-lightgray);
}
#hover-box
@@ -766,13 +778,3 @@ table.dataTable tbody tr.selected, table.dataTable tbody tr .selected
font-size: .85em;
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;
}

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

@@ -21,6 +21,7 @@
--color-red: #dd4b39;
--color-gray: #8c8c8c;
--color-darkgray: #3f3e3e;
--color-lightgray: #bec5cb;
--color-white: #fff;
--skel-base: #353c42;
--skel-shine: #272c30;
@@ -634,6 +635,9 @@
background-color: #353c42;
border-color: #888888;
}
#txtRecord:hover {
color: var(--color-lightgray);
}
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
background-color: var(--datatable-bgcolor);
color: var(--fbc-white);

1
front/deviceDetails.php
View File

@@ -269,6 +269,7 @@ function recordSwitch(direction) {
'<?= lang('Gen_Cancel');?>', '<?= lang('Gen_Okay');?>', performSwitch, direction);
} else
{
showSpinner();
performSwitch(direction)
}
}

7
front/deviceDetailsEdit.php
View File

@@ -423,6 +423,7 @@ function setDeviceData(direction = '', refreshCallback = '') {
}
showSpinner();
showDetailsTabSkeleton();
const apiToken = getSetting("API_TOKEN"); // dynamic token
const apiBaseUrl = getApiBase();
@@ -669,7 +670,11 @@ function toggleFieldLock(mac, fieldName) {
// -----------------------------------------------------------------------------
function hideDetailsTabSkeleton() {
$('#skel-tab-details').fadeOut(50, function() { $(this).remove(); });
$('#skel-tab-details').fadeOut(50, function() { $(this).hide(); });
}
function showDetailsTabSkeleton() {
var $skel = $('#skel-tab-details');
$skel.stop(true, true).fadeIn(10);
}
</script>

11
front/deviceDetailsEvents.php
View File

@@ -180,9 +180,10 @@ function initDeviceEventsPage()
// init page once
if (eventsPageInitialized) return; // ENSURE ONCE
eventsPageInitialized = true;
showEventsTabSkeleton();
showSpinner();
var eventsRows = 10;
var eventsHide = true;
@@ -203,7 +204,11 @@ deviceEventsPageUpdater();
// -----------------------------------------------------------------------------
function hideEventsTabSkeleton() {
$('#skel-tab-events').fadeOut(50, function() { $(this).remove(); });
$('#skel-tab-events').fadeOut(50, function() { $(this).hide(); });
}
function showEventsTabSkeleton() {
var $skel = $('#skel-tab-events');
$skel.stop(true, true).fadeIn(10);
}
</script>

8
front/deviceDetailsPresence.php
View File

@@ -195,6 +195,7 @@ function initDevicePresencePage() {
if (presencePageInitialized) return;
presencePageInitialized = true;
showPresenceTabSkeleton();
showSpinner();
initializeCalendar();
@@ -212,7 +213,12 @@ devicePresencePageUpdater();
// -----------------------------------------------------------------------------
function hidePresenceTabSkeleton() {
$('#skel-tab-presence').fadeOut(50, function() { $(this).remove(); });
$('#skel-tab-presence').fadeOut(50, function() { $(this).hide(); });
}
function showPresenceTabSkeleton() {
var $skel = $('#skel-tab-presence');
$skel.stop(true, true).fadeIn(10);
}

8
front/deviceDetailsSessions.php
View File

@@ -98,6 +98,7 @@ function loadSessionsData() {
const table = $('#tableSessions').DataTable();
let period = $("#period").val()
showSessionsTabSkeleton();
showSpinner();
// Build API base
@@ -179,7 +180,12 @@ deviceSessionsPageUpdater();
// -----------------------------------------------------------------------------
function hideSessionsTabSkeleton() {
$('#skel-tab-sessions').fadeOut(50, function() { $(this).remove(); });
$('#skel-tab-sessions').fadeOut(50, function() { $(this).hide(); });
}
function showSessionsTabSkeleton() {
var $skel = $('#skel-tab-sessions');
$skel.stop(true, true).fadeIn(10);
}
</script>

26
front/deviceDetailsTools.php
View File

@@ -2,8 +2,8 @@
//------------------------------------------------------------------------------
// check if authenticated
require_once $_SERVER['DOCUMENT_ROOT'] . '/php/templates/security.php';
require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_tab_tools.php';
?>
<!-- INTERNET INFO -->
<?php if (strtolower($_REQUEST["mac"]) == "internet") { ?>
@@ -214,6 +214,9 @@
const apiToken = getSetting("API_TOKEN");
const apiBaseUrl = getApiBase();
showSpinner();
showToolsTabSkeleton();
// ----------------------------------------------------------------
function manualnmapscan(targetip, mode) {
$("#scanoutput").empty();
@@ -435,8 +438,6 @@
// ----------------------------------------------------------------
function wakeonlan() {
const macAddress = getMac();
const ipAddress = getDevDataByMac(macAddress, "devLastIP");
@@ -703,9 +704,10 @@
toolsPageInitialized = true;
initNmapButtons();
initCopyFromDevice();
initCopyFromDevice();
hideSpinner();
hideToolsTabSkeleton();
}
@@ -721,4 +723,18 @@
// start updater
deviceToolsPageUpdater();
window.addEventListener('load', function () {
console.log('Page fully loaded');
});
function hideToolsTabSkeleton() {
$('#skel-tab-tools').fadeOut(50, function() { $(this).hide(); });
}
function showToolsTabSkeleton() {
var $skel = $('#skel-tab-tools');
$skel.stop(true, true).fadeIn(10);
}
</script>

27
front/php/templates/skel_tab_tools.php Normal file
View File

@@ -0,0 +1,27 @@
<div id="skel-tab-tools">
<!-- events table -->
<div class="row" style="margin-top:12px">
<div class="col-xs-12">
<div class="skel-table-box">
<div class="skel-box-header">
<span class="skel-line skel-shimmer" style="width:120px"></span>
<span class="skel-line skel-shimmer" style="width:90px; margin-left:auto;"></span>
</div>
<div class="skel-table-header-row">
<?php for ($i = 0; $i < 6; $i++): ?>
<span class="skel-th skel-shimmer"></span>
<?php endfor; ?>
</div>
<?php for ($i = 0; $i < 20; $i++): ?>
<div class="skel-tr">
<?php for ($j = 0; $j < 6; $j++): ?>
<span class="skel-td skel-shimmer"></span>
<?php endfor; ?>
</div>
<?php endfor; ?>
</div>
</div>
</div>
</div>

2
front/pluginsCore.php
View File

@@ -667,7 +667,7 @@ function initializeDataTables(prefix, colDefinitions, pluginObj) {
// Fade out the skeleton only after the first draw so there is no gap
// between the skeleton disappearing and the table rows appearing.
initComplete: function() {
$(skelId).fadeOut(50, function() { $(this).remove(); });
$(skelId).fadeOut(50, function() { $(this).hide(); });
},
createdRow: function(row, data) {
$(row).attr('data-my-index', data.index);