Position non-sticky footer at bottom of viewport

-Fix footer height and position after datatables are populated/drawn
-Remove footer-padding css rule
-Remove unnecessary spacing on all applicable pages

public/css/style.scss

@@ -108,11 +108,6 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   }
 }
 
-.footer-padding {
-  height: 50px;
-  width: 100%;
-}
-
 .footer-logo {
   height: 40px;
   position: absolute;

views/address.pug

@@ -7,7 +7,7 @@ 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.cardSpacer
+  .col-xs-12.col-md-12
     .card.card-default.border-0.card-address-summary.cardSpacer
       .card-header(style='position:relative;')
         strong #{address.a_id}
@@ -60,5 +60,4 @@ block content
     .card.card-default.border-0.cardSpacer
       .card-header
         strong #{settings.locale.ex_latest_transactions}
-      include ./includes/address_history.pug
+      include ./includes/address_history.pug
-    .footer-padding

views/block.pug

@@ -4,7 +4,7 @@ block content
   include ./includes/common.pug
   - var time = format_unixtime(block.time);
   - var block_difficulty = parseFloat(block.difficulty).toFixed(4);
-  .col-xs-12.col-md-12.cardSpacer
+  .col-xs-12.col-md-12
     .card.card-default.border-0.cardSpacer
       .card-header(style='padding-left:25px;padding-right:25px;')
         .row
@@ -73,7 +73,7 @@ block content
       .alert.alert-info(role='alert', style='text-align:center;')
         strong #{settings.locale.block_genesis}
     else
-      .card.card-default.border-0.cardSpacer
+      .card.card-default.border-0
         .card-header
           strong #{settings.locale.ex_latest_transactions}
         table.table.table-bordered.table-striped.summary-table.mobile-border-right
@@ -102,5 +102,4 @@ block content
                     span.decimal #{totalParts[1]}
                 td.text-center
                   a(href='/tx/' + txn.txid)
-                    span.fa.fa-eye
+                    span.fa.fa-eye
-    .footer-padding

views/claim_address.pug

@@ -132,5 +132,4 @@ block content
             fieldset.entryField
               label(for='signature') Signature
               input#signature.form-control(type='text', placeholder='Signature', maxlength='100')
-          button.btn.btn-primary(type='submit') Submit
+          button.btn.btn-primary(type='submit') Submit
-    .footer-padding

views/includes/address_history.pug

@@ -75,6 +75,9 @@ script.
         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>');
+      },
+      fnDrawCallback: function(settings) {
+        fixFooterHeightAndPosition();
       }
     });
   });

views/includes/net_addnodes.pug

@@ -23,6 +23,9 @@ script.
           return rows;
         }
       },
+      fnDrawCallback: function(settings) {
+        fixFooterHeightAndPosition();
+      },
       columns: [
         {data: 'nodes', width: '100%'}
       ],
@@ -53,6 +56,9 @@ script.
           return rows;
         }
       },
+      fnDrawCallback: function(settings) {
+        fixFooterHeightAndPosition();
+      },
       columns: [
         {data: 'nodes', width: '100%'}
       ],

views/includes/net_list.pug

@@ -29,6 +29,9 @@ script.
         $("td:eq(2)", row).html(data['version']);
         $("td:eq(3)", row).html(data['country']+flagBlock);
       },
+      fnDrawCallback: function(settings) {
+        fixFooterHeightAndPosition();
+      },
       columns: [
         { data: 'address', width: '25%' },
         { data: 'protocol', width: '25%' },
@@ -40,6 +43,7 @@ script.
       $($.fn.dataTable.tables(true)).DataTable().responsive.recalc();
       $($.fn.dataTable.tables(true)).css('width', '100%');
       $($.fn.dataTable.tables(true)).DataTable().columns.adjust().draw();
+      fixFooterHeightAndPosition();
     });
   });
 .card.card-default.border-0

views/index.pug

@@ -55,6 +55,9 @@ block content
           $("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");
+        },
+        fnDrawCallback: function(settings) {
+          fixFooterHeightAndPosition();
         }
       });
       setInterval( function () {
@@ -80,5 +83,4 @@ block content
             th.text-center #{settings.locale.mkt_amount}
               span.small  (#{settings.symbol})
             th.text-center.d-none.d-sm-table-cell #{settings.locale.timestamp}
-        tbody.text-center
+        tbody.text-center
-    .footer-padding

views/info.pug

@@ -1,7 +1,7 @@
 extends layout
 
 block content
-  .col-md-12(style="margin-bottom: 4%")
+  .col-md-12.cardSpacer
     .card.card-default.border-0
       .card-header
         strong #{settings.locale.api_title}
@@ -220,5 +220,4 @@ block content
           li
             p
               div.font-weight-bold qrcode (/qr/hash)
-              a(href='/qr/' + hashes.address) #{address}/qr/#{hashes.address}
+              a(href='/qr/' + hashes.address) #{address}/qr/#{hashes.address}
-    .footer-padding

views/layout.pug

@@ -36,44 +36,55 @@ html(lang='en')
         if (!results[2]) return '';
         return decodeURIComponent(results[2].replace(/\+/g, ' '));
       }
+      function fixFooterHeightAndPosition() {
+        var screenWidth = $(window).width();
+
+        if (screenWidth <= 575) {
+          // Mobile
+          $('#footer-container').css('height', '!{settings.footer_height_mobile}');
+        } else if (screenWidth >= 576 && screenWidth <= 991) {
+          // Tablet
+          $('#footer-container').css('height', '!{settings.footer_height_tablet}');
+        } else {
+          // Desktop
+          $('#footer-container').css('height', '!{settings.footer_height_desktop}');
+        }
+
+        if (!#{settings.sticky_footer}) {
+          // Wait a tick before fixing footer position to give time for elements to be rendered
+          var nonStickyFooterSetIntervalID = setInterval(function() {
+            // Stop setInterval from running again
+            clearInterval(nonStickyFooterSetIntervalID);
+            // Ensure footer is shown at the bottom of the viewport
+            var offset = (window.innerHeight - $('#footer-container').position().top - $('#footer-container').outerHeight());
+            $('#footer-container').css('margin-top', (offset > 0 ? offset : '10') + 'px');
+          }, 1, "tmrFixFooter");
+        }
+
+        fixSocialLinkFontSize();
+      }
+      function fixSocialLinkFontSize() {
+        var fontSize = $('#footer-container').height() * (getSocialLinkHeight() / 100);
+        $('#footer-container .social-link').css('font-size', fontSize);
+      }
+      function getSocialLinkHeight() {
+        var retVal = 70;
+        var screenWidth = $(window).width();
+
+        if (screenWidth <= 575) {
+          // Mobile
+          retVal = !{settings.social_link_percent_height_mobile};
+        } else if (screenWidth >= 576 && screenWidth <= 991) {
+          // Tablet
+          retVal = !{settings.social_link_percent_height_tablet};
+        } else {
+          // Desktop
+          retVal = !{settings.social_link_percent_height_desktop};
+        }
+
+        return retVal;
+      }
       $(document).ready(function() {
-        function fixSocialLinkFontSize() {
-          var fontSize = $('#footer-container').height() * (getSocialLinkHeight() / 100);
-          $('#footer-container .social-link').css('font-size', fontSize);
-        }
-        function fixFooterHeight() {
-          var screenWidth = $(window).width();
-
-          if (screenWidth <= 575) {
-            // Mobile
-            $('#footer-container').css('height', '!{settings.footer_height_mobile}');
-          } else if (screenWidth >= 576 && screenWidth <= 991) {
-            // Tablet
-            $('#footer-container').css('height', '!{settings.footer_height_tablet}');
-          } else {
-            // Desktop
-            $('#footer-container').css('height', '!{settings.footer_height_desktop}');
-          }
-
-          fixSocialLinkFontSize();
-        }
-        function getSocialLinkHeight() {
-          var retVal = 70;
-          var screenWidth = $(window).width();
-
-          if (screenWidth <= 575) {
-            // Mobile
-            retVal = !{settings.social_link_percent_height_mobile};
-          } else if (screenWidth >= 576 && screenWidth <= 991) {
-            // Tablet
-            retVal = !{settings.social_link_percent_height_tablet};
-          } else {
-            // Desktop
-            retVal = !{settings.social_link_percent_height_desktop};
-          }
-
-          return retVal;
-        }
         if ('#{active}' != '')
           $('##{active}').addClass('active');
         function update_stats() {
@@ -125,7 +136,7 @@ html(lang='en')
         $('.iquidus').css('color',$('.table').css('color'));
         $(window).resize(function () {
           $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
-          fixFooterHeight();
+          fixFooterHeightAndPosition();
         });
         setInterval(function() {
           update_stats();
@@ -210,7 +221,7 @@ html(lang='en')
         hideShowPanel('#{settings.panel3}', 'pnlThree');
         hideShowPanel('#{settings.panel4}', 'pnlFour');
         hideShowPanel('#{settings.panel5}', 'pnlFive');
-        fixFooterHeight();
+        fixFooterHeightAndPosition();
       });
   body
     - var navbarClasses = ['nav','navbar','navbar-expand-lg'];

views/market.pug

@@ -206,7 +206,7 @@ block content
                       else
                         =parseFloat(parseFloat(sell.price).toFixed(8) * parseFloat(sell.quantity).toFixed(8)).toFixed(8)
       .row
-        .col-md-12.cardSpacer
+        .col-md-12
           .card.card-default.border-0
             .card-header
               strong #{settings.locale.mkt_trade_history}
@@ -248,5 +248,4 @@ block content
                           else
                             =parseFloat(parseFloat(order.price).toFixed(8) * parseFloat(order.quantity).toFixed(8)).toFixed(8)
                         td.d-none.d-lg-table-cell
-                          =format_unixtime(new Date(order.timestamp), true)
+                          =format_unixtime(new Date(order.timestamp), true)
-          .footer-padding

views/movement.pug

@@ -61,14 +61,17 @@ block content
           $("td:eq(0)", row).html(format_unixtime(new Date(timestamp), true));
           $("td:eq(1)", row).html('<a href="/tx/' + txhash + '">' + txhash + '</a>').addClass('breakWord d-none d-sm-table-cell');
           $("td:eq(2)", row).html(total);
+        },
+        fnDrawCallback: function(settings) {
+          fixFooterHeightAndPosition();
         }
       });
       setInterval(function () {
         rtable.api().ajax.reload(null, false);
       }, 45000);
     });
-  .col-md-12(style="margin-bottom: 4%")
+  .col-md-12
-    .card.card-default.border-0
+    .card.card-default.border-0.cardSpacer
       .card-header
         strong="Latest Movement"
       table#movement-table.table.table-bordered.table-striped.table-paging.mobile-border-right
@@ -77,5 +80,4 @@ block content
             th.text-center timestamp
             th.text-center.d-none.d-sm-table-cell txid
             th.text-center amount
-        tbody.text-center
+        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.cardSpacer
     .text-center(style='margin-bottom:15px;')
       i #{settings.locale.net_warning}
     .container
@@ -10,7 +10,7 @@ block content
           a.nav-link.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(style='margin-bottom:70px;')
+    .tab-content
       #connections.container.tab-pane.active(style='margin-top:0;border-top:0;')
         include ./includes/net_list.pug
       #addnodes.container.tab-pane(style='margin-top:0;border-top:0;')

views/richlist.pug

@@ -44,7 +44,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(style='margin-bottom:45px;')
+      .col-lg-4.col-xs-12
         #summary-panel.card.card-default.border-0(style='margin-top:34px;')
           .card-header
             strong #{settings.locale.rl_wealth}

views/tx.pug

@@ -3,7 +3,7 @@ extends layout
 block content
   include ./includes/common.pug
   - var time = format_unixtime(tx.timestamp);
-  .col-xs-12.col-md-12.cardSpacer
+  .col-xs-12.col-md-12
     .card.card-default.border-0.cardSpacer
       .card-header
         strong=settings.symbol + ' TXid: ' + tx.txid
@@ -123,5 +123,4 @@ block content
                         a.loading.breakWord(href='/address/' + r.addresses)
                           =r.addresses
                       td.bg-success #{ramountParts[0]}.
-                        span.decimal #{ramountParts[1]}
+                        span.decimal #{ramountParts[1]}
-    .footer-padding