Add sticky footer

app/assets/stylesheets/new_design/_constants.scss

@@ -2,3 +2,6 @@ $page-width: 1040px;
 
 $default-spacer: 8px;
 $default-padding: 2 * $default-spacer;
+
+$footer-height: 267px;
+$footer-height-mobile: 531px;

app/assets/stylesheets/new_design/common.scss

@@ -10,6 +10,15 @@ body {
   line-height: 1.42857143;
 }
 
+.page-wrapper {
+  position: relative;
+  padding-bottom: $footer-height;
+
+  @media (max-width: 1000px) {
+    padding-bottom: $footer-height-mobile;
+  }
+}
+
 h1 {
   font-size: 36px;
   font-weight: bold;

app/assets/stylesheets/new_design/new_footer.scss

@@ -7,6 +7,14 @@ footer {
   @include vertical-padding(72px);
   background-color: $light-grey;
   border-top: 1px solid $border-grey;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: $footer-height;
+
+  @media (max-width: 1000px) {
+    height: $footer-height-mobile;
+  }
 }
 
 .footer-columns {

app/views/layouts/new_application.html.haml

@@ -18,25 +18,26 @@
     = stylesheet_link_tag "print", media: "print", "data-turbolinks-track": true
 
   %body
-    = render partial: "layouts/support_navigator_banner"
-    = render partial: "layouts/ie_lt_10"
-    #beta{ class:(Rails.env == "production" ? "" : "beta_staging") }
-      - if Rails.env == "production"
-        Beta
-      - else
-        Env Test
+    .page-wrapper
+      = render partial: "layouts/support_navigator_banner"
+      = render partial: "layouts/ie_lt_10"
+      #beta{ class:(Rails.env == "production" ? "" : "beta_staging") }
+        - if Rails.env == "production"
+          Beta
+        - else
+          Env Test
 
-    = render partial: "layouts/new_header"
-    = render partial: "layouts/flash_messages"
-    = yield
+      = render partial: "layouts/new_header"
+      = render partial: "layouts/flash_messages"
+      = yield
 
-    = render partial: "layouts/new_footer"
-    = render partial: "layouts/google_analytics"
-    = render partial: "layouts/mailjet_newsletter"
-    = render partial: "layouts/crisp"
+      = render partial: "layouts/new_footer"
+      = render partial: "layouts/google_analytics"
+      = render partial: "layouts/mailjet_newsletter"
+      = render partial: "layouts/crisp"
 
-    = javascript_include_tag "new_design/application", "data-turbolinks-eval": false
-    = yield :charts_js
-    - if Rails.env == "test"
-      %script{ type: "text/javascript" }
-        (typeof jQuery !== "undefined") && (jQuery.fx.off = true);
+      = javascript_include_tag "new_design/application", "data-turbolinks-eval": false
+      = yield :charts_js
+      - if Rails.env == "test"
+        %script{ type: "text/javascript" }
+          (typeof jQuery !== "undefined") && (jQuery.fx.off = true);