Add sticky footer

This commit is contained in:
Mathieu Magnin 2017-07-17 14:52:09 +02:00
parent 7a0d6108e1
commit f0777e166f
4 changed files with 40 additions and 19 deletions

View file

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

View file

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

View file

@ -7,6 +7,14 @@ footer {
@include vertical-padding(72px); @include vertical-padding(72px);
background-color: $light-grey; background-color: $light-grey;
border-top: 1px solid $border-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 { .footer-columns {

View file

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