added tabs to Report a problem page

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

3 files changed, 75 insertions, 7 deletions

diff --git a/templates/web/fixmystreet/around/display_location.html b/templates/web/fixmystreet/around/display_location.html
index ec4b67269..7010ff93e 100755
--- a/templates/web/fixmystreet/around/display_location.html
+++ b/templates/web/fixmystreet/around/display_location.html
@@ -89,18 +89,18 @@
 
 
         <section class="full-width">
-            <menu id="problems-nav">
+            <menu id="problems-nav" class="tab-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 id="problems-on-the-map" class="issue-list-a">
+            <ul id="problems-on-the-map" class="issue-list-a tab">
                 [% INCLUDE "around/on_map_list_items.html" %]
             </ul>
 
-            <ul id="problems-nearby" class="issue-list-a">
+            <ul id="problems-nearby" class="issue-list-a tab">
                 [% INCLUDE "around/around_map_list_items.html" %]
             </ul>
         </section>
diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss
index 46b28a22f..2fc7f6940 100644
--- a/web/cobrands/fixmystreet/base.scss
+++ b/web/cobrands/fixmystreet/base.scss
@@ -637,13 +637,37 @@ a:hover.rap-notes-trigger {
 
 //report a problem tabs
 #problems-nav {
-  padding:0;
+  padding:0 1em;
   overflow:hidden;
   border-bottom:0.25em solid #333;
   ul {
-    @include list-reset;
+    @include list-reset-soft;
+    display:table;
+    width:100%;
     li {
-
+      display:table-cell;
+      border-right:0.25em solid #fff;
+      &:last-child {
+        border-right:none;
+      }
+      a {
+        display:block;
+        background:#e2e2e2;
+        color:#333;
+        padding:1em;
+        text: {
+          transform:uppercase;
+          align:center;
+        }
+        &:hover {
+          text-decoration:none;
+          background:#e6e6e6;
+        }
+        &.active {
+          background:#333;
+          color:#fff;
+        }
+      }
     }
   }
 }
diff --git a/web/js/fixmystreet.js b/web/js/fixmystreet.js
index c382a9645..7a512fdf5 100644
--- a/web/js/fixmystreet.js
+++ b/web/js/fixmystreet.js
@@ -30,7 +30,13 @@ function form_category_onchange() {
     });
 }
 
-
+/*
+ * general height fixing function
+ *
+ * elem1: element to check against
+ * elem2: target element
+ * offest: this will be added (if present) to the final value, useful for height errors
+ */
 function heightFix(elem1, elem2, offset){
     var h1 = $(elem1).height(),
         h2 = $(elem2).height();
@@ -42,6 +48,27 @@ function heightFix(elem1, elem2, offset){
     }
 }
 
+
+/*
+ * very simple tab function
+ *
+ * elem: trigger element, must have an href attribute (so probably needs to be an <a>)
+ */
+function tabs(elem)
+{
+    var target = elem.attr('href');
+    if(!$(target).hasClass('open'))
+    {
+        //toggle class on nav
+        $('.tab-nav .active').removeClass('active');
+        elem.addClass('active');
+        //hide / show the right tab
+        $('.tab.open').removeClass('open').hide();
+        $(target).addClass('open').show();
+    }
+}
+
+
 $(function(){
     if(Modernizr.mq('only screen and (max-width:48em)')) {
         $('html').addClass('mobile');
@@ -235,4 +262,21 @@ $(function(){
         $('.mobile .content').show();
         $('.rap-notes').hide();
     });
+
+
+    /*
+     * Tabs
+     */
+    //make initial tab active
+    $('.tab-nav a:first').addClass('active');
+    $('.tab:first').addClass('open');
+    
+    //hide other tabs
+    $('.tab').not('.open').hide();
+    
+    //set up click event
+    $(".tab-nav").on('click', 'a', function(e){
+        e.preventDefault();
+        tabs($(this));
+    });
 });
\ No newline at end of file