sticky footer flexbox

18F · Mar 21, 2016 · 30850a1 · 30850a1
1 parent a40a64b
commit 30850a1
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 13 deletions.
diff --git a/forecast-admin/forecast/opportunities/templates/404.html b/forecast-admin/forecast/opportunities/templates/404.html
@@ -2,7 +2,7 @@
 
 {% block content %}
 <section class="error-page usa-grid-full">
-	<h1 class="error-page-header">404</h1>
+	<h1 class="error-page-hero">404</h1>
 	<h2 class="error-page-header">:/</h2>
 	<p>The page you are looking for appears to be moved, deleted, or does not exist.</p>
 	<a href="/">Return to all contract opportunities <icon class="fa fa-angle-right"></icon></a>

diff --git a/forecast-admin/forecast/opportunities/templates/500.html b/forecast-admin/forecast/opportunities/templates/500.html
@@ -2,7 +2,7 @@
 
 {% block content %}
 <section class="error-page usa-grid-full">
-	<h1 class="error-page-header">500</h1>
+	<h1 class="error-page-hero">500</h1>
 	<h2 class="error-page-header">This is a bit awkward</h2>
 	<p>Something went wrong on our end. Try refreshing the page or you can view <a href="/">all contract opportunities <icon class="fa fa-angle-right"></icon></a></p>
 </section>

diff --git a/forecast-admin/forecast/static/admin/css/base.css b/forecast-admin/forecast/static/admin/css/base.css
@@ -47,6 +47,13 @@ body {
   height: 100%;
 }
 
+#content {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+}
+
 footer {
   -webkit-box-flex: 0;
   -webkit-flex: none;
@@ -1229,10 +1236,6 @@ table#change-history tbody th {
 }
 
 #content {
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
   padding: 20px 40px;
 }
 

diff --git a/forecast-admin/forecast/static/assets/_scss/blocks/_error-pages.scss b/forecast-admin/forecast/static/assets/_scss/blocks/_error-pages.scss
@@ -2,6 +2,12 @@
   text-align: center;
 }
 
-.error-page .error-page-header {
+.error-page .error-page-header,
+.error-page .error-page-hero {
   margin: 0;
 }
+
+.error-page .error-page-hero {
+  font-size: rem(70px);
+  font-weight: $font-normal;
+}
diff --git a/forecast-admin/forecast/static/assets/_scss/components/_footer.scss b/forecast-admin/forecast/static/assets/_scss/components/_footer.scss
@@ -1,3 +1,10 @@
+footer {
+  -webkit-box-flex: 0;
+  -webkit-flex: none;
+  -ms-flex: none;
+  flex: none;
+}
+
 .usa-footer {
   .usa-unstyled-list {
     display: block;

diff --git a/forecast-admin/forecast/static/assets/_scss/core/_base.scss b/forecast-admin/forecast/static/assets/_scss/core/_base.scss
@@ -10,6 +10,16 @@ html {
 
 body {
   background-color: #ffffff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: 100%;
 }
 
 .lt-ie9 {

diff --git a/forecast-admin/forecast/static/assets/_scss/layout/_grid-overrides.scss b/forecast-admin/forecast/static/assets/_scss/layout/_grid-overrides.scss
@@ -16,5 +16,10 @@ footer .usa-grid {
 
 .content-wrapper {
   padding-top: ($base-padding * 2);
-  min-height: rem(500px);
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
 }
+
+
diff --git a/forecast-admin/forecast/static/assets/css/main.css b/forecast-admin/forecast/static/assets/css/main.css
diff --git a/forecast-admin/forecast/static/assets/css/main.css.map b/forecast-admin/forecast/static/assets/css/main.css.map