start of the report a problem page

Signed-off-by: Josh Angell <josh@supercooldesign.co.uk>

4 files changed, 64 insertions, 21 deletions

diff --git a/templates/web/fixmystreet/around/around_map_list_items.html b/templates/web/fixmystreet/around/around_map_list_items.html
index eb4a14d2d..e1c81b943 100644
--- a/templates/web/fixmystreet/around/around_map_list_items.html
+++ b/templates/web/fixmystreet/around/around_map_list_items.html
@@ -5,11 +5,16 @@
         
         <li>
             <a href="[% c.uri_for('/report', p.problem.id ) %]">
-                <h4>[% p.problem.title | html %]</h4>
-                <small>[% prettify_epoch( p.problem.confirmed_local.epoch, 1 ) %], [% dist %]km</small>
-                [% IF p.problem.is_fixed %]
-                    <small>[% loc('(fixed)') %]</small>
-                [% END %]
+                <div class="text">
+                    <h4>[% p.problem.title | html %]</h4>
+                    <small>[% prettify_epoch( p.problem.confirmed_local.epoch, 1 ) %], [% dist %]km</small>
+                    [% IF p.problem.is_fixed %]
+                        <small>[% loc('(fixed)') %]</small>
+                    [% END %]
+                </div>
+                <div class="img">
+                    <img alt="" height="" width="100px" src="/photo?id=[%p.id%]">
+                </div>
             </a>
         </li>
     [% END %]
diff --git a/templates/web/fixmystreet/around/display_location.html b/templates/web/fixmystreet/around/display_location.html
index b247ae1da..ec4b67269 100755
--- a/templates/web/fixmystreet/around/display_location.html
+++ b/templates/web/fixmystreet/around/display_location.html
@@ -89,15 +89,18 @@
 
 
         <section class="full-width">
-            <h4 class="static-with-rule">[% loc('Problems on the map') %]</h4>
+            <menu id="problems-nav">
+                <ul>
+                    <li><a href="#problems-on-the-map">[% loc('Problems on the map') %]</a></li>
+                    <li><a href="#problems-nearby">[% loc( 'Problems nearby' ) %]</a></li>
+                </ul>
+            </menu>
             
-            <ul class="issue-list-a">
+            <ul id="problems-on-the-map" class="issue-list-a">
                 [% INCLUDE "around/on_map_list_items.html" %]
             </ul>
 
-            <h4 class="static-with-rule">[% loc( 'Problems nearby' ) %]</h4>
-            
-            <ul class="issue-list-a">
+            <ul id="problems-nearby" class="issue-list-a">
                 [% INCLUDE "around/around_map_list_items.html" %]
             </ul>
         </section>
diff --git a/templates/web/fixmystreet/around/on_map_list_items.html b/templates/web/fixmystreet/around/on_map_list_items.html
index 046045069..724cb0e17 100644
--- a/templates/web/fixmystreet/around/on_map_list_items.html
+++ b/templates/web/fixmystreet/around/on_map_list_items.html
@@ -2,11 +2,16 @@
     [% FOREACH p IN on_map %]
         <li>
             <a href="[% c.uri_for('/report', p.id ) %]">
-                <h4>[% p.title | html %]</h4>
-                <small>[% prettify_epoch( p.confirmed_local.epoch, 1 ) %]</small>
-                [% IF p.is_fixed %]
-                    <small>[% loc('(fixed)') %]</small>
-                [% END %]
+                <div class="text">
+                    <h4>[% p.title | html %]</h4>
+                    <small>[% prettify_epoch( p.confirmed_local.epoch, 1 ) %]</small>
+                    [% IF p.is_fixed %]
+                        <small>[% loc('(fixed)') %]</small>
+                    [% END %]
+                </div>
+                <div class="img">
+                    <img alt="" height="" width="100px" src="/photo?id=[%p.id%]">
+                </div>
             </a>
         </li>
     [% END %]
diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss
index 75ec856eb..46b28a22f 100644
--- a/web/cobrands/fixmystreet/base.scss
+++ b/web/cobrands/fixmystreet/base.scss
@@ -527,7 +527,7 @@ a:hover.button-left {
 
 .issue-list{
   margin: 0 0 1em 0;
-  padding: 0px;
+  padding: 0;
   border-bottom: 0.25em solid $primary;
   li{
     list-style: none;
@@ -558,7 +558,7 @@ a:hover.button-left {
 
 .issue-list-a {
   margin: 0 0 1em 0;
-  padding: 0px;
+  padding: 0;
   border-bottom: 0.25em solid $primary;
   li {
     list-style: none;
@@ -566,17 +566,35 @@ a:hover.button-left {
     padding:0;
     a {
       margin: 0.25em 0 0 0;
-      padding: 0.5em 1em;
-      display:block;
+      padding: 0 1em;
+      display:table;
       background: #f6f6f6;
       color:#222222;
+      width:100%;
       &:hover {
         text-decoration:none;
         color:#222222;
         background:#e6e6e6;
       }
-      h4 {
-        margin:0;
+      .text,
+      .img {
+        display:table-cell;
+        vertical-align:top;
+      }
+      .img {
+        text-align:right;
+        img {
+          margin:0 -1em 0 0.5em;
+        }
+      }
+      .text {
+        padding:0.5em 0;
+        h4 {
+          margin:0;
+        }
+        small {
+          color:#808080;
+        }
       }
     }
     >p {
@@ -617,6 +635,18 @@ a:hover.rap-notes-trigger {
   margin:1em 0;
 }
 
+//report a problem tabs
+#problems-nav {
+  padding:0;
+  overflow:hidden;
+  border-bottom:0.25em solid #333;
+  ul {
+    @include list-reset;
+    li {
+
+    }
+  }
+}
 
 // this is a bit of a hack to get some differentation between desk and mobile
 .desk-only {