Design changes

This commit is contained in:
sairaj mote 2023-07-02 22:06:29 +05:30
parent ac1da72ba8
commit d90608d8eb
6 changed files with 172 additions and 99 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 856 B

View File

@ -4,78 +4,163 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="/static/css/main{{.Minified}}.css">
<script>var hasSecondary = {{ if .SecondaryCoin }}true{ {else } } false{ { end } };</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
<script>var hasSecondary={{if .SecondaryCoin}}true{{else}}false{{end}};</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="/static/js/main{{.Minified}}.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="RanchiMall Blockbook">
<title>RanchiMall Blockbook</title>
<style>
.icon{
width: 1.2rem;
height: 1.2rem;
fill: var(--bs-body-color);
}
header{
width: 100vw;
}
header nav{
display: grid;
gap: 1rem;
max-width: 84rem;
margin: auto;
align-items: center;
padding: 1rem max(1rem, 2vw);
grid-template-columns: 1fr auto;
grid-template-areas: 'brand send' 'search search';
}
header .nav-link {
padding: 0.5rem 1rem;
}
.navbar-brand{
grid-area: brand;
}
.navbar-brand .icon{
height: 2rem;
width: 2rem;
}
#search{
grid-area: search;
width: 100%;
max-width: 32rem;
margin: auto;
}
#search input{
border-radius: 0.5rem 0 0 0.5rem;
}
#search button{
border-radius: 0 0.5rem 0.5rem 0;
}
input::placeholder {
color: #757575 !important;
}
.nav-link {
grid-area: send;
display: initial;
}
#wrap{
padding: max(1rem, 2vw);
padding-top: 2.5rem;
max-width: 84rem;
margin: 0 auto;
margin-top: 8rem;
}
.info-table tr>td:first-child{
white-space: nowrap
}
.ellipsis{
max-width: 50vw;
}
@media (max-width: 720px) {
.ellipsis{
max-width: 280px;
}
}
@media (min-width: 720px) {
header nav{
grid-template-columns: auto 1fr auto;
grid-template-areas: 'brand search send';
}
#wrap{
margin-top: 4rem;
}
}
</style>
</head>
<body>
<header id="header">
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand fs-4" style="font-weight: 500" href="/" title="Home">RanchiMall Blockbook</a>
{{if .InternalExplorer}}
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-md-auto">
<li class="nav-item">
<a href="/sendtx" class="nav-link">Send transaction</a>
</li>
</ul>
<span class="navbar-form">
<form class="d-flex" id="search" action="/search" method="get">
<input name="q" type="text" class="form-control form-control-lg"
placeholder="Search for block, transaction, address or xpub" focus="true">
<button class="btn" type="submit">
<span class="search-icon"></span>
</button>
</form>
<nav>
<a class="navbar-brand d-flex align-items-center" style="font-weight: 500; gap: 0.3rem;" href="/" title="Home">
<svg class="icon" viewBox="0 0 96 108" xml:space="preserve">
<path d="M90.2,102.5c-2.4-8.2-9.9-14.5-27.4-23.1c-7.1-3.5-11.8-6.2-14-8.3c-1.7-1.6-3.5-4-4.2-5.5c-0.7-1.7-0.7-5.5,0-7.5
c1.3-3.6,2.6-5.2,12.9-15.1c6.2-5.9,9.3-10.3,11.1-15.5c0.7-2.1,0.8-7.6,0.2-9.4C66.5,12,61.7,6.7,53.7,1.6c-3-1.9-4.3-2.1-4.3-0.8
c0,0.3-0.5,1.4-1,2.4l-1,1.8l-2.8-1.9c-1.5-1.1-3.4-2.2-4.1-2.6c-1.3-0.7-2.4-0.6-2.4,0.2c0,0.3-1.4,3.4-2,4.4
c0,0.1-0.4-0.1-0.9-0.4c-6.1-4.4-8.7-5.5-8.7-3.9c0,0.7-1.8,4.2-4,7.9C16,19.5,9.4,24.9,2.6,24.9c-3,0-2.9-0.1-2,3.4
c0.7,2.8,1.1,3.1,3.6,2.3c2.3-0.7,3.9-1.5,5.8-2.9c0.8-0.6,1.5-0.9,1.6-0.9c0.1,0.1,0.5,1,0.7,2.1s0.7,2,0.9,2.1
c0.8,0.3,5.1-1.3,7.5-2.9l2.3-1.5l0.5,1.8c0.6,2.4,1,2.7,3.3,2.1c3.9-1,7.7-3.7,11.5-8.2l2-2.4l-0.2,2.1c-0.6,5.4-4.3,11.4-11.3,18
c-1.8,1.7-4.7,4.5-6.5,6.2c-10.7,10.2-10,18.6,2,26.5c2.7,1.8,10.3,5.8,15.3,8c0.9,0.4,3.3,1.7,5.3,2.9c11,6.5,16.4,13.1,16.4,19.7
c0,1.3,0.1,2.4,0.2,2.6l0,0c0.3,0.3,0.1,0.3,3-0.5c1.4-0.4,2.6-0.9,2.8-1.1c0.4-0.6-0.6-3.7-1.8-6.1c-1.3-2.5-5.6-7-8.9-9.4
c-3.8-2.8-9.3-5.9-17-9.7c-8.5-4.2-11.8-6.2-14.7-9.1c-2.6-2.6-3.9-5.3-3.9-8.2c0-4.6,2.3-8.6,8.3-14.1c9.4-8.7,13-13,15.5-18.8
c1.3-3,1.4-3.4,1.4-6.7c0-3.1-0.1-3.8-1.1-6l-1.1-2.4l1-1.6c0.5-0.9,1.2-2.1,1.5-2.6l0.5-1l1.5,2.1c1.8,2.6,3.2,6.8,3.2,9.3
c0,1.7-0.6,4.7-1.4,6.4c-0.2,0.4-0.4,1-0.5,1.3c-0.1,0.3-1.1,2-2.2,3.7c-2,3-5.2,6.4-13.4,14.2c-5.7,5.4-7.6,8.6-7.8,13.1
c-0.2,3.7,0.7,5.9,3.7,9.2c3.2,3.4,6.9,5.8,17.4,11c12.1,6,17.3,9.6,21.3,14.5c2.5,3.2,3.7,5.8,3.9,9.3c0.1,1.6,0.3,3,0.5,3
c0.1,0.1,0.8,0,1.4-0.2s1.9-0.5,2.7-0.7l1.5-0.4l-0.2-1.5c-0.7-5.1-5.4-10.8-13.1-16c-4.4-2.9-5.8-3.7-17.3-9.4
c-5.7-2.8-9.2-5.1-11.8-7.6c-4.3-4.2-5.1-8.8-2.7-13.9c1.4-2.8,2.7-4.4,12.5-13.8c8-7.7,11.4-13.7,11.4-20.1c0-5.1-2.3-9.9-6.9-14.3
c-1.1-1-2-2-2.1-2.2c-0.2-0.4,1.5-3.9,1.9-3.9c1.2,0,7.8,6.3,9.7,9.2c2,3.3,2.5,5,2.5,8.9c0,3.9-0.6,5.9-2.9,9.8
c-2.4,4.1-4.2,6-14.2,15.5c-3.4,3.2-5.7,6.1-6.9,8.7c-0.9,2-1.1,2.7-1.1,5.1c0,2.3,0.2,3.2,1,4.9c1.9,4,7.4,8.5,15.4,12.4
c12.5,6.1,15.1,7.6,19.4,10.7c7.2,5.3,10.6,10.5,10.6,16c0,1.3,0.1,2.4,0.3,2.5c0.4,0.3,4.8-0.8,5.5-1.3
C90.7,104.4,90.7,104.3,90.2,102.5z M20.3,23.3L20.3,23.3c-2,1-3.3,1.4-4.8,1.5L13.3,25l2.3-2.8c3.7-4.5,6.4-8.9,10-16
c0.9-1.8,1.8-3.5,2-3.6c0.4-0.4,2.6,1.1,5.1,3.4l2.1,1.9l-1.9,2.8C28.2,17.5,24.5,21.2,20.3,23.3z M39.3,17.4
c-1.2,1.7-6.5,5.7-8.6,6.5v0c-1.1,0.4-2.8,0.8-3.9,0.9L24.9,25l2.1-2.6c2.5-3.1,5.1-7,7-10.4c0.7-1.4,1.4-2.5,1.5-2.6
c0.3-0.4,1.7,1.4,3,4.1l1.5,3L39.3,17.4z M44.6,10c-0.7,1.2-1.4,2.1-1.5,2.1c-0.1,0-1.5-1.4-3-3l-2.8-3l0.6-1.5
c1.1-2.6,1.3-2.7,3.4-1c1.9,1.5,4.5,3.8,4.5,4.1C45.8,7.8,45.3,8.9,44.6,10z"></path>
</svg>
<div class="d-flex flex-column">
<span>
RanchiMall
</span>
{{if .SecondaryCoin}}
<div class="bb-group ms-lg-2 mt-2 mt-lg-0" role="group" aria-label="Currency switch">
<input type="radio" class="btn-check" name="btnradio" id="primary-coin" autocomplete="off" {{if
not .UseSecondaryCoin}} checked{{end}}>
<label class="btn" for="primary-coin">{{.CoinShortcut}}</label>
<input type="radio" class="btn-check" name="btnradio" id="secondary-coin" autocomplete="off"
{{if .UseSecondaryCoin}} checked{{end}}>
<label class="btn" for="secondary-coin">{{.SecondaryCoin}}</label>
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"
aria-expanded="false"></button>
<div class="dropdown-menu row">
{{range $c := .SecondaryCurrencies}}
<div class="col-3"><a href="?secondary={{$c}}&use_secondary=true">{{$c}}</a></div>
{{end}}
</div>
</div>
<span class="fs-4" style="line-height: 1">
Blockbook
</span>
</div>
</a>
{{if .InternalExplorer}}
<form class="d-flex" id="search" action="/search" method="get">
<input name="q" type="text" class="form-control form-control-lg" placeholder="Search for block, transaction, address or xpub" focus="true">
<button class="btn btn-primary" type="submit" title="search">
<svg class="icon" style="fill: var(--bs-body-bg)" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
</button>
</form>
<a href="/sendtx" class="nav-link btn btn-light">Send</a>
{{if .SecondaryCoin}}
<div class="bb-group ms-lg-2 mt-2 mt-lg-0" role="group" aria-label="Currency switch">
<input type="radio" class="btn-check" name="btnradio" id="primary-coin" autocomplete="off" {{if not .UseSecondaryCoin}} checked{{end}}>
<label class="btn" for="primary-coin">{{.CoinShortcut}}</label>
<input type="radio" class="btn-check" name="btnradio" id="secondary-coin" autocomplete="off" {{if .UseSecondaryCoin}} checked{{end}}>
<label class="btn" for="secondary-coin">{{.SecondaryCoin}}</label>
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"></button>
<div class="dropdown-menu row">
{{range $c := .SecondaryCurrencies}}
<div class="col-3"><a href="?secondary={{$c}}&use_secondary=true">{{$c}}</a></div>
{{end}}
</div>
{{end}}
</div>
{{end}}
{{end}}
</nav>
</header>
<main id="wrap">
<div class="container">
{{- template "specific" . -}}
</div>
{{- template "specific" . -}}
</main>
<footer id="footer">
<div class="container">
<nav class="navbar navbar-dark">
<span class="navbar-nav">
Created by RanchiMall based on Trezor Blockbook, and @bitspill work
</span>
<div>
Created by <a class="nav-link" href="https://github.com/ranchimall/blockbook" target="_blank">RanchiMall</a> based on <a class="nav-link" href="https://github.com/trezor/blockbook" target="_blank">Trezor Blockbook</a>, and <a class="nav-link" href="https://github.com/bitspill/blockbook" target="_blank">@bitspill work</a>
</div>
<span class="navbar-nav ml-md-auto">
<a class="nav-link" href="/status">Status</a>
</span>
@ -84,4 +169,4 @@
</footer>
</body>
</html>
</html>

View File

@ -45,12 +45,12 @@
<td class="ellipsis">{{$b.Version}}</td>
</tr>
<tr>
<td>Merkle&nbsp;Root</td>
<td style="max-width: 280px;" class="ellipsis">{{$b.MerkleRoot}}</td>
<td>Merkle Root</td>
<td class="ellipsis">{{$b.MerkleRoot}}</td>
</tr>
<tr>
<td>Nonce</td>
<td style="max-width: 280px;" class="ellipsis">{{$b.Nonce}}</td>
<td class="ellipsis">{{$b.Nonce}}</td>
</tr>
<tr>
<td>Bits</td>

View File

@ -1,8 +1,6 @@
{{define "specific"}}{{$blocks := .Blocks}}{{$data := .}}
<div class="row">
<div class="col-md-6">
<h1>Blocks</h1>
</div>
<div class="col-md-6"><h1>Blocks</h1></div>
<div class="col-md-6">{{if $blocks.Blocks}}{{template "paging" $data }}{{end}}</div>
</div>
{{if $blocks.Blocks}}
@ -29,4 +27,4 @@
</table>
</div>
{{template "paging" $data }}
{{end}}{{end}}
{{end}}{{end}}

View File

@ -3,15 +3,14 @@
<a class="btn btn-paging" href="?page={{$data.PrevPage}}{{$data.PageParams}}">Previous</a>
{{if $data.PagingRange}}
<div class="paging-group mx-2">
<div class="bb-group">
{{range $p := $data.PagingRange}}
{{if $p}}<a class="btn{{if eq $data.Page $p}} active{{end}}"
href="?page={{$p}}{{$data.PageParams}}">{{$p}}</a>
<div class="bb-group">
{{range $p := $data.PagingRange}}
{{if $p}}<a class="btn{{if eq $data.Page $p}} active{{end}}" href="?page={{$p}}{{$data.PageParams}}">{{$p}}</a>
{{else}}<span>...</span>{{end}}
{{end}}
</div>
{{end}}
</div>
</div>
{{end}}
<a class="btn btn-paging" href="?page={{$data.NextPage}}{{$data.PageParams}}">Next</a>
</nav>
{{end}}{{end}}
{{end}}{{end}}

View File

@ -3,16 +3,11 @@
<div class="row head">
<div class="col-xs-7 col-md-8">
<a href="/tx/{{$tx.Txid}}" class="ellipsis copyable txid">{{$tx.Txid}}</a>
{{if $tx.Rbf}}<span class="ps-1" tt="Replace-by-Fee (RBF) transaction, could be overridden">
RBF</span>{{end}}
{{if $tx.Rbf}}<span class="ps-1" tt="Replace-by-Fee (RBF) transaction, could be overridden"> RBF</span>{{end}}
</div>
{{if $tx.Blocktime}}<div class="col-xs-5 col-md-4 text-end">{{if $tx.Confirmations}}mined{{else}}first
seen{{end}} <span class="txvalue ms-1">{{unixTimeSpan $tx.Blocktime}}</span></div>{{end}}
{{if $tx.Blocktime}}<div class="col-xs-5 col-md-4 text-end">{{if $tx.Confirmations}}mined{{else}}first seen{{end}} <span class="txvalue ms-1">{{unixTimeSpan $tx.Blocktime}}</span></div>{{end}}
{{if $tx.ConfirmationETABlocks}}<div class="col-12 text-end">
<span class="badge bg-info fw-bold" style="text-transform: none;"
tt="Estimated first potential confirmation of this transaction.">confirmation estimated in
{{relativeTime $tx.ConfirmationETASeconds}} <span class="fw-normal ps-1">({{$tx.ConfirmationETABlocks}}
blocks)</span></span>
<span class="badge bg-info fw-bold" style="text-transform: none;" tt="Estimated first potential confirmation of this transaction.">confirmation estimated in {{relativeTime $tx.ConfirmationETASeconds}} <span class="fw-normal ps-1">({{$tx.ConfirmationETABlocks}} blocks)</span></span>
</div>
{{end}}
</div>
@ -45,16 +40,13 @@
<div class="col-12{{if $vout.IsOwn}} tx-own{{end}}">
{{range $a := $vout.Addresses}}
<span class="ellipsis copyable">
{{if and (ne $a $addr) $vout.IsAddress}}<a
href="/address/{{$a}}">{{$a}}</a>{{else}}{{$a}}{{end}}
{{if and (ne $a $addr) $vout.IsAddress}}<a href="/address/{{$a}}">{{$a}}</a>{{else}}{{$a}}{{end}}
</span>
{{else}}
Unparsed address
{{end}}
<span class="tx-amt">
{{amountSpan $vout.ValueSat $data "copyable"}}{{if $vout.Spent}}<a class="spent"
href="{{if $vout.SpentTxID}}/tx/{{$vout.SpentTxID}}{{else}}/spending/{{$tx.Txid}}/{{$vout.N}}{{end}}"
tt="Spent">→</a>{{else}}<span class="unspent" tt="Unspent">×</span>
{{amountSpan $vout.ValueSat $data "copyable"}}{{if $vout.Spent}}<a class="spent" href="{{if $vout.SpentTxID}}/tx/{{$vout.SpentTxID}}{{else}}/spending/{{$tx.Txid}}/{{$vout.N}}{{end}}" tt="Spent"></a>{{else}}<span class="unspent" tt="Unspent">×</span>
{{end}}
</span>
</td>
@ -68,34 +60,33 @@
<div class="row footer">
<div class="col-sm-12 col-md-4">
{{if $tx.FeesSat}}{{$fpb := feePerByte $tx}}
Fee {{amountSpan $tx.FeesSat $data "txvalue copyable ms-3"}}{{if $fpb}} <span
class="fw-normal small">({{$fpb}})</span>{{end}}
Fee {{amountSpan $tx.FeesSat $data "txvalue copyable ms-3"}}{{if $fpb}} <span class="fw-normal small">({{$fpb}})</span>{{end}}
{{end}}
</div>
<div class="col-sm-12 col-md-8 text-end">
<span class="me-4">
{{if $tx.Confirmations}}
<span class="txvalue">{{formatUint32 $tx.Confirmations}}</span> confirmations
{{else}}
<span class="txvalue unconfirmed">Unconfirmed Transaction!</span>
{{end}}
{{if $tx.Confirmations}}
<span class="txvalue">{{formatUint32 $tx.Confirmations}}</span> confirmations
{{else}}
<span class="txvalue unconfirmed">Unconfirmed Transaction!</span>
{{end}}
</span>
{{amountSpan $tx.ValueOutSat $data "txvalue copyable"}}
</div>
<div class="d-flex flex-column mt-4">
<span class="fw-bold">floData: </span><span class="fst-normal copyable"></span>
<script type="text/javascript">
(function () {
let _script = document.currentScript;
let floData = ({{ $tx.CoinSpecificData }
}).floData;
if (floData) {
</div>
<div class="d-flex flex-column p-4 rounded-4" style="background-color: var(--bs-border-color); color: var(--bs-dark); ">
<span class="fw-bold">FLO Data</span>
<span class="fst-normal copyable"></span>
<script type="text/javascript">
(function(){
let _script = document.currentScript;
let floData = ({{$tx.CoinSpecificData}}).floData;
if(floData) {
_script.previousElementSibling.textContent = floData;
_script.remove();
} else _script.parentElement.remove();
}) ()
</script>
</div>
})()
</script>
</div>
</div>
{{end}}
{{end}}