fix footer css when the locale links are visible

2 files changed, 30 insertions, 20 deletions

diff --git a/app/assets/stylesheets/leap.scss b/app/assets/stylesheets/leap.scss
index 35f0ed4..dddcc1a 100644
--- a/app/assets/stylesheets/leap.scss
+++ b/app/assets/stylesheets/leap.scss
@@ -243,7 +243,7 @@ input, textarea {
 // http://getbootstrap.com/examples/sticky-footer/
 //
 
-$footer-height: 60px;
+$footer-height: 100px;
 $footer-border-width: 1px;
 $footer-gutter: 20px; // vertical gap above footer
 $footer-combined: $footer-height + $footer-border-width + $footer-gutter;
@@ -269,22 +269,30 @@ html, body {
 #footer {
   padding-top: $footer-gutter;
   height: $footer-height - $footer-border-width;
+  display: table;
+  width: 100%;
+  .row {
+    height: $footer-height/2;
+    display: table-row;
+    .wrap-text {
+      vertical-align: middle;
+      text-align: center;
+      display: table-cell;
+    }
+  }
   .locales {
-    text-align: center;
-    margin-bottom: 15px;
     a {
       padding: 4px;
       &.active {
         font-weight: bold;
-        background-color: #eee;
+        background-color: #333;
+        color: white;
         border-radius: 4px;
       }
     }
   }
-  .full-height {
-    text-align: center;
-    line-height: $footer-height - $footer-border-width;
-    border-top: $footer-border-width solid darken($footer-color, 10%);
+  .links {
+    // border-top: $footer-border-width solid darken($footer-color, 10%);
     background-color: $footer-color;
     a {
       color: $black;
diff --git a/app/views/layouts/_footer.html.haml b/app/views/layouts/_footer.html.haml
index f502ddb..58f0551 100644
--- a/app/views/layouts/_footer.html.haml
+++ b/app/views/layouts/_footer.html.haml
@@ -1,13 +1,15 @@
 - if CommonLanguages.available.size > 1
-  .locales
-    = locales_links
-.full-height
-  = link_to icon('home') + t(:home), home_path
-  = link_to icon('eye-close') + t(:privacy_policy), privacy_policy_path
-  = link_to icon('file') + t(:terms_of_service), terms_of_service_path
-  - if lookup_context.exists?('pages/about')
-    = link_to icon('info-sign') + t(:about), about_path
-  - if lookup_context.exists?('pages/contact')
-    = link_to icon('comment') + t(:contact), contact_path
-  - if paid_service_level?
-    = link_to icon('shopping-cart') + t(:pricing), pricing_path
+  .locales.row
+    .wrap-text
+      = locales_links
+.links.row
+  .wrap-text
+    = link_to icon('home') + t(:home), home_path
+    = link_to icon('eye-close') + t(:privacy_policy), privacy_policy_path
+    = link_to icon('file') + t(:terms_of_service), terms_of_service_path
+    - if lookup_context.exists?('pages/about')
+      = link_to icon('info-sign') + t(:about), about_path
+    - if lookup_context.exists?('pages/contact')
+      = link_to icon('comment') + t(:contact), contact_path
+    - if paid_service_level?
+      = link_to icon('shopping-cart') + t(:pricing), pricing_path