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

feat: Implement settings loading skeleton and enhance UI elements

Browse Source
This commit is contained in:
Jokob @NetAlertX
2026-06-20 00:40:01 +00:00
parent a9b2f4b256
commit 8cb466e722
8 changed files with 338 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -151,7 +151,7 @@
<div class="nax_semitransparent-panel"></div>
<div class="panel panel-default nax_spinner">
<table>
<td id="loadingSpinnerText" width="130px" ></td>
<td id="loadingSpinnerText" width="130px">Loading...</td>
<td><i class="fa-solid fa-spinner fa-spin-pulse"></i></td>
</table>
</div>

106
front/php/templates/settings_skeleton.php Normal file
View File

@@ -0,0 +1,106 @@
<!-- Settings Loading Skeleton --------------------------------------------- -->
<div id="settings-skeleton">
<!-- Overview panel skeleton -->
<div class="skel-overview-panel">
<div class="skel-overview-heading">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:180px"></span>
</div>
<div class="skel-overview-body">
<div class="skel-overview-card skel-shimmer col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xxl-1 padding-5px"></div>
<div class="skel-overview-card skel-shimmer col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xxl-1 padding-5px"></div>
<div class="skel-overview-card skel-shimmer col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xxl-1 padding-5px"></div>
</div>
<div class="skel-overview-heading">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:180px"></span>
</div>
<div class="skel-overview-body">
<div class="skel-overview-card skel-shimmer col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xxl-1 padding-5px"></div>
<div class="skel-overview-card skel-shimmer col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xxl-1 padding-5px"></div>
<div class="skel-overview-card skel-shimmer col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xxl-1 padding-5px"></div>
</div>
</div>
<!-- Core section (open, with a plugin block) -->
<div class="skel-section">
<div class="skel-section-header">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:60px"></span>
</div>
<div class="skel-plugin-block">
<div class="skel-plugin-header">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:75px"></span>
<span class="skel-line skel-shimmer" style="width:210px"></span>
</div>
<div class="skel-plugin-body">
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer"></span><span class="skel-cell-input skel-shimmer" style="height:75px"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer" ></span><span class="skel-cell-desc skel-shimmer" ></span><span class="skel-cell-input skel-shimmer" style="max-width:35px"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer" ></span><span class="skel-cell-desc skel-shimmer" ></span><span class="skel-cell-input skel-shimmer" style="max-width:35px"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer" ></span><span class="skel-cell-input skel-shimmer" style="height:75px"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer" ></span><span class="skel-cell-desc skel-shimmer" ></span><span class="skel-cell-input skel-shimmer"></span></div>
</div>
</div>
</div>
<!-- System section (open) -->
<div class="skel-section">
<div class="skel-section-header">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:80px"></span>
</div>
<div class="skel-plugin-block">
<div class="skel-plugin-header">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:90px"></span>
<span class="skel-line skel-shimmer" style="width:185px"></span>
</div>
<div class="skel-plugin-body">
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer"></span><span class="skel-cell-input skel-shimmer"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer"></span><span class="skel-cell-input skel-shimmer"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer"></span><span class="skel-cell-input skel-shimmer"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer"></span><span class="skel-cell-input skel-shimmer"></span></div>
</div>
</div>
</div>
<!-- Device Scanners section (closed) -->
<div class="skel-section">
<div class="skel-section-header">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:140px"></span>
</div>
</div>
<!-- Other Scanners section (open) -->
<div class="skel-section">
<div class="skel-section-header">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:120px"></span>
</div>
<div class="skel-plugin-block">
<div class="skel-plugin-header">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:65px"></span>
<span class="skel-line skel-shimmer" style="width:200px"></span>
</div>
<div class="skel-plugin-body">
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer" style="width:16%"></span><span class="skel-cell-desc skel-shimmer" style="width:40%"></span><span class="skel-cell-input skel-shimmer"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer" style="width:33%"></span><span class="skel-cell-input skel-shimmer"></span></div>
<div class="skel-setting-row"><span class="skel-cell-name skel-shimmer" style="width:19%"></span><span class="skel-cell-desc skel-shimmer" style="width:42%"></span><span class="skel-cell-input skel-shimmer"></span></div>
</div>
</div>
</div>
<!-- Publishers section (closed) -->
<div class="skel-section">
<div class="skel-section-header">
<span class="skel-icon-block skel-shimmer"></span>
<span class="skel-line skel-shimmer" style="width:100px"></span>
</div>
</div>
</div>
<!-- /Settings Loading Skeleton -------------------------------------------- -->