client pages: move some css

ethpandaops · Sep 2, 2024 · 146bdc7 · 146bdc7
1 parent 772cde0
commit 146bdc7
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/static/css/clients.css b/static/css/clients.css
@@ -30,6 +30,23 @@ Client peers table
 .client-node-enr-infos{
   text-align: left;
 }
+
+.client-node-peer-details {
+  margin-left: 46px;
+  padding-top:3px;
+  margin-bottom: 10px;
+  border-left: 1px dotted;
+  border-bottom: 1px dotted;
+}
+
+.client-node-peer-details > tr {
+  vertical-align: top;
+}
+
+.client-node-peer-count {
+  width:30px;
+  display: inline-block;
+}
 .client-node-icon {
   border-radius:50%;
   border:1px solid #0f0f0f;

diff --git a/templates/clients/clients_cl.html b/templates/clients/clients_cl.html
@@ -74,15 +74,15 @@ <h2 class="accordion-header">
                       </span>
                     </td>
                     <td style="font-size: 0.8rem; vertical-align: middle;">
-                      <span style="width:30px;display: inline-block;" class="text-success" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Inbound Peers">
+                      <span class="client-node-peer-count text-success" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Inbound Peers">
                         {{ $client.PeersInboundCounter }}
                         <i class="fa-solid fa-arrow-down"></i>
                       </span>
-                      <span style="width:30px;display: inline-block;" class="text-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Outbound Peers">
+                      <span class="client-node-peer-count text-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Outbound Peers">
                         {{ $client.PeersOutboundCounter}}
                         <i class="fa-solid fa-arrow-up"></i>
                       </span>
-                      <span style="width:30px;display: inline-block;" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Total Peers">
+                      <span class="client-node-peer-count" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Total Peers">
                         ({{ len $client.Peers }})
                       </span>
                     </td>
@@ -179,8 +179,7 @@ <h2 class="accordion-header">
                               {{ end }}
                             </div>
                             {{ if $root.ShowSensitivePeerInfos }}
-
-                              <div style="margin-left: 46px; padding-top:3px; margin-bottom: 10px;border-left: 1px dotted; border-bottom: 1px dotted;">
+                              <div class="client-node-peer-details">
                                 <table class="table table-borderless table-sm client-table-info" style="padding-left:0; margin-top:10px;margin-bottom: 10px; margin-left: 10px;">
                                   <tbody>
                                     <tr>
@@ -190,7 +189,7 @@ <h2 class="accordion-header">
                                         <i class="fa fa-copy text-muted p-1" role="button" data-bs-placement="right" data-bs-toggle="tooltip" title="Copy to clipboard" data-clipboard-text="{{ $peer.LastSeenP2PAddress }}"></i>
                                       </td>
                                     </tr>
-                                    <tr style="vertical-align: top;">
+                                    <tr>
                                       <td>ENR</td>
                                       <td>
                                         <div style="word-break: break-all; text-wrap: pretty;">