From baa0c8b56a24d7b8cf36dc498db147f0969f66c8 Mon Sep 17 00:00:00 2001 From: Kevin MacMartin Date: Thu, 26 Jan 2017 19:25:22 -0500 Subject: [PATCH] Replace the sticky footer with flexbox --- bower.json | 1 - gulpfile.js | 3 +-- resources/assets/js/app.js | 3 --- resources/assets/sass/app.scss | 12 +++++++++++- resources/views/layouts/base.blade.php | 10 ++++++---- 5 files changed, 18 insertions(+), 11 deletions(-) diff --git a/bower.json b/bower.json index 3d80d4e..f293b53 100644 --- a/bower.json +++ b/bower.json @@ -14,7 +14,6 @@ "simplemde": "~1.11.2", "datetimepicker": "~2.5.4", "SpinKit": "~1.2.5", - "jQuery.stickyFooter": "https://github.com/miWebb/jQuery.stickyFooter.git#~1.2.3", "bootstrap-sass": "^3.3.7", "list.js": "^1.4.1", "what-input": "^4.0.6" diff --git a/gulpfile.js b/gulpfile.js index 02279ef..ba3c0e4 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -33,8 +33,7 @@ const jsPublic = [ const jsPublicLibs = [ "bower_components/jquery/dist/jquery.js", "bower_components/bootstrap-sass/assets/javascripts/bootstrap.js", - "bower_components/what-input/dist/what-input.js", - "bower_components/jQuery.stickyFooter/assets/js/jquery.stickyfooter.js" + "bower_components/what-input/dist/what-input.js" ]; // javascript files for the dashboard diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js index 6a7d52a..2040c04 100644 --- a/resources/assets/js/app.js +++ b/resources/assets/js/app.js @@ -1,8 +1,5 @@ // run once the document is ready $(document).ready(function() { - $("footer").stickyFooter({ content: "#page-content" }); - $(window).on("load", function() { $(this).trigger("resize"); }); - switch (SiteVars.page) { case "": subscriptionFormInit(); diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss index 61db836..0ddc9f7 100644 --- a/resources/assets/sass/app.scss +++ b/resources/assets/sass/app.scss @@ -33,10 +33,20 @@ html { body { @include font-sans; width: 100%; - padding-top: $nav-height; color: $c-text; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-overflow-scrolling: touch; @media (max-width: $grid-float-breakpoint-max) { padding-top: $nav-height-mobile; } } + +#page-container { + display: flex; + min-height: 100vh; + padding-top: $nav-height; + flex-direction: column; + + #main-content { + flex: 1; + } +} diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php index e55a099..f5de55c 100644 --- a/resources/views/layouts/base.blade.php +++ b/resources/views/layouts/base.blade.php @@ -49,10 +49,12 @@ @yield('page-top') -
- @yield('content') -
+
+
+ @yield('content') +
- @yield('page-bottom') + @yield('page-bottom') +