Affix the footer to the bottom of the screen

Fixes #2661
samvera-deprecated · Jan 11, 2017 · 5c2ca88 · 5c2ca88
1 parent 8cf1f05
commit 5c2ca88
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 2 deletions.
diff --git a/app/assets/stylesheets/sufia/_footer.scss b/app/assets/stylesheets/sufia/_footer.scss
@@ -0,0 +1,30 @@
+// Styles below keep footer at bottom of viewport
+html {
+  position: relative;
+  min-height: 100%;
+}
+
+body {
+  margin-bottom: $footer-height + $footer-top-margin;
+}
+
+.site-footer {
+  margin-top: $footer-top-margin;
+  padding: 10px;
+
+  // Styles below keep footer at bottom of viewport
+  position: absolute;
+  bottom: 0;
+  height: $footer-height;
+  width: 100%;
+}
+
+@media (max-width: $screen-sm) {
+  // make more room in the footer for mobile devices
+  body {
+    margin-bottom: 2 * $footer-height + $footer-top-margin;
+  }
+  .site-footer {
+    height: 2 * $footer-height;
+  }
+}
diff --git a/app/assets/stylesheets/sufia/_sufia.scss b/app/assets/stylesheets/sufia/_sufia.scss
@@ -8,7 +8,8 @@
         'sufia/home-page', 'sufia/featured', 'sufia/usage-stats', 'sufia/catalog',
         'sufia/buttons', 'sufia/tinymce', 'sufia/proxy-rights', 'sufia/file-show',
         'sufia/work-show', 'sufia/modal', 'sufia/form', 'sufia/form-progress',
-        'sufia/fixedsticky', 'sufia/file_upload', 'sufia/representative-media';
+        'sufia/fixedsticky', 'sufia/file_upload', 'sufia/representative-media',
+        'sufia/footer';
 @import 'sharing_buttons';
 
 /* This class is to workaround an issue in which Bootstrap requires a div to display a tooltip
@@ -24,3 +25,4 @@
   display: inline-block;
 }
 
+
diff --git a/app/assets/stylesheets/sufia/_variables.scss b/app/assets/stylesheets/sufia/_variables.scss
@@ -12,3 +12,6 @@ $navbar-transparent-link-active-bg: rgba(255, 255, 255, 0.2) !default;
 $title-height: 75px !default;
 $marketing-text-color: $gray-darker !important;
 $marketing-text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1) !important;
+
+$footer-top-margin: 3 * $padding-small-vertical !default;
+$footer-height: 118px !default;
diff --git a/app/views/shared/_footer.html.erb b/app/views/shared/_footer.html.erb
@@ -1,4 +1,4 @@
-<footer class="navbar navbar-inverse">
+<footer class="navbar navbar-inverse site-footer">
   <div class="container-fluid">
     <div class="navbar-text text-left">
         <p>A service of <a href="http://projecthydra.org/" class="navbar-link" target="_blank">Project Hydra</a>.</p>