Design base explorer page - header and footer
This commit is contained in:
Martin Boehm
parent
b52b861db2
commit
96ad79eee5
@ -80,6 +80,7 @@ func NewPublicServer(binding string, certFiles string, db *db.RocksDB, chain bch
|
||||
serveMux.HandleFunc(path+"address/", s.addressRedirect)
|
||||
// explorer
|
||||
serveMux.HandleFunc(path+"explorer/tx/", s.explorerTx)
|
||||
serveMux.Handle(path+"static/", http.StripPrefix("/static/", http.FileServer(http.Dir("./static/"))))
|
||||
// API calls
|
||||
serveMux.HandleFunc(path+"api/block-index/", s.apiBlockIndex)
|
||||
serveMux.HandleFunc(path+"api/tx/", s.apiTx)
|
||||
@ -169,11 +170,15 @@ func (s *PublicServer) explorerTx(w http.ResponseWriter, r *http.Request) {
|
||||
}
|
||||
}
|
||||
w.Header().Set("Content-Type", "text/html; charset=utf-8")
|
||||
// temporarily reread the template on each request
|
||||
// to reflect changes during development
|
||||
txTpl := template.Must(template.New("tx").ParseFiles("./static/templates/tx.html", "./static/templates/base.html"))
|
||||
|
||||
data := struct {
|
||||
CoinName string
|
||||
Tx *api.Tx
|
||||
Specific *api.Tx
|
||||
}{s.is.Coin, tx}
|
||||
if err := s.txTpl.ExecuteTemplate(w, "base.html", data); err != nil {
|
||||
if err := txTpl.ExecuteTemplate(w, "base.html", data); err != nil {
|
||||
glog.Error(err)
|
||||
}
|
||||
}
|
||||
|
||||
75
static/css/main.css
Normal file
75
static/css/main.css
Normal file
@ -0,0 +1,75 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
min-width: 727px;
|
||||
min-height: 100%;
|
||||
background-color: #ffffff;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
width: 750px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
width: 970px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
width: 1170px;
|
||||
}
|
||||
}
|
||||
|
||||
#header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 53px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
background-color: #212121;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.bg-trezor {
|
||||
background-color: #212121!important;
|
||||
height: 53px;
|
||||
}
|
||||
|
||||
.bg-trezor .navbar-text {
|
||||
color: rgba(255, 255, 255);
|
||||
font-weight: bold;
|
||||
font-size: 19px;
|
||||
padding-left: 35px;
|
||||
}
|
||||
|
||||
.trezor-logo-svg-white svg {
|
||||
fill: #FFFFFF;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
#wrap {
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
padding: 75px 0;
|
||||
margin: 0 auto -51px;
|
||||
}
|
||||
|
||||
#footer {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
height: 51px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -2,16 +2,75 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<base href="/explorer">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,shrink-to-fit=no">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="/static/css/main.css">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="TREZOR {{.CoinName}} Explorer">
|
||||
<title>TREZOR {{.CoinName}} Explorer</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{template "tx" .Tx}}
|
||||
<header id="header">
|
||||
<div class="container">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-trezor">
|
||||
<!-- <a class="navbar-brand" href="#">Navbar w/ text</a> -->
|
||||
<a class="navbar-brand" href="https://trezor.io/" 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">
|
||||
<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>
|
||||
<polygon points="82.1,12.8 98.3,12.8 98.3,18 87.9,18 87.9,21.3 98,21.3 98,26.4 87.9,26.4 87.9,30 98.3,30 98.3,35.2 82.1,35.2"></polygon>
|
||||
<path d="M24.6,9.7C24.6,4.4,20,0,14.4,0S4.2,4.4,4.2,9.7v3.1H0v22.3h0l14.4,6.7l14.4-6.7h0V12.9h-4.2V9.7z M9.4,9.7c0-2.5,2.2-4.5,5-4.5s5,2,5,4.5v3.1H9.4V9.7z M23,31.5l-8.6,4l-8.6-4V18.1H23V31.5z"></path>
|
||||
<path d="M79.4,20.3c0-4.5-3.1-7.4-7.7-7.4H61.2v22.3H67v-7.5h2.2l4.1,7.5H80l-4.9-8.3C77.2,26.1,79.4,24,79.4,20.3z M71,22.5h-4V18h4c1.5,0,2.5,0.9,2.5,2.2C73.5,21.6,72.5,22.5,71,22.5z"></path>
|
||||
<polygon points="40.5,12.8 58.6,12.8 58.6,18.1 52.4,18.1 52.4,35.2 46.6,35.2 46.6,18.1 40.5,18.1"></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
<span class="navbar-text">
|
||||
{{.CoinName}} Explorer
|
||||
</span>
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-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>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main id="wrap">
|
||||
<div class="container">
|
||||
{{template "specific" .Specific}}
|
||||
</div>
|
||||
</main>
|
||||
<footer id="footer" class="footer">
|
||||
<div class="container">
|
||||
<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">© 2018 SatoshiLabs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://wallet.trezor.io/tos.pdf" target="_blank" rel="noopener noreferrer">Terms</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" rel="noopener noreferrer" href="http://shop.trezor.io">Don't have a TREZOR? Get one!</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user