From b9734090e788fe1d8cfe2b7883ac4cb072c7e51e Mon Sep 17 00:00:00 2001 From: Dan Janosik Date: Wed, 25 Mar 2020 16:00:21 -0400 Subject: [PATCH] layout consistency fixes --- public/css/styling.css | 12 ---- views/browser.pug | 2 +- views/mempool-summary.pug | 40 ++++++------- views/node-status.pug | 123 +++++++++++++++++++------------------- 4 files changed, 84 insertions(+), 93 deletions(-) diff --git a/public/css/styling.css b/public/css/styling.css index 5e4fb48..2da8abb 100755 --- a/public/css/styling.css +++ b/public/css/styling.css @@ -24,18 +24,6 @@ code, .text-monospace { font-size: 80%; } -.details-table td { - border-top: none; - padding: 0.4em; - padding-right: 0.6em; -} - -.properties-header { - width: 160px; - text-align: right; - font-weight: bold; -} - .popover { max-width: 1200px; } diff --git a/views/browser.pug b/views/browser.pug index 69e32a3..2cbe7af 100644 --- a/views/browser.pug +++ b/views/browser.pug @@ -45,7 +45,7 @@ block content div.mt-4 h3.h6.mt-3.mb-0 Result - pre.border + pre.border.mb-3 code.json.bg-light(data-lang="json") #{JSON.stringify(methodResult, null, 4)} hr diff --git a/views/mempool-summary.pug b/views/mempool-summary.pug index 26be666..f02a8d8 100644 --- a/views/mempool-summary.pug +++ b/views/mempool-summary.pug @@ -22,26 +22,26 @@ block content h3.h6.mb-0 Summary hr - table.table.details-table.mb-0 - tr - td.properties-header Transaction Count - td.text-monospace(id="tx-count") - - tr - td.properties-header Memory Usage - td.text-monospace(id="mem-usage") - - tr - td.properties-header Total Fees - td.text-monospace(id="total-fees") - - tr - td.properties-header Avg Fee - td.text-monospace(id="avg-fee") - - tr - td.properties-header Avg Fee Rate - td.text-monospace(id="avg-fee-rate") + div.clearfix + div.row + div.summary-table-label Tx Count + div.summary-table-content.text-monospace(id="tx-count") + + div.row + div.summary-table-label Memory Usage + div.summary-table-content.text-monospace(id="mem-usage") + + div.row + div.summary-table-label Total Fees + div.summary-table-content.text-monospace(id="total-fees") + + div.row + div.summary-table-label Avg Fee + div.summary-table-content.text-monospace(id="avg-fee") + + div.row + div.summary-table-label Avg Fee Rate + div.summary-table-content.text-monospace(id="avg-fee-rate") div.card.shadow-sm.mb-3 div.card-body.px-2.px-md-3 diff --git a/views/node-status.pug b/views/node-status.pug index 071eaaf..2de5b97 100644 --- a/views/node-status.pug +++ b/views/node-status.pug @@ -34,34 +34,36 @@ block content h3.h6.mb-0 Summary hr - table.table.details-table.mb-0 - tr - td.properties-header Host : Port - td.text-monospace #{global.rpcClient.host + " : " + global.rpcClient.port} - - tr - td.properties-header Chain - td.text-monospace #{getblockchaininfo.chain} - tr - td.properties-header Version - td.text-monospace #{getnetworkinfo.version} - span.text-monospace (#{getnetworkinfo.subversion}) - tr - td.properties-header Protocol Version - td.text-monospace #{getnetworkinfo.protocolversion} + div.clearfix + div.row + div.summary-table-label Host : Port + div.summary-table-content.text-monospace #{global.rpcClient.host + " : " + global.rpcClient.port} + + div.row + div.summary-table-label Chain + div.summary-table-content.text-monospace #{getblockchaininfo.chain} + + div.row + div.summary-table-label Version + div.summary-table-content.text-monospace #{getnetworkinfo.version} (#{getnetworkinfo.subversion}) + + div.row + div.summary-table-label Protocol Version + div.summary-table-content.text-monospace #{getnetworkinfo.protocolversion} if (getblockchaininfo.size_on_disk) - var sizeData = utils.formatLargeNumber(getblockchaininfo.size_on_disk, 2); - tr - td.properties-header Blockchain Size - td.text-monospace #{sizeData[0]} #{sizeData[1].abbreviation}B + + div.row + div.summary-table-label Blockchain Size + div.summary-table-content.text-monospace #{sizeData[0]} #{sizeData[1].abbreviation}B br span.text-muted (pruned: #{getblockchaininfo.pruned}) if (getblockchaininfo.softforks) - tr - td.properties-header Soft Forks - td.text-monospace + div.row + div.summary-table-label Soft Forks + div.summary-table-content.text-monospace ul.list-unstyled each item, itemName in getblockchaininfo.softforks li @@ -75,40 +77,41 @@ block content span status= span.text-success active small.text-muted.ml-2 (height: #{item.height.toLocaleString()}) - - tr - td.properties-header Block Count - td.text-monospace #{getblockchaininfo.blocks.toLocaleString()} + + div.row + div.summary-table-label Block Count + div.summary-table-content.text-monospace #{getblockchaininfo.blocks.toLocaleString()} br span.text-muted (headers: #{getblockchaininfo.headers.toLocaleString()}) - tr - td.properties-header Difficulty - td.text-monospace + + div.row + div.summary-table-label Difficulty + div.summary-table-content.text-monospace - var difficultyData = utils.formatLargeNumber(getblockchaininfo.difficulty, 3); - span(title=parseFloat(getblockchaininfo.difficulty).toLocaleString(), data-toggle="tooltip") span #{difficultyData[0]} span x 10 sup #{difficultyData[1].exponent} - tr - td.properties-header Status - td.text-monospace + div.row + div.summary-table-label Status + div.summary-table-content.text-monospace if (getblockchaininfo.initialblockdownload || getblockchaininfo.headers > getblockchaininfo.blocks) span Initial block download progress #{(100 * getblockchaininfo.verificationprogress).toLocaleString()}% else - span Synchronized with network + span.text-success Synchronized with network - tr - - var startTimeAgo = moment.duration(uptimeSeconds * 1000); - td.properties-header Uptime - td.text-monospace #{startTimeAgo.format()} + div.row + div.summary-table-label Uptime + div.summary-table-content.text-monospace + - var startTimeAgo = moment.duration(uptimeSeconds * 1000); + span #{startTimeAgo.format()} - tr - td.properties-header Warnings - td.text-monospace + div.row + div.summary-table-label Warnings + div.summary-table-content.text-monospace if (getblockchaininfo.warnings && getblockchaininfo.warnings.trim().length > 0) - span #{getblockchaininfo.warnings} + span.text-danger #{getblockchaininfo.warnings} else span None @@ -116,15 +119,15 @@ block content div.card-body.px-2.px-sm-3 h3.h6.mb-0 Network Info hr - - table.table.details-table.mb-0 - tr - td.properties-header Peers - td.text-monospace #{getnetworkinfo.connections.toLocaleString()} - - tr - td.properties-header Network Traffic - td.text-monospace + + div.clearfix + div.row + div.summary-table-label Peers + div.summary-table-content.text-monospace #{getnetworkinfo.connections.toLocaleString()} + + div.row + div.summary-table-label Network Traffic + div.summary-table-content.text-monospace - var downData = utils.formatLargeNumber(getnettotals.totalbytesrecv, 2); - var downRateData = utils.formatLargeNumber(getnettotals.totalbytesrecv / uptimeSeconds, 2); - var upData = utils.formatLargeNumber(getnettotals.totalbytessent, 2); @@ -137,9 +140,9 @@ block content span.text-muted (avg #{upRateData[0]} #{upRateData[1].abbreviation}B/s) if (global.getnetworkinfo.networks) - tr - td.properties-header Interfaces - td.text-monospace + div.row + div.summary-table-label Interfaces + div.summary-table-content.text-monospace each item, index in global.getnetworkinfo.networks div span.font-weight-bold #{item.name}: @@ -154,13 +157,13 @@ block content if (item.proxy) span.text-muted.ml-3 (proxy: #{item.proxy}) - td.properties-header Local Addresses - td.text-monospace - if (global.getnetworkinfo.localaddresses) - each item, index in global.getnetworkinfo.localaddresses - div #{item.address}:#{item.port} - span.text-muted.ml-3 (score: #{item.score.toLocaleString()}) - + if (global.getnetworkinfo.localaddresses) + div.row + div.summary-table-label Local Addresses + div.summary-table-content.text-monospace + each item, index in global.getnetworkinfo.localaddresses + div #{item.address}:#{item.port} + span.text-muted.ml-3 (score: #{item.score.toLocaleString()}) div.tab-pane(id="tab-json", role="tabpanel")