Add new settings for sticky header/footer

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);

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";

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;
 }

settings.json.template

@@ -27,6 +27,11 @@
   // 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)

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