Complete overhaul of all pugs + claim + reward improvements

app.js

@@ -261,19 +261,16 @@ app.post('/address/:hash/claim', function(req, res){
   var address = req.body.address;
   var signature = req.body.signature;
   var message = req.body.message;
-  request({
-      url: 'http://127.0.0.1:' + settings.port + '/api/verifymessage?address='+address+ '&signature='+ signature + '&message=' + message,
-    method: 'GET',
-  }, function(error, response, body){
-    //console.log('error', error);
-    //console.log('response', response);
-    if(body == "false"){
-      console.log('failed');
-      res.json({"status": "failed", "error":true, "message": error});
-    }else if(body == "true"){
-      db.update_label(address, message, function(){
+
+  request({ url: 'http://127.0.0.1:' + settings.port + '/api/verifymessage?address='+address+ '&signature='+ signature + '&message=' + message, method: 'GET'}, function(error, response, body) {
+    if (body == 'There was an error. Check your console.')
+      res.json({"status": "failed", "error": true, "message": body});
+    else if (body == "false") {
+      res.json({"status": "failed", "error": true, "message": error});
+    } else if(body == "true") {
+      db.update_label(address, message, function() {
         res.json({"status": "success"});
-      })
+      });
     }
   });
 })

public/stylesheets/style.css

@@ -150,8 +150,8 @@ tr {
 	right: 15px;
 }
 
-#lblBlockcount {
-	margin-right: 10px;
+#lblConnections {
+	margin-left: 10px;
 }
 
 #market_menu {
@@ -231,4 +231,7 @@ tr {
 .cardSpacer {
 	margin-bottom:10px;
 }
+
+.breakWord {
+	word-break: break-word;
 }

routes/index.js

@@ -202,7 +202,7 @@ router.get('/network', function(req, res) {
 });
 
 router.get('/reward', function(req, res){
-  //db.get_stats(settings.coin, function (stats) {
+  db.get_stats(settings.coin, function (stats) {
     console.log(stats);
     db.get_heavy(settings.coin, function (heavy) {
       //heavy = heavy;
@@ -217,9 +217,9 @@ router.get('/reward', function(req, res){
         }
       });
 
-      res.render('reward', { active: 'reward', stats: stats, heavy: heavy, votes: heavy.votes });
+      res.render('reward', { active: 'reward', stats: stats, heavy: heavy, votes: votes });
     });
-  //});
+  });
 });
 
 router.get('/tx/:txid', function(req, res) {

views/address.pug

@@ -7,19 +7,19 @@ block content
   - var sentParts = sent.split('.');
   - var received = (address.received / 100000000).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
   - var receivedParts = received.split('.');
-  .col-xs-12.col-md-12
-    .card.card-default.card-address-summary
+  .col-xs-12.col-md-12.cardSpacer
+    .card.card-default.card-address-summary.cardSpacer
       .card-header(style='position:relative;')
         strong #{address.a_id}
           if settings.labels[address.a_id]
             if settings.labels[address.a_id].type
-              label(class='label label-'+settings.labels[address.a_id].type+' float-right hidden-xs', style='margin-left:15px;')
+              label.d-none.d-sm-block(class='label label-'+settings.labels[address.a_id].type+' float-right', style='margin-left:15px;')
                 =settings.labels[address.a_id].label
                 if settings.labels[address.a_id].url
                   a(href=settings.labels[address.a_id].url, target='_blank')
                     span.fa.fa-question-circle(style='margin-left:5px;')
             else
-              label.label.label-default.float-right.hidden-xs(style='margin-left:15px;')
+              label.d-none.d-sm-table-cell.label.label-default.float-right(style='margin-left:15px;')
                 =settings.labels[address.a_id].label
                 if settings.labels[address.a_id].url
                   a(href=settings.labels[address.a_id].url, target='_blank')
@@ -35,7 +35,7 @@ block content
         thead
           tr
             if settings.show_sent_received == true
-              th.d-none.d-sm-block #{settings.locale.total_sent} (#{settings.symbol})
+              th.d-none.d-sm-table-cell #{settings.locale.total_sent} (#{settings.symbol})
             if address.a_id !== 'coinbase'
               if settings.show_sent_received == true
                 th #{settings.locale.total_received} (#{settings.symbol})
@@ -44,17 +44,17 @@ block content
         tbody
           tr
             if settings.show_sent_received == true
-              td.addr-summary.hidden-xs #{sentParts[0]}.
-                span.decimal #{sentParts[1]} 
+              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.hidden-xs #{receivedParts[0]}.
-                  span.decimal #{receivedParts[1]} 
+                td.addr-summary.d-none.d-sm-table-cell #{receivedParts[0]}.
+                  span.decimal #{receivedParts[1]}
               td.addr-summary #{balanceParts[0]}.
-                span.decimal #{balanceParts[1]} 
+                span.decimal #{balanceParts[1]}
               td.addr-summary
                 img.qrcode(src='/qr/' + address.a_id)
-    .card.card-default.d-none.d-sm-block
+    .card.card-default.cardSpacer
       .card-header
         strong #{settings.locale.ex_latest_transactions}
       table.table-bordered.table-striped

views/block.pug

@@ -1,24 +1,24 @@
 extends layout
 
 block content
-  - var time = format_unixtime(block.time)
-  - var block_difficulty = parseFloat(block.difficulty).toFixed(4)
-  .col-xs-12.col-md-12
-    .card.card-default
-      .card-header(style='padding-left:25px;padding-right:25px;')       
-        .row           
+  - var time = format_unixtime(block.time);
+  - var block_difficulty = parseFloat(block.difficulty).toFixed(4);
+  .col-xs-12.col-md-12.cardSpacer
+    .card.card-default.cardSpacer
+      .card-header(style='padding-left:25px;padding-right:25px;')
+        .row
           if block.previousblockhash != null
             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-sm-block #{settings.symbol} block: #{block.hash}
+            strong.d-none.d-md-block #{settings.symbol} block: #{block.hash}
           else
-            strong.d-none.d-sm-block(style='margin-left:10px;') #{settings.symbol} #{settings.locale.ex_block}: #{block.hash}
-          if block.nextblockhash != null 
+            strong.d-none.d-md-block(style='margin-left:10px;') #{settings.symbol} #{settings.locale.ex_block}: #{block.hash}
+          if block.nextblockhash != null
             a(href='/block/' + block.nextblockhash)
-              span.fa.fa-chevron-right.iquidus.float-right.block-next(data-toggle='tooltip', data-placement='top', title=settings.locale.block_next)
-          a(href='/api/getblock?hash=' + block.hash)
-            span.fa.fa-info-circle.iquidus.float-right
-      table.table.table-bordered.summary-table 
+              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;')
+            span.fa.fa-info-circle.iquidus
+      table.table.table-bordered.summary-table
         thead
           tr
             th #{settings.locale.height}
@@ -26,36 +26,36 @@ block content
             th #{settings.locale.confirmations}
             if settings.heavy == true
               th Vote
-            th.d-none.d-sm-table-cell.d-table-cell #{settings.locale.size} (kB)
-            th.d-none.d-sm-table-cell.d-table-cell #{settings.locale.bits}
-            th.d-none.d-sm-table-cell.d-table-cell #{settings.locale.nonce}
-            th.d-none.d-sm-table-cell.d-table-cell #{settings.locale.timestamp}
+            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}
         tbody
-          if block.confirmations >= confirmations                
-            tr.table-success
+          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
               if settings.heavy == true
                 td=block.vote
-              td.d-none.d-sm-table-cell.d-table-cell=block_size.toFixed(2)
-              td.d-none.d-sm-table-cell.d-table-cell=block.bits
-              td.d-none.d-sm-table-cell.d-table-cell=block.nonce
-              td.d-none.d-sm-table-cell.d-table-cell=time
+              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
           else
             if block.confirmations < (confirmations / 2)
-              tr.table-danger
+              tr.bg-danger
                 - var block_size = block.size/1024
                 td=block.height
                 td=Number(block.difficulty).toFixed(4)
                 td=block.confirmations
                 if settings.heavy == true
                   td=block.vote
-                td.d-none.d-sm-table-cell.d-table-cell=block_size.toFixed(2)
-                td.d-none.d-sm-table-cell.d-table-cell=block.bits
-                td.d-none.d-sm-table-cell.d-table-cell=block.nonce
-                td.d-none.d-sm-table-cell.d-table-cell=time
+                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
             else
               tr.table-warning
                 - var block_size = block.size/1024
@@ -64,42 +64,41 @@ block content
                 td=block.confirmations
                 if settings.heavy == true
                   td=block.vote
-                td.d-none.d-sm-cell.d-table-cell=block_size.toFixed(2)
-                td.d-none.d-sm-table-cell.d-table-cell=block.bits
-                td.d-none.d-sm-table-cell.d-table-cell=block.nonce
-                td.d-none.d-sm-table-cell.d-table-cell=time
-
+                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
     if block.hash == settings.genesis_block
-      .alert.alert-info(role='alert', style='text-align:center;')   
+      .alert.alert-info(role='alert', style='text-align:center;')
         strong #{settings.locale.block_genesis}
     else
-      .card.card-default
+      .card.card-default.cardSpacer
         .card-header
           strong #{settings.locale.ex_latest_transactions}
-        table.table.table-bordered.table-striped.summary-table 
+        table.table.table-bordered.table-striped.summary-table
           thead
             tr
-              th.d-none.d-sm-table-cell #{settings.locale.tx_hash}
+              th #{settings.locale.tx_hash}
               th #{settings.locale.tx_recipients}
               th #{settings.locale.mkt_amount} (#{settings.symbol})
               th
           tbody
             each txn in txs
               tr
-                td.d-none.d-sm-table-cell
-                  a(href='/tx/' + txn.txid) #{txn.txid}
+                td
+                  a.breakWord(href='/tx/' + txn.txid) #{txn.txid}
                 td #{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('.')
+                  - var totalParts = total.split('.');
                   td #{totalParts[0]}.
                     span.decimal #{totalParts[1]}
                 else
                   - var total = (txn.total).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
-                  - var totalParts = total.split('.')
+                  - var totalParts = total.split('.');
                   td #{totalParts[0]}.
                     span.decimal #{totalParts[1]}
-                td.view_tx 
+                td.view_tx
                   a(href='/tx/' + txn.txid)
                     span.fa.fa-eye
     .footer-padding

views/claim_address.pug

@@ -3,17 +3,19 @@ extends layout
 block content
   script.
     $(function () {
-
         $('form').on('submit', function (e) {
-
           e.preventDefault();
-          var address;
-          var message;
-          var signature;
-          address = $('input#address').val();
-          message = $('input#message').val();
-          signature = $('input#signature').val();
+          var address = $('input#address').val();
+          var message = $('input#message').val();
+          var signature = $('input#signature').val();
           var url = '/address/'+address+'/claim';
+
+          function showClaimAlert(success) {
+            if ($('#claimAlert').length == 0)
+              $('<div id="claimAlert"></div>').insertBefore('#claimForm');
+            $('#claimAlert').html('<div class="alert alert-' + (success ? 'success' : 'danger') + '"><div class="font-weight-bold" style="padding-bottom:10px;">' + (success ? 'Address claimed successfully' : 'Failed to claim address') + '</div> ' + (success ? 'This address will now be referred to as <strong>"' + $('#message').val() + '"</strong> throughout the website' : 'Invalid signature') + '.</div>');			
+          }
+
           $.ajax({
             type: 'post',
             url: url,
@@ -23,14 +25,10 @@ block content
               'signature': signature
             },
             success: function (data) {
-              if(data.status == "success")
-                window.location = "/address/"+address;
-                
+              showClaimAlert(data.status == 'success');
             }
           });
-
         });
-
       });
   - var balance = ((address.received - address.sent) / 100000000).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
   - var balanceParts = balance.split('.');
@@ -38,24 +36,24 @@ block content
   - var sentParts = sent.split('.');
   - var received = (address.received / 100000000).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
   - var receivedParts = received.split('.');
-  .col-xs-12.col-md-12
-    .card.card-default.card-address-summary
-      .card-header(style='position:relative;')        
+  .col-xs-12.col-md-12.cardSpacer
+    .card.card-default.card-address-summary.cardSpacer
+      .card-header(style='position:relative;')
         strong=address.a_id
         if settings.labels[address.a_id]
-          if settings.labels[address.a_id].type  
+          if settings.labels[address.a_id].type
             label(class='badge label-#{ settings.labels[address.a_id].type} float-right d-none d-sm-block', style='margin-left:15px;')
               =settings.labels[address.a_id].label
               if settings.labels[address.a_id].url
                 a(href="#{ settings.labels[address.a_id].url}'", target='_blank')
                   span.fa.fa-question-circle(style='margin-left:5px;')
           else
-            label.badge.badge-pill.float-right.d-none.d-sm-block(style='margin-left:15px;') 
+            label.badge.badge-pill.float-right.d-none.d-sm-block(style='margin-left:15px;')
               =settings.labels[address.a_id].label
               if settings.labels[address.a_id].url
                 a(href='#{settings.labels[address.a_id].url}', target='_blank')
                   span.fa.fa-question-circle(style='margin-left:5px;')
-      table.table.table-bordered.table-striped.summary-table 
+      table.table.table-bordered.table-striped.summary-table
         thead
           tr
             if settings.show_sent_received == true
@@ -65,34 +63,60 @@ block content
                 th.d-none.d-sm-block #{settings.locale.total_received} (#{settings.symbol})
               th #{settings.locale.rl_balance} (#{settings.symbol})
               th #{settings.locale.a_qr}
-        tbody             
+        tbody
           tr
             if settings.show_sent_received == true
               td.addr-summary.hidden-xs #{sentParts[0]}.
-                span.decimal #{sentParts[1]} 
+                span.decimal #{sentParts[1]}
             if address.a_id !== 'coinbase'
               if settings.show_sent_received == true
                 td.addr-summary.hidden-xs #{receivedParts[0]}.
-                  span.decimal #{receivedParts[1]} 
+                  span.decimal #{receivedParts[1]}
               td.addr-summary #{balanceParts[0]}.
-                span.decimal #{balanceParts[1]} 
+                span.decimal #{balanceParts[1]}
               td.addr-summary
                 img.qrcode(src='/qr/'+address.a_id)
-    .card.card-default.d-none.d-sm-block
+    .card.card-default.cardSpacer
       .card-header
         strong Claim this Address
-      form#claimForm
-        .form-group
-          fieldset
-            label.control-label(for='address') Wallet Address
-            input#address.form-control(type='text' value=address.a_id readonly="")
-        .form-group
-          fieldset
-            label(for='message') Username
-            input#message.form-control(type='text' placeholder='User Name')
-        .form-group
-          fieldset
-            label(for='signature') Signature
-            input#signature.form-control(type='text' placeholder='Signature')
-        button.btn.btn-primary(type='submit') Submit
+      .card-body
+        div.alert.alert-primary
+          div
+            span Use the '
+            span.font-weight-bold Sign Message
+            span ' feature from your wallet to verify ownership of this address.
+          br
+          div
+            span Enter the wallet address '
+            span.font-weight-bold #{address.a_id}
+            span ' for both the '
+            span.font-weight-bold Address
+            span ' and '
+            span.font-weight-bold Message
+            span ' and click the '
+            span.font-weight-bold Sign Message
+            span ' button to generate the '
+            span.font-weight-bold Signature
+            span '.
+          br
+          div
+            span Enter the '
+            span.font-weight-bold Signature
+            span ' below and click '
+            span.font-weight-bold Submit
+            span ' to claim your address which allows displaying a custom name instead of the default wallet address.
+        form#claimForm
+          .form-group
+            fieldset
+              label.control-label(for='address') Wallet Address
+              input#address.form-control(type='text' value=address.a_id readonly="")
+          .form-group
+            fieldset
+              label(for='message') Display Name
+              input#message.form-control(type='text' placeholder='Display Name')
+          .form-group
+            fieldset
+              label(for='signature') Signature
+              input#signature.form-control(type='text' placeholder='Signature')
+          button.btn.btn-primary(type='submit') Submit
     .footer-padding

views/includes/address_history.pug

@@ -14,7 +14,6 @@ script.
   } else {
     var displayLengthMax = setting_txPerPage;
   }
-
   $(document).ready(function () {
     var rtable = $('#address-txs').dataTable({
       autoWidth: true,
@@ -35,55 +34,46 @@ script.
         var out = data[2]; //variables for better readability
         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(timestamp).addClass('hidden-xs');
-        $("td:eq(1)", row).html('<a href="/tx/' + txhash + '">' + txhash + '</a>').addClass('hidden-xs');
-
+        $("td:eq(0)", row).html(timestamp);
+        $("td:eq(1)", row).html('<a href="/tx/' + txhash + '">' + txhash + '</a>').addClass('breakWord');
         var amount = 0;
-        var updown = "";
-        var rowclass = "info";
+        var updown = '';
+        var rowclass = 'info';
 
-        if(out > 0 && vin > 0) {
-          amount = (out - vin) / 100000000
+        if (out > 0 && vin > 0) {
+          amount = (out - vin) / 100000000;
           if (amount < 0) {
             amount = (amount * -1).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
-            updown = "-";
-            //- $("td:eq(2)", row).html("-" + amount).addClass("info");
+            updown = '-';
           } else if (amount > 0) {
             amount = amount.toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
-            updown = "+";
-            //- $("td:eq(2)", row).html("+" + amount).addClass("info");
+            updown = '+';
           } else {
             amount = amount.toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
-            //- $("td:eq(2)", row).html(amount).addClass("info");
           }
         } else if (out > 0) {
           amount = (out / 100000000).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
-          updown = "+";
-          rowclass = "success";
-          //- $("td:eq(2)", row).html("+" + amount).addClass("success");
+          updown = '+';
+          rowclass = 'bg-success';
         } else {
           amount = (vin / 100000000).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
-          updown = "-";
-          rowclass = "danger";
-          //- $("td:eq(2)", row).html("-" + amount).addClass("danger");
+          updown = '-';
+          rowclass = 'bg-danger';
         }
         var amountParts = amount.split('.');
         $("td:eq(2)", row).html(updown + amountParts[0] + '.<span class="decimal">' + amountParts[1] + '</span>').addClass(rowclass);
         $("td:eq(3)", row).html(balanceParts[0] + '.<span class="decimal">' + balanceParts[1] + '</span>');
-
-      },
+      }
     });
   });
 table#address-txs.table.table-bordered.table-striped
   thead
     tr
-      th.hidden-xs #{settings.locale.timestamp}
-      th.hidden-xs #{settings.locale.tx_hash}
+      th #{settings.locale.timestamp}
+      th #{settings.locale.tx_hash}
       th #{settings.locale.mkt_amount}
-        span.small (#{settings.symbol})
+        span.small  (#{settings.symbol})
       th #{settings.locale.rl_balance}
-        span.small (#{settings.symbol})
+        span.small  (#{settings.symbol})
   tbody

views/includes/net_addnodes.pug

@@ -1,7 +1,7 @@
 script.
-  $(document).ready(function(){
-    var ctable = $('#addnodes-table').dataTable({
-      autoWidth: true,      
+  $(document).ready(function() {
+    $('#addnodes-table').dataTable({
+      autoWidth: true,
       searching: false,
       ordering: false,
       responsive: true,
@@ -9,23 +9,23 @@ script.
       processing: true,
       ajax: {
         url: '/ext/connections',
-        dataSrc: function ( json ) {
+        dataSrc: function (json) {
           var rows = [];
-          for ( var i=0;i<json.data.length; i++ ) {
+          for (var i=0; i<json.data.length; i++) {
             rows.push({'nodes':'addnode='+json.data[i]['address']+':'+json.data[i]['port']});
           }
           return rows;
         }
       },
       columns: [
-        { data: 'nodes', width: '100%' }
+        {data: 'nodes', width: '100%'}
       ],
       columnDefs: [
-        { targets: '_all', className: 'text-left'}
+        {targets: '_all', className: 'text-left'}
       ]
     });
-    var ctable = $('#addnodes2-table').dataTable( {  
-      autoWidth: true,      
+    $('#addnodes2-table').dataTable({
+      autoWidth: true,
       searching: false,
       ordering: false,
       responsive: true,
@@ -33,19 +33,19 @@ script.
       processing: true,
       ajax: {
         url: '/ext/connections',
-        dataSrc: function ( json ) {
-          var rows = []
-          for ( var i=0;i<json.data.length; i++ ) {
+        dataSrc: function (json) {
+          var rows = [];
+          for (var i=0; i<json.data.length; i++) {
             rows.push({'nodes':'addnode '+json.data[i]['address']+':'+json.data[i]['port']+' onetry'});
           }
           return rows;
         }
       },
       columns: [
-        { data: 'nodes', width: '100%' }
+        {data: 'nodes', width: '100%'}
       ],
       columnDefs: [
-        { targets: '_all', className: 'text-left'}
+        {targets: '_all', className: 'text-left'}
       ]
     });
   });
@@ -60,7 +60,6 @@ script.
       tr
         th.text-center AddNode Config Lines
     tbody.text-center
-
   .card-body
     :markdown-it
       Alternatively you can try one of these lines in the coin wallet debug window, or add them with *coindaemon*-cli

views/includes/net_list.pug

@@ -1,7 +1,7 @@
 script.
-  $(document).ready(function(){
-    var ctable = $('#connections-table').dataTable( {  
-      autoWidth: true,      
+  $(document).ready(function() {
+    $('#connections-table').dataTable({
+      autoWidth: true,
       searching: false,
       ordering: false,
       responsive: true,
@@ -9,7 +9,7 @@ script.
       processing: true,
       ajax: {
         url: '/ext/connections',
-        dataSrc: function ( json ) {
+        dataSrc: function (json) {
           return json.data;
         }
       },
@@ -18,11 +18,10 @@ script.
         if (data['country_code'].length > 1) {
           flagBlock = '&nbsp;<div class="flag-icon flag-icon-'+data['country_code'].toLowerCase()+'"></div>';
         }
-        $("td:eq(0)", row).html(data['address']);
+        $("td:eq(0)", row).html(data['address']).addClass('breakWord');
         $("td:eq(1)", row).html(data['protocol']);
         $("td:eq(2)", row).html(data['version']);
         $("td:eq(3)", row).html(data['country']+flagBlock);
-
       },
       columns: [
         { data: 'address', width: '25%' },
@@ -36,8 +35,8 @@ script.
   table#connections-table.table.table-bordered.table-striped
     thead
       tr
-        th.text-center #{settings.locale.net_address}
+        th #{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}
-    tbody.text-center
+    tbody.text-center

views/includes/rl_balance.pug

@@ -1,28 +1,28 @@
 .card.card-default
   .card-header
-    h5.card-title #{settings.locale.rl_current_balance} 
-  table.table.table-hover.table-bordered(cellspacing="0")
+    h5.card-title #{settings.locale.rl_current_balance}
+  table.table.table-hover.table-bordered(style='margin-bottom:0;', cellspacing='0')
     thead
       tr
-        th(style='text-align:center;') 
+        th.text-center
           span.fa.fa-flag-checkered
         th #{settings.locale.tx_address}
-        th.hidden-xs #{settings.locale.rl_balance} (#{settings.symbol})
-        th.hidden-xs(style='text-align:center;') %
+        th #{settings.locale.rl_balance} (#{settings.symbol})
+        th.text-center %
     tbody
-      - var count = 0
+      - var count = 0;
       each item in balance
-        - count = count + 1
-        - var itemFixed = (parseInt(item.balance) / 100000000)
+        - count = count + 1;
+        - var itemFixed = (parseInt(item.balance) / 100000000);
         - var itemFixedParts = itemFixed.toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true}).split(".");
         - var percentage = (itemFixed / stats.supply) * 100;
         tr
-          td(style='text-align:center;') 
+          td.text-center
             =count
-          td 
-            a(href='/address/'+item.a_id) #{item.a_id}
+          td
+            a.breakWord(href='/address/'+item.a_id) #{item.a_id}
             include ./rl_labels.pug
-          td.hidden-xs #{itemFixedParts[0]}.
+          td #{itemFixedParts[0]}.
             span.decimal #{itemFixedParts[1]}
-          td.hidden-xs(style='text-align:center;') 
+          td.text-center
             =percentage.toFixed(2)

views/includes/rl_labels.pug

@@ -1,17 +1,17 @@
 if settings.labels[item.a_id]
   if settings.labels[item.a_id].type
-    label(class='label label-' + settings.labels[item.a_id].type + ' float-right hidden-xs', style='margin-left:15px;')
+    label(class='badge badge-' + settings.labels[item.a_id].type + ' float-right d-none d-md-block', style='margin-left:15px;')
       =settings.labels[item.a_id].label
       if settings.labels[item.a_id].url
         a(href=settings.labels[item.a_id].url, target='_blank')
           span.fa.fa-question-circle(style='margin-left:5px;')
   else
-    label.label.label-default.float-right.hidden-xs(style='margin-left:15px;')
+    label.badge.badge-default.float-right.d-none.d-md-block(style='margin-left:15px;')
       =settings.labels[item.a_id].label
       if settings.labels[item.a_id].url
         a(href=settings.labels[item.a_id].url, target='_blank')
           span.fa.fa-question-circle(style='margin-left:5px;')
 else
   if item.name !== "" && typeof item.name !== "undefined"
-    label(class='label label-default float-right hidden-xs', style='margin-left:15px;')
+    label(class='badge badge-default float-right d-none d-md-block', style='margin-left:15px;')
       =item.name

views/includes/rl_received.pug

@@ -1,24 +1,24 @@
 .card.card-default
   .card-header
-    h5.card-title #{settings.locale.rl_received_coins} 
-  table.table.table-hover.table-bordered(cellspacing="0")
+    h5.card-title #{settings.locale.rl_received_coins}
+  table.table.table-hover.table-bordered(style='margin-bottom:0;', cellspacing='0')
     thead
       tr
-        th(style='text-align:center;') 
+        th.text-center
           span.fa.fa-flag-checkered
-        th #{settings.locale.tx_address} 
-        th.hidden-xs #{settings.locale.rl_received} (#{settings.symbol})
+        th #{settings.locale.tx_address}
+        th #{settings.locale.rl_received} (#{settings.symbol})
     tbody
-      - var count = 0
+      - var count = 0;
       each item in received
         - count = count + 1;
-        - var itemFixed = (parseInt(item.received) / 100000000).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true})
+        - var itemFixed = (parseInt(item.received) / 100000000).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
         - var itemFixedParts = itemFixed.split(".");
         tr
-          td(style='text-align:center;') 
+          td.text-center
             =count
           td
-            a(href='/address/'+item.a_id) #{item.a_id}
+            a.breakWord(href='/address/'+item.a_id) #{item.a_id}
             include ./rl_labels.pug
-          td.hidden-xs #{itemFixedParts[0]}.
+          td #{itemFixedParts[0]}.
             span.decimal #{itemFixedParts[1]}

views/index.pug

@@ -16,33 +16,7 @@ block content
     } else {
       var displayLengthMax = setting_txPerPage;
     }
-    $(document).ready(function(){
-      var stable = $('#block-table').dataTable({
-        autoWidth: true,      
-        searching: true,
-        ordering: false,
-        responsive: true,
-        lengthChange: false,
-        processing: true,
-        paging: false,
-        info: false,
-        ajax: {
-          url: '/ext/summary',
-          dataSrc: function ( json ) {
-          console.log(json.data);
-            json.data[0]['height'] = "<a href='/block/" + json.data[0]['hash'] + "'>" + json.data[0]['height'] + "</a>";
-            return json.data;
-          }
-        },
-        columns: [
-          //{ data: 'height', width: '8%' },
-          { data: 'difficulty', width: '10%' },
-          //{ data: 'size', width:'10%' },
-          //{ data: 'txs', width: '10%' },
-          { data: 'supply', width: '15%' },
-          //{ data: 'time', width: '20%' },
-        ]
-      });
+    $(document).ready(function() {
       var rtable = $('#recent-table').dataTable({
         autoWidth: false,
         searching: false,
@@ -62,40 +36,38 @@ block content
           var amount = (data[4] / 100000000).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true}); //variables for better readability
           var amountParts = amount.split('.');
           var amount = amountParts[0] + '.<span class="decimal">' + amountParts[1] + '</span>';
-          var timestamp = data[5]; //variables for better readability
+          var timestamp = data[5];
           $("td:eq(0)", row).html('<a href="/block/' + blockhash + '">' + blockindex + '</a>');
-          $("td:eq(1)", row).html('<a href="/tx/' + txhash + '">' + txhash + '</a>').addClass("d-none d-md-none d-lg-table-cell text-center");
-          $("td:eq(2)", row).html(outputs).addClass("d-none d-md-none d-lg-table-cell text-center");
+          $("td:eq(1)", row).html('<a href="/tx/' + txhash + '">' + txhash + '</a>').addClass("text-center breakWord");
+          $("td:eq(2)", row).html(outputs).addClass("text-center");
           $("td:eq(3)", row).html(amount);
           $("td:eq(4)", row).html(timestamp);          
         },
       });
       setInterval( function () {
         rtable.api().ajax.reload(null, false);
-        stable.api().ajax.reload(null, false);
       }, 60000 );
     });
   .row
     .col-md-12
-      if error !== null        
+      if error !== null
         .alert.alert-danger.alert-dismissable(role='alert')
           button.close(type='button', data-dismiss='alert') ×
           strong #{settings.locale.ex_error} : #{error}
-      if warning !== null        
+      if warning !== null
         .alert.alert-warning.alert-dismissable(role='alert')
           button.close(type='button', data-dismiss='alert') ×
           strong #{settings.locale.ex_warning} #{warning}
-  
-  .col-md-12
-    .card.card-default
+  .col-md-12.cardSpacer
+    .card.card-default.cardSpacer
       .card-header
         strong #{settings.locale.ex_latest_transactions}
       table#recent-table.table.table-bordered.table-striped
         thead
           tr
             th.text-center #{settings.locale.ex_block}
-            th.d-none.d-md-none.d-lg-table-cell.text-center #{settings.locale.tx_hash}
-            th.d-none.d-md-none.d-lg-table-cell.text-center #{settings.locale.tx_recipients}
+            th.text-center #{settings.locale.tx_hash}
+            th.text-center #{settings.locale.tx_recipients}
             th.text-center #{settings.locale.mkt_amount} (#{settings.symbol})
             th.text-center #{settings.locale.timestamp}
         tbody.text-center

views/info.pug

@@ -120,75 +120,75 @@ block content
         p
           em Return data from local indexes
         ul
-            li
-              p
-                div(style='font-weight:bold;') getmoneysupply
-                div
-                  em Returns current money supply
-                a(href='/ext/getmoneysupply') #{address}/ext/getmoneysupply
-            li
-              p
-                div(style='font-weight:bold;') getdistribution
-                div
-                  em Returns wealth distribution stats
-                a(href='/ext/getdistribution') #{address}/ext/getdistribution
-            li
-              p
-                div(style='font-weight:bold;') getaddress (/ext/getaddress/hash)
-                div
-                  em Returns information for given address
-                a(href='/ext/getaddress/' + hashes.address) #{address}/ext/getaddress/#{hashes.address}
-            li
-              p
-                div(style='font-weight:bold;') gettx (/ext/gettx/hash)
-                div
-                  em Returns information for given tx hash
-                a(href='/ext/gettx/' + hashes.txhash) #{address}/ext/gettx/#{hashes.txhash}
-            li
-              p
-                div(style='font-weight:bold;') getbalance (/ext/getbalance/hash)
-                div
-                  em Returns current balance of given address
-                a(href='/ext/getbalance/' + hashes.address) #{address}/ext/getbalance/#{hashes.address}
-            li
-              p
-                div(style='font-weight:bold;') getlasttxs (/ext/getlasttxs/min)
-                div
-                  em Returns last transactions greater than [min]
-                div
-                  em Note: returned values are in satoshis
-                a(href='/ext/getlasttxs/100') #{address}/ext/getlasttxs/100
-            li
-              p
-                div(style='font-weight:bold;') getcurrentprice
-                div
-                  em Returns last known exchange price
-                a(href='/ext/getcurrentprice') #{address}/ext/getcurrentprice
-            li
-              p
-                div(style='font-weight:bold;') getbasicstats
-                div
-                  em Returns basic statistics about the coin including: block count, circulating supply, USD price, BTC price and # of masternodes
-                a(href='/ext/getbasicstats') #{address}/ext/getbasicstats
+          li
+            p
+              div(style='font-weight:bold;') getmoneysupply
+              div
+                em Returns current money supply
+              a(href='/ext/getmoneysupply') #{address}/ext/getmoneysupply
+          li
+            p
+              div(style='font-weight:bold;') getdistribution
+              div
+                em Returns wealth distribution stats
+              a(href='/ext/getdistribution') #{address}/ext/getdistribution
+          li
+            p
+              div(style='font-weight:bold;') getaddress (/ext/getaddress/hash)
+              div
+                em Returns information for given address
+              a(href='/ext/getaddress/' + hashes.address) #{address}/ext/getaddress/#{hashes.address}
+          li
+            p
+              div(style='font-weight:bold;') gettx (/ext/gettx/hash)
+              div
+                em Returns information for given tx hash
+              a(href='/ext/gettx/' + hashes.txhash) #{address}/ext/gettx/#{hashes.txhash}
+          li
+            p
+              div(style='font-weight:bold;') getbalance (/ext/getbalance/hash)
+              div
+                em Returns current balance of given address
+              a(href='/ext/getbalance/' + hashes.address) #{address}/ext/getbalance/#{hashes.address}
+          li
+            p
+              div(style='font-weight:bold;') getlasttxs (/ext/getlasttxs/min)
+              div
+                em Returns last transactions greater than [min]
+              div
+                em Note: returned values are in satoshis
+              a(href='/ext/getlasttxs/100') #{address}/ext/getlasttxs/100
+          li
+            p
+              div(style='font-weight:bold;') getcurrentprice
+              div
+                em Returns last known exchange price
+              a(href='/ext/getcurrentprice') #{address}/ext/getcurrentprice
+          li
+            p
+              div(style='font-weight:bold;') getbasicstats
+              div
+                em Returns basic statistics about the coin including: block count, circulating supply, USD price, BTC price and # of masternodes
+              a(href='/ext/getbasicstats') #{address}/ext/getbasicstats
         hr
         h3 Linking (GET)
         p
           em Linking to the block explorer
         ul
-            li
-              p
-                div(style='font-weight:bold;') transaction (/tx/txid)
-                a(href='/tx/' + hashes.txhash) #{address}/tx/#{hashes.txhash}
-            li
-              p
-                div(style='font-weight:bold;') block (/block/hash)
-                a(href='/block/' + hashes.blockhash) #{address}/block/#{hashes.blockhash}
-            li
-              p
-                div(style='font-weight:bold;') address (/address/hash)
-                a(href='/address/' + hashes.address) #{address}/address/#{hashes.address}
-            li
-              p
-                div(style='font-weight:bold;') qrcode (/qr/hash)
-                a(href='/qr/' + hashes.address) #{address}/qr/#{hashes.address}
+          li
+            p
+              div(style='font-weight:bold;') transaction (/tx/txid)
+              a(href='/tx/' + hashes.txhash) #{address}/tx/#{hashes.txhash}
+          li
+            p
+              div(style='font-weight:bold;') block (/block/hash)
+              a(href='/block/' + hashes.blockhash) #{address}/block/#{hashes.blockhash}
+          li
+            p
+              div(style='font-weight:bold;') address (/address/hash)
+              a(href='/address/' + hashes.address) #{address}/address/#{hashes.address}
+          li
+            p
+              div(style='font-weight:bold;') qrcode (/qr/hash)
+              a(href='/qr/' + hashes.address) #{address}/qr/#{hashes.address}
     .footer-padding

views/layout.pug

@@ -24,10 +24,10 @@ html
     script(src='//cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js')
     script(src='/javascripts/chart.js')
     script.
-      $(document).ready(function(){
+      $(document).ready(function() {
         $('##{active}').addClass('active');
-        function update_stats(){
-          $.ajax({url: '/ext/summary', success: function(json){
+        function update_stats() {
+          $.ajax({url: '/ext/summary', success: function(json) {
             $("#masternodeCountOnline").text(json.data[0].masternodeCountOnline).prop("alt", json.data[0].masternodeCountOnline+" nodes online").prop("title", json.data[0].masternodeCountOnline+" nodes online");
             $("#masternodeCountOffline").text(json.data[0].masternodeCountOffline).prop("alt", json.data[0].masternodeCountOffline+" unreachable nodes").prop("title", json.data[0].masternodeCountOffline+" unreachable nodes");
             $("#spnMasternodeCountOnline").prop("alt", json.data[0].masternodeCountOnline+" nodes online").prop("title", json.data[0].masternodeCountOnline+" nodes online");
@@ -36,15 +36,14 @@ html
             var supplyString = json.data[0].supply;
             var diffString = json.data[0].difficulty;
             var hashrateString = json.data[0].hashrate;
-            if (!isNaN(json.data[0].difficulty)) {
+
+            if (!isNaN(json.data[0].difficulty))
               diffString = parseFloat(json.data[0].difficulty).toFixed(2);
-            }
-            if (!isNaN(json.data[0].supply)) {
+            if (!isNaN(json.data[0].supply))
               supplyString = parseInt(parseFloat(json.data[0].supply).toFixed(0)).toLocaleString('en');
-            }
-            if (!isNaN(json.data[0].hashrate)) {
+            if (!isNaN(json.data[0].hashrate))
               hashrateString = parseFloat(json.data[0].hashrate).toLocaleString('en');
-            }
+
             $("#supply").text(supplyString);
             $("#difficulty").text(diffString);
             $("#difficultyHybrid").text(json.data[0].difficultyHybrid);
@@ -58,10 +57,10 @@ html
         }
         $('.block-last-next').tooltip({
           animation: true,
-          delay: { hide: 500 },
+          delay: { hide: 500 }
         });
-        if($('.history-table tbody tr').length) {
-          $('.history-table').dataTable( {
+        if ($('.history-table tbody tr').length) {
+          $('.history-table').dataTable({
             searching: false,
             ordering: false,
             responsive: true
@@ -69,9 +68,9 @@ html
         }
         $('.iquidus').css('color',$('.table').css('color'));
         $(window).resize(function () {
-          $($.fn.dataTable.tables( true ) ).DataTable().columns.adjust();
+          $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
         });
-        setInterval( function() {
+        setInterval(function() {
           update_stats();
         }, 60000);
         update_stats();
@@ -170,21 +169,21 @@ html
       - var hour = a.getHours();
       - var min = a.getMinutes();
       - var sec = a.getSeconds();
-      - var suffix = 'th'
+      - var suffix = 'th';
       if date == 1 || date == 21 || date == 31
-        - suffix = 'st'
+        - suffix = 'st';
       if date == 2 || date == 22 || date == 32
-        - suffix = 'nd'
+        - suffix = 'nd';
       if date == 3 || date == 23
-        - suffix = 'rd'
+        - suffix = 'rd';
       if hour < 10
-        - hour = '0' + hour
+        - hour = '0' + hour;
       if min < 10
-        - min = '0' + min
+        - min = '0' + min;
       if sec < 10
-        - sec = '0' + sec
+        - sec = '0' + sec;
       - var time = date + suffix + ' ' + month + ' ' + year + ' ' + hour + ':' + min + ':' + sec + ' GMT';
-      - return time
+      - return time;
     -  };
     - var navbarClasses = ['nav','navbar','navbar-expand-lg','fixed-top'];
     - var footerClasses = ['nav','navbar','navbar-default','fixed-bottom','d-none','d-md-flex','d-flex','footer'];
@@ -250,27 +249,27 @@ html
               a.nav-link(href='/info')
                 span.fa.fa-info-circle
                 span.menu-text #{settings.locale.menu_api}
-    .col-md-12
+    .col-lg-12
       .row.text-center.d-flex.justify-content-center
-        div(class="col-md-2 col-md-offset-" + settings.paneloffset)
+        div(class="col-lg-2 col-lg-offset-" + settings.paneloffset)
           - if(settings.panel1 != '') {
-            .card.card-default.d-none.d-md-block.d-block(id='pnlOne')
+            .card.card-default.d-none.d-lg-block.d-block.cardSpacer(id='pnlOne')
           - }
         - if(settings.panel2 != '') {
-          .col-md-2
-            .card.card-default.d-none.d-md-block.d-block(id='pnlTwo')
+          .col-lg-2
+            .card.card-default.d-none.d-lg-block.d-block.cardSpacer(id='pnlTwo')
         - }
         - if(settings.panel3 != '') {
-          .col-md-2
-            .card.card-default.d-none.d-md-block.d-block(id='pnlThree')
+          .col-lg-2
+            .card.card-default.d-none.d-lg-block.d-block.cardSpacer(id='pnlThree')
         - }
         - if(settings.panel4 != '') {
-          .col-md-2
-            .card.card-default.d-none.d-md-block.d-block(id='pnlFour')
+          .col-lg-2
+            .card.card-default.d-none.d-lg-block.d-block.cardSpacer(id='pnlFour')
         - }
         - if(settings.panel5 != '') {
-        .col-md-2
-          .card.card-default.d-none.d-md-block.d-block(id='pnlFive')
+        .col-lg-2
+          .card.card-default.d-none.d-lg-block.d-block.cardSpacer(id='pnlFive')
         - }
       .row.text-center(style='margin-top:10px;margin-bottom:20px;')
         form.form-inline.col-12.d-flex.justify-content-center(method='post', action='/search')
@@ -279,59 +278,59 @@ html
             button.btn.btn-success(type='submit') #{settings.locale.ex_search_button}
     block content
     div(class=footerClasses, role='navigation')
-      .col-md-4.navbar-nav
+      .col-4.navbar-nav
         if settings.display.github || settings.display.discord || settings.display.telegram || settings.display.reddit || settings.display.youtube || settings.display.slack || settings.display.twitter || settings.display.facebook || settings.display.googleplus || settings.display.bitcointalk || settings.display.website
           ul.nav.justify-content-left
             if settings.display.github
               li.float-left
-                a#github-icon.nav-link.social-link(href="https://github.com/" + settings.github, target='_blank', alt=settings.coin + ' Github', title=settings.coin + ' Github')
+                a#github-icon.nav-link.social-link.border-0(href="https://github.com/" + settings.github, target='_blank', alt=settings.coin + ' Github', title=settings.coin + ' Github')
                   span.glyphicon.fab.fa-github
             if settings.display.discord
               li.float-left
-                a#discord-icon.nav-link.social-link(href=settings.discord, target='_blank', alt=settings.coin + ' Discord', title=settings.coin + ' Discord')
+                a#discord-icon.nav-link.social-link.border-0(href=settings.discord, target='_blank', alt=settings.coin + ' Discord', title=settings.coin + ' Discord')
                   span.glyphicon.fab.fa-discord
             if settings.display.telegram
               li.float-left
-                a#telegram-icon.nav-link.social-link(href="https://t.me/" + settings.telegram, target='_blank', alt=settings.coin + ' Telegram', title=settings.coin + ' Telegram')
+                a#telegram-icon.nav-link.social-link.border-0(href="https://t.me/" + settings.telegram, target='_blank', alt=settings.coin + ' Telegram', title=settings.coin + ' Telegram')
                   span.glyphicon.fab.fa-telegram
             if settings.display.reddit
               li.float-left
-                a#reddit-icon.nav-link.social-link(href="https://reddit.com/r/" + settings.reddit, target='_blank', alt=settings.coin + ' Reddit', title=settings.coin + ' Reddit')
+                a#reddit-icon.nav-link.social-link.border-0(href="https://reddit.com/r/" + settings.reddit, target='_blank', alt=settings.coin + ' Reddit', title=settings.coin + ' Reddit')
                   span.glyphicon.fab.fa-reddit
             if settings.display.youtube
               li.float-left
-                a#youtube-icon.nav-link.social-link(href=settings.youtube, target='_blank', alt=settings.coin + ' YouTube', title=settings.coin + ' YouTube')
+                a#youtube-icon.nav-link.social-link.border-0(href=settings.youtube, target='_blank', alt=settings.coin + ' YouTube', title=settings.coin + ' YouTube')
                   span.glyphicon.fab.fa-youtube
             if settings.display.slack
               li.float-left
-                a#slack-icon.nav-link.social-link(href=settings.slack, target='_blank', alt=settings.coin + ' Slack', title=settings.coin + ' Slack')
+                a#slack-icon.nav-link.social-link.border-0(href=settings.slack, target='_blank', alt=settings.coin + ' Slack', title=settings.coin + ' Slack')
                   span.glyphicon.fab.fa-slack
             if settings.display.twitter
               li.float-left
-                a#twitter-icon.nav-link.social-link(href="https://twitter.com/" + settings.twitter, target='_blank', alt=settings.coin + ' Twitter', title=settings.coin + ' Twitter')
+                a#twitter-icon.nav-link.social-link.border-0(href="https://twitter.com/" + settings.twitter, target='_blank', alt=settings.coin + ' Twitter', title=settings.coin + ' Twitter')
                   span.glyphicon.fab.fa-twitter
             if settings.display.facebook
               li.float-left
-                a#facebook-icon.nav-link.social-link(href="https://www.facebook.com/" + settings.facebook, target='_blank', alt=settings.coin + ' Facebook', title=settings.coin + ' Facebook')
+                a#facebook-icon.nav-link.social-link.border-0(href="https://www.facebook.com/" + settings.facebook, target='_blank', alt=settings.coin + ' Facebook', title=settings.coin + ' Facebook')
                   span.glyphicon.fab.fa-facebook
             if settings.display.googleplus
               li.float-left
-                a#googleplus-icon.nav-link.social-link(href="https://plus.google.com/" + settings.googleplus, target='_blank', alt=settings.coin + ' Google+', title=settings.coin + ' Google+')
+                a#googleplus-icon.nav-link.social-link.border-0(href="https://plus.google.com/" + settings.googleplus, target='_blank', alt=settings.coin + ' Google+', title=settings.coin + ' Google+')
                   span.glyphicon.fab.fa-google-plus
             if settings.display.bitcointalk
               li.float-left
-                a#bitcointalk-icon.nav-link.social-link(href="https://bitcointalk.org/index.php?topic=" + settings.bitcointalk, target='_blank', alt=settings.coin + ' Bitcointalk', title=settings.coin + ' Bitcointalk')
+                a#bitcointalk-icon.nav-link.social-link.border-0(href="https://bitcointalk.org/index.php?topic=" + settings.bitcointalk, target='_blank', alt=settings.coin + ' Bitcointalk', title=settings.coin + ' Bitcointalk')
                   span.glyphicon.fab.fa-btc
             if settings.display.website
               li.float-left
-                a#website-icon.nav-link.social-link(href=settings.website, target='_blank', alt=settings.coin + ' Website', title=settings.coin + ' Website')
+                a#website-icon.nav-link.social-link.border-0(href=settings.website, target='_blank', alt=settings.coin + ' Website', title=settings.coin + ' Website')
                   span.glyphicon.fa.fa-link
-      .col-md-4.navbar-nav
+      .col-4.navbar-nav
         ul.nav.justify-content-center
-          li.text-center(style='margin-left:80px;margin-right:80px;')
-            p(style='')
-              a.nav-link.poweredby(href='https://github.com/team-exor/eiquidus', target='_blank') eIquidus Explorer v#{settings.explorer_version}
-      .col-md-4.navbar-nav
+          li.text-center
+            p
+              a.nav-link.poweredby.border-0(href='https://github.com/team-exor/eiquidus', target='_blank') eIquidus Explorer v#{settings.explorer_version}
+      .col-4.navbar-nav
         ui.nav.justify-content-end
-          label#lblBlockcount.badge.badge-pill.nav-link
-          label#lblConnections.badge.badge-pill.nav-link
+          label#lblBlockcount.badge.badge-secondary.nav-link.border-0.float-right
+          label#lblConnections.badge.badge-secondary.nav-link.border-0.float-right

views/movement.pug

@@ -17,44 +17,17 @@ block content
       var displayLengthMax = setting_txPerPage;
     }
     var rplot;
-    var colors = [ "#0071bc" ];
-    $(document).ready(function(){
-      function format_unixtime(unixtime) {
-        var a = new Date(unixtime*1000);  
-        var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
-        var year = a.getFullYear();
-        var month = months[a.getMonth()];
-        var date = a.getDate();
-        var hour = a.getHours();
-        var min = a.getMinutes();
-        var sec = a.getSeconds();
-        var suffix = 'th'
-        if (date == 1 || date == 21 || date == 31)
-          suffix = 'st';
-        if (date == 2 || date == 22 || date == 32)
-          suffix = 'nd';
-        if (date == 3 || date == 23)
-          suffix = 'rd';
-        if (hour < 10)
-          hour = '0' + hour;
-        if (min < 10)
-          min = '0' + min;
-        if (sec < 10)
-          sec = '0' + sec;
-        var time = date + suffix + ' ' + month + ' ' + year + ' ' + hour + ':' + min + ':' + sec ;   
-        return time;
-      }
-      var rtable = $('#movement-table').dataTable( {  
-        autoWidth: true,      
+    var colors = ["#0071bc"];
+    $(document).ready(function() {
+      var rtable = $('#movement-table').dataTable({
+        autoWidth: true,
         searching: false,
         ordering: false,
-        //responsive: true,
         lengthChange: true,
         processing: true,
         serverSide: true,
         iDisplayLength: displayLengthMax,
         lengthMenu: lengthMenuOpts,
-        //processing: true,
         ajax: '/ext/getlasttxsajax/#{min_amount}',
         rowCallback: function(row, data, index) {
           var blockindex = data[0]; //variables for better readability
@@ -66,20 +39,20 @@ block content
           var amountStr = amountParts[0] + '.<span class="decimal">' + amountParts[1] + '</span>';
           var timestamp = data[5]; //variables for better readability
           if (amount > '#{flagb}') {
-            var total = "<label class='label label-danger'>" + amountStr + "</label>";
+            var total = "<label class='badge badge-danger'>" + amountStr + "</label>";
           } else if (amount > '#{flaga}') {
-            var total = "<label class='label label-warning'>" + amountStr + "</label>";
+            var total = "<label class='badge badge-warning'>" + amountStr + "</label>";
           } else {
-            var total = "<label class='label label-success'>" + amountStr + "</label>";
+            var total = "<label class='badge badge-success'>" + amountStr + "</label>";
           }
           $("td:eq(0)", row).html(timestamp);
-          $("td:eq(1)", row).html('<a href="/tx/' + txhash + '">' + txhash + '</a>');
+          $("td:eq(1)", row).html('<a href="/tx/' + txhash + '">' + txhash + '</a>').addClass('breakWord');
           $("td:eq(2)", row).html(total);
         }
       });
-      setInterval( function () {
+      setInterval(function () {
         rtable.api().ajax.reload(null, false);
-      }, 45000 );
+      }, 45000);
     });
   .col-md-12(style="margin-bottom: 4%")
     .card.card-default
@@ -88,8 +61,8 @@ block content
       table#movement-table.table.table-bordered.table-striped
         thead
           tr
-            th timestamp
-            th.hidden-xs txid
-            th amount
+            th.text-center timestamp
+            th.text-center txid
+            th.text-center amount
         tbody.text-center
     .footer-padding

views/network.pug

@@ -1,7 +1,7 @@
 extends layout
 
 block content
-  .col-md-12(style="margin-bottom: 4%")
+  .col-md-12(style='margin-bottom: 4%')
     .row.text-center(style='margin-bottom:15px;')
       i #{settings.locale.net_warning}
     .card.card-default
@@ -11,8 +11,8 @@ block content
             a.nav-link.show.active(href='#connections', aria-controls='connections', role='tab', data-toggle='tab') #{settings.locale.net_connections}
           li.nav-item(role='presentation')
             a.nav-link(href='#addnodes', aria-controls='addnodes', role='tab', data-toggle='tab') #{settings.locale.net_addnodes}
-    .tab-content
-      #connections.card.card-default.tab-pane.active 
+    .tab-content(style='margin-bottom:70px;')
+      #connections.card.card-default.tab-pane.active
         include ./includes/net_list.pug
       #addnodes.card.card-default.tab-pane
         include ./includes/net_addnodes.pug

views/reward.pug

@@ -1,119 +1,109 @@
 extends layout
 
 block content
-  .row(style='margin-top:5px;')
-    .col-md-12(style='text-align:center;')
-      img(src='/images/logo.png' style='width:80px;margin: 0px auto 15px auto;')
   .row
     .col-xs-12.col-md-12
       .card.card-default.card-address-summary
-        .card-header(style='position:relative;')        
+        .card-header(style='position:relative;')
           strong #{settings.locale.heavy_title} (#{settings.symbol})
-        table.table.table-bordered.table-striped.summary-table 
+        table.table.table-bordered.table-striped.summary-table
           thead
             tr
               th #{settings.locale.ex_supply} (#{settings.symbol})
               th #{settings.locale.heavy_cap} (#{settings.symbol})
               th #{settings.locale.heavy_phase}
               th #{settings.locale.heavy_maxvote}
-              th #{settings.locale.heavy_reward} 
+              th #{settings.locale.heavy_reward}
               th #{settings.locale.heavy_estnext}
-          tbody             
+          tbody
             tr
-              tr
-              td 
+              td
                 =heavy.supply
-              td 
+              td
                 =heavy.cap
-              td 
+              td
                 =heavy.phase
-              td 
+              td
                 =heavy.maxvote
-              td 
+              td
                 =heavy.reward
-              td 
+              td
                 =heavy.estnext
   .row
-    .col-md-12 
-      .card.card-defual
+    .col-md-3
+      .card.card-default
         .card-body
-          .col-md-3
-            center
-              canvas(id="myChart2", width="150", height="150")
+          div.text-center
+            canvas(id="myChart2", width="150", height="150")
+              script.
+                var ctx = document.getElementById("myChart2").getContext("2d");
+                var data = [
+                  {
+                    value: ((#{stats.count}/3600)%1)*100,
+                    color: "rgba(92,184,92,1.0)"
+                  },
+                  {
+                    value: (1-((#{stats.count}/3600)%1))*100,
+                    color: "#222"
+                  }
+                ]
+                new Chart(ctx).Doughnut(data);
+            h5 #{settings.locale.heavy_changein}
+            h5
+              =heavy.nextin
+          form
+            table.table
+              thead
+                tbody
+                  tr
+                    th #{settings.locale.heavy_key}
+                    td
+                  tr
+                    th #{settings.locale.heavy_vote}
+                    td
+                      div(style="width:20px;height:20px;background-color:#428bca")
+                  tr
+                    th #{settings.locale.heavy_current}
+                    td
+                      div(style="width:20px;height:20px;background-color:#222")
+                  tr
+                    th #{settings.locale.heavy_estnext}
+                    td
+                      div(style="width:20px;height:20px;background-color:rgba(92,184,92,1.0)")
+    .col-md-9
+      .card.card-default
+        .card-body
+          div.text-center
+            .div
+              strong #{settings.locale.heavy_lastxvotes}
+            .div
+              canvas(id="myChart", width="800", height="300", style="margin-left:-30px;margin-top:30px;")
                 script.
-                  var ctx = document.getElementById("myChart2").getContext("2d");
-                  var data = [
-                    {
-                      value: ((#{stats.count}/3600)%1)*100,
-                      //color: "rgba(151,187,205,0.5)"
-                      color: "rgba(92,184,92,1.0)"
-                    },
-                    {
-                      value : (1-((#{stats.count}/3600)%1))*100,
-                      color : "#222"
-                    }
-                  ]
-                  new Chart(ctx).Doughnut(data); 
-              h5 #{settings.locale.heavy_changein}
-              h5
-                =heavy.nextin
-           
-            form
-              table.table
-                thead
-                  tbody     
-                    tr
-                      th #{settings.locale.heavy_key}
-                      td   
-                    tr
-                      th #{settings.locale.heavy_vote}
-                      td 
-                        div(style="width:20px;height:20px;background-color:#428bca")           
-                    tr
-                      th #{settings.locale.heavy_current}
-                      td 
-                        div(style="width:20px;height:20px;background-color:#222")   
-                    tr
-                      th #{settings.locale.heavy_estnext}
-                      td
-                        div(style="width:20px;height:20px;background-color:rgba(92,184,92,1.0)") 
-          
-          .col-md-9
-            center
-              .row
-                strong #{settings.locale.heavy_lastxvotes}  
-              .row
-                canvas(id="myChart", width="800", height="300", style="margin-left:-30px;margin-top:30px;")
-                  script.
-
-                    var ctx = document.getElementById("myChart").getContext("2d");
-                    var options = {
-                      scaleOverride : true,
-                      scaleSteps : 8,
-                      scaleStepWidth : 1,
-                      scaleStartValue : 0,
-                      bezierCurve : false,
-                    }
-                    var data = {
-                      labels : [#{votes[0].count},#{votes[1].count},#{votes[2].count},#{votes[3].count},#{votes[4].count},#{votes[5].count},#{votes[6].count},#{votes[7].count},#{votes[8].count},#{votes[9].count},#{votes[10].count},#{votes[11].count},#{votes[12].count},#{votes[13].count},#{votes[14].count},#{votes[15].count},#{votes[16].count},#{votes[17].count},#{votes[18].count},#{votes[19].count}],
-                      datasets : [
-                        {
-                          fillColor : "rgba(66,139,202,0.5)",
-                          strokeColor : "rgba(66,139,202,0.8)",
-                          pointColor : '#428bca',
-                          pointStrokeColor : "#fff",
-                          data : [#{votes[0].vote},#{votes[1].vote},#{votes[2].vote},#{votes[3].vote},#{votes[4].vote},#{votes[5].vote},#{votes[6].vote},#{votes[7].vote},#{votes[8].vote},#{votes[9].vote},#{votes[10].vote},#{votes[11].vote},#{votes[12].vote},#{votes[13].vote},#{votes[14].vote},#{votes[15].vote},#{votes[16].vote},#{votes[17].vote},#{votes[18].vote},#{votes[19].vote}]
-                        },
-                        {
-                          fillColor : "rgba(151,187,205,0.0)",
-                          strokeColor : '#222',
-                          pointColor : "rgba(0,0,0,0)",
-                          pointStrokeColor : "rgba(0,0,0,0.0)",
-                          data : [#{votes[0].reward},#{votes[1].reward},#{votes[2].reward},#{votes[3].reward},#{votes[4].reward},#{votes[5].reward},#{votes[6].reward},#{votes[7].reward},#{votes[8].reward},#{votes[9].reward},#{votes[10].reward},#{votes[11].reward},#{votes[12].reward},#{votes[13].reward},#{votes[14].reward},#{votes[15].reward},#{votes[16].reward},#{votes[17].reward},#{votes[18].reward},#{votes[19].reward}]
-                        },
-                      ]
-                    }
-                    var myNewChart = new Chart(ctx).Line(data,options);
-         
-        
-        
+                  var ctx = document.getElementById("myChart").getContext("2d");
+                  var options = {
+                    scaleOverride: true,
+                    scaleSteps: 8,
+                    scaleStepWidth: 1,
+                    scaleStartValue: 0,
+                    bezierCurve: false
+                  }
+                  var data = {
+                    labels: [#{(votes.length > 0 ? votes[0].count : '0')},#{(votes.length > 1 ? votes[1].count : '0')},#{(votes.length > 2 ? votes[2].count : '0')},#{(votes.length > 3 ? votes[3].count : '0')},#{(votes.length > 4 ? votes[4].count : '0')},#{(votes.length > 5 ? votes[5].count : '0')},#{(votes.length > 6 ? votes[6].count : '0')},#{(votes.length > 7 ? votes[7].count : '0')},#{(votes.length > 8 ? votes[8].count : '0')},#{(votes.length > 9 ? votes[9].count : '0')},#{(votes.length > 10 ? votes[10].count : '0')},#{(votes.length > 11 ? votes[11].count : '0')},#{(votes.length > 12 ? votes[12].count : '0')},#{(votes.length > 13 ? votes[13].count : '0')},#{(votes.length > 14 ? votes[14].count : '0')},#{(votes.length > 15 ? votes[15].count : '0')},#{(votes.length > 16 ? votes[16].count : '0')},#{(votes.length > 17 ? votes[17].count : '0')},#{(votes.length > 18 ? votes[18].count : '0')},#{(votes.length > 19 ? votes[19].count : '0')}],
+                    datasets: [
+                      {
+                        fillColor: "rgba(66,139,202,0.5)",
+                        strokeColor: "rgba(66,139,202,0.8)",
+                        pointColor: '#428bca',
+                        pointStrokeColor: "#fff",
+                        data: [#{(votes.length > 0 ? votes[0].vote : '0')},#{(votes.length > 1 ? votes[1].vote : '0')},#{(votes.length > 2 ? votes[2].vote : '0')},#{(votes.length > 3 ? votes[3].vote : '0')},#{(votes.length > 4 ? votes[4].vote : '0')},#{(votes.length > 5 ? votes[5].vote : '0')},#{(votes.length > 6 ? votes[6].vote : '0')},#{(votes.length > 7 ? votes[7].vote : '0')},#{(votes.length > 8 ? votes[8].vote : '0')},#{(votes.length > 9 ? votes[9].vote : '0')},#{(votes.length > 10 ? votes[10].vote : '0')},#{(votes.length > 11 ? votes[11].vote : '0')},#{(votes.length > 12 ? votes[12].vote : '0')},#{(votes.length > 13 ? votes[13].vote : '0')},#{(votes.length > 14 ? votes[14].vote : '0')},#{(votes.length > 15 ? votes[15].vote : '0')},#{(votes.length > 16 ? votes[16].vote : '0')},#{(votes.length > 17 ? votes[17].vote : '0')},#{(votes.length > 18 ? votes[18].vote : '0')},#{(votes.length > 19 ? votes[19].vote : '0')}]
+                      },
+                      {
+                        fillColor: "rgba(151,187,205,0.0)",
+                        strokeColor: '#222',
+                        pointColor: "rgba(0,0,0,0)",
+                        pointStrokeColor: "rgba(0,0,0,0.0)",
+                        data: [#{(votes.length > 0 ? votes[0].reward : '0')},#{(votes.length > 1 ? votes[1].reward : '0')},#{(votes.length > 2 ? votes[2].reward : '0')},#{(votes.length > 3 ? votes[3].reward : '0')},#{(votes.length > 4 ? votes[4].reward : '0')},#{(votes.length > 5 ? votes[5].reward : '0')},#{(votes.length > 6 ? votes[6].reward : '0')},#{(votes.length > 7 ? votes[7].reward : '0')},#{(votes.length > 8 ? votes[8].reward : '0')},#{(votes.length > 9 ? votes[9].reward : '0')},#{(votes.length > 10 ? votes[10].reward : '0')},#{(votes.length > 11 ? votes[11].reward : '0')},#{(votes.length > 12 ? votes[12].reward : '0')},#{(votes.length > 13 ? votes[13].reward : '0')},#{(votes.length > 14 ? votes[14].reward : '0')},#{(votes.length > 15 ? votes[15].reward : '0')},#{(votes.length > 16 ? votes[16].reward : '0')},#{(votes.length > 17 ? votes[17].reward : '0')},#{(votes.length > 18 ? votes[18].reward : '0')},#{(votes.length > 19 ? votes[19].reward : '0')}]
+                      }
+                    ]
+                  }
+                  var myNewChart = new Chart(ctx).Line(data,options);

views/richlist.pug

@@ -1,24 +1,21 @@
 extends layout
 
-block content   
+block content
   script.
-    $(document).ready(function(){
+    $(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}]
+        ['Top 1-25', !{dista.percent}],['Top 26-50', !{distb.percent}],['Top 51-75', !{distc.percent}],['Top 76-100', !{distd.percent}],['101+', !{diste.percent}]
       ];
-      var pieWealthDist = $.jqplot('pieChart', [data],
+      $.jqplot('pieChart', [data],
         {
           seriesColors: [ "#d9534f", "#5cb85c", "#428bca", "#222", "#CCC"],
           series: [{
-            // Make this a pie chart.
             renderer: $.jqplot.PieRenderer,
             rendererOptions: {
               diameter: 260,
               padding: 0,
-              sliceMargin: 4, 
-              // Put data labels on the pie slices.
-              // By default, labels show the percentage of the slice.
-              showDataLabels: false,
+              sliceMargin: 4,
+              showDataLabels: false
             }
           }],
           grid: {borderWidth:0, shadow:false},
@@ -33,11 +30,8 @@ block content
         }
       );
     });
-    $(window).resize(function () { 
-      pieWealthDist.replot( { resetAxes: false } );
-    });  
-  .row
-    .col-xs-12.col-md-8
+  .row(style='margin-left:0;margin-right:0;')
+    .col-xs-12.col-lg-8
       .tabpanel
         ul.nav.nav-tabs(role='tablist')
           li.nav-item(role='presentation')
@@ -45,16 +39,16 @@ block content
           li.nav-item(role='presentation')
             a.nav-link(href='#received', aria-controls='received', role='tab', data-toggle='tab') Received
       .tab-content
-        #balance.tabpanel.tab-pane.active 
+        #balance.tabpanel.tab-pane.active(style='margin-top:0;')
           include ./includes/rl_balance.pug
-        #received.tabpanel.tab-pane
+        #received.tabpanel.tab-pane(style='margin-top:0;')
           include ./includes/rl_received.pug
     if show_dist == true
-      .col-md-4.col-xs-12
-        #summary-panel.card.card-default(style='margin-top:47px;')
+      .col-lg-4.col-xs-12(style='margin-bottom:45px;')
+        #summary-panel.card.card-default(style='margin-top:34px;')
           .card-header
             h5.card-title #{settings.locale.rl_wealth}
-          table.table.table-hover.table-bordered
+          table.table.table-hover.table-bordered(style='margin-bottom:0;')
             thead
               tr
                 th
@@ -65,35 +59,45 @@ block content
                 th
                   div.float-left(style='background-color:#d9534f;width:20px;height:20px;margin-right:6px;')
                   span #{settings.locale.rl_top25}
-                - var total = parseFloat(dista.total).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true})
-                td #{total}
+                - var total = parseFloat(dista.total).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
+                - var totalParts = total.split(".");
+                td.breakWord #{totalParts[0]}.
+                  span.decimal.breakWord #{totalParts[1]}
                 td.text-center #{parseFloat(dista.percent).toFixed(2)}
               tr
                 th
                   div.float-left(style='background-color:#5cb85c;width:20px;height:20px;margin-right:6px;')
                   span #{settings.locale.rl_top50}
-                - var total = parseFloat(distb.total).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true})
-                td #{total}
+                - var total = parseFloat(distb.total).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
+                - var totalParts = total.split(".");
+                td.breakWord #{totalParts[0]}.
+                  span.decimal.breakWord #{totalParts[1]}
                 td.text-center #{parseFloat(distb.percent).toFixed(2)}
               tr
                 th
                   div.float-left(style='background-color:#428bca;width:20px;height:20px;margin-right:6px;')
                   span #{settings.locale.rl_top75}
-                - var total = parseFloat(distc.total).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true})
-                td #{total}
+                - var total = parseFloat(distc.total).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
+                - var totalParts = total.split(".");
+                td.breakWord #{totalParts[0]}.
+                  span.decimal.breakWord #{totalParts[1]}
                 td.text-center #{parseFloat(distc.percent).toFixed(2)}
               tr
                 th
                   div.float-left(style='background-color:#222;width:20px;height:20px;margin-right:6px;')
                   span #{settings.locale.rl_top100}
-                - var total = parseFloat(distd.total).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true})
-                td #{total}
+                - var total = parseFloat(distd.total).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
+                - var totalParts = total.split(".");
+                td.breakWord #{totalParts[0]}.
+                  span.decimal.breakWord #{totalParts[1]}
                 td.text-center #{parseFloat(distd.percent).toFixed(2)}
               tr
-                th
+                td.font-weight-bold
                   span #{settings.locale.total}
-                td 
-                td.text-center #{(parseFloat(dista.percent)+parseFloat(distb.percent)+parseFloat(distc.percent)+parseFloat(distd.percent)).toFixed(2)}
-        center
-          div#pieChart(style="width:300px;height:305px;margin:0px;")
+                - 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]}.
+                  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

views/tx.pug

@@ -1,64 +1,64 @@
 extends layout
 
 block content
-  - var time = format_unixtime(tx.timestamp)
-  .col-xs-12.col-md-12
+  - var time = format_unixtime(tx.timestamp);
+  .col-xs-12.col-md-12.cardSpacer
     .card.card-body.d-lg-none.d-md-none(style='word-wrap:break-word;')
       | Viewing TXID: #{tx.txid}
-    .card.card-default
+    .card.card-default.cardSpacer
       .card-header.d-none.d-md-block
         strong=settings.symbol + ' TXid: ' + tx.txid
         a(href=`/api/getrawtransaction?txid=${tx.txid}&decrypt=1`)
           span.fa.fa-info-circle.iquidus.float-right
       div.table-responsive
-        table.table.table-bordered.table-striped.summary-table 
+        table.table.table-bordered.table-striped.summary-table
           thead
             tr
               th #{settings.locale.confirmations}
-              th.hidden-xs #{settings.locale.tx_block_hash}
+              th #{settings.locale.tx_block_hash}
               th #{settings.locale.timestamp}
               th
           tbody
             - var confirms = (blockcount - tx.blockindex);
-            if confirms >= confirmations             
-              tr.table-success
-                  td #{confirms}
-                  td.hidden-xs 
-                    a(href='/block/'+tx.blockhash) #{tx.blockhash}
-                  td #{time}
-                  td.view_tx  
-                    a(href='/block/'+tx.blockhash)
-                      span.fa.fa-eye 
+            if confirms >= confirmations
+              tr.bg-success.text-dark
+                td #{confirms}
+                td
+                  a.breakWord(href='/block/'+tx.blockhash) #{tx.blockhash}
+                td #{time}
+                td.view_tx
+                  a(href='/block/'+tx.blockhash)
+                    span.fa.fa-eye
             else
               if confirms < (confirmations / 2)
-                tr.table-danger
+                tr.bg-danger
                   td #{confirms}
-                  td.hidden-xs  
-                    a(href='/block/'+tx.blockhash) #{tx.blockhash}
+                  td
+                    a.breakWord(href='/block/'+tx.blockhash) #{tx.blockhash}
                   td #{time}
-                  td.view_tx  
+                  td.view_tx
                     a(href='/block/'+tx.blockhash)
-                      span.fa.fa-eye 
+                      span.fa.fa-eye
               else
                 tr.table-warning
                   td #{confirms}
-                  td.hidden-xs  
-                    a(href='/block/'+tx.blockhash) #{tx.blockhash}
+                  td
+                    a.breakWord(href='/block/'+tx.blockhash) #{tx.blockhash}
                   td #{time}
-                  td.view_tx  
+                  td.view_tx
                     a(href='/block/'+tx.blockhash)
                       span.fa.fa-eye
     if tx.vout.length < 1
-      .alert.alert-info(role='alert', style='text-align:center;')   
+      .alert.alert-info.text-center(role='alert')
         strong #{settings.locale.tx_nonstandard}
     else
       .row
-        .col-md-6
+        .col-md-6.cardSpacer
           .card.card-default
             .card-header
               strong #{settings.locale.tx_contributors}
               span.fa.fa-arrow-right.float-right.d-xs-none
-            table.table.table-bordered.table-striped.summary-table 
+            table.table.table-striped.summary-table
               thead
                 tr
                   th #{settings.locale.tx_address}
@@ -68,12 +68,12 @@ block content
               tbody
                 if tx.vin.length > 0
                   each r in tx.vin
-                    if r.addresses == 'coinbase' 
-                      tr.table-info(style='text-align:center')
+                    if r.addresses == 'coinbase'
+                      tr.table-info.text-center
                         td #{settings.locale.new_coins}
                     else
-                      - var ramount = (r.amount / 100000000).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true})
-                      - var ramountParts = ramount.split('.')
+                      - var ramount = (r.amount / 100000000).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
+                      - var ramountParts = ramount.split('.');
                       tr
                         td
                           if r.addresses != 'private_tx'
@@ -81,56 +81,50 @@ block content
                               =r.addresses
                           else
                             =settings.locale.hidden_sender
-                        td.table-danger.d-xs-none #{ramountParts[0]}.
+                        td.bg-danger.d-xs-none #{ramountParts[0]}.
                           span.decimal #{ramountParts[1]}
                       tr.d-lg-none.d-md-none
-                          td.table-danger #{ramountParts[0]}.
-                            span.decimal #{ramountParts[1]} #{settings.symbol}
+                        td.bg-danger #{ramountParts[0]}.
+                          span.decimal #{ramountParts[1]} #{settings.symbol}
                 else
-                  tr.table-info(style='text-align:center')
+                  tr.table-info.text-center
                     td #{settings.locale.proof_of_stake}
-        .col-md-6
+        .col-md-6.cardSpacer
           .card.card-default
             .card-header
               strong #{settings.locale.tx_recipients}
-            table.table.table-bordered.table-striped.summary-table
+            table.table.table-striped.summary-table
               thead
                 tr
                   th #{settings.locale.tx_address}
-                  th.d-none.d-md-block #{settings.locale.mkt_amount} (#{settings.symbol})
+                  th #{settings.locale.mkt_amount} (#{settings.symbol})
               tbody
                 each r in tx.vout
                   if tx.vout.length > 0
-                    - var ramount = (r.amount / 100000000).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true})
-                    - var ramountParts = ramount.split('.')
-                    tr.d-sm-block.d-md-none.d-none
+                    - var ramount = (r.amount / 100000000).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
+                    - var ramountParts = ramount.split('.');
+                    tr
                       if r.addresses != 'private_tx'
                         td
-                          a.loading(href='/address/' + r.addresses)
+                          a.loading.breakWord(href='/address/' + r.addresses)
                             =r.addresses
-                        td.success.d-none.d-sm-block #{ramountParts[0]}.
+                        td.bg-success #{ramountParts[0]}.
                           span.decimal #{ramountParts[1]}
                       else if r.amount > 0
                         td
                           =settings.locale.hidden_recipient
-                        td.success.d-none.d-sm-block #{ramountParts[0]}.
+                        td.bg-success #{ramountParts[0]}.
                           span.decimal #{ramountParts[1]}
                       else
                         td(colspan='2')
                           =settings.locale.hidden_recipient
-                    tr.d-sm-block.d-md-none.d-none
-                      td.success #{ramountParts[0]}.
-                            span.decimal #{ramountParts[1]} #{settings.symbol}
                   else
-                    - var ramount = (r.amount / 100000000).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true})
-                    - var ramountParts = ramount.split('.')
+                    - var ramount = (r.amount / 100000000).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
+                    - var ramountParts = ramount.split('.');
                     tr
                       td
-                        a.loading(href='/address/' + r.addresses)
+                        a.loading.breakWord(href='/address/' + r.addresses)
                           =r.addresses
-                      td.table-success.d-none.d-md-block  #{ramountParts[0]}.
+                      td.bg-success #{ramountParts[0]}.
                         span.decimal #{ramountParts[1]}
-                  tr.d-sm-block.d-md-none.d-none
-                    td.table-success #{ramountParts[0]}.
-                            span.decimal #{ramountParts[1]} #{settings.symbol}
     .footer-padding