From cd42db616993bd40525f30b6e405d8b5bce2f1db Mon Sep 17 00:00:00 2001
From: Matthew Somerville <matthew-github@dracos.co.uk>
Date: Tue, 7 Jun 2016 09:53:27 +0100
Subject: Use ::after to fix map sidebar bottom padding.

This improves upon the previous commit to work with whatever contents
the map sidebar has (e.g. the list on an around page was also being cut
off before the end).
---
 web/cobrands/sass/_layout.scss | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

(limited to 'web')

diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index c288e1b8a..53d827f05 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -367,7 +367,7 @@ body.mappage {
   #{$left}: 0;
   bottom: 0;
   width: 27em; // width of sidebar, minus padding
-  padding: 1em 1em 3em 1em; // extra padding-bottom to clear the .shadow-wrap element
+  padding: 1em 1em 0 1em; // Bottom padding taken care of by ::after
   overflow: auto; // vertical scrollbar when list is taller than window
   background-color: #fff; // since no longer in the flow inside .content
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
@@ -380,6 +380,21 @@ body.mappage {
   }
 }
 
+// Firefox/IE and Chrome/Safari (e.g.) differ on where to clip overflowed
+// elements, one group clip outside padding, one clips inside. So using padding
+// in #map_sidebar works in Chrome/Safari but not in Firefox/IE. Instead, we
+// add some extra height using ::after.
+#map_sidebar::after {
+    content: "";
+    display: block;
+    height: 4em;
+}
+
+// IE<=8 does not support ::after
+.iel8 #map_sidebar {
+    padding-bottom: 4em;
+}
+
 #skip-this-step {
   display: block;
   color: inherit;
@@ -698,7 +713,7 @@ body.authpage {
   bottom: 0;
   width: 29em;
   overflow: hidden;
-  padding-top: 3em;
+  padding-top: 2em;
   ul#key-tools {
     border-top: 0.25em solid $primary;
     margin: 0;
@@ -771,10 +786,6 @@ body.authpage {
 #report-updates-data fieldset {
     margin-bottom: 0;
 }
-// Stop bottom of update form disappearing behind the #key-tools shadow
-#update_form {
-  padding-bottom: 4em;
-}
 
 .big-green-banner {
   top: auto;
-- 
cgit v1.2.3