More robust .with-notes CSS layout

When this commit is finished, modern browsers will have a far less
buggy layout on .with-notes pages. The main improvements are:

1. Simplified padding on .with-notes columns, allowing us to link to
   an individual column (eg: /inspect#side-report-secondary) without
   the browser scrolling down to jump over the #map_sidebar padding on
   desktop browsers. Making hash fragment scrolling work means we can
   automatically scroll Inspectors down to the Inspect form, when they
   click the Inspect button on mobile devices, without worrying about
   it breaking the desktop experience.
2. Flexible .with-notes column widths, meaning the layout no longer
   breaks when long sidebar content triggers a scrollbar and decreases
   the usable width of the sidebar. A predefined width for #side-report
   means we can make sure .shadow-wrap is the correct width, despite
   its fixed position taking it out of the document flow.

We make a trade-off on mid-size screens (768-960px), of hiding the map
to keep the two-column sidebar usable. Will revisit if it turns out
this causes problems later on.

5 files changed, 124 insertions, 48 deletions

diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss
index 16ec91244..955c341bf 100644
--- a/web/cobrands/oxfordshire/base.scss
+++ b/web/cobrands/oxfordshire/base.scss
@@ -69,6 +69,10 @@ dd, p {
   & > :last-child {
     margin-bottom: 0;
   }
+
+  .segmented-control + & {
+    margin-top: 1em;
+  }
 }
 
 .btn-primary {
diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
index 0a0b49fc2..22edca768 100644
--- a/web/cobrands/oxfordshire/layout.scss
+++ b/web/cobrands/oxfordshire/layout.scss
@@ -60,6 +60,8 @@ body.twothirdswidthpage {
     }
 }
 
+// TODO: This entire section is very suspicious
+//
 // To prevent font size larger interfering with the fixed Oxfordshire layout
 .container { width: auto; }
 body:not(.admin) .full-width { width: 464px; }
@@ -223,11 +225,10 @@ body.mappage {
 
 #map_sidebar {
   background-color: $oxfordshire_very_light_green;
+}
 
-  .with-actions & {
-    background-image: -webkit-linear-gradient(flip(90deg, 270deg), transparent 29em, #deead2 29em);
-    background-image: linear-gradient(flip(90deg, 270deg), transparent 29em, #deead2 29em);
-  }
+#side-inspect {
+  background-color: #deead2;
 }
 
 .item-list--reports {
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 08384f7c2..87cadefed 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1839,14 +1839,14 @@ table.nicetable {
 
 .segmented-control {
   @include clearfix();
-  display: flex; // fancy full-width buttons for browsers that support flexbox
+  @include flex-container(); // fancy full-width buttons for browsers that support flexbox
 
   & > * {
     display: block;
     text-align: center;
     border-right-width: 0; // avoid double border between items
     float: left; // float fallback for browsers that don't support flexbox
-    flex: 1 0 auto;
+    @include flex(1 0 auto, 1);
   }
 
   .btn {
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 3bf3612ae..e7ccd5b03 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -3,6 +3,10 @@
 $image-sprite: '../fixmystreet/images/sprite.png' !default;
 $layout_front_stats_color: $primary !default;
 $mappage-header-height: 4em !default;
+$mappage-sidebar-width: 29em;
+$mappage-sidebar-padding: 1em;
+$mappage-with-notes-sidebar-width: 44em;
+$mappage-with-actions-sidebar-width: 58em;
 
 .internal-link-fixed-header {
     display: block;
@@ -222,6 +226,10 @@ h1 {
   }
 }
 
+.full-width {
+  margin: 0 ($mappage-sidebar-padding * -1);
+}
+
 // map page - has fixed header and different styling
 body.mappage {
 
@@ -339,17 +347,17 @@ body.mappage.admin {
   top: $mappage-header-height;
   bottom: 0;
   #{$right}: 0;
-  #{$left}: 29em; // width of sidebar
+  #{$left}: $mappage-sidebar-width;
   width: auto; // stretch from right edge of sidebar to left edge of window
   height: auto; // stretch from bottom of header to bottom of window
   margin: 0;
 
   .with-notes & {
-    #{$left}: 44em;
+    #{$left}: $mappage-with-notes-sidebar-width;
   }
 
   .with-actions & {
-    #{$left}: 58em;
+    #{$left}: $mappage-with-actions-sidebar-width;
   }
 }
 
@@ -359,41 +367,92 @@ body.mappage.admin {
   top: $mappage-header-height;
   #{$left}: 0;
   bottom: 0;
-  width: 27em; // width of sidebar, minus padding
-  padding: 1em 1em 0 1em; // Bottom padding taken care of by ::after
+  width: ($mappage-sidebar-width - ($mappage-sidebar-padding * 2));
+  padding: $mappage-sidebar-padding;
   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);
 
   .with-notes & {
-    width: 42em;
+    width: ($mappage-with-notes-sidebar-width - ($mappage-sidebar-padding * 2));
     // TODO: Should have a bitmap image fallback for old browsers!!
     background-image: -webkit-linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em);
     background-image: linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em);
   }
 
   .with-actions & {
-    width: 58em;
-    background-image: -webkit-linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em);
-    background-image: linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em);
+    width: $mappage-with-actions-sidebar-width;
+    max-width: 100%; // Secondary column will squish on screens 768-960px
+    padding: 0; // Padding will be handled by children of .two_column_sidebar
+
+    &:after {
+      display: none; // 4em bottom spacing will be handled by children of .two_column_sidebar
+    }
   }
-}
 
-// 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.
-// https://bugzilla.mozilla.org/show_bug.cgi?id=748518
-#map_sidebar::after {
+  // Chrome/Safari count padding-bottom as part of the scrollable content in
+  // an overflow:scroll element (technically in contravention of the spec),
+  // whereas Firefox/IE render the padding outside the scrollable area.
+  // We need padding at the bottom of the sidebar, to stop .shadow-wrap from
+  // obscuring content at the bottom of the sidebar. So we use an :after
+  // pseudo-element instead of padding.
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=748518
+  &:after {
     content: "";
     display: block;
     height: 4em;
-    clear: both;
+  }
 }
 
-// IE<=8 does not support ::after
-.iel8 #map_sidebar {
-    padding-bottom: 4em;
+// This goes inside #map_sidebar, and establishes a flex container allowing
+// us to split the sidebar into two side-by-side columns.
+.two_column_sidebar {
+  @include flex-container();
+  @include flex-align(stretch); // children will fill entire height of this element
+  min-height: 100%; // this element will fill entire height of parent (#map_sidebar)
+
+  & > * {
+    // Columns should start at 50% width, and (eg: if scrollbars appear,
+    // reducing the available width), shrink down to less than 50%.
+    @include box-sizing(border-box);
+    @include flex(0 1 auto);
+    width: 50%;
+    padding: $mappage-sidebar-padding;
+
+    // Add extra space at the bottom of the sidebar columns, to stop
+    // .shadow-wrap obscuring text at the bottom of the sidebar.
+    &:after {
+      content: "";
+      display: block;
+      height: 4em;
+    }
+  }
+
+  // Default for children is to share the horizontal space equally amongst
+  // themselves. But to make sure that the edge of #side-report lines up
+  // with the edge of .shadow-wrap, we give #side-report a fixed width,
+  // and leave the other column to shrink to the remaining space.
+  #side-report {
+    width: $mappage-sidebar-width;
+    @include flex(0 0 auto);
+  }
+
+  // No flexbox in IE8, so we settle for floating the columns instead.
+  // They will no longer stretch the full height of the sidebar, and the
+  // width of #side-report will no longer match the width of .shadow-wrap
+  // when a scrollbar is present.
+  .iel8 & {
+    @include clearfix();
+
+    & > * {
+      float: left;
+      width: 50%;
+    }
+
+    #side-report {
+      width: 50%;
+    }
+  }
 }
 
 #skip-this-step {
@@ -693,12 +752,15 @@ body.authpage {
 
 // Wraps around #key-tools box - sticks to the bottom of the screen on desktop
 .shadow-wrap {
-  position:fixed;
-  z-index:10; //this is just to ensure anythign inside .content that has position set goes sites it
+  position: fixed;
+  z-index: 10; //this is just to ensure anythign inside .content that has position set goes sites it
   bottom: 0;
-  width: 29em;
+  #{$left}: 0;
+  margin: 0;
+  width: $mappage-sidebar-width;
   overflow: hidden;
   padding-top: 2em;
+
   ul#key-tools {
     border-top: 0.25em solid $primary;
     margin: 0;
@@ -757,13 +819,6 @@ body.authpage {
   }
 }
 
-// Old versions of IE don't have box-sixing, so negative margins leave a 2em gap.
-// We can set a fixed width instead, which might result in a horizontal scrollbar
-// while the drawer is opening. Quel dommage.
-.iel8 .shadow-wrap.static {
-    width: 29em;
-}
-
 // If JS is disabled, these are still CSS positioned, so don't want behind shining through.
 #report-share, #report-updates-data {
     background-color: #fff;
@@ -879,18 +934,9 @@ textarea.form-error {
   }
 }
 
-// Similar to .with-notes, there's a special version of the
-// report details page, that includes a secondary column.
-body.with-actions {
-  #side-report {
-    width: 27em;
-    float: #{$left};
-  }
-
-  #side-report-secondary {
-    width: 27em;
-    float: #{$right};
-  }
+// The coloured sidebar column on .with-actions pages.
+#side-inspect {
+  background-color: #E9F2FF;
 }
 
 // More general notes
diff --git a/web/cobrands/sass/_mixins.scss b/web/cobrands/sass/_mixins.scss
index f5bf1fbdf..6d4f523ce 100644
--- a/web/cobrands/sass/_mixins.scss
+++ b/web/cobrands/sass/_mixins.scss
@@ -139,3 +139,28 @@ $right: right;
     background: #{$prefix}linear-gradient($stops);
   }
 }
+
+@mixin flex-container() {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+@mixin flex($values, $values2009: 0) {
+  -webkit-box-flex: $values2009;
+  -moz-box-flex: $values2009;
+  -webkit-box-flex: $values;
+  -moz-box-flex: $values;
+  -webkit-flex: $values;
+  -ms-flex: $values;
+  flex: $values;
+}
+
+@mixin flex-align($alignment) {
+  -webkit-box-align: $alignment;
+  -webkit-align-items: $alignment;
+  -ms-flex-align: $alignment;
+  align-items: $alignment;
+}