fix: layout updates (#3434)

Description --- Layout updates for block explorer Motivation and Context --- Updates to the styling of the block explorer to make it more visually appealing How Has This Been Tested? --- Has been tested locally
tari-project · Oct 8, 2021 · e260c36 · e260c36
1 parent 188b9de
commit e260c36
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 36 deletions.
diff --git a/applications/tari_explorer/views/blocks.hbs b/applications/tari_explorer/views/blocks.hbs
@@ -1,12 +1,12 @@
 <a href="/">Back to all blocks</a>
-<h1>{{title}}</h1>
+<h2>{{title}}</h2>
 <p>
     <a href="/blocks/{{prevHeight}}">&lt Block {{prevHeight}}</a>
     <a href="/blocks/{{nextHeight}}">Block {{nextHeight}} &gt;</a>
 </p>
-
-<h2>Kernels</h2>
-<table border="1">
+<br />
+<h3>Kernels</h3>
+<table border="1" width="100%" cellpadding="5" bordercolor="#EFEFEF">
     <thead>
     <tr>
         <th>Hash</th>
@@ -31,9 +31,9 @@
     </tbody>
 </table>
 
-
-<h2>Outputs</h2>
-<table border="1">
+<br />
+<h3>Outputs</h3>
+<table border="1" width="100%" cellpadding="5" bordercolor="#EFEFEF">
     <thead>
     <tr>
         <th>Hash</th>
@@ -54,9 +54,9 @@
     </tbody>
 </table>
 
-<hr/>
-<h2>Spent Inputs</h2>
-<table border="1">
+<br />
+<h3>Spent Inputs</h3>
+<table border="1" width="100%" cellpadding="5" bordercolor="#EFEFEF">
     <thead>
     <tr>
         <th>Hash</th>

diff --git a/applications/tari_explorer/views/index.hbs b/applications/tari_explorer/views/index.hbs
@@ -1,5 +1,5 @@
 <h3>Tip</h3>
-<table border="1">
+<table border="1" width="100%" cellpadding="5" bordercolor="#EFEFEF">
     <thead>
     <tr>
         <th>Chain height</th>
@@ -15,10 +15,10 @@
     </tr>
     </tbody>
 </table>
-
+<br />
 
 <h3>Proof of work split</h3>
-<table border="1">
+<table border="1" width="100%" cellpadding="5" bordercolor="#EFEFEF">
     <thead>
     <tr>
         <th rowspan="2">&nbsp;</th>
@@ -51,28 +51,39 @@
     </tr>
     </tbody>
 </table>
+<br />
 
+<table width="100%">
+  <tr>
+    <td>
+      <h3>Block times (minutes)</h3>
+      Target time: 2 minutes
+      <h3>All</h3>
+      <pre>{{chart this.blockTimes 15 }}
+      </pre>
+    </td>
+    <td>
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <h3>Monero</h3>
+      Target time: 3.3 minutes
+      <pre>{{chart this.moneroTimes 15 }}
+      </pre>
+    </td>
+    <td>
+      <h3>SHA3</h3>
+      Target time: 5 minutes
+      <pre>{{chart this.shaTimes 15 }}
+      </pre>
+    </td>
+  </tr>
+</table>
+<br />
 
-<h3>Block times (minutes)</h3>
-Target time: 2 minutes
-<h3>All</h3>
-<pre>
-{{chart this.blockTimes 15 }}
-</pre>
-
-<h3>Monero</h3>
-Target time: 3.3 minutes
-<pre>{{chart this.moneroTimes 15 }}
-</pre>
-
-<h3>SHA3</h3>
-Target time: 5 minutes
-
-<pre>{{chart this.shaTimes 15 }}
-</pre>
-<h1>{{title}}</h1>
-
-<table border="1">
+<h2>{{title}}</h2>
+<table border="1" width="100%" cellpadding="5" bordercolor="#EFEFEF">
     <thead>
     <tr>
         <th>Height</th>
@@ -108,9 +119,10 @@ Target time: 5 minutes
     <a href="/?from={{from}}&limit=50">50</a>
     <a href="/?from={{from}}&limit=100">100</a>
 </p>
+<br />
 
 <h2>Mempool</h2>
-<table border="1">
+<table border="1" width="100%" cellpadding="5" bordercolor="#EFEFEF">
     <thead>
     <tr>
         <th>Excess</th>
@@ -134,3 +146,4 @@ Target time: 5 minutes
     {{/each}}
     </tbody>
 </table>
+<br />
diff --git a/applications/tari_explorer/views/layout.hbs b/applications/tari_explorer/views/layout.hbs
@@ -3,11 +3,20 @@
   <head>
     <title>{{title}}</title>
       <style>
-          body { font-family: "Courier New"; font-size: small}
+          body {
+            font-family: "Courier New";
+            font-size: small;
+            margin: 20px;
+            width: 1100px;
+          }
+          h1, h2, h3, h4, h5, h6 {
+              font-family: Arial, Helvetica, sans-serif;
+          }
       </style>
   </head>
   <body>
-    <h4>A simple, no Javascript, (almost) no CSS block explorer for Tari</h4>
+    <h2>A simple, no Javascript, (almost) no CSS block explorer for Tari</h2>
+    <br />
     {{{body}}}
   </body>
 </html>