From 3af996eedad0f0ca038f8ce5eeb444118fb70886 Mon Sep 17 00:00:00 2001 From: joeuhren <46763106+joeuhren@users.noreply.github.com> Date: Fri, 25 Dec 2020 15:01:03 -0700 Subject: [PATCH] More layout and mobile fixes -Table columns are no longer being hidden on mobile/tablet views. Instead, clickable columns with long data (such as hashes) are now reduced to an eye icon on mobile and smaller tablets to save space. In the event that text still doesn't fit in the viewport, applicable tables now allow horizontal scrolling to reveal the rest of the data -Many table columns had their horizontal alignment updated to better match the type of data being displayed -Moved some table columns around to be more consistent across all pages -Applied some additional small tweaks and fixes to provide a better overall user experience --- public/css/style.scss | 19 ++++- views/address.pug | 96 +++++++++++++--------- views/block.pug | 108 ++++++++++++++----------- views/claim_address.pug | 84 ++++++++++++-------- views/includes/address_history.pug | 21 +++-- views/includes/net_addnodes.pug | 4 + views/includes/net_list.pug | 10 +-- views/includes/rl_balance.pug | 4 +- views/includes/rl_received.pug | 4 +- views/index.pug | 33 +++++--- views/layout.pug | 26 +++--- views/market.pug | 123 ++++++++++++++++++----------- views/movement.pug | 20 +++-- views/reward.pug | 44 +++++++---- views/richlist.pug | 72 ++++++++--------- views/tx.pug | 60 +++++++------- 16 files changed, 427 insertions(+), 301 deletions(-) diff --git a/public/css/style.scss b/public/css/style.scss index 65f9861..9c0b458 100644 --- a/public/css/style.scss +++ b/public/css/style.scss @@ -436,7 +436,7 @@ table { &.table-bordered:not(.table-paging) th, &.table-bordered:not(.table-paging) td { border-left-width: 0; } - &.table-bordered:not(.table-paging):not(.right-border-0) th:last-child, &.table-bordered:not(.table-paging):not(.right-border-0) td:last-child { + &.table-bordered:not(.table-paging):not(.right-border-0) th:last-child { border-right-width: 0; } &.table-bordered.right-border-0 th:last-child, &.table-bordered.right-border-0 td:last-child { @@ -529,6 +529,11 @@ tr { width: 100%; } +#search-row { + margin-top: 10px; + margin-bottom: 20px; +} + @media(max-width:575px) { .dataTables_paginate { font-size: 80%; @@ -536,8 +541,16 @@ tr { #marketChart { display: none; } - table.table-paging:not(.mobile-border-right), table.summary-table:not(.mobile-border-right) { - border-right-width: 0; + table { + &.table-paging:not(.mobile-border-right), table.summary-table:not(.mobile-border-right) { + border-right-width: 0; + } + &.table-bordered:not(.table-paging):not(.right-border-0) th:last-child { + border-right-width: 1px; + } + } + #search-row { + margin-bottom: 5px; } } diff --git a/views/address.pug b/views/address.pug index 4b3e78d..ce2f852 100644 --- a/views/address.pug +++ b/views/address.pug @@ -7,49 +7,67 @@ block content - var sentParts = sent.split('.'); - var received = (address.received / 100000000).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true}); - var receivedParts = received.split('.'); + if address.a_id !== 'coinbase' || settings.show_sent_received == true + script. + $(document).ready(function() { + $('.summary-table').dataTable({ + info: false, + paging: false, + searching: false, + ordering: false, + responsive: true, + scrollX: true, + fnDrawCallback: function(settings) { + fixDataTableColumns(); + } + }) + }); .col-xs-12.col-md-12 - .card.card-default.border-0.card-address-summary.cardSpacer - .card-header(style='position:relative;') - if settings.display.claim_address == false || address.name == null || address.name == '' - strong #{address.a_id} - else - strong #{address.name} - include ./includes/rl_labels.pug - if !settings.labels[address.a_id] && settings.display.claim_address == true - a.badge.badge-pill.float-right.d-none.d-sm-block(href="/address/"+ address.a_id +"/claim" style="font-size:smaller;padding-bottom:0;") - if address.name == null || address.name == '' - =" Is this yours? Claim it now for free!" - else - =" Update claimed address" - table.table.table-bordered.table-striped.summary-table.mobile-border-right - - var theadClasses = []; - if settings.display.table_header_bgcolor != null && settings.display.table_header_bgcolor != '' - - theadClasses.push('thead-' + settings.display.table_header_bgcolor); - thead(class=theadClasses) - tr - if settings.show_sent_received == true - th.d-none.d-sm-table-cell #{settings.locale.total_sent} - span.small (#{settings.symbol}) - if address.a_id !== 'coinbase' - if settings.show_sent_received == true - th.d-none.d-sm-table-cell #{settings.locale.total_received} + if address.a_id !== 'coinbase' || settings.show_sent_received == true + .card.card-default.border-0.card-address-summary.cardSpacer + .card-header(style='position:relative;') + if settings.display.claim_address == false || address.name == null || address.name == '' + strong #{address.a_id} + else + strong #{address.name} + include ./includes/rl_labels.pug + if !settings.labels[address.a_id] && settings.display.claim_address == true + a.badge.badge-pill.float-right.d-none.d-sm-block(href="/address/"+ address.a_id +"/claim" style="font-size:smaller;padding-bottom:0;") + if address.name == null || address.name == '' + =" Is this yours? Claim it now for free!" + else + =" Update claimed address" + table.table.table-bordered.table-striped.summary-table.mobile-border-right(style='border-top:0;margin-top:0 !important;') + - var theadClasses = []; + if settings.display.table_header_bgcolor != null && settings.display.table_header_bgcolor != '' + - theadClasses.push('thead-' + settings.display.table_header_bgcolor); + thead(class=theadClasses) + tr + if address.a_id !== 'coinbase' + th.text-center #{settings.locale.rl_balance} span.small (#{settings.symbol}) - th #{settings.locale.rl_balance} - span.small (#{settings.symbol}) - th #{settings.locale.a_qr} - tbody - tr - if settings.show_sent_received == true - td.addr-summary.d-none.d-sm-table-cell #{sentParts[0]}. - span.decimal #{sentParts[1]} - if address.a_id !== 'coinbase' if settings.show_sent_received == true - td.addr-summary.d-none.d-sm-table-cell #{receivedParts[0]}. + th.text-center #{settings.locale.total_sent} + span.small (#{settings.symbol}) + if address.a_id !== 'coinbase' && settings.show_sent_received == true + th.text-center #{settings.locale.total_received} + span.small (#{settings.symbol}) + if address.a_id !== 'coinbase' + th.text-center #{settings.locale.a_qr} + tbody + tr + if address.a_id !== 'coinbase' + td.text-center.addr-summary #{balanceParts[0]}. + span.decimal #{balanceParts[1]} + if settings.show_sent_received == true + td.text-center.addr-summary #{sentParts[0]}. + span.decimal #{sentParts[1]} + if address.a_id !== 'coinbase' && settings.show_sent_received == true + td.text-center.addr-summary #{receivedParts[0]}. span.decimal #{receivedParts[1]} - td.addr-summary #{balanceParts[0]}. - span.decimal #{balanceParts[1]} - td.addr-summary - img.qrcode(src='/qr/' + address.a_id) + if address.a_id !== 'coinbase' + td.text-center.addr-summary + img.qrcode(src='/qr/' + address.a_id) .card.card-default.border-0.cardSpacer .card-header strong #{settings.locale.ex_latest_transactions} diff --git a/views/block.pug b/views/block.pug index 7d0b4bd..80731a5 100644 --- a/views/block.pug +++ b/views/block.pug @@ -7,6 +7,20 @@ block content - var theadClasses = []; if settings.display.table_header_bgcolor != null && settings.display.table_header_bgcolor != '' - theadClasses.push('thead-' + settings.display.table_header_bgcolor); + script. + $(document).ready(function() { + $('#block-summary').dataTable({ + info: false, + paging: false, + searching: false, + ordering: false, + responsive: true, + scrollX: true, + fnDrawCallback: function(settings) { + fixDataTableColumns(); + } + }) + }); .col-xs-12.col-md-12 .card.card-default.border-0.cardSpacer .card-header(style='padding-left:25px;padding-right:25px;') @@ -15,63 +29,65 @@ block content a(href='/block/' + block.previousblockhash) span.fa.fa-chevron-left.iquidus.block-last(data-toggle='tooltip', data-placement='top', title=settings.locale.block_previous) strong.d-none.d-md-block #{settings.symbol} block: #{block.hash} + strong.d-block.d-md-none #{settings.locale.ex_summary} else strong.d-none.d-md-block(style='margin-left:10px;') #{settings.symbol} #{settings.locale.ex_block}: #{block.hash} + strong.d-block.d-md-none(style='margin-left:10px;') #{settings.locale.ex_summary} if block.nextblockhash != null a(href='/block/' + block.nextblockhash) span.fa.fa-chevron-right.iquidus.block-next(data-toggle='tooltip', data-placement='top', title=settings.locale.block_next) - a(href='/api/getblock?hash=' + block.hash, style='margin-left: auto;', data-toggle='tooltip', data-placement='top', title=settings.locale.view_raw_block_data) + a.d-none.d-md-block(href='/api/getblock?hash=' + block.hash, style='margin-left:auto;', data-toggle='tooltip', data-placement='top', title=settings.locale.view_raw_block_data) span.fa.fa-info-circle.iquidus - table.table.table-bordered.summary-table + table#block-summary.table.table-bordered.summary-table(style='border-top:0;margin-top:0 !important;') thead(class=theadClasses) tr - th #{settings.locale.height} - th #{settings.locale.difficulty} - th #{settings.locale.confirmations} + th.text-center #{settings.locale.height} + th.text-center #{settings.locale.difficulty} + th.text-center #{settings.locale.confirmations} if settings.heavy == true - th.d-none.d-sm-table-cell Vote - th.d-none.d-sm-table-cell #{settings.locale.size} (kB) - th.d-none.d-md-table-cell #{settings.locale.bits} - th.d-none.d-sm-table-cell #{settings.locale.nonce} - th.d-none.d-sm-table-cell #{settings.locale.timestamp} + th.text-center Vote + th.text-center #{settings.locale.size} (kB) + th.text-center #{settings.locale.bits} + th.text-center #{settings.locale.nonce} + th.text-center #{settings.locale.timestamp} tbody if block.confirmations >= confirmations tr.bg-success.text-dark - var block_size = block.size/1024 - td=block.height - td=Number(block.difficulty).toFixed(4) - td=block.confirmations + td.text-center=block.height + td.text-center=Number(block.difficulty).toFixed(4) + td.text-center=block.confirmations if settings.heavy == true - td.d-none.d-sm-table-cell=block.vote - td.d-none.d-sm-table-cell=block_size.toFixed(2) - td.d-none.d-md-table-cell=block.bits - td.d-none.d-sm-table-cell=block.nonce - td.d-none.d-sm-table-cell=time + td.text-center=block.vote + td.text-center=block_size.toFixed(2) + td.text-center=block.bits + td.text-center=block.nonce + td.text-center=time else if block.confirmations < (confirmations / 2) tr.bg-danger - var block_size = block.size/1024 - td=block.height - td=Number(block.difficulty).toFixed(4) - td=block.confirmations + td.text-center=block.height + td.text-center=Number(block.difficulty).toFixed(4) + td.text-center=block.confirmations if settings.heavy == true - td.d-none.d-sm-table-cell=block.vote - td.d-none.d-sm-table-cell=block_size.toFixed(2) - td.d-none.d-md-table-cell=block.bits - td.d-none.d-sm-table-cell=block.nonce - td.d-none.d-sm-table-cell=time + td.text-center=block.vote + td.text-center=block_size.toFixed(2) + td.text-center=block.bits + td.text-center=block.nonce + td.text-center=time else tr.table-warning - var block_size = block.size/1024 - td=block.height - td=Number(block.difficulty).toFixed(4) - td=block.confirmations + td.text-center=block.height + td.text-center=Number(block.difficulty).toFixed(4) + td.text-center=block.confirmations if settings.heavy == true - td.d-none.d-sm-table-cell=block.vote - td.d-none.d-sm-cell=block_size.toFixed(2) - td.d-none.d-md-table-cell=block.bits - td.d-none.d-sm-table-cell=block.nonce - td.d-none.d-sm-table-cell=time + td.text-center=block.vote + td.text-center=block_size.toFixed(2) + td.text-center=block.bits + td.text-center=block.nonce + td.text-center=time if block.hash == settings.genesis_block .alert.alert-info(role='alert', style='text-align:center;') strong #{settings.locale.block_genesis} @@ -82,27 +98,27 @@ block content table.table.table-bordered.table-striped.summary-table.mobile-border-right thead(class=theadClasses) tr - th.d-none.d-sm-table-cell #{settings.locale.tx_hash} - th #{settings.locale.tx_recipients} - th #{settings.locale.mkt_amount} + th.text-center.d-table-cell.d-md-none + th.d-none.d-md-table-cell #{settings.locale.tx_hash} + th.text-center #{settings.locale.tx_recipients} + th.text-center #{settings.locale.mkt_amount} span.small (#{settings.symbol}) - th tbody each txn in txs tr - td.d-none.d-sm-table-cell + td.text-center.d-table-cell.d-md-none + a(href='/tx/' + txn.txid) + span.fa.fa-eye(data-toggle='tooltip', data-placement='top', title=settings.locale.view_tx) + td.d-none.d-md-table-cell a.breakWord(href='/tx/' + txn.txid) #{txn.txid} - td #{txn.vout.length} + td.text-center #{txn.vout.length} if txn.vout.length > 0 - var total = (txn.total / 100000000).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true}); - var totalParts = total.split('.'); - td #{totalParts[0]}. + td.text-center #{totalParts[0]}. span.decimal #{totalParts[1]} else - var total = (txn.total).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true}); - var totalParts = total.split('.'); - td #{totalParts[0]}. - span.decimal #{totalParts[1]} - td.text-center - a(href='/tx/' + txn.txid) - span.fa.fa-eye(data-toggle='tooltip', data-placement='top', title=settings.locale.view_tx) \ No newline at end of file + td.text-center #{totalParts[0]}. + span.decimal #{totalParts[1]} \ No newline at end of file diff --git a/views/claim_address.pug b/views/claim_address.pug index 57ea027..98bd7f6 100644 --- a/views/claim_address.pug +++ b/views/claim_address.pug @@ -44,43 +44,61 @@ block content - var sentParts = sent.split('.'); - var received = (address.received / 100000000).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true}); - var receivedParts = received.split('.'); + if address.a_id !== 'coinbase' || settings.show_sent_received == true + script. + $(document).ready(function() { + $('.summary-table').dataTable({ + info: false, + paging: false, + searching: false, + ordering: false, + responsive: true, + scrollX: true, + fnDrawCallback: function(settings) { + fixDataTableColumns(); + } + }) + }); .col-xs-12.col-md-12.cardSpacer - .card.card-default.border-0.card-address-summary.cardSpacer - .card-header(style='position:relative;') - if typeof address.name == null || address.name == '' - strong #{address.a_id} - else - strong #{address.name} - include ./includes/rl_labels.pug - table.table.table-bordered.table-striped.summary-table.mobile-border-right - - var theadClasses = []; - if settings.display.table_header_bgcolor != null && settings.display.table_header_bgcolor != '' - - theadClasses.push('thead-' + settings.display.table_header_bgcolor); - thead(class=theadClasses) - tr - if settings.show_sent_received == true - th.d-none.d-sm-table-cell #{settings.locale.total_sent} - span.small (#{settings.symbol}) - if address.a_id !== 'coinbase' - if settings.show_sent_received == true - th.d-none.d-sm-table-cell #{settings.locale.total_received} + if address.a_id !== 'coinbase' || settings.show_sent_received == true + .card.card-default.border-0.card-address-summary.cardSpacer + .card-header(style='position:relative;') + if typeof address.name == null || address.name == '' + strong #{address.a_id} + else + strong #{address.name} + include ./includes/rl_labels.pug + table.table.table-bordered.table-striped.summary-table.mobile-border-right(style='border-top:0;margin-top:0 !important;') + - var theadClasses = []; + if settings.display.table_header_bgcolor != null && settings.display.table_header_bgcolor != '' + - theadClasses.push('thead-' + settings.display.table_header_bgcolor); + thead(class=theadClasses) + tr + if address.a_id !== 'coinbase' + th.text-center #{settings.locale.rl_balance} span.small (#{settings.symbol}) - th #{settings.locale.rl_balance} - span.small (#{settings.symbol}) - th #{settings.locale.a_qr} - tbody - tr - if settings.show_sent_received == true - td.addr-summary.d-none.d-sm-table-cell #{sentParts[0]}. - span.decimal #{sentParts[1]} - if address.a_id !== 'coinbase' if settings.show_sent_received == true - td.addr-summary.d-none.d-sm-table-cell #{receivedParts[0]}. + th.text-center #{settings.locale.total_sent} + span.small (#{settings.symbol}) + if address.a_id !== 'coinbase' && settings.show_sent_received == true + th.text-center #{settings.locale.total_received} + span.small (#{settings.symbol}) + if address.a_id !== 'coinbase' + th.text-center #{settings.locale.a_qr} + tbody + tr + if address.a_id !== 'coinbase' + td.text-center.addr-summary #{balanceParts[0]}. + span.decimal #{balanceParts[1]} + if settings.show_sent_received == true + td.text-center.addr-summary #{sentParts[0]}. + span.decimal #{sentParts[1]} + if address.a_id !== 'coinbase' && settings.show_sent_received == true + td.text-center.addr-summary #{receivedParts[0]}. span.decimal #{receivedParts[1]} - td.addr-summary #{balanceParts[0]}. - span.decimal #{balanceParts[1]} - td.addr-summary - img.qrcode(src='/qr/'+address.a_id) + if address.a_id !== 'coinbase' + td.text-center.addr-summary + img.qrcode(src='/qr/' + address.a_id) .card.card-default.border-0.cardSpacer .card-header strong Claim this Address diff --git a/views/includes/address_history.pug b/views/includes/address_history.pug index c9f9394..372dc6e 100644 --- a/views/includes/address_history.pug +++ b/views/includes/address_history.pug @@ -26,6 +26,7 @@ script. serverSide: true, iDisplayLength: displayLengthMax, lengthMenu: lengthMenuOpts, + scrollX: true, ajax: { url: '/ext/getaddresstxs/' + hashAddress, beforeSend: function(jqXHR, settings) { @@ -46,8 +47,8 @@ script. var vin = data[3]; //variables for better readability var balance = (data[4] / 100000000).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true}); //variables for better readability var balanceParts = balance.split('.'); - $("td:eq(0)", row).html(format_unixtime(new Date(timestamp), true)); - $("td:eq(1)", row).html('' + txhash + '').addClass('breakWord d-none d-sm-table-cell'); + $("td:eq(0)", row).html('').addClass('text-center d-table-cell d-md-none'); + $("td:eq(1)", row).html('' + txhash + '').addClass('breakWord d-none d-md-table-cell'); var amount = 0; var updown = ''; var rowclass = 'info'; @@ -73,11 +74,14 @@ script. rowclass = 'bg-danger'; } var amountParts = amount.split('.'); - $("td:eq(2)", row).html(updown + amountParts[0] + '.' + amountParts[1] + '').addClass(rowclass); - $("td:eq(3)", row).html(balanceParts[0] + '.' + balanceParts[1] + ''); + $("td:eq(2)", row).html(updown + amountParts[0] + '.' + amountParts[1] + '').addClass(rowclass + ' text-center'); + $("td:eq(3)", row).html(balanceParts[0] + '.' + balanceParts[1] + '').addClass('text-center'); + $("td:eq(4)", row).html(format_unixtime(new Date(timestamp), true)).addClass('text-center'); }, fnDrawCallback: function(settings) { + fixDataTableColumns(); fixFooterHeightAndPosition(); + enableTooltips(); } }); }); @@ -87,10 +91,11 @@ table#address-txs.table.table-bordered.table-striped.table-paging.mobile-border- - theadClasses.push('thead-' + settings.display.table_header_bgcolor); thead(class=theadClasses) tr - th #{settings.locale.timestamp} - th.d-none.d-sm-table-cell #{settings.locale.tx_hash} - th #{settings.locale.mkt_amount} + th.d-table-cell.d-md-none + th.d-none.d-md-table-cell #{settings.locale.tx_hash} + th.text-center #{settings.locale.mkt_amount} span.small (#{settings.symbol}) - th #{settings.locale.rl_balance} + th.text-center #{settings.locale.rl_balance} span.small (#{settings.symbol}) + th.text-center #{settings.locale.timestamp} tbody \ No newline at end of file diff --git a/views/includes/net_addnodes.pug b/views/includes/net_addnodes.pug index f338ff5..fc573d5 100644 --- a/views/includes/net_addnodes.pug +++ b/views/includes/net_addnodes.pug @@ -7,6 +7,7 @@ script. responsive: true, lengthChange: true, processing: true, + scrollX: true, language: { paginate: { previous: '<', @@ -24,6 +25,7 @@ script. } }, fnDrawCallback: function(settings) { + fixDataTableColumns(); fixFooterHeightAndPosition(); }, columns: [ @@ -40,6 +42,7 @@ script. responsive: true, lengthChange: true, processing: true, + scrollX: true, language: { paginate: { previous: '<', @@ -57,6 +60,7 @@ script. } }, fnDrawCallback: function(settings) { + fixDataTableColumns(); fixFooterHeightAndPosition(); }, columns: [ diff --git a/views/includes/net_list.pug b/views/includes/net_list.pug index cf9d820..c1039a0 100644 --- a/views/includes/net_list.pug +++ b/views/includes/net_list.pug @@ -7,6 +7,7 @@ script. responsive: true, lengthChange: true, processing: true, + scrollX: true, language: { paginate: { previous: '<', @@ -30,6 +31,7 @@ script. $("td:eq(3)", row).html(data['country']+flagBlock); }, fnDrawCallback: function(settings) { + fixDataTableColumns(); fixFooterHeightAndPosition(); }, columns: [ @@ -40,11 +42,7 @@ script. ] }); $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { - var table = $($.fn.dataTable.tables(true)); - - if (table.DataTable().responsive != null) table.DataTable().responsive.recalc(); - table.css('width', '100%'); - table.DataTable().columns.adjust().draw(); + fixDataTableColumns(); fixFooterHeightAndPosition(); }); }); @@ -55,7 +53,7 @@ script. - theadClasses.push('thead-' + settings.display.table_header_bgcolor); thead(class=theadClasses) tr - th #{settings.locale.net_address} + th.text-center #{settings.locale.net_address} th.text-center #{settings.locale.net_protocol} th.text-center #{settings.locale.net_subversion} th.text-center #{settings.locale.net_country} diff --git a/views/includes/rl_balance.pug b/views/includes/rl_balance.pug index e747e77..389b731 100644 --- a/views/includes/rl_balance.pug +++ b/views/includes/rl_balance.pug @@ -8,7 +8,7 @@ th.text-center span.fa.fa-flag-checkered th #{settings.locale.tx_address} - th #{settings.locale.rl_balance} + th.text-center #{settings.locale.rl_balance} span.small (#{settings.symbol}) th.text-center % tbody @@ -27,7 +27,7 @@ else a.breakWord(href='/address/' + address.a_id) #{address.name} include ./rl_labels.pug - td #{itemFixedParts[0]}. + td.text-center #{itemFixedParts[0]}. span.decimal #{itemFixedParts[1]} td.text-center =percentage.toFixed(2) \ No newline at end of file diff --git a/views/includes/rl_received.pug b/views/includes/rl_received.pug index f07b56d..acd8e17 100644 --- a/views/includes/rl_received.pug +++ b/views/includes/rl_received.pug @@ -8,7 +8,7 @@ th.text-center span.fa.fa-flag-checkered th #{settings.locale.tx_address} - th #{settings.locale.rl_received} + th.text-center #{settings.locale.rl_received} span.small (#{settings.symbol}) tbody - var count = 0; @@ -25,5 +25,5 @@ else a.breakWord(href='/address/' + address.a_id) #{address.name} include ./rl_labels.pug - td #{itemFixedParts[0]}. + td.text-center #{itemFixedParts[0]}. span.decimal #{itemFixedParts[1]} \ No newline at end of file diff --git a/views/index.pug b/views/index.pug index 58caf6d..a443c75 100644 --- a/views/index.pug +++ b/views/index.pug @@ -28,6 +28,7 @@ block content serverSide: true, iDisplayLength: displayLengthMax, lengthMenu: lengthMenuOpts, + scrollX: true, ajax: { url: '/ext/getlasttxs/0', beforeSend: function(jqXHR, settings) { @@ -50,14 +51,17 @@ block content var amountParts = amount.split('.'); var amount = amountParts[0] + '.' + amountParts[1] + ''; var timestamp = data[5]; - $("td:eq(0)", row).html('' + blockindex + ''); - $("td:eq(1)", row).html('' + txhash + '').addClass("text-center breakWord d-none d-sm-table-cell"); - $("td:eq(2)", row).html(outputs).addClass("text-center"); - $("td:eq(3)", row).html(amount); - $("td:eq(4)", row).html(format_unixtime(new Date(timestamp), true)).addClass("text-center d-none d-sm-table-cell"); + $("td:eq(0)", row).html('').addClass('text-center d-table-cell d-md-none'); + $("td:eq(1)", row).html('' + blockindex + ''); + $("td:eq(2)", row).html('' + txhash + '').addClass("text-center breakWord d-none d-md-table-cell"); + $("td:eq(3)", row).html(outputs).addClass("text-center d-none d-sm-table-cell"); + $("td:eq(4)", row).html(amount); + $("td:eq(5)", row).html(format_unixtime(new Date(timestamp), true)).addClass("text-center"); }, fnDrawCallback: function(settings) { + fixDataTableColumns(); fixFooterHeightAndPosition(); + enableTooltips(); } }); setInterval( function () { @@ -65,11 +69,13 @@ block content }, 60000 ); }); if error !== null - .row - .col-md-12 - .alert.alert-danger.alert-dismissable(role='alert') - button.close(type='button', data-dismiss='alert') × - strong #{settings.locale.ex_error} : #{error} + .col-12 + .alert.alert-danger.alert-dismissable(role='alert') + button.close(type='button', data-dismiss='alert') × + .cardSpacer + span.fas.fa-exclamation-circle(style='margin-right:5px') + strong #{settings.locale.ex_error} + div #{error} .col-md-12.cardSpacer .card.card-default.border-0.cardSpacer .card-header @@ -80,10 +86,11 @@ block content - theadClasses.push('thead-' + settings.display.table_header_bgcolor); thead(class=theadClasses) tr + th.d-table-cell.d-md-none th.text-center #{settings.locale.ex_block} - th.text-center.d-none.d-sm-table-cell #{settings.locale.tx_hash} - th.text-center #{settings.locale.tx_recipients} + th.text-center.d-none.d-md-table-cell #{settings.locale.tx_hash} + th.text-center.d-none.d-sm-table-cell #{settings.locale.tx_recipients} th.text-center #{settings.locale.mkt_amount} span.small (#{settings.symbol}) - th.text-center.d-none.d-sm-table-cell #{settings.locale.timestamp} + th.text-center #{settings.locale.timestamp} tbody.text-center \ No newline at end of file diff --git a/views/layout.pug b/views/layout.pug index ddf0c21..eea4ffa 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -93,6 +93,15 @@ html(lang='en') $('[data-toggle="tooltip"]').tooltip(); } } + function fixDataTableColumns() { + // Wait 2 ticks before adjusting table columns to give time for elements to be rendered (1 tick doesn't seem to be enough for some tables) + var ColumnAdjustSetIntervalID = setInterval(function() { + // Stop setInterval from running again + clearInterval(ColumnAdjustSetIntervalID); + // Ensure columns are properly aligned + $($.fn.dataTable.tables(true)).DataTable().columns.adjust(); + }, 2, 'adjustTableColumns'); + } $(document).ready(function() { if ('#{active}' != '') $('##{active}').addClass('active'); @@ -128,22 +137,9 @@ html(lang='en') $("#lblX1").text(' '); }}); } - if ($('#history-table tbody tr').length) { - $('#history-table').dataTable({ - searching: false, - ordering: false, - responsive: true, - language: { - paginate: { - previous: '<', - next: '>' - } - } - }); - } $('.iquidus').css('color',$('.table').css('color')); $(window).resize(function () { - $($.fn.dataTable.tables(true)).DataTable().columns.adjust(); + fixDataTableColumns(); fixFooterHeightAndPosition(); }); setInterval(function() { @@ -340,7 +336,7 @@ html(lang='en') .col-lg-2 .card.card-default.border-0.d-none.d-lg-block.d-block.cardSpacer(id='pnlFive') - } - .row.text-center(style='margin-top:10px;margin-bottom:20px;') + div#search-row.row.text-center form.form-inline.col-12.d-flex.justify-content-center(method='post', action='/search') #index-search.form-group.d-flex.justify-content-center input.form-control(type='text', name='search', placeholder=settings.locale.ex_search_message, style='min-width:80%;margin-right:5px;') diff --git a/views/market.pug b/views/market.pug index 12b63df..39fa178 100644 --- a/views/market.pug +++ b/views/market.pug @@ -7,6 +7,18 @@ block content - theadClasses.push('thead-' + settings.display.table_header_bgcolor); script. $(document).ready(function() { + $('.summary-table').dataTable({ + info: false, + paging: false, + searching: false, + ordering: false, + autowidth: true, + responsive: true, + scrollX: true, + fnDrawCallback: function(settings) { + fixDataTableColumns(); + } + }); $('.order-table').dataTable({ info: false, paging: false, @@ -14,7 +26,26 @@ block content ordering: false, scrollY: '250px', autowidth: true, - responsive: true + responsive: true, + scrollX: true, + fnDrawCallback: function(settings) { + fixDataTableColumns(); + } + }); + $('#history-table').dataTable({ + searching: false, + ordering: false, + responsive: true, + scrollX: true, + language: { + paginate: { + previous: '<', + next: '>' + } + }, + fnDrawCallback: function(settings) { + fixDataTableColumns(); + } }); }); .col-xs-12.col-md-12 @@ -93,58 +124,58 @@ block content strong #{marketdata.market_name} - #{marketdata.coin}/#{marketdata.exchange} - #{settings.locale.mkt_hours} if marketdata.data.chartdata == 'null' || marketdata.data.chartdata == '' || marketdata.data.chartdata == '[]' span.fas.fa-chart-line.float-right.view-chart-disabled.iquidus.market-toggle(style='cursor: pointer;', data-toggle='tooltip', data-placement='bottom', title=settings.locale.mkt_no_chart) - table.table.table-bordered.right-border-0.summary-table + table.table.table-bordered.right-border-0.summary-table(style='border-top:0;margin-top:0 !important;') thead(class=theadClasses) tr if marketdata.data.summary.high != null - th #{settings.locale.mkt_high} + th.text-center #{settings.locale.mkt_high} if marketdata.data.summary.low != null - th #{settings.locale.mkt_low} + th.text-center #{settings.locale.mkt_low} if marketdata.data.summary.volume != null - th #{settings.locale.mkt_volume} + th.text-center #{settings.locale.mkt_volume} if marketdata.data.summary.volume_btc != null - th.d-none.d-xl-table-cell #{settings.locale.mkt_volume} + th.text-center #{settings.locale.mkt_volume} span.small (#{marketdata.exchange}) if marketdata.data.summary.bid != null - th.d-none.d-md-table-cell #{settings.locale.mkt_top_bid} + th.text-center #{settings.locale.mkt_top_bid} if marketdata.data.summary.ask != null - th.d-none.d-md-table-cell #{settings.locale.mkt_top_ask} + th.text-center #{settings.locale.mkt_top_ask} if marketdata.data.summary.last != null - th.d-none.d-xl-table-cell #{settings.locale.mkt_last} + th.text-center #{settings.locale.mkt_last} if marketdata.data.summary.prev != null - th.d-none.d-xl-table-cell #{settings.locale.mkt_yesterday} + th.text-center #{settings.locale.mkt_yesterday} if marketdata.data.summary.change != null || (marketdata.data.summary.last != null && marketdata.data.summary.prev != null) - th.d-none.d-xl-table-cell #{settings.locale.mkt_change} + th.text-center #{settings.locale.mkt_change} tbody tr if marketdata.data.summary.high != null - td #{parseFloat(marketdata.data.summary.high).toFixed(8)} + td.text-center #{parseFloat(marketdata.data.summary.high).toFixed(8)} if marketdata.data.summary.low != null - td #{parseFloat(marketdata.data.summary.low).toFixed(8)} + td.text-center #{parseFloat(marketdata.data.summary.low).toFixed(8)} if marketdata.data.summary.volume != null - td #{parseFloat(marketdata.data.summary.volume).toFixed(8)} + td.text-center #{parseFloat(marketdata.data.summary.volume).toFixed(8)} if marketdata.data.summary.volume_btc != null - td.d-none.d-xl-table-cell #{parseFloat(marketdata.data.summary.volume_btc).toFixed(8)} + td.text-center #{parseFloat(marketdata.data.summary.volume_btc).toFixed(8)} if marketdata.data.summary.bid != null - td.d-none.d-md-table-cell #{parseFloat(marketdata.data.summary.bid).toFixed(8)} + td.text-center #{parseFloat(marketdata.data.summary.bid).toFixed(8)} if marketdata.data.summary.ask != null - td.d-none.d-md-table-cell #{parseFloat(marketdata.data.summary.ask).toFixed(8)} + td.text-center #{parseFloat(marketdata.data.summary.ask).toFixed(8)} if marketdata.data.summary.last != null - td.d-none.d-xl-table-cell #{parseFloat(marketdata.data.summary.last).toFixed(8)} + td.text-center #{parseFloat(marketdata.data.summary.last).toFixed(8)} if marketdata.data.summary.prev != null - td.d-none.d-xl-table-cell #{parseFloat(marketdata.data.summary.prev).toFixed(8)} + td.text-center #{parseFloat(marketdata.data.summary.prev).toFixed(8)} if marketdata.data.summary.change != null || (marketdata.data.summary.last != null && marketdata.data.summary.prev != null) if marketdata.data.summary.change != null if marketdata.data.summary.change == '' || marketdata.data.summary.change == '-' - td.d-none.d-xl-table-cell.font-weight-bold 0.00 % + td.text-center.font-weight-bold 0.00 % else - var price_change = parseFloat(marketdata.data.summary.change).toFixed(2); else - var price_change = (100 - ((parseFloat(marketdata.data.summary.prev) / parseFloat(marketdata.data.summary.last)) * 100)).toFixed(2); if price_change >= 0 - td.d-none.d-xl-table-cell.text-success.font-weight-bold +#{price_change} % + td.text-center.text-success.font-weight-bold +#{price_change} % else - td.d-none.d-xl-table-cell.text-danger.font-weight-bold #{price_change} % + td.text-center.text-danger.font-weight-bold #{price_change} % if marketdata.data.chartdata != 'null' && marketdata.data.chartdata != '' && marketdata.data.chartdata != '[]' #marketChart.row .col-md-12.cardSpacer @@ -161,20 +192,20 @@ block content table.table.table-striped.table-bordered.order-table thead(class=theadClasses) tr - th #{settings.locale.mkt_price} + th.text-center #{settings.locale.mkt_price} span.small (#{marketdata.exchange}) - th #{settings.locale.mkt_amount} + th.text-center #{settings.locale.mkt_amount} span.small (#{marketdata.coin}) - th.d-none.d-sm-table-cell #{settings.locale.mkt_total} + th.text-center #{settings.locale.mkt_total} span.small (#{marketdata.exchange}) tbody each buy in marketdata.data.buys tr - td.text-success.font-weight-bold + td.text-center.text-success.font-weight-bold =parseFloat(buy.price).toFixed(8) - td + td.text-center =parseFloat(buy.quantity).toFixed(8) - td.d-none.d-sm-table-cell + td.text-center if buy.total != null =parseFloat(buy.total).toFixed(8) else @@ -186,20 +217,20 @@ block content table.table.table-striped.table-bordered.order-table thead(class=theadClasses) tr - th #{settings.locale.mkt_price} + th.text-center #{settings.locale.mkt_price} span.small (#{marketdata.exchange}) - th #{settings.locale.mkt_amount} + th.text-center #{settings.locale.mkt_amount} span.small (#{marketdata.coin}) - th.d-none.d-sm-table-cell #{settings.locale.mkt_total} + th.text-center #{settings.locale.mkt_total} span.small (#{marketdata.exchange}) tbody each sell in marketdata.data.sells tr - td.text-danger.font-weight-bold + td.text-center.text-danger.font-weight-bold =parseFloat(sell.price).toFixed(8) - td + td.text-center =parseFloat(sell.quantity).toFixed(8) - td.d-none.d-sm-table-cell + td.text-center if sell.total != null =parseFloat(sell.total).toFixed(8) else @@ -212,39 +243,39 @@ block content table#history-table.table.table-hover.table-bordered.table-striped.table-paging.right-border-0(cellspacing='0') thead(class=theadClasses) tr - th #{settings.locale.mkt_price} + th.text-center #{settings.locale.mkt_price} span.small (#{marketdata.exchange}) - th #{settings.locale.mkt_amount} + th.text-center #{settings.locale.mkt_amount} span.small (#{marketdata.coin}) - th #{settings.locale.mkt_total} + th.text-center #{settings.locale.mkt_total} span.small (#{marketdata.exchange}) - th.d-none.d-lg-table-cell #{settings.locale.mkt_time_stamp} + th.text-center #{settings.locale.mkt_time_stamp} tbody each order in marketdata.data.history if order.ordertype != null if order.ordertype.toUpperCase() == 'BUY' tr - td.text-success.font-weight-bold + td.text-center.text-success.font-weight-bold =parseFloat(order.price).toFixed(8) - td + td.text-center =parseFloat(order.quantity).toFixed(8) - td + td.text-center if order.total != null =parseFloat(order.total).toFixed(8) else =parseFloat(parseFloat(order.price).toFixed(8) * parseFloat(order.quantity).toFixed(8)).toFixed(8) - td.d-none.d-lg-table-cell + td.text-center =format_unixtime(new Date(order.timestamp), true) else tr - td.text-danger.font-weight-bold + td.text-center.text-danger.font-weight-bold =parseFloat(order.price).toFixed(8) - td + td.text-center =parseFloat(order.quantity).toFixed(8) - td + td.text-center if order.total != null =parseFloat(order.total).toFixed(8) else =parseFloat(parseFloat(order.price).toFixed(8) * parseFloat(order.quantity).toFixed(8)).toFixed(8) - td.d-none.d-lg-table-cell + td.text-center =format_unixtime(new Date(order.timestamp), true) \ No newline at end of file diff --git a/views/movement.pug b/views/movement.pug index 7766f4a..6f2bf7b 100644 --- a/views/movement.pug +++ b/views/movement.pug @@ -29,6 +29,7 @@ block content serverSide: true, iDisplayLength: displayLengthMax, lengthMenu: lengthMenuOpts, + scrollX: true, ajax: { url: '/ext/getlasttxs/#{min_amount}', beforeSend: function(jqXHR, settings) { @@ -58,12 +59,15 @@ block content } else { var total = ""; } - $("td:eq(0)", row).html(format_unixtime(new Date(timestamp), true)); - $("td:eq(1)", row).html('' + txhash + '').addClass('breakWord d-none d-sm-table-cell'); - $("td:eq(2)", row).html(total); + $("td:eq(0)", row).html('').addClass('text-center d-table-cell d-md-none'); + $("td:eq(1)", row).html('' + txhash + '').addClass('breakWord d-none d-md-table-cell'); + $("td:eq(2)", row).html(total).addClass('text-center'); + $("td:eq(3)", row).html(format_unixtime(new Date(timestamp), true)).addClass('text-center'); }, fnDrawCallback: function(settings) { + fixDataTableColumns(); fixFooterHeightAndPosition(); + enableTooltips(); } }); setInterval(function () { @@ -80,7 +84,9 @@ block content - theadClasses.push('thead-' + settings.display.table_header_bgcolor); thead(class=theadClasses) tr - th.text-center timestamp - th.text-center.d-none.d-sm-table-cell txid - th.text-center amount - tbody.text-center \ No newline at end of file + th.d-table-cell.d-md-none + th.d-none.d-md-table-cell #{settings.locale.tx_hash} + th.text-center #{settings.locale.mkt_amount} + span.small (#{settings.symbol}) + th.text-center #{settings.locale.timestamp} + tbody \ No newline at end of file diff --git a/views/reward.pug b/views/reward.pug index e9eb8d0..d344849 100644 --- a/views/reward.pug +++ b/views/reward.pug @@ -1,41 +1,55 @@ extends layout block content - .row + script. + $(document).ready(function() { + $('.summary-table').dataTable({ + info: false, + paging: false, + searching: false, + ordering: false, + responsive: true, + scrollX: true, + fnDrawCallback: function(settings) { + fixDataTableColumns(); + } + }) + }); + .row(style='margin-left:0;margin-right:0;') .col-xs-12.col-md-12 .card.card-default.border-0.card-address-summary .card-header(style='position:relative;') strong #{settings.locale.heavy_title} span.small (#{settings.symbol}) - table.table.table-bordered.table-striped.summary-table + table.table.table-bordered.table-striped.summary-table(style='border-top:0;border-bottom:0;margin-top:0 !important;') - var theadClasses = []; if settings.display.table_header_bgcolor != null && settings.display.table_header_bgcolor != '' - theadClasses.push('thead-' + settings.display.table_header_bgcolor); thead(class=theadClasses) tr - th #{settings.locale.ex_supply} + th.text-center #{settings.locale.ex_supply} span.small (#{settings.symbol}) - th #{settings.locale.heavy_cap} + th.text-center #{settings.locale.heavy_cap} span.small (#{settings.symbol}) - th #{settings.locale.heavy_phase} - th #{settings.locale.heavy_maxvote} - th #{settings.locale.heavy_reward} - th #{settings.locale.heavy_estnext} + th.text-center #{settings.locale.heavy_phase} + th.text-center #{settings.locale.heavy_maxvote} + th.text-center #{settings.locale.heavy_reward} + th.text-center #{settings.locale.heavy_estnext} tbody tr - td + td.text-center =heavy.supply - td + td.text-center =heavy.cap - td + td.text-center =heavy.phase - td + td.text-center =heavy.maxvote - td + td.text-center =heavy.reward - td + td.text-center =heavy.estnext - .row + .row(style='margin-left:0;margin-right:0;') .col-md-3 .card.card-default.border-0 .card-body diff --git a/views/richlist.pug b/views/richlist.pug index bc0c02b..502a54f 100644 --- a/views/richlist.pug +++ b/views/richlist.pug @@ -1,37 +1,38 @@ extends layout block content - script. - $(document).ready(function() { - var data = [ - ['Top 1-25', !{dista.percent}],['Top 26-50', !{distb.percent}],['Top 51-75', !{distc.percent}],['Top 76-100', !{distd.percent}],['101+', !{diste.percent}] - ]; - $.jqplot('pieChart', [data], - { - seriesColors: [ "#d9534f", "#5cb85c", "#428bca", "#222", "#CCC"], - series: [{ - renderer: $.jqplot.PieRenderer, - rendererOptions: { - diameter: 260, - padding: 0, - sliceMargin: 4, - showDataLabels: false - } - }], - grid: {borderWidth:0, shadow:false}, - legend: { - show: false, - rendererOptions: { + if show_dist == true + script. + $(document).ready(function() { + var data = [ + ['Top 1-25', !{dista.percent}],['Top 26-50', !{distb.percent}],['Top 51-75', !{distc.percent}],['Top 76-100', !{distd.percent}],['101+', !{diste.percent}] + ]; + $.jqplot('pieChart', [data], + { + seriesColors: [ "#d9534f", "#5cb85c", "#428bca", "#222", "#CCC"], + series: [{ + renderer: $.jqplot.PieRenderer, + rendererOptions: { + diameter: 260, + padding: 0, + sliceMargin: 4, + showDataLabels: false + } + }], + grid: {borderWidth:0, shadow:false}, + legend: { + show: false, + rendererOptions: { numberRows: 1, border: 'none' - }, - location: 's' + }, + location: 's' + } } - } - ); - }); + ); + }); .row(style='margin-left:0;margin-right:0;') - .col-xs-12.col-lg-8 + div(class=(show_dist == true ? 'col-xs-12 col-lg-8' : 'col-12')) .container ul.nav.nav-tabs(role='tablist') li.nav-item(role='presentation') @@ -44,7 +45,7 @@ block content #received.container.tab-pane(style='margin-top:0;') include ./includes/rl_received.pug if show_dist == true - .col-lg-4.col-xs-12 + .col-xs-12.col-lg-4 #summary-panel.card.card-default.border-0(style='margin-top:34px;') .card-header strong #{settings.locale.rl_wealth} @@ -55,7 +56,7 @@ block content thead(class=theadClasses) tr th - th Amount + th.text-center Amount span.small (#{settings.symbol}) th.text-center % tbody @@ -65,7 +66,7 @@ block content span #{settings.locale.rl_top25} - var total = parseFloat(dista.total).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true}); - var totalParts = total.split("."); - td.breakWord #{totalParts[0]}. + td.text-center.breakWord #{totalParts[0]}. span.decimal.breakWord #{totalParts[1]} td.text-center #{parseFloat(dista.percent).toFixed(2)} tr @@ -74,7 +75,7 @@ block content span #{settings.locale.rl_top50} - var total = parseFloat(distb.total).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true}); - var totalParts = total.split("."); - td.breakWord #{totalParts[0]}. + td.text-center.breakWord #{totalParts[0]}. span.decimal.breakWord #{totalParts[1]} td.text-center #{parseFloat(distb.percent).toFixed(2)} tr @@ -83,7 +84,7 @@ block content span #{settings.locale.rl_top75} - var total = parseFloat(distc.total).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true}); - var totalParts = total.split("."); - td.breakWord #{totalParts[0]}. + td.text-center.breakWord #{totalParts[0]}. span.decimal.breakWord #{totalParts[1]} td.text-center #{parseFloat(distc.percent).toFixed(2)} tr @@ -92,7 +93,7 @@ block content span #{settings.locale.rl_top100} - var total = parseFloat(distd.total).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true}); - var totalParts = total.split("."); - td.breakWord #{totalParts[0]}. + td.text-center.breakWord #{totalParts[0]}. span.decimal.breakWord #{totalParts[1]} td.text-center #{parseFloat(distd.percent).toFixed(2)} tr @@ -100,8 +101,7 @@ block content span #{settings.locale.total} - var total = (parseFloat(dista.total) + parseFloat(distb.total) + parseFloat(distc.total) + parseFloat(distd.total)).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true}); - var totalParts = total.split("."); - td.font-weight-bold.breakWord #{totalParts[0]}. + td.text-center.font-weight-bold.breakWord #{totalParts[0]}. span.decimal.breakWord #{totalParts[1]} td.font-weight-bold.text-center #{(parseFloat(dista.percent)+parseFloat(distb.percent)+parseFloat(distc.percent)+parseFloat(distd.percent)).toFixed(2)} - div#pieChart(style="width:300px;height:305px;margin: 0 auto;") - .row.footer-margin \ No newline at end of file + div#pieChart(style="width:300px;height:305px;margin: 0 auto;") \ No newline at end of file diff --git a/views/tx.pug b/views/tx.pug index 8024ee1..17f7935 100644 --- a/views/tx.pug +++ b/views/tx.pug @@ -15,40 +15,40 @@ block content table.table.table-bordered.table-striped.summary-table.mobile-border-right thead(class=theadClasses) tr - th #{settings.locale.confirmations} - th.d-none.d-sm-table-cell #{settings.locale.tx_block_hash} - th #{settings.locale.timestamp} - th + th.text-center.d-table-cell.d-md-none + th.d-none.d-md-table-cell #{settings.locale.tx_block_hash} + th.text-center #{settings.locale.confirmations} + th.text-center #{settings.locale.timestamp} tbody - var confirms = (blockcount - tx.blockindex); if confirms >= confirmations tr.bg-success.text-dark - td #{confirms} - td.d-none.d-sm-table-cell - a.breakWord(href='/block/'+tx.blockhash) #{tx.blockhash} - td #{time} - td.text-center - a(href='/block/'+tx.blockhash) + td.text-center.d-table-cell.d-md-none + a(href='/block/' + tx.blockhash) span.fa.fa-eye(data-toggle='tooltip', data-placement='top', title=settings.locale.view_block) + td.d-none.d-md-table-cell + a.breakWord(href='/block/' + tx.blockhash) #{tx.blockhash} + td.text-center #{confirms} + td.text-center #{time} else if confirms < (confirmations / 2) tr.bg-danger - td #{confirms} - td.d-none.d-sm-table-cell - a.breakWord(href='/block/'+tx.blockhash) #{tx.blockhash} - td #{time} - td.text-center - a(href='/block/'+tx.blockhash) + td.text-center.d-table-cell.d-md-none + a(href='/block/' + tx.blockhash) span.fa.fa-eye(data-toggle='tooltip', data-placement='top', title=settings.locale.view_block) + td.d-none.d-md-table-cell + a.breakWord(href='/block/' + tx.blockhash) #{tx.blockhash} + td.text-center #{confirms} + td.text-center #{time} else tr.table-warning - td #{confirms} - td.d-none.d-sm-table-cell - a.breakWord(href='/block/'+tx.blockhash) #{tx.blockhash} - td #{time} - td.text-center - a(href='/block/'+tx.blockhash) - span.fa.fa-eye(data-toggle='tooltip', data-placement='top', title=settings.locale.view_block) + td.text-center.d-table-cell.d-md-none + a(href='/block/' + tx.blockhash) + span.fa.fa-eye(data-toggle='tooltip', data-placement='top', title=settings.locale.view_block) + td.d-none.d-md-table-cell + a.breakWord(href='/block/' + tx.blockhash) #{tx.blockhash} + td.text-center #{confirms} + td.text-center #{time} if tx.vout.length < 1 .alert.alert-info.text-center(role='alert', style='margin-bottom:0;') strong #{settings.locale.tx_nonstandard} @@ -58,14 +58,14 @@ block content .card.card-default.border-0 .card-header strong #{settings.locale.tx_contributors} - span.fa.fa-arrow-right.float-right.d-xs-none + span.fa.fa-arrow-right.float-right.d-none.d-md-block table.table.table-bordered.table-striped.summary-table.mobile-border-right thead(class=theadClasses) tr th #{settings.locale.tx_address} if (tx.vin.length > 0) if tx.vin[0].addresses != 'coinbase' - th.d-xs-none #{settings.locale.mkt_amount} + th.text-center #{settings.locale.mkt_amount} span.small (#{settings.symbol}) tbody if tx.vin.length > 0 @@ -87,7 +87,7 @@ block content include ./includes/rl_labels.pug else =settings.locale.hidden_sender - td.bg-danger.d-xs-none #{ramountParts[0]}. + td.bg-danger.text-center #{ramountParts[0]}. span.decimal #{ramountParts[1]} else tr.table-info.text-center @@ -100,7 +100,7 @@ block content thead(class=theadClasses) tr th #{settings.locale.tx_address} - th #{settings.locale.mkt_amount} + th.text-center #{settings.locale.mkt_amount} span.small (#{settings.symbol}) tbody each address in tx.vout @@ -116,12 +116,12 @@ block content else =address.claim_name include ./includes/rl_labels.pug - td.bg-success #{ramountParts[0]}. + td.bg-success.text-center #{ramountParts[0]}. span.decimal #{ramountParts[1]} else if address.amount > 0 td =settings.locale.hidden_recipient - td.bg-success #{ramountParts[0]}. + td.bg-success.text-center #{ramountParts[0]}. span.decimal #{ramountParts[1]} else td(colspan='2') @@ -137,5 +137,5 @@ block content else =address.claim_name include ./includes/rl_labels.pug - td.bg-success #{ramountParts[0]}. + td.bg-success.text-center #{ramountParts[0]}. span.decimal #{ramountParts[1]} \ No newline at end of file