From 98c7d0e2968f43e41446510f28bbc32c8cb38b59 Mon Sep 17 00:00:00 2001 From: Dan Janosik Date: Fri, 20 Mar 2020 14:33:56 -0400 Subject: [PATCH] Misc minor frontend cleanup: - /block pages: cleanup fees summary display - /tx pages: styling consistency fixes for input/output scripts - /rpc-browser: more styling finesse --- views/block.pug | 4 +- views/browser.pug | 8 ++-- views/includes/block-content.pug | 66 +++++++++++++++----------------- views/transaction.pug | 50 ++++++++++++------------ 4 files changed, 61 insertions(+), 67 deletions(-) diff --git a/views/block.pug b/views/block.pug index 1567888..3c18c3c 100644 --- a/views/block.pug +++ b/views/block.pug @@ -5,9 +5,9 @@ block headContent block content h1.h3 Block - small(style="width: 100%;", class="text-monospace") ##{result.getblock.height.toLocaleString()} + small.text-monospace(style="width: 100%;") ##{result.getblock.height.toLocaleString()} br - small(style="width: 100%;", class="text-monospace word-wrap") #{result.getblock.hash} + small.text-monospace.word-wrap(style="width: 100%;") #{result.getblock.hash} hr include includes/block-content.pug \ No newline at end of file diff --git a/views/browser.pug b/views/browser.pug index 8b8c6e5..69e32a3 100644 --- a/views/browser.pug +++ b/views/browser.pug @@ -64,10 +64,12 @@ block content each argX, index in methodhelp.args div.form-group label(for=("arg_" + argX.name)) - strong #{argX.name} - span (#{argX.properties.join(", ")}) + div + span.text-monospace.font-weight-bold #{argX.name} + span.text-monospace : + span #{argX.properties.join(", ")} if (argX.description) - span - #{argX.description} + span.text-muted Description: #{argX.description} if (false && argX.detailsLines && argX.detailsLines.length > 0) - var detailsLines = ""; each detailsLine in argX.detailsLines diff --git a/views/includes/block-content.pug b/views/includes/block-content.pug index 05bf448..5e3ef7a 100644 --- a/views/includes/block-content.pug +++ b/views/includes/block-content.pug @@ -204,7 +204,7 @@ div.tab-content if (result.blockstats) div.row - div.summary-split-table-label Percentiles + div.summary-split-table-label Rate Percentiles br small.font-weight-normal (sat/vB) div.summary-split-table-content.text-monospace @@ -221,62 +221,56 @@ div.tab-content if (result.getblock.totalFees > 0) div.row - div.summary-split-table-label Average Rate + div.summary-split-table-label + span.border-dotted(title="These are the fee rates (fee per tx weight) for transactions in this block - min, avg, and max.", data-toggle="tooltip") Fee Rates + br + small (min, avg, max) + div.summary-split-table-content.text-monospace - if (result.blockstats) + if (result.blockstats.minfeerate) + span #{result.blockstats.minfeerate} + small.ml-1 sat/vB + else + span ? + + br + + if (result.blockstats.avgfeerate) span #{result.blockstats.avgfeerate} + small.ml-1 sat/vB else - var currencyValue = new Decimal(result.getblock.totalFees).dividedBy(result.getblock.strippedsize).times(coinConfig.baseCurrencyUnit.multiplier).toDecimalPlaces(1); span #{currencyValue} - small.ml-1 sat/vB - br - span.text-muted ( - - var currencyValue = new Decimal(result.getblock.totalFees).dividedBy(result.getblock.tx.length); - include ./value-display.pug - span ) - - if (result.blockstats) - div.row - div.summary-split-table-label Median Rate - div.summary-split-table-content.text-monospace - if (result.blockstats.medianfee) - - var currencyValue = new Decimal(result.blockstats.medianfee).dividedBy(1000).toDecimalPlaces(1); - span #{currencyValue} - small sat/vB - else - span 0 - - if (result.blockstats) - div.row - div.summary-split-table-label Min, Max Rate - div.summary-split-table-content.text-monospace - if (result.blockstats.minfeerate) - span #{result.blockstats.minfeerate.toLocaleString()} - else - span 0 - - span.text-muted.mx-1 - if (result.blockstats.maxfeerate) - span #{result.blockstats.maxfeerate.toLocaleString()} + span #{result.blockstats.maxfeerate} + small.ml-1 sat/vB else - span 0 - - small.ml-1 sat/vB + span ? if (result.blockstats) div.row div.summary-split-table-label - span.border-dotted(title="These are the min and max fees for individual transactions included in this block.", data-toggle="tooltip") Min, Max Fee + span.border-dotted(title="These are the overall fee values (min, avg, max) for transactions included in this block. The min and max values correspond to specific transactions in this block; the avg is an estimate.", data-toggle="tooltip") Fee Values + br + small (min, avg, max) div.summary-split-table-content.text-monospace if (result.blockstats.minfee) - var currencyValue = new Decimal(result.blockstats.minfee).dividedBy(coinConfig.baseCurrencyUnit.multiplier); include ./value-display.pug else span 0 + + br + + if (result.blockstats.avgfee) + - var currencyValue = new Decimal(result.blockstats.avgfee).dividedBy(coinConfig.baseCurrencyUnit.multiplier); + include ./value-display.pug + else + span 0 br diff --git a/views/transaction.pug b/views/transaction.pug index 9f1e12e..3a1c736 100644 --- a/views/transaction.pug +++ b/views/transaction.pug @@ -39,7 +39,7 @@ block content - totalOutputValue = totalOutputValue.plus(new Decimal(vout.value)); div.tab-content - div(id="tab-details", class="tab-pane active", role="tabpanel") + div.tab-pane.active(id="tab-details", role="tabpanel") if (global.specialTransactions && global.specialTransactions[txid]) div(class="alert alert-primary shadow-sm", style="padding-bottom: 0;") div(class="float-left", style="width: 55px; height: 55px; font-size: 18px;") @@ -78,7 +78,7 @@ block content div.row div.summary-table-label Status div.summary-table-content.text-monospace - span(class="text-warning") Unconfirmed + span.text-warning Unconfirmed div.row div.summary-table-label @@ -149,24 +149,25 @@ block content a(href=("/block-height/" + result.getrawtransaction.locktime)) #{result.getrawtransaction.locktime.toLocaleString()} span or later a(href="https://bitcoin.org/en/developer-guide#locktime-and-sequence-number", data-toggle="tooltip", title="More info about locktime", target="_blank") - i(class="fas fa-info-circle") + i.fas.fa-info-circle else - span Spendable after #{moment.utc(new Date(result.getrawtransaction.locktime * 1000)).format("Y-MM-DD HH:mm:ss")} (utc) + span Spendable after #{moment.utc(new Date(result.getrawtransaction.locktime * 1000)).format("Y-MM-DD HH:mm:ss")} + small utc a(href="https://bitcoin.org/en/developer-guide#locktime-and-sequence-number", data-toggle="tooltip", title="More info about locktime", target="_blank") - i(class="fas fa-info-circle") + i.fas.fa-info-circle if (isTxConfirmed) div.row div.summary-table-label Confirmations div.summary-table-content.text-monospace if (!result.getrawtransaction.confirmations || result.getrawtransaction.confirmations == 0) - strong(class="text-warning") 0 (unconfirmed) + span.text-warning.font-weight-bold 0 (unconfirmed) else if (result.getrawtransaction.confirmations < 6) - strong(class="text-warning") #{result.getrawtransaction.confirmations} + span.text-warning.font-weight-bold #{result.getrawtransaction.confirmations} else - strong(class="text-success") #{result.getrawtransaction.confirmations.toLocaleString()} + span.text-success.font-weight-bold #{result.getrawtransaction.confirmations.toLocaleString()} if (result.getrawtransaction.vin[0].coinbase) @@ -305,10 +306,7 @@ block content li a.text-monospace(href=("/tx/" + descendantTxid)) #{descendantTxid} - - var fontawesomeInputName = "sign-in-alt"; - - var fontawesomeOutputName = "sign-out-alt"; - - div(id="tab-scripts", class="tab-pane", role="tabpanel") + div.tab-pane(id="tab-scripts", role="tabpanel") div.card.shadow-sm.mb-3 div.card-body.px-2.px-md-3 h3.h6.mb-0 Input Scripts @@ -322,10 +320,10 @@ block content tbody each vin, vinIndex in result.getrawtransaction.vin tr - th(class="pl-0") + th.text-monospace a(data-toggle="tooltip", title=("Input #" + vinIndex), style="white-space: nowrap;") - i(class=("fas fa-" + fontawesomeInputName + " mr-2")) - small ##{vinIndex.toLocaleString()} + span > + span.font-weight-normal ##{vinIndex.toLocaleString()} td.word-wrap.text-break.text-monospace if (vin.scriptSig && vin.scriptSig.asm) @@ -352,34 +350,34 @@ block content tbody each vout, voutIndex in result.getrawtransaction.vout tr - th(class="pl-0") + th.text-monospace a(data-toggle="tooltip", title=("Output #" + (voutIndex + 1)), style="white-space: nowrap;") - i(class=("fas fa-" + fontawesomeOutputName + " mr-2")) - small ##{voutIndex.toLocaleString()} + span < + span.font-weight-normal ##{voutIndex.toLocaleString()} - td(class="word-wrap text-monospace") + td.text-monospace.word-wrap if (vout.scriptPubKey && vout.scriptPubKey.asm) span #{vout.scriptPubKey.asm} if (vout.scriptPubKey.asm.startsWith("OP_RETURN")) br span.text-muted (decoded) #{utils.hex2ascii(vout.scriptPubKey.asm)} - div(id="tab-json", class="tab-pane", role="tabpanel") + div.tab-pane(id="tab-json", role="tabpanel") h3.h5 Transaction - div(class="highlight") + div.highlight pre - code(class="json bg-light", data-lang="json") #{JSON.stringify(result.getrawtransaction, null, 4)} + code.json.bg-light(data-lang="json") #{JSON.stringify(result.getrawtransaction, null, 4)} h3.h5 UTXOs - div(class="highlight") + div.highlight pre - code(class="json bg-light", data-lang="json") #{JSON.stringify(utxos, null, 4)} + code.json.bg-light(data-lang="json") #{JSON.stringify(utxos, null, 4)} if (mempoolDetails) h3.h5 Mempool Details - div(class="highlight") + div.highlight pre - code(class="json bg-light", data-lang="json") #{JSON.stringify(mempoolDetails, null, 4)} + code.json.bg-light(data-lang="json") #{JSON.stringify(mempoolDetails, null, 4)} //pre #{JSON.stringify(result.txInputs, null, 4)}