Add settings to customize footer height + social link sizes

app.js

@@ -319,6 +319,14 @@ app.set('homelink', settings.homelink);
 app.set('logoheight', settings.logoheight);
 app.set('burned_coins', settings.burned_coins);
 
+app.set('footer_height_desktop', settings.footer_height_desktop);
+app.set('footer_height_tablet', settings.footer_height_tablet);
+app.set('footer_height_mobile', settings.footer_height_mobile);
+
+app.set('social_link_percent_height_desktop', settings.social_link_percent_height_desktop);
+app.set('social_link_percent_height_tablet', settings.social_link_percent_height_tablet);
+app.set('social_link_percent_height_mobile', settings.social_link_percent_height_mobile);
+
 // determine panel offset based on which panels are enabled
 var paneltotal=5;
 var panelcount=(settings.display.networkpnl > 0 ? 1 : 0)+(settings.display.difficultypnl > 0 ? 1 : 0)+(settings.display.masternodespnl > 0 ? 1 : 0)+(settings.display.coinsupplypnl > 0 ? 1 : 0)+(settings.display.pricepnl > 0 ? 1 : 0);

lib/settings.js

@@ -24,6 +24,16 @@ exports.homelink = "coin";
 // home link logo height (value in px, only valid if using homelink = 'logo')
 exports.logoheight = 50;
 
+// Footer height
+exports.footer_height_desktop = "50px";
+exports.footer_height_tablet = "60px";
+exports.footer_height_mobile = "70px";
+
+// Social media link height
+exports.social_link_percent_height_desktop = 70;
+exports.social_link_percent_height_tablet = 55;
+exports.social_link_percent_height_mobile = 40;
+
 //Theme
 exports.theme = "Exor";
 

settings.json.template

@@ -27,6 +27,24 @@
   // home link logo height (value in px, only valid if using homelink = 'logo')
   "logoheight":  50,
 
+  // Customize the height of the footer for the following screen sizes:
+  // Mobile (0-575px)
+  // Tablet (576-991px)
+  // Desktop (>= 992px)
+  // Supports any valid height value in pixels ("50px") or percent ("10%")
+  "footer_height_desktop": "50px",
+  "footer_height_tablet": "60px",
+  "footer_height_mobile": "70px",
+
+  // Customize the height of the social media links in the footer for the following screen sizes:
+  // Mobile (0-575px)
+  // Tablet (576-991px)
+  // Desktop (>= 992px)
+  // This is a percentage value and must be a positive number between 1-100
+  "social_link_percent_height_desktop": 70,
+  "social_link_percent_height_tablet": 55,
+  "social_link_percent_height_mobile": 40,
+
   // Uses bootswatch themes (http://bootswatch.com/)
   // Valid options:
   //     Cerulean, Cosmo, Cyborg, Darkly, Flatly, Journal, Litera, Lumen, 

views/layout.pug

@@ -26,6 +26,43 @@ html
     script(src='/javascripts/chart.js')
     script.
       $(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;
+        }
         $('##{active}').addClass('active');
         function update_stats() {
           $.ajax({url: '/ext/summary', success: function(json) {
@@ -76,6 +113,7 @@ html
         $('.iquidus').css('color',$('.table').css('color'));
         $(window).resize(function () {
           $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
+          fixFooterHeight();
         });
         setInterval(function() {
           update_stats();
@@ -160,6 +198,7 @@ html
         hideShowPanel('#{settings.panel3}', 'pnlThree');
         hideShowPanel('#{settings.panel4}', 'pnlFour');
         hideShowPanel('#{settings.panel5}', 'pnlFive');
+        fixFooterHeight();
       });
     style(type="text/css").
       .header-icons {
@@ -265,7 +304,7 @@ html
             input.form-control(type='text', name='search', placeholder=settings.locale.ex_search_message, style='min-width:80%;margin-right:5px;')
             button.btn.btn-success(type='submit') #{settings.locale.ex_search_button}
     block content
-    div(class=footerClasses, role='navigation')
+    div#footer-container(class=footerClasses, role='navigation')
       .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