Skip to content

Commit 8cb466e

Browse files
jokob-skjokob-sk
committed
feat: Implement settings loading skeleton and enhance UI elements
1 parent a9b2f4b commit 8cb466e

8 files changed

Lines changed: 338 additions & 26 deletions

File tree

‎front/css/app.css‎

Lines changed: 174 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1083,6 +1083,7 @@ height: 50px;
10831083
.settingswrap
10841084
{
10851085
margin-bottom: 100px;
1086+
padding-top: 0px;
10861087
}
10871088

10881089
.settingswrap .metadata
@@ -1178,8 +1179,10 @@ height: 50px;
11781179
/* Settings */
11791180

11801181
#settingsPage .overview-setting-value{
1181-
display:unset;
1182-
1182+
display: block;
1183+
overflow: hidden;
1184+
text-overflow: ellipsis;
1185+
font-size: smaller;
11831186
}
11841187

11851188
.overview-setting-value-wrap
@@ -1228,7 +1231,7 @@ height: 50px;
12281231

12291232
}
12301233
#settingsPage .panel-heading:hover{
1231-
background-color: #272c30;
1234+
background-color: #e8e8e8;
12321235
}
12331236

12341237
.settings-expand-icon {
@@ -2256,7 +2259,7 @@ textarea[readonly],
22562259
----------------------------------------------------------------------------- */
22572260
#loadingSpinner {
22582261
position: fixed;
2259-
z-index: 1000;
2262+
z-index: 9999;
22602263
/* top: 0; */
22612264
/* left: 0; */
22622265
/* width: 100%; */
@@ -2265,7 +2268,6 @@ textarea[readonly],
22652268
transition: opacity 0.3s ease-in-out;
22662269
pointer-events: none;
22672270
display: block;
2268-
z-index: 800;
22692271
}
22702272

22712273
.fa-spinner
@@ -2587,4 +2589,170 @@ table.dataTable tbody > tr.selected
25872589
.input-group-addon.text-muted {
25882590
color: #8c8c8c;
25892591
background-color: rgba(140, 140, 140, 0.05);
2590-
}
2592+
}
2593+
2594+
/* ===== Settings Page Loading Skeleton ===== */
2595+
2596+
:root {
2597+
--skel-base: #e2e2e2;
2598+
--skel-shine: #f0f0f0;
2599+
--skel-section: #d4d4d4;
2600+
--skel-panel-bg: #f5f5f5;
2601+
--skel-border: #ddd;
2602+
--skel-bg: #ecf0f5;
2603+
}
2604+
2605+
@keyframes settingsShimmer {
2606+
0% { background-position: -600px 0; }
2607+
100% { background-position: 600px 0; }
2608+
}
2609+
2610+
#settingsPage {
2611+
position: relative;
2612+
}
2613+
2614+
#settings-skeleton {
2615+
position: absolute;
2616+
top: 0;
2617+
left: 0;
2618+
right: 0;
2619+
z-index: 50;
2620+
background-color: var(--skel-bg);
2621+
padding-top: 50px;
2622+
padding-left: 20px;
2623+
padding-right: 20px;
2624+
min-height: 500px;
2625+
}
2626+
2627+
.skel-shimmer {
2628+
background: linear-gradient(
2629+
90deg,
2630+
var(--skel-base) 25%,
2631+
var(--skel-shine) 50%,
2632+
var(--skel-base) 75%
2633+
);
2634+
background-size: 600px 100%;
2635+
animation: settingsShimmer 1.5s infinite linear;
2636+
border-radius: 3px;
2637+
display: inline-block;
2638+
}
2639+
2640+
/* Overview panel skeleton */
2641+
.skel-overview-panel {
2642+
margin-bottom: 10px;
2643+
border-radius: 4px;
2644+
overflow: hidden;
2645+
border: 1px solid var(--skel-border);
2646+
}
2647+
2648+
.skel-overview-heading {
2649+
height: 44px;
2650+
background: var(--skel-section);
2651+
display: flex;
2652+
align-items: center;
2653+
padding: 0 15px;
2654+
gap: 12px;
2655+
}
2656+
2657+
.skel-overview-body {
2658+
padding: 12px;
2659+
background: var(--skel-panel-bg);
2660+
display: flex;
2661+
gap: 12px;
2662+
flex-wrap: wrap;
2663+
}
2664+
2665+
.skel-overview-card {
2666+
min-width: 100px;
2667+
height: 76px;
2668+
border-radius: 4px;
2669+
}
2670+
2671+
/* Section accordion skeleton */
2672+
.skel-section {
2673+
margin-bottom: 8px;
2674+
border-radius: 4px;
2675+
overflow: hidden;
2676+
border: 1px solid var(--skel-border);
2677+
}
2678+
2679+
.skel-overview-header {
2680+
height: 44px;
2681+
padding: 0 15px;
2682+
display: flex;
2683+
align-items: center;
2684+
gap: 14px;
2685+
background: var(--skel-panel-bg);
2686+
}
2687+
2688+
.skel-section-header {
2689+
height: 44px;
2690+
padding: 0 15px;
2691+
display: flex;
2692+
align-items: center;
2693+
gap: 14px;
2694+
background: var(--skel-section);
2695+
}
2696+
2697+
/* Plugin block inside an open section */
2698+
.skel-plugin-block {
2699+
margin: 8px;
2700+
border-radius: 4px;
2701+
overflow: hidden;
2702+
border: 1px solid var(--skel-border);
2703+
}
2704+
2705+
.skel-plugin-header {
2706+
height: 48px;
2707+
padding: 0 15px;
2708+
display: flex;
2709+
align-items: center;
2710+
gap: 14px;
2711+
background: var(--skel-section);
2712+
}
2713+
2714+
.skel-plugin-body {
2715+
background: var(--skel-panel-bg);
2716+
}
2717+
2718+
.skel-setting-row {
2719+
display: flex;
2720+
align-items: center;
2721+
gap: 10px;
2722+
padding: 11px 15px;
2723+
border-bottom: 1px solid var(--skel-border);
2724+
}
2725+
2726+
.skel-setting-row:last-child {
2727+
border-bottom: none;
2728+
}
2729+
2730+
/* Skeleton line / cell primitives */
2731+
.skel-line {
2732+
height: 14px;
2733+
flex-shrink: 0;
2734+
}
2735+
2736+
.skel-icon-block {
2737+
width: 22px;
2738+
height: 16px;
2739+
flex-shrink: 0;
2740+
}
2741+
2742+
.skel-cell-name {
2743+
width: 20%;
2744+
height: 14px;
2745+
flex-shrink: 0;
2746+
}
2747+
2748+
.skel-cell-desc {
2749+
width: 36%;
2750+
height: 14px;
2751+
flex-shrink: 0;
2752+
}
2753+
2754+
.skel-cell-input {
2755+
flex: 1;
2756+
height: 32px;
2757+
}
2758+
/* ===== /Settings Page Loading Skeleton ===== */

‎front/css/dark-patch.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -516,6 +516,9 @@ textarea[readonly],
516516
border: 1px solid #353c42;
517517
color: #bec5cb;
518518
}
519+
#settingsPage .panel-heading:hover {
520+
background-color: #272c30;
521+
}
519522
.box.box-solid.box-info,
520523
.box.box-solid.box-info > .box-header {
521524
color: #bec5cb;
@@ -754,4 +757,14 @@ table.dataTable tbody tr.selected, table.dataTable tbody tr .selected
754757
font-family: 'Courier New', monospace;
755758
font-size: .85em;
756759
cursor: pointer;
760+
}
761+
762+
/* Settings skeleton - dark theme */
763+
:root {
764+
--skel-base: #2e3540;
765+
--skel-shine: #3d4555;
766+
--skel-section: #252c38;
767+
--skel-panel-bg: #1e242e;
768+
--skel-border: #2a323e;
769+
--skel-bg: #353c42;
757770
}

‎front/css/system-dark-patch.css‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -512,6 +512,9 @@
512512
border: 1px solid #353c42;
513513
color: #bec5cb;
514514
}
515+
#settingsPage .panel-heading:hover {
516+
background-color: #272c30;
517+
}
515518
.box.box-solid.box-info,
516519
.box.box-solid.box-info > .box-header {
517520
color: #bec5cb;
@@ -731,4 +734,14 @@
731734
font-family: 'Courier New', monospace;
732735
font-size: .85em;
733736
cursor: pointer;
734-
}
737+
}
738+
739+
/* Settings skeleton - dark theme */
740+
:root {
741+
--skel-base: #2e3540;
742+
--skel-shine: #3d4555;
743+
--skel-section: #252c38;
744+
--skel-panel-bg: #1e242e;
745+
--skel-border: #2a323e;
746+
--skel-bg: #353c42;
747+
}

‎front/js/common.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -957,8 +957,8 @@ let animationTime = 300
957957
function showSpinner(stringKey = 'Loading') {
958958
let text = isEmpty(stringKey) ? "Loading..." : getString(stringKey || "Loading");
959959

960-
if (text == ""){
961-
text = "Loading"
960+
if (!text || !text.trim()) {
961+
text = "Loading..."
962962
}
963963

964964
const spinner = $("#loadingSpinner");
@@ -978,7 +978,7 @@ function showSpinner(stringKey = 'Loading') {
978978
left: offset.left,
979979
width: width,
980980
height: height,
981-
zIndex: 800
981+
zIndex: 9999
982982
});
983983
} else {
984984
// Fullscreen fallback
@@ -988,7 +988,7 @@ function showSpinner(stringKey = 'Loading') {
988988
left: 0,
989989
width: "100%",
990990
height: "100%",
991-
zIndex: 800
991+
zIndex: 9999
992992
});
993993
}
994994

@@ -1018,7 +1018,7 @@ function hideSpinner() {
10181018
left: offset.left,
10191019
width: width,
10201020
height: height,
1021-
zIndex: 800
1021+
zIndex: 9999
10221022
});
10231023
} else {
10241024
// Fullscreen fallback
@@ -1028,7 +1028,7 @@ function hideSpinner() {
10281028
left: 0,
10291029
width: "100%",
10301030
height: "100%",
1031-
zIndex: 800
1031+
zIndex: 9999
10321032
});
10331033
}
10341034

‎front/js/settings_utils.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ function pluginCards(prefixesOfEnabledPlugins, includeSettings) {
9999
});
100100

101101
html += `
102-
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xxl-1 padding-5px">
102+
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px">
103103
<div class="small-box bg-green col-sm-12 " >
104104
<div class="inner col-sm-12">
105105
<a href="#${prefix}_header" onclick="toggleAllSettings('open')">

‎front/php/templates/header.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ function update_servertime() {
151151
<div class="nax_semitransparent-panel"></div>
152152
<div class="panel panel-default nax_spinner">
153153
<table>
154-
<td id="loadingSpinnerText" width="130px" ></td>
154+
<td id="loadingSpinnerText" width="130px">Loading...</td>
155155
<td><i class="fa-solid fa-spinner fa-spin-pulse"></i></td>
156156
</table>
157157
</div>

0 commit comments

Comments
 (0)