mirror of
https://github.com/jokob-sk/NetAlertX.git
synced 2026-06-21 14:49:59 -04:00
feat: Implement settings loading skeleton and enhance UI elements
This commit is contained in:
@@ -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
106
front/php/templates/settings_skeleton.php
Normal 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 -------------------------------------------- -->
|
||||
Reference in New Issue
Block a user