Minor UI improves

olton · Dec 18, 2021 · a7b2cfb · a7b2cfb
1 parent 7a294c6
commit a7b2cfb
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -18,6 +18,10 @@
     "staticFiles": {
         "staticPath": [
             "src/config.json",
+            "src/1-config.json",
+            "src/2-config.json",
+            "src/3-config.json",
+            "src/4-config.json",
             "src/.htaccess"
         ]
     },

diff --git a/src/index.html b/src/index.html
@@ -19,8 +19,8 @@
                                 <div class="text-small fg-normal text-center">
                                     <span class=" text-muted">TABLE</span>
                                 </div>
-                                <div id="uptime-position" class="mt-2 big-value">0</div>
-                                <div id="uptime-position-range" class="text-small mt-2">0 .. 0</div>
+                                <div id="uptime-position" class="mt-2 big-value" title="Position in Leaderboard">0</div>
+                                <div id="uptime-position-range" class="text-small mt-2" title="Position range">0 .. 0</div>
                                 <div class="text-small fg-normal mt-1">
                                     <span class="text-muted">position</span>
                                 </div>
@@ -215,9 +215,9 @@
                         <div class="row">
                             <div class="cell-6">
                                 <div class="d-flex flex-justify-center flex-align-center flex-column">
-                                    <div id="delegators-total" class="big-value">0</div>
+                                    <div id="delegators-total" class="big-value" title="Delegations count">0</div>
                                     <div class="text-small fg-normal mt-1">
-                                        <span id="delegators-stack" class="big-value-2">0</span>
+                                        <span id="delegators-stack" class="big-value-2" title="Stake for Epoch">0</span>
                                     </div>
                                     <div class="text-small fg-normal border-top bd-system w-100 text-center mt-1">
                                         <span class="text-muted">current</span>
@@ -226,9 +226,9 @@
                             </div>
                             <div class="cell-6 border-left bd-system">
                                 <div class="d-flex flex-justify-center flex-align-center flex-column">
-                                    <div id="delegators-total-next" class="big-value">0</div>
+                                    <div id="delegators-total-next" class="big-value" title="Delegations count">0</div>
                                     <div class="text-small fg-normal mt-1">
-                                        <span id="delegators-stack-next" class="big-value-2">0</span>
+                                        <span id="delegators-stack-next" class="big-value-2" title="Stake for Epoch">0</span>
                                     </div>
                                     <div class="text-small fg-normal border-top bd-system w-100 text-center mt-1">
                                         <span class="text-muted">next</span>
@@ -303,10 +303,10 @@
     <!-- End of General info -->
 
     <template id="node-template">
-        <span class='node-https-status https-false'>
+        <span class='node-https-status https-false' title="HTTPS/WSS">
             <span class="mif-lock"></span>
         </span>
-        <span class='node-load-status label-alert'>
+        <span class='node-load-status label-alert' title="Connect status">
             <span class="mif-wifi-connect"></span>
         </span>
         <div class="panel" data-role="panel">

diff --git a/src/js/index.js b/src/js/index.js
@@ -95,9 +95,21 @@ fetch(configFile).then(r => {
             responseChartStartPoint: 200,
         }
 
+        let nodeAdditionalClass = 'cell-lg-4'
+
+        if (nodesLength === 2) {
+            nodeAdditionalClass = 'cell-md-6'
+        } else if (nodesLength === 3) {
+            nodeAdditionalClass = 'cell-xl-4 cell-lg-6'
+        } else if (nodesLength === 4) {
+            nodeAdditionalClass = 'cell-xxxl-3 cell-lg-6'
+        } else if (nodesLength >= 5) {
+            nodeAdditionalClass = 'cell-xxxxxl-fifth cell-xxxl-3 cell-lg-6 cell-xl-4'
+        }
+
         elNodesContainer.append(
             elNodePanel = $(`<div class='is-node' id='node-${i+1}'>`)
-                .addClass(nodesLength >= 3 ? 'cell-xxxxxl-fifth cell-xxxl-3 cell-lg-6 cell-xl-4' : 'cell-lg-6')
+                .addClass(nodeAdditionalClass)
         )
 
         template = document.querySelector("#node-template")