From c7efaad2947a4ff87a58c8369f22b5209c63a9b1 Mon Sep 17 00:00:00 2001 From: joeuhren <46763106+joeuhren@users.noreply.github.com> Date: Sat, 5 Dec 2020 20:10:17 -0700 Subject: [PATCH] Add settings to customize footer height + social link sizes --- app.js | 8 ++++++++ lib/settings.js | 10 ++++++++++ settings.json.template | 18 ++++++++++++++++++ views/layout.pug | 41 ++++++++++++++++++++++++++++++++++++++++- 4 files changed, 76 insertions(+), 1 deletion(-) diff --git a/app.js b/app.js index c9fb8ae..12f8182 100644 --- a/app.js +++ b/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); diff --git a/lib/settings.js b/lib/settings.js index bcdd626..502462e 100644 --- a/lib/settings.js +++ b/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"; diff --git a/settings.json.template b/settings.json.template index 5acafa6..31d972a 100644 --- a/settings.json.template +++ b/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, diff --git a/views/layout.pug b/views/layout.pug index 89c9f90..702eaa9 100644 --- a/views/layout.pug +++ b/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