feat: add optional footer, matching functionality of header (#813)

README.md

@@ -162,6 +162,12 @@ var CONFIG = {
     * (optional)
     */
    header: DEFAULT_HEADER,
+
+   /* footer: Matching functionality of header, but at the bottom instead of the top
+    * https://github.com/resoai/TileBoard/wiki/Header-configuration
+    * (optional)
+    */
+   footer: DEFAULT_HEADER,
 }
 ```
 

index.html.ejs

@@ -272,8 +272,14 @@
             <div ng-bind="group.title" class="group-title"></div>
             <div tile ng-repeat="item in group.items track by $index"></div>
          </div>
+
+         <div class="footer" ng-if="footer = getFooter(page)"
+              ng-include="'footer.html'"></div>
       </div>
    </div>
+
+   <div class="footer" ng-if="footer = getFooter()"
+        ng-include="'footer.html'"></div>
 </div>
 
 <div class="screensaver" ng-click="hideScreensaver()"
@@ -368,6 +374,17 @@
    </div>
 </script>
 
+<script type="text/ng-template" id="footer.html">
+   <div class="footer-content" ng-style="footer.styles">
+      <div class="footer--left">
+         <div header-item ng-repeat="item in footer.left track by $index"></div>
+      </div>
+      <div class="footer--right">
+         <div header-item ng-repeat="item in footer.right track by $index"></div>
+      </div>
+   </div>
+</script>
+
 </body>
 
 </html>

scripts/controllers/main.js

@@ -876,6 +876,14 @@ App.controller('Main', function ($scope, $timeout, $location, Api, tmhDynamicLoc
       return page.header;
    };
 
+   $scope.getFooter = function (page) {
+      if (!page) {
+         return CONFIG.footer;
+      }
+
+      return page.footer;
+   };
+
    function toSafeNumber (value) {
       return !isNaN(+value) ? +value : null;
    }

styles/main.less

@@ -343,7 +343,8 @@ body {
    }
 }
 
-.header {
+.header,
+.footer {
    position: absolute;
    z-index: 2;
    left: 0;
@@ -414,6 +415,22 @@ body {
    }
 }
 
+.footer {
+   bottom: 0px;
+   top: auto;
+}
+
+.-menu-bottom {
+   .footer {
+      bottom: @pageBottomPaddingSmall;
+   }
+   @media (min-width: 500px) {
+      .footer {
+         bottom: @pageBottomPaddingBig;
+      }
+   }
+}
+
 .-menu-left {
    &.-scrolled-horizontally {
       .pages-menu--scroll-indicator {

styles/themes.less

@@ -461,11 +461,17 @@
     .page {
       padding-bottom: @pageBottomPaddingSmall + 2 * @winphonePageMenuIconBorderSize;
     }
+    .footer {
+      bottom: @pageBottomPaddingSmall + 2 * @winphonePageMenuIconBorderSize;
+    }
 
     @media (min-width: 500px) {
       .page {
         padding-bottom: @pageBottomPaddingBig + 2 * @winphonePageMenuIconBorderSize;
       }
+      .footer {
+         bottom: @pageBottomPaddingBig + 2 * @winphonePageMenuIconBorderSize;
+       }
     }
   }
 }
@@ -647,6 +653,9 @@
     .page {
       padding-bottom: @pageBottomPadding;
     }
+    .footer {
+      bottom: @pageBottomPadding;
+    }
   }
 
   @sliderBorderRadius: 6px;