move css and images to a better place

ethpandaops · Jul 9, 2024 · 4e81463 · 4e81463
1 parent 0a74097
commit 4e81463
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 29 deletions.
diff --git a/static/css/layout.css b/static/css/layout.css
@@ -310,6 +310,9 @@ span.validator-label {
 }
 
 
+/*---------------------------------------------
+Client peers table
+---------------------------------------------*/
 .client-node-peerinfo {
   text-align: center;
   padding-bottom: 10px;
@@ -343,3 +346,44 @@ span.validator-label {
 .peer-table-icon.connected {
   border-color: #03C03C;
 }
+
+.peerInfo.collapsing {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  -webkit-transition-property: height, visibility;
+  transition-property: height, visibility;
+  -webkit-transition-duration: 0.35s;
+  transition-duration: 0.35s;
+  -webkit-transition-timing-function: ease;
+  transition-timing-function: ease;
+}
+
+.clients-bg-wrapper {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  width: 100%;
+  height: 80%;;
+  background: #4b79a1;
+  background: -webkit-linear-gradient(
+    to top,
+    #283e51,
+    #0a2342
+  );
+  background: linear-gradient(
+    to top,
+    #283e51,
+    #0a2342
+  );
+  background: -olinear-gradient(to top, #283e51, #0a2342);
+}
+
+.clients-bg {
+  position:absolute;
+  left: 0px;
+  right: 0px;
+  width: 100%;
+  height: 100%;
+  background: #0f0f0f9f url(/images/stars.png) repeat top center;
+}
diff --git a/static/images/stars.png b/static/images/stars.png
diff --git a/templates/clients/clients.html b/templates/clients/clients.html
@@ -9,33 +9,8 @@ <h1 class="h4 mb-1 mb-md-0"><i class="fas fa-server mx-2"></i>Clients</h1>
         </ol>
       </nav>
     </div>
-    <div style="
-        position: absolute;
-        left: 0px;
-        right: 0px;
-        width: 100%;
-        height: 80%;;
-        background: #4b79a1;
-        background: -webkit-linear-gradient(
-          to top,
-          #283e51,
-          #0a2342
-        );
-        background: linear-gradient(
-          to top,
-          #283e51,
-          #0a2342
-        );
-        background: -olinear-gradient(to top, #283e51, #0a2342);"
-      >
-      <div style="
-        position:absolute;
-        left: 0px;
-        right: 0px;
-        width: 100%;
-        height: 100%;
-        background: #0f0f0f9f url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;"
-      >
+    <div class="clients-bg-wrapper">
+      <div class="clients-bg">
         <div id="nodemap" style="height:1150px"></div>
       </div>
     </div>
@@ -72,7 +47,7 @@ <h1 class="h4 mb-1 mb-md-0"><i class="fas fa-server mx-2"></i>Clients</h1>
                         {{ $client.Name }}<br>
                     </td>
                     <td>
-                      <button onclick="$('#peerInfo-{{ $client.PeerId }}').collapse('toggle')" class="btn btn-sm btn-secondary" type="button">
+                      <button onclick="$('#peerInfo-{{ $client.PeerId }}').collapse('toggle')" class="btn btn-sm btn-secondary dropdown-toggle" type="button">
                         {{ len $client.Peers }}
                       </button>
                     </td>
@@ -99,7 +74,7 @@ <h1 class="h4 mb-1 mb-md-0"><i class="fas fa-server mx-2"></i>Clients</h1>
                       <i class="fa fa-copy text-muted p-1" role="button" data-bs-toggle="tooltip" title="Copy to clipboard" data-clipboard-text="{{ $client.Version }}"></i>
                     </td>
                   </tr>
-                  <tr class="collapse peerInfo" id="peerInfo-{{ $client.PeerId }}">
+                  <tr class="collapse peerInfo" style="transition:0s" id="peerInfo-{{ $client.PeerId }}">
                     <td colspan="7">
                       <div class="client-node-peerinfo">
                         Peer ID: <code>{{ $client.PeerId }}</code>
@@ -237,6 +212,7 @@ <h1 class="h4 mb-1 mb-md-0"><i class="fas fa-server mx-2"></i>Clients</h1>
         },
         smooth: {
           type: "dynamic", // might need to change to "continuous" when there are too many nodes
+          //type: "continuous",
         },
       },
       physics: {