mirror of
https://github.com/jokob-sk/NetAlertX.git
synced 2026-06-21 14:49:59 -04:00
12d5991505
- Created skeleton templates for events, notifications, plugins, presence, report, settings, and workflows to enhance loading states. - Implemented structured skeletons for tab details, tab events, maintenance backup, database tools, logging, multi-edit, presence, sessions, and system info. - Each template includes shimmer effects for loading indicators, improving user experience during data fetching.
76 lines
4.4 KiB
PHP
76 lines
4.4 KiB
PHP
<!-- Events Tab Skeleton =================================================== -->
|
|
<div id="skel-tab-events" class="skel-tab-pane">
|
|
<!-- Checkbox row -->
|
|
<div style="display:flex; align-items:center; gap:10px; margin-bottom:12px; padding:0 2px;">
|
|
<span class="skel-shimmer" style="width:16px; height:16px; border-radius:3px; flex-shrink:0;"></span>
|
|
<span class="skel-line skel-shimmer" style="width:220px"></span>
|
|
</div>
|
|
<!-- Table -->
|
|
<div class="skel-table-box">
|
|
<div class="skel-table-header-row">
|
|
<span class="skel-th skel-shimmer" style="flex:1.5"></span>
|
|
<span class="skel-th skel-shimmer" style="flex:1.5"></span>
|
|
<span class="skel-th skel-shimmer" style="flex:2"></span>
|
|
<span class="skel-th skel-shimmer" style="flex:1.5"></span>
|
|
<span class="skel-th skel-shimmer" style="flex:2"></span>
|
|
</div>
|
|
<div class="skel-tr">
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:15%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:14%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:2; max-width:18%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:12%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:2; max-width:20%"></span>
|
|
</div>
|
|
<div class="skel-tr">
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:13%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:2; max-width:22%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:11%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:2; max-width:16%"></span>
|
|
</div>
|
|
<div class="skel-tr">
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:13%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:2; max-width:19%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:14%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:2; max-width:18%"></span>
|
|
</div>
|
|
<div class="skel-tr">
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:14%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:15%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:2; max-width:20%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:13%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:2; max-width:22%"></span>
|
|
</div>
|
|
<div class="skel-tr">
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:12%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:17%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:2; max-width:17%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:10%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:2; max-width:24%"></span>
|
|
</div>
|
|
<div class="skel-tr">
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:15%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:12%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:2; max-width:21%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:15%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:2; max-width:19%"></span>
|
|
</div>
|
|
<div class="skel-tr">
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:17%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:14%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:2; max-width:18%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:12%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:2; max-width:21%"></span>
|
|
</div>
|
|
<div class="skel-tr">
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:13%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:2; max-width:23%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:1.5; max-width:11%"></span>
|
|
<span class="skel-td skel-shimmer" style="flex:2; max-width:17%"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /Events Tab Skeleton ================================================== -->
|