Improve explorer navbar responsiveness, update copyright year #327, #343

2020-01-02 17:29:14 +01:00 · 2020-01-02 17:29:14 +01:00 · 35c9da1ce8
parent 1ce7bc1406
commit 35c9da1ce8
3 changed files with 68 additions and 65 deletions
--- a/server/public_test.go
+++ b/server/public_test.go
@ -218,7 +218,7 @@ func httpTestsBitcoinType(t *testing.T, ts *httptest.Server) {
 			status:      http.StatusOK,
 			contentType: "text/html; charset=utf-8",
 			body: []string{
-				`<a href="/" class="nav-link">Fake Coin Explorer</a>`,
+				`<a class="navbar-brand" href="/">Fake Coin Explorer</a>`,
 				`<h1>Transaction</h1>`,
 				`<span class="data">fdd824a780cbb718eeb766eb05d83fdefc793a27082cd5e67f856d69798cf7db</span>`,
 				`td class="data">0 FAKE</td>`,
@ -234,7 +234,7 @@ func httpTestsBitcoinType(t *testing.T, ts *httptest.Server) {
 			status:      http.StatusOK,
 			contentType: "text/html; charset=utf-8",
 			body: []string{
-				`<a href="/" class="nav-link">Fake Coin Explorer</a>`,
+				`<a class="navbar-brand" href="/">Fake Coin Explorer</a>`,
 				`<h1>Address`,
 				`<small class="text-muted">0 FAKE</small>`,
 				`<span class="data">mtGXQvBowMkBpnhLckhxhbwYK44Gs9eEtz</span>`,
@ -254,7 +254,7 @@ func httpTestsBitcoinType(t *testing.T, ts *httptest.Server) {
 			status:      http.StatusOK,
 			contentType: "text/html; charset=utf-8",
 			body: []string{
-				`<a href="/" class="nav-link">Fake Coin Explorer</a>`,
+				`<a class="navbar-brand" href="/">Fake Coin Explorer</a>`,
 				`<h1>Transaction</h1>`,
 				`<span class="data">3d90d15ed026dc45e19ffb52875ed18fa9e8012ad123d7f7212176e2b0ebdb71</span>`,
 				`<td class="data">0.00000062 FAKE</td>`,
@ -267,7 +267,7 @@ func httpTestsBitcoinType(t *testing.T, ts *httptest.Server) {
 			status:      http.StatusOK,
 			contentType: "text/html; charset=utf-8",
 			body: []string{
-				`<a href="/" class="nav-link">Fake Coin Explorer</a>`,
+				`<a class="navbar-brand" href="/">Fake Coin Explorer</a>`,
 				`<h1>Error</h1>`,
 				`<h4>Transaction not found</h4>`,
 				`</html>`,
@ -279,7 +279,7 @@ func httpTestsBitcoinType(t *testing.T, ts *httptest.Server) {
 			status:      http.StatusOK,
 			contentType: "text/html; charset=utf-8",
 			body: []string{
-				`<a href="/" class="nav-link">Fake Coin Explorer</a>`,
+				`<a class="navbar-brand" href="/">Fake Coin Explorer</a>`,
 				`<h1>Blocks`,
 				`<td><a href="/block/225494">225494</a></td>`,
 				`<td class="ellipsis">00000000eb0443fd7dc4a1ed5c686a8e995057805f9a161d9a5a77a95e72b7b6</td>`,
@ -295,7 +295,7 @@ func httpTestsBitcoinType(t *testing.T, ts *httptest.Server) {
 			status:      http.StatusOK,
 			contentType: "text/html; charset=utf-8",
 			body: []string{
-				`<a href="/" class="nav-link">Fake Coin Explorer</a>`,
+				`<a class="navbar-brand" href="/">Fake Coin Explorer</a>`,
 				`<h1>Block 225494</h1>`,
 				`<span class="data">00000000eb0443fd7dc4a1ed5c686a8e995057805f9a161d9a5a77a95e72b7b6</span>`,
 				`<td class="data">4</td>`, // number of transactions
@ -311,7 +311,7 @@ func httpTestsBitcoinType(t *testing.T, ts *httptest.Server) {
 			status:      http.StatusOK,
 			contentType: "text/html; charset=utf-8",
 			body: []string{
-				`<a href="/" class="nav-link">Fake Coin Explorer</a>`,
+				`<a class="navbar-brand" href="/">Fake Coin Explorer</a>`,
 				`<h1>Application status</h1>`,
 				`<h3 class="bg-warning text-white" style="padding: 20px;">Synchronization with backend is disabled, the state of index is not up to date.</h3>`,
 				`<a href="/block/225494">225494</a>`,
@ -325,7 +325,7 @@ func httpTestsBitcoinType(t *testing.T, ts *httptest.Server) {
 			status:      http.StatusOK,
 			contentType: "text/html; charset=utf-8",
 			body: []string{
-				`<a href="/" class="nav-link">Fake Coin Explorer</a>`,
+				`<a class="navbar-brand" href="/">Fake Coin Explorer</a>`,
 				`<h1>Block 225494</h1>`,
 				`<span class="data">00000000eb0443fd7dc4a1ed5c686a8e995057805f9a161d9a5a77a95e72b7b6</span>`,
 				`<td class="data">4</td>`, // number of transactions
@ -341,7 +341,7 @@ func httpTestsBitcoinType(t *testing.T, ts *httptest.Server) {
 			status:      http.StatusOK,
 			contentType: "text/html; charset=utf-8",
 			body: []string{
-				`<a href="/" class="nav-link">Fake Coin Explorer</a>`,
+				`<a class="navbar-brand" href="/">Fake Coin Explorer</a>`,
 				`<h1>Block 225494</h1>`,
 				`<span class="data">00000000eb0443fd7dc4a1ed5c686a8e995057805f9a161d9a5a77a95e72b7b6</span>`,
 				`<td class="data">4</td>`, // number of transactions
@ -357,7 +357,7 @@ func httpTestsBitcoinType(t *testing.T, ts *httptest.Server) {
 			status:      http.StatusOK,
 			contentType: "text/html; charset=utf-8",
 			body: []string{
-				`<a href="/" class="nav-link">Fake Coin Explorer</a>`,
+				`<a class="navbar-brand" href="/">Fake Coin Explorer</a>`,
 				`<h1>Transaction</h1>`,
 				`<span class="data">fdd824a780cbb718eeb766eb05d83fdefc793a27082cd5e67f856d69798cf7db</span>`,
 				`td class="data">0 FAKE</td>`,
@ -373,7 +373,7 @@ func httpTestsBitcoinType(t *testing.T, ts *httptest.Server) {
 			status:      http.StatusOK,
 			contentType: "text/html; charset=utf-8",
 			body: []string{
-				`<a href="/" class="nav-link">Fake Coin Explorer</a>`,
+				`<a class="navbar-brand" href="/">Fake Coin Explorer</a>`,
 				`<h1>Address`,
 				`<small class="text-muted">0 FAKE</small>`,
 				`<span class="data">mtGXQvBowMkBpnhLckhxhbwYK44Gs9eEtz</span>`,
@ -393,7 +393,7 @@ func httpTestsBitcoinType(t *testing.T, ts *httptest.Server) {
 			status:      http.StatusOK,
 			contentType: "text/html; charset=utf-8",
 			body: []string{
-				`<a href="/" class="nav-link">Fake Coin Explorer</a>`,
+				`<a class="navbar-brand" href="/">Fake Coin Explorer</a>`,
 				`<h1>XPUB <small class="text-muted">1186.419755 FAKE</small></h1><div class="alert alert-data ellipsis"><span class="data">upub5E1xjDmZ7Hhej6LPpS8duATdKXnRYui7bDYj6ehfFGzWDZtmCmQkZhc3Zb7kgRLtHWd16QFxyP86JKL3ShZEBFX88aciJ3xyocuyhZZ8g6q</span></div>`,
 				`<td style="width: 25%;">Total Received</td><td class="data">1186.41975501 FAKE</td>`,
 				`<td>Total Sent</td><td class="data">0.00000001 FAKE</td>`,
@ -411,7 +411,7 @@ func httpTestsBitcoinType(t *testing.T, ts *httptest.Server) {
 			status:      http.StatusOK,
 			contentType: "text/html; charset=utf-8",
 			body: []string{
-				`<a href="/" class="nav-link">Fake Coin Explorer</a>`,
+				`<a class="navbar-brand" href="/">Fake Coin Explorer</a>`,
 				`<h1>Error</h1>`,
 				`<h4>No matching records found for &#39;1234&#39;</h4>`,
 				`</html>`,
@ -423,7 +423,7 @@ func httpTestsBitcoinType(t *testing.T, ts *httptest.Server) {
 			status:      http.StatusOK,
 			contentType: "text/html; charset=utf-8",
 			body: []string{
-				`<a href="/" class="nav-link">Fake Coin Explorer</a>`,
+				`<a class="navbar-brand" href="/">Fake Coin Explorer</a>`,
 				`<h1>Send Raw Transaction</h1>`,
 				`<textarea class="form-control" rows="8" name="hex"></textarea>`,
 				`</html>`,
@ -435,7 +435,7 @@ func httpTestsBitcoinType(t *testing.T, ts *httptest.Server) {
 			status:      http.StatusOK,
 			contentType: "text/html; charset=utf-8",
 			body: []string{
-				`<a href="/" class="nav-link">Fake Coin Explorer</a>`,
+				`<a class="navbar-brand" href="/">Fake Coin Explorer</a>`,
 				`<h1>Send Raw Transaction</h1>`,
 				`<textarea class="form-control" rows="8" name="hex">12341234</textarea>`,
 				`<div class="alert alert-danger">Invalid data</div>`,
--- a/static/css/main.css
+++ b/static/css/main.css
@ -87,7 +87,6 @@ h3 {
    position: absolute;
    top: 0;
    left: 0;
-    height: 53px;
    width: 100%;
    margin: 0;
    padding-bottom: 0;
@ -98,31 +97,39 @@ h3 {

 .bg-trezor {
    background-color: #212121!important;
-    height: 53px;
+    padding-top: 3px;
+    padding-bottom: 2px;
+    z-index: 2;
 }

-.bg-trezor .navbar-text {
+.bg-trezor .navbar-brand {
    color: rgba(255, 255, 255);
    font-weight: bold;
    font-size: 19px;
+    fill: #FFFFFF;
 }

-.trezor-logo-svg-white svg {
-    fill: #FFFFFF;
-    margin-top: 6px;
+@media (max-width: 768px) {
+    .navbar {
+        font-size: 14px;
+    }
+    .bg-trezor .navbar-brand {
+        font-weight: normal;
+        font-size: 14px;
+    }
 }

 #wrap {
    min-height: 100%;
    height: auto;
    padding: 75px 0;
-    margin: 0 auto -53px;
+    margin: 0 auto -45px;
 }

 #footer {
    background-color: #212121;
    color: #fff;
-    height: 53px;
+    height: 45px;
    overflow: hidden;
 }

@ -243,15 +250,6 @@ table.data-table table.data-table th {
    margin: 0;
 }

-.navbar-nav .nav-link {
-    padding-right: 0;
-    padding-left: .25rem;
-}
-
-.navbar-text .nav-link {
-    padding: 0;
-}
-
 ::-webkit-input-placeholder {
    color: #CCC!important;
    font-style: italic;
--- a/static/templates/base.html
+++ b/static/templates/base.html
@ -14,10 +14,10 @@
 <body>
    <header id="header">
        <div class="container">
-            <nav class="navbar navbar-expand navbar-dark bg-trezor">
+            <nav class="navbar navbar-expand-lg navbar-dark bg-trezor">
                <a class="navbar-brand" href="/" title="Home">
-                    <div alt="Trezor Wallet" class="trezor-logo-svg-white">
-                        <svg width="100" height="42" version="1.1" id="logotyp" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 163.7 41.9" space="preserve">
+                    <div alt="Trezor Wallet" style="margin-top: 3px;">
+                        <svg width="100" version="1.1" id="logotyp" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 163.7 41.9" space="preserve">
                            <polygon points="101.1,12.8 118.2,12.8 118.2,17.3 108.9,29.9 118.2,29.9 118.2,35.2 101.1,35.2 101.1,30.7 110.4,18.1 101.1,18.1"></polygon>
                            <path d="M158.8,26.9c2.1-0.8,4.3-2.9,4.3-6.6c0-4.5-3.1-7.4-7.7-7.4h-10.5v22.3h5.8v-7.5h2.2l4.1,7.5h6.7L158.8,26.9z M154.7,22.5h-4V18h4c1.5,0,2.5,0.9,2.5,2.2C157.2,21.6,156.2,22.5,154.7,22.5z"></path>
                            <path d="M130.8,12.5c-6.8,0-11.6,4.9-11.6,11.5s4.9,11.5,11.6,11.5s11.7-4.9,11.7-11.5S137.6,12.5,130.8,12.5z M130.8,30.3c-3.4,0-5.7-2.6-5.7-6.3c0-3.8,2.3-6.3,5.7-6.3c3.4,0,5.8,2.6,5.8,6.3C136.6,27.7,134.2,30.3,130.8,30.3z"></path>
@ -28,35 +28,40 @@
                        </svg>
                    </div>
                </a>
-                <span class="navbar-text ml-md-auto">
-                    <a href="/" class="nav-link">{{.CoinLabel}} Explorer</a>
-                </span>
-                {{- if .InternalExplorer -}}
-                <ul class="navbar-nav flex-row ml-md-auto d-none d-lg-flex">
-                    <li class="nav-item">
-                        <a href="/blocks" class="nav-link">Blocks</a>
-                    </li>
-                    <li class="nav-item">
-                        <a href="/" class="nav-link">Status</a>
-                    </li>
-                </ul>
-                <span class="d-none ml-md-auto d-md-flex navbar-form navbar-left">
-                    <form id="search" action="/search" method="get">
-                        <input name="q" type="text" class="form-control" placeholder="Search for block, transaction, address or xpub" focus="true">
-                    </form>
-                </span>
-                {{- end -}}
-                <ul class="navbar-nav flex-row ml-md-auto d-none d-lg-flex ">
-                    <li class="nav-item">
-                        <a href="https://trezor.io/" class="nav-link">Trezor</a>
-                    </li>
-                    <li class="nav-item">
-                        <a href="https://wallet.trezor.io/" class="nav-link">Wallet</a>
-                    </li>
-                    <li class="nav-item">
-                        <a href="https://trezor.io/support" class="nav-link">Support</a>
-                    </li>
-                </ul>
+                <a class="navbar-brand" href="/">
+                    {{.CoinLabel}} Explorer
+                </a>
+                <button class="navbar-toggler" type="button" onclick="if(document.getElementById('toggler').className.indexOf('show')>0){document.getElementById('toggler').className='navbar-collapse collapse'}else{document.getElementById('toggler').className='navbar-collapse show'}">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="navbar-collapse collapse" id="toggler">
+                    {{- if .InternalExplorer -}}
+                    <ul class="navbar-nav ml-md-auto">
+                        <li class="nav-item">
+                            <a href="/blocks" class="nav-link">Blocks</a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="/" class="nav-link">Status</a>
+                        </li>
+                    </ul>
+                    <span class="navbar-form ml-md-auto">
+                        <form id="search" action="/search" method="get">
+                            <input name="q" type="text" class="form-control" placeholder="Search for block, transaction, address or xpub" focus="true">
+                        </form>
+                    </span>
+                    {{- end -}}
+                    <ul class="navbar-nav ml-md-auto">
+                        <li class="nav-item">
+                            <a href="https://trezor.io/" class="nav-link">Trezor</a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="https://wallet.trezor.io/" class="nav-link">Wallet</a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="https://trezor.io/support" class="nav-link">Support</a>
+                        </li>
+                    </ul>
+                </div>
            </nav>
        </div>
    </header>
@ -70,7 +75,7 @@
            <nav class="navbar navbar-expand-lg navbar-dark bg-trezor">
                <ul class="navbar-nav flex-row">
                    <li class="nav-item">
-                        <a class="nav-link" href="http://satoshilabs.com/" target="_blank" rel="noopener noreferrer">© 2019 SatoshiLabs</a>
+                        <a class="nav-link" href="http://satoshilabs.com/" target="_blank" rel="noopener noreferrer">© 2020 SatoshiLabs</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{- .TOSLink -}}" target="_blank" rel="noopener noreferrer">Terms</a>