Load in report details on around page via ajax.

Include URL changing, using history.pushState.
Show a larger marker icon for the selected report.
Make sure title is updated, and correct sub_map_links are shown.

The /report/new template is now wrapped in a <div id="side-form">
rather than <div id="side"> for consistency with the /around page,
which keeps display_all_reports_in_area() simpler, because it can
always assume "#side" means "list of reports".

1 files changed, 25 insertions, 0 deletions

diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 6fd2c6a7b..c5f9db467 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -995,6 +995,22 @@ input.final-submit {
   }
 }
 
+.problem-back {
+  display: block;
+  font-size: 1em;
+  line-height: 1.2em;
+  margin-bottom: 1em;
+  padding-bottom: 0.8em;
+  padding-#{$left}: 22px;
+  background: transparent url(/cobrands/fixmystreet/images/chevron-grey-#{$left}.svg) #{$left} 0 no-repeat;
+  background-size: 13px 16px;
+  border-bottom: 1px solid #eee;
+
+  &:link, &:visited, &:hover {
+    color: #666;
+  }
+}
+
 .problem-header {
   margin-bottom: 1em;
 }
@@ -1731,6 +1747,15 @@ table.nicetable {
     float: left; // float fallback for browsers that don't support flexbox
     flex: 1 0 auto;
 
+    @media(max-width: 400px){
+      // Shameful hack to stop the control expanding wider than the window
+      // on narrow devices (eg: 320px iPhone), which would cause horizontal
+      // scrolling, and clipped text on the new report page, for example.
+      // Flexbox will add the spacing back in anyway. Ideally we'd only apply
+      // this style if flexbox is supported, but there's no easy way to do that.
+      padding: 0.75em 0;
+    }
+
     &:hover, &:focus {
       background: #f3f3f3 linear-gradient(to bottom, #f9f9f9 0%, #e9e9e9 100%) 0 0 no-repeat;
     }