From 72071468799993b25115398c7b39ba84525e1c2b Mon Sep 17 00:00:00 2001 From: Dan Janosik Date: Fri, 3 Aug 2018 14:02:09 -0400 Subject: [PATCH] style tweaks for summary tables on block/tx pages --- public/css/styling.css | 7 + views/includes/block-content.pug | 283 ++++++++++++++++--------------- views/transaction.pug | 177 +++++++++---------- 3 files changed, 242 insertions(+), 225 deletions(-) diff --git a/public/css/styling.css b/public/css/styling.css index 8031a29..9b5805b 100755 --- a/public/css/styling.css +++ b/public/css/styling.css @@ -20,9 +20,16 @@ code, .monospace { font-family: "Source Code Pro", monospace; } +.details-table td { + border-top: none; + padding: 0.4em; + padding-right: 0.6em; +} + .properties-header { width: 190px; text-align: right; + font-weight: bold; } pre { diff --git a/views/includes/block-content.pug b/views/includes/block-content.pug index 134d7e9..bc815bd 100644 --- a/views/includes/block-content.pug +++ b/views/includes/block-content.pug @@ -1,15 +1,17 @@ ul(class='nav nav-tabs mb-3') li(class="nav-item") - a(data-toggle="tab", href="#tab-summary", class="nav-link active", role="tab") Summary + a(data-toggle="tab", href="#tab-details", class="nav-link active", role="tab") Details li(class="nav-item") a(data-toggle="tab", href="#tab-raw", class="nav-link", role="tab") Raw - var txCount = result.getblock.tx.length; div(class="tab-content") - div(id="tab-summary", class="tab-pane active", role="tabpanel") + div(id="tab-details", class="tab-pane active", role="tabpanel") if (global.specialBlocks && global.specialBlocks[result.getblock.hash]) div(class="alert alert-primary", style="padding-bottom: 0;") + div(class="float-left", style="width: 50px; height: 50px; font-size: 18px;") + i(class="fas fa-certificate fa-2x", style="margin-top: 10px;") h4(class="alert-heading h5") #{coinConfig.name} Fun // special transaction info @@ -30,143 +32,146 @@ div(class="tab-content") span a(href=sbInfo.referenceUrl) Read more - - div(class="row") - div(class="col-md-6") - table(class="table") - tr - th(class="table-active properties-header") Previous Block - td(class="monospace word-wrap") - if (result.getblock.previousblockhash) - a(class="word-wrap", href=("/block/" + result.getblock.previousblockhash)) #{result.getblock.previousblockhash} - br - span(class="text-muted") ##{(result.getblock.height - 1).toLocaleString()} - - else if (result.getblock.hash == genesisBlockHash) - span None - br - span(class="text-muted") (genesis block) - - if (false) - tr - th(class="table-active properties-header") Block Height - td(class="monospace") - a(href=("/block-height/" + result.getblock.height)) #{result.getblock.height.toLocaleString()} - - tr - th(class="table-active properties-header") Timestamp (utc) - - - var timeAgo = moment.duration(moment.utc(new Date()).diff(moment.utc(new Date(parseInt(result.getblock.time) * 1000)))); - td(class="monospace") #{moment.utc(new Date(result.getblock.time * 1000)).format("Y-MM-DD HH:mm:ss")} - br - span(class="text-muted") (age #{timeAgo.format()}) - - tr - th(class="table-active properties-header") Transaction Count - td(class="monospace") #{result.getblock.tx.length.toLocaleString()} - - tr - th(class="table-active properties-header") Total Fees - td(class="monospace") - - var currencyValue = new Decimal(result.getblock.totalFees); - include ./value-display.pug - - tr - th(class="table-active properties-header") Average Fee - td(class="monospace") - - var currencyValue = new Decimal(result.getblock.totalFees).dividedBy(result.getblock.tx.length); - include ./value-display.pug - - tr - th(class="table-active properties-header") Size - td(class="monospace") - span #{result.getblock.size.toLocaleString()} bytes - - if (result.getblock.weight) - tr - th(class="table-active properties-header") Weight - td(class="monospace") - span #{result.getblock.weight.toLocaleString()} wu - br - span(class="text-muted") (#{new Decimal(100 * result.getblock.weight / coinConfig.maxBlockWeight).toDecimalPlaces(2)}% full) - - tr(class="border-bottom") - th(class="table-active properties-header") Confirmations - td(class="monospace") - if (result.getblock.confirmations < 6) - strong(class="text-warning") #{result.getblock.confirmations} - else - strong(class="text-success") #{result.getblock.confirmations.toLocaleString()} - - - div(class="col-md-6") - table(class="table") - tr - th(class="table-active properties-header") Next Block - td(class="monospace word-wrap") - if (result.getblock.nextblockhash) - a(href=("/block/" + result.getblock.nextblockhash)) #{result.getblock.nextblockhash} - br - span(class="text-muted") ##{(result.getblock.height + 1).toLocaleString()} - else - span None - br - span(class="text-muted") (latest block) - - tr - - var scales = [ {val:1000000000000000, name:"quadrillion"}, {val:1000000000000, name:"trillion"}, {val:1000000000, name:"billion"}, {val:1000000, name:"million"} ]; - - var scaleDone = false; - th(class="table-active properties-header") Difficulty - td(class="monospace") - - var difficultyData = utils.formatLargeNumber(result.getblock.difficulty, 3); - - span(title=parseFloat(result.getblock.difficulty).toLocaleString(), data-toggle="tooltip") - span #{difficultyData[0]} - span x 10 - sup #{difficultyData[1].exponent} - - - tr - th(class="table-active text-right") Version - td(class="monospace") 0x#{result.getblock.versionHex} - span(class="text-muted") (decimal: #{result.getblock.version}) - - tr - th(class="table-active text-right") Nonce - td(class="monospace") #{result.getblock.nonce} - - tr - th(class="table-active text-right") Bits - td(class="monospace") #{result.getblock.bits} - - tr - th(class="table-active text-right") Merkle Root - td(class="monospace word-wrap") #{result.getblock.merkleroot} - - tr - th(class="table-active text-right") Chainwork - td(class="monospace word-wrap") #{result.getblock.chainwork.replace(/^0+/, '')} - br - - var chainworkData = utils.formatLargeNumber(parseInt("0x" + result.getblock.chainwork), 2); - span(class="text-muted") - span (~ - span #{chainworkData[0]} - span x 10 - sup #{chainworkData[1].exponent} - span hashes) - - tr(class="border-bottom") - th(class="table-active text-right") Miner - td(class="monospace word-wrap") - if (result.getblock.miner) - span #{result.getblock.miner.name} - if (result.getblock.miner.identifiedBy) - a(href=coinConfig.miningPoolsConfigUrl, data-toggle="tooltip", title=("Identified by: " + result.getblock.miner.identifiedBy), target="_blank") - i(class="fas fa-info-circle") - else - span ? - a(href=coinConfig.miningPoolsConfigUrl, data-toggle="tooltip", title=("Unable to identify (click to see config)"), target="_blank") - i(class="fas fa-info-circle") + div(class="card mb-3") + div(class="card-header") + span(class="h6") Summary + div(class="card-body") + div(class="row") + div(class="col-md-6") + table(class="table details-table mb-0") + tr + td(class="properties-header") Previous Block + td(class="monospace word-wrap") + if (result.getblock.previousblockhash) + a(class="word-wrap", href=("/block/" + result.getblock.previousblockhash)) #{result.getblock.previousblockhash} + br + span(class="text-muted") ##{(result.getblock.height - 1).toLocaleString()} + + else if (result.getblock.hash == genesisBlockHash) + span None + br + span(class="text-muted") (genesis block) + + if (false) + tr + td(class="properties-header") Block Height + td(class="monospace") + a(href=("/block-height/" + result.getblock.height)) #{result.getblock.height.toLocaleString()} + + tr + td(class="properties-header") Timestamp (utc) + + - var timeAgo = moment.duration(moment.utc(new Date()).diff(moment.utc(new Date(parseInt(result.getblock.time) * 1000)))); + td(class="monospace") #{moment.utc(new Date(result.getblock.time * 1000)).format("Y-MM-DD HH:mm:ss")} + br + span(class="text-muted") (age #{timeAgo.format()}) + + tr + td(class="properties-header") Transaction Count + td(class="monospace") #{result.getblock.tx.length.toLocaleString()} + + tr + td(class="properties-header") Total Fees + td(class="monospace") + - var currencyValue = new Decimal(result.getblock.totalFees); + include ./value-display.pug + + tr + td(class="properties-header") Average Fee + td(class="monospace") + - var currencyValue = new Decimal(result.getblock.totalFees).dividedBy(result.getblock.tx.length); + include ./value-display.pug + + tr + td(class="properties-header") Size + td(class="monospace") + span #{result.getblock.size.toLocaleString()} bytes + + if (result.getblock.weight) + tr + td(class="properties-header") Weight + td(class="monospace") + span #{result.getblock.weight.toLocaleString()} wu + br + span(class="text-muted") (#{new Decimal(100 * result.getblock.weight / coinConfig.maxBlockWeight).toDecimalPlaces(2)}% full) + + tr + td(class="properties-header") Confirmations + td(class="monospace") + if (result.getblock.confirmations < 6) + strong(class="text-warning") #{result.getblock.confirmations} + else + strong(class="text-success") #{result.getblock.confirmations.toLocaleString()} + + + div(class="col-md-6") + table(class="table details-table mb-0") + tr + td(class="properties-header") Next Block + td(class="monospace word-wrap") + if (result.getblock.nextblockhash) + a(href=("/block/" + result.getblock.nextblockhash)) #{result.getblock.nextblockhash} + br + span(class="text-muted") ##{(result.getblock.height + 1).toLocaleString()} + else + span None + br + span(class="text-muted") (latest block) + + tr + - var scales = [ {val:1000000000000000, name:"quadrillion"}, {val:1000000000000, name:"trillion"}, {val:1000000000, name:"billion"}, {val:1000000, name:"million"} ]; + - var scaleDone = false; + td(class="properties-header") Difficulty + td(class="monospace") + - var difficultyData = utils.formatLargeNumber(result.getblock.difficulty, 3); + + span(title=parseFloat(result.getblock.difficulty).toLocaleString(), data-toggle="tooltip") + span #{difficultyData[0]} + span x 10 + sup #{difficultyData[1].exponent} + + + tr + td(class="properties-header") Version + td(class="monospace") 0x#{result.getblock.versionHex} + span(class="text-muted") (decimal: #{result.getblock.version}) + + tr + td(class="properties-header") Nonce + td(class="monospace") #{result.getblock.nonce} + + tr + td(class="properties-header") Bits + td(class="monospace") #{result.getblock.bits} + + tr + td(class="properties-header") Merkle Root + td(class="monospace word-wrap") #{result.getblock.merkleroot} + + tr + td(class="properties-header") Chainwork + td(class="monospace word-wrap") #{result.getblock.chainwork.replace(/^0+/, '')} + br + - var chainworkData = utils.formatLargeNumber(parseInt("0x" + result.getblock.chainwork), 2); + span(class="text-muted") + span (~ + span #{chainworkData[0]} + span x 10 + sup #{chainworkData[1].exponent} + span hashes) + + tr + td(class="properties-header") Miner + td(class="monospace word-wrap") + if (result.getblock.miner) + span #{result.getblock.miner.name} + if (result.getblock.miner.identifiedBy) + a(href=coinConfig.miningPoolsConfigUrl, data-toggle="tooltip", title=("Identified by: " + result.getblock.miner.identifiedBy), target="_blank") + i(class="fas fa-info-circle") + else + span ? + a(href=coinConfig.miningPoolsConfigUrl, data-toggle="tooltip", title=("Unable to identify (click to see config)"), target="_blank") + i(class="fas fa-info-circle") div(class="card mb-3") div(class="card-header") diff --git a/views/transaction.pug b/views/transaction.pug index 0411aa8..22a9505 100644 --- a/views/transaction.pug +++ b/views/transaction.pug @@ -17,7 +17,7 @@ block content ul(class='nav nav-tabs mb-3') li(class="nav-item") - a(data-toggle="tab", href="#tab-summary", class="nav-link active", role="tab") Summary + a(data-toggle="tab", href="#tab-details", class="nav-link active", role="tab") Details li(class="nav-item") a(data-toggle="tab", href="#tab-scripts", class="nav-link", role="tab") Scripts li(class="nav-item") @@ -39,9 +39,12 @@ block content - totalOutputValue = totalOutputValue.plus(new Decimal(vout.value)); div(class="tab-content") - div(id="tab-summary", class="tab-pane active", role="tabpanel") + div(id="tab-details", class="tab-pane active", role="tabpanel") if (global.specialTransactions && global.specialTransactions[txid]) div(class="alert alert-primary", style="padding-bottom: 0;") + div(class="float-left", style="width: 50px; height: 50px; font-size: 18px;") + i(class="fas fa-certificate fa-2x", style="margin-top: 10px;") + h4(class="alert-heading h5") #{coinConfig.name} Fun // special transaction info @@ -61,93 +64,95 @@ block content span a(href=stInfo.referenceUrl) Read more - table(class="table mb-4") - tr - th(class="table-active properties-header") Included in Block - td(class="monospace word-wrap") - if (result.getblock) - a(href=("/block/" + result.getrawtransaction.blockhash)) #{result.getrawtransaction.blockhash} - if (result.getblock.height) - br - span(class="text-muted") (#{result.getblock.height.toLocaleString()}) - else - span N/A - span(class="text-muted") (unconfirmed) - - tr - th(class="table-active properties-header") Timestamp (utc) - - if (result.getrawtransaction.time) - td(class="monospace") #{moment.utc(new Date(result.getrawtransaction["time"] * 1000)).format("Y-MM-DD HH:mm:ss")} - - var timeAgo = moment.duration(moment.utc(new Date()).diff(moment.utc(new Date(parseInt(result.getrawtransaction["time"]) * 1000)))); - br - span(class="text-muted") (#{timeAgo.format()}) - else - td(class="monospace") N/A - br - span(class="text-muted") (unconfirmed) - - //tr - // th(class="table-active properties-header") Transaction ID - // td #{txid} - - tr - th(class="table-active properties-header") Version - td(class="monospace") #{result.getrawtransaction.version} - - tr - th(class="table-active properties-header") Size - td(class="monospace") - span #{result.getrawtransaction.size.toLocaleString()} bytes - if (result.getrawtransaction.vsize != result.getrawtransaction.size) - span ( - a(href="https://github.com/bitcoin/bips/blob/master/bip-0141.mediawiki#Transaction_size_calculations") virtual size - span : #{result.getrawtransaction.vsize.toLocaleString()} bytes) - - if (result.getrawtransaction.locktime > 0) - tr - th(class="table-active properties-header") - span Locktime - td(class="monospace") - if (result.getrawtransaction.locktime < 500000000) - span Spendable in block - a(href=("/block-height/" + result.getrawtransaction.locktime)) #{result.getrawtransaction.locktime} - 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") + div(class="card mb-3") + div(class="card-header") + span(class="h6") Summary + div(class="card-body") + table(class="table details-table mb-0") + tr + td(class="properties-header") Included in Block + td(class="monospace word-wrap") + if (result.getblock) + a(href=("/block/" + result.getrawtransaction.blockhash)) #{result.getrawtransaction.blockhash} + if (result.getblock.height) + br + span(class="text-muted") (#{result.getblock.height.toLocaleString()}) + else + span N/A + span(class="text-muted") (unconfirmed) + + tr + td(class="properties-header") Timestamp (utc) + + if (result.getrawtransaction.time) + td(class="monospace") #{moment.utc(new Date(result.getrawtransaction["time"] * 1000)).format("Y-MM-DD HH:mm:ss")} + - var timeAgo = moment.duration(moment.utc(new Date()).diff(moment.utc(new Date(parseInt(result.getrawtransaction["time"]) * 1000)))); + br + span(class="text-muted") (#{timeAgo.format()}) else - span Spendable after #{moment.utc(new Date(result.getrawtransaction.locktime * 1000)).format("Y-MM-DD HH:mm:ss")} (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") + td(class="monospace") N/A + span(class="text-muted") (unconfirmed) + + //tr + // th(class="table-active properties-header") Transaction ID + // td #{txid} + + tr + td(class="properties-header") Version + td(class="monospace") #{result.getrawtransaction.version} + + tr + td(class="properties-header") Size + td(class="monospace") + span #{result.getrawtransaction.size.toLocaleString()} bytes + if (result.getrawtransaction.vsize != result.getrawtransaction.size) + span ( + a(href="https://github.com/bitcoin/bips/blob/master/bip-0141.mediawiki#Transaction_size_calculations") virtual size + span : #{result.getrawtransaction.vsize.toLocaleString()} bytes) + + if (result.getrawtransaction.locktime > 0) + tr + td(class="properties-header") Locktime + td(class="monospace") + if (result.getrawtransaction.locktime < 500000000) + span Spendable in block + a(href=("/block-height/" + result.getrawtransaction.locktime)) #{result.getrawtransaction.locktime} + 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") + else + span Spendable after #{moment.utc(new Date(result.getrawtransaction.locktime * 1000)).format("Y-MM-DD HH:mm:ss")} (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") - tr - th(class="table-active properties-header") Confirmations - td(class="monospace") - if (!result.getrawtransaction.confirmations || result.getrawtransaction.confirmations == 0) - strong(class="text-danger") 0 (unconfirmed) - else if (result.getrawtransaction.confirmations < 6) - strong(class="text-warning") #{result.getrawtransaction.confirmations} - else - strong(class="text-success") #{result.getrawtransaction.confirmations.toLocaleString()} + tr + td(class="properties-header") Confirmations + td(class="monospace") + if (!result.getrawtransaction.confirmations || result.getrawtransaction.confirmations == 0) + strong(class="text-danger") 0 (unconfirmed) + else if (result.getrawtransaction.confirmations < 6) + strong(class="text-warning") #{result.getrawtransaction.confirmations} + else + strong(class="text-success") #{result.getrawtransaction.confirmations.toLocaleString()} - if (result.getrawtransaction.vin[0].coinbase) - tr(class="border-bottom") - th(class="table-active properties-header") Network Fees Collected - td - - var currencyValue = new Decimal(totalOutputValue).minus(totalInputValue); - include includes/value-display.pug - else - tr(class="border-bottom") - th(class="table-active properties-header") Network Fee Paid - td(class="monospace") - strong - - var currencyValue = new Decimal(totalInputValue).minus(totalOutputValue); - include includes/value-display.pug - - br - span(class="text-muted") (#{utils.formatCurrencyAmount(totalInputValue, currencyFormatType)} - #{utils.formatCurrencyAmount(totalOutputValue, currencyFormatType)}) - br - span ~#{utils.addThousandsSeparators(new DecimalRounded(totalInputValue).minus(totalOutputValue).dividedBy(result.getrawtransaction.size).times(100000000))} sat/B + if (result.getrawtransaction.vin[0].coinbase) + tr + td(class="properties-header") Network Fees Collected + td + - var currencyValue = new Decimal(totalOutputValue).minus(totalInputValue); + include includes/value-display.pug + else + tr + td(class="properties-header") Network Fee Paid + td(class="monospace") + strong + - var currencyValue = new Decimal(totalInputValue).minus(totalOutputValue); + include includes/value-display.pug + + br + span(class="text-muted") (#{utils.formatCurrencyAmount(totalInputValue, currencyFormatType)} - #{utils.formatCurrencyAmount(totalOutputValue, currencyFormatType)}) + br + span ~#{utils.addThousandsSeparators(new DecimalRounded(totalInputValue).minus(totalOutputValue).dividedBy(result.getrawtransaction.size).times(100000000))} sat/B if (result.getrawtransaction.vin[0].coinbase) div(class="card mb-3")