diff --git a/app.js b/app.js index 50cefdd..6bc64b0 100644 --- a/app.js +++ b/app.js @@ -320,6 +320,9 @@ app.set('logoheight', settings.logoheight); app.set('burned_coins', settings.burned_coins); app.set('api_cmds', settings.api_cmds); +app.set('sticky_header', settings.sticky_header); +app.set('sticky_footer', settings.sticky_footer); + 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); diff --git a/lib/settings.js b/lib/settings.js index 96d0c70..90ab669 100644 --- a/lib/settings.js +++ b/lib/settings.js @@ -24,6 +24,11 @@ exports.homelink = "coin"; // home link logo height (value in px, only valid if using homelink = 'logo') exports.logoheight = 50; +// set whether page header "sticks" to top of page or not +exports.sticky_header = true; +// set whether page footer "sticks" to bottom of page or not +exports.sticky_footer = false; + // Footer height exports.footer_height_desktop = "50px"; exports.footer_height_tablet = "60px"; diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 6bd08d0..00c063f 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -1,7 +1,5 @@ body { - padding: 80px 40px; font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; - /* background-image: url('/images/background2.png');*/ } .navbar { @@ -209,11 +207,15 @@ tr { color: #ffffff; } +#body-container { + padding: 0 40px; +} + @media(max-width:767px){ - body { - padding: 0px; - padding-top:60px; - } + #body-container { + padding-left:0; + padding-right:0; + } } @media(max-width:1096px){ @@ -244,12 +246,6 @@ tr { padding: 0 15px; } -@media(max-width:767px){ - .logo-main { - padding: 0 15px 0 30px; - } -} - .decimal { font-size: 0.7em; } diff --git a/settings.json.template b/settings.json.template index 51494c5..ac74897 100644 --- a/settings.json.template +++ b/settings.json.template @@ -26,7 +26,12 @@ // home link logo height (value in px, only valid if using homelink = 'logo') "logoheight": 50, - + + // set whether page header "sticks" to top of page or not + "sticky_header": true, + // set whether page footer "sticks" to bottom of page or not + "sticky_footer": false, + // Customize the height of the footer for the following screen sizes: // Mobile (0-575px) // Tablet (576-991px) diff --git a/views/layout.pug b/views/layout.pug index 702eaa9..bca5278 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -205,8 +205,12 @@ html margin: 0 3px; } body - - 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']; + - var navbarClasses = ['nav','navbar','navbar-expand-lg']; + - var footerClasses = ['nav','navbar','navbar-default','d-none','d-md-flex','d-flex','footer']; + if settings.sticky_header == true + - navbarClasses.push('fixed-top'); + if settings.sticky_footer == true + - footerClasses.push('fixed-bottom'); if settings.display.navbar_dark == true - navbarClasses.push('bg-dark'); - navbarClasses.push('navbar-dark'); @@ -269,41 +273,42 @@ html a.nav-link(href='/info') span.fa.fa-info-circle span.menu-text #{settings.locale.menu_api} - if showSync != null && showSync == true + div#body-container(style='margin-top:' + (settings.sticky_header == true ? '80px;' : '20px')) + if showSync != null && showSync == true + .col-lg-12 + .alert.alert-warning + .cardSpacer + span.fas.fa-exclamation-triangle(style='margin-right:5px') + strong #{settings.locale.ex_warning} + div #{settings.locale.initial_index_alert} .col-lg-12 - .alert.alert-warning - .cardSpacer - span.fas.fa-exclamation-triangle(style='margin-right:5px') - strong #{settings.locale.ex_warning} - div #{settings.locale.initial_index_alert} - .col-lg-12 - .row.text-center.d-flex.justify-content-center - div(class="col-lg-2 col-lg-offset-" + settings.paneloffset) - - if(settings.panel1 != '') { - .card.card-default.d-none.d-lg-block.d-block.cardSpacer(id='pnlOne') + .row.text-center.d-flex.justify-content-center + div(class="col-lg-2 col-lg-offset-" + settings.paneloffset) + - if(settings.panel1 != '') { + .card.card-default.d-none.d-lg-block.d-block.cardSpacer(id='pnlOne') + - } + - if(settings.panel2 != '') { + .col-lg-2 + .card.card-default.d-none.d-lg-block.d-block.cardSpacer(id='pnlTwo') - } - - if(settings.panel2 != '') { + - if(settings.panel3 != '') { + .col-lg-2 + .card.card-default.d-none.d-lg-block.d-block.cardSpacer(id='pnlThree') + - } + - if(settings.panel4 != '') { + .col-lg-2 + .card.card-default.d-none.d-lg-block.d-block.cardSpacer(id='pnlFour') + - } + - if(settings.panel5 != '') { .col-lg-2 - .card.card-default.d-none.d-lg-block.d-block.cardSpacer(id='pnlTwo') - - } - - if(settings.panel3 != '') { - .col-lg-2 - .card.card-default.d-none.d-lg-block.d-block.cardSpacer(id='pnlThree') - - } - - if(settings.panel4 != '') { - .col-lg-2 - .card.card-default.d-none.d-lg-block.d-block.cardSpacer(id='pnlFour') - - } - - if(settings.panel5 != '') { - .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') - #index-search.form-group.d-flex.justify-content-center - input.form-control(type='text', name='search', placeholder=settings.locale.ex_search_message, style='min-width:80%;margin-right:5px;') - button.btn.btn-success(type='submit') #{settings.locale.ex_search_button} - block content + .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') + #index-search.form-group.d-flex.justify-content-center + input.form-control(type='text', name='search', placeholder=settings.locale.ex_search_message, style='min-width:80%;margin-right:5px;') + button.btn.btn-success(type='submit') #{settings.locale.ex_search_button} + block content 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