Homepage mobile view mainly done

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

5 files changed, 214 insertions, 64 deletions

diff --git a/templates/web/fixmystreet/footer.html b/templates/web/fixmystreet/footer.html
index e275a3b9b..e9e6ba07c 100644
--- a/templates/web/fixmystreet/footer.html
+++ b/templates/web/fixmystreet/footer.html
@@ -26,26 +26,6 @@
             </div>
         </div>
 
-<!-- <div id="footer">
-
-    <p><a href="/contact">[% loc("Contact FixMyStreet") | replace(' ', '&nbsp;') %]</a>
-    <br>Mobile apps:
-        <a href="http://itunes.apple.com/gb/app/fixmystreet/id297456545">iPhone</a>,
-        <a href="http://itunes.apple.com/gb/app/streetreport/id371891859">StreetReport (iPhone)</a>
-    | <a href="https://market.android.com/details?id=com.android.fixmystreet">Android</a>
-    | <a href="http://store.ovi.com/content/107557">Nokia</a>
-    </p>
-      
-    <p>[% loc('Are you from a <strong>council</strong>? Would you like better integration with FixMyStreet?') %]
-      <a href="http://www.mysociety.org/fixmystreet-for-local-council-websites/">[% loc('Find out about FixMyStreet for councils') %]</a>.
-    </p>
-  
-    <p>[% loc('Are you a <strong>developer</strong>? Would you like to contribute to FixMyStreet?') %]
-    [% loc('Our code is open source and <a href="http://github.com/mysociety/fixmystreet">available on GitHub</a>.') %]
-    </p>
-
-</div> -->
-
 <!-- [% INCLUDE 'debug_footer.html' %] -->
     </div> <!-- .wrapper -->
 </body>
diff --git a/templates/web/fixmystreet/index.html b/templates/web/fixmystreet/index.html
index 4b7f8da52..2022ae716 100644
--- a/templates/web/fixmystreet/index.html
+++ b/templates/web/fixmystreet/index.html
@@ -4,60 +4,53 @@
     <p class="error">[% error %]</p>
 [% END %]
 
-<p id="expl">
-    [% 
-        subhead
-            = c.cobrand.moniker == 'southampton'
-            ? '(like graffiti, fly tipping, or broken paving slabs)'
-            : loc('(like graffiti, fly tipping, broken paving slabs, or street lighting)');
-    %]
-    
-    <strong>[% loc('Report, view, or discuss local problems') %]</strong>
-    
-    [% IF subhead != ' ' %]
-        <small>[% subhead %]</small>
-    [% END %]
-</p>
 
-[% TRY %][% INCLUDE 'front/news.html' %][% CATCH file %][% END %]
+<div id="front-main">
+    <h1>[% loc('Report, view, or discuss local problems') %]</h1>
 
-[%
-    question
-        =  c.cobrand.enter_postcode_text()
-        || loc("Enter a nearby GB postcode, or street name and area");
-%]
+    <h2>[% loc('(like graffiti, fly tipping, broken paving slabs, or street lighting)') %]</h2>
 
-<form action="[% c.uri_for('/around') %]" method="get" name="postcodeForm" id="postcodeForm">
-    <label for="pc">[% question %]:</label>
-    <span><input type="text" name="pc" value="" id="pc" size="10" maxlength="200">
-    <input type="submit" value="[% loc('Go') %]" id="submit">
-    </span>
-</form>
+    [%
+        question
+            =  c.cobrand.enter_postcode_text()
+            || loc("Enter a nearby GB postcode, or street name and area");
+    %]
 
-<div id="front_intro">
+    <form action="[% c.uri_for('/around') %]" method="get" name="postcodeForm" id="postcodeForm">
+        <label for="pc">[% question %]:</label>
+        <div>
+            <input type="text" name="pc" value="" id="pc" size="10" maxlength="200" placeholder="e.g. ‘B1’ or ‘Hockley Birmingham’">
+            <input type="submit" value="[% loc('Go') %]" id="submit">
+        </div>
+    </form>
+</div>
 
+
+<div id="front-howto">
     <h2>[% loc('How to report a problem') %]</h2>
     
-    <ol>
+    <ol class="big-numbers">
         <li>[% question %]</li>
         <li>[% loc('Locate the problem on a map of the area') %]</li>
         <li>[% loc('Enter details of the problem') %]</li>
         <li>[% loc('We send it to the council on your behalf') %]</li>
     </ol>
     
+    <section class="full-width">
     [% INCLUDE "front/stats.html" %]
     [% TRY %][% INCLUDE "front/tips.html" %][% CATCH file %][% END %]
-
+    </section>
 </div>
 
+
+
 [% 
     recent_photos = c.cobrand.recent_photos(3);
     probs         = c.cobrand.recent();
 %]
 
-
 [% IF probs.size || recent_photos.size %]
-<div id="front_recent">
+<div id="front-recently">
     <h2>[% loc('Recently reported problems') %]</h2>
     [% IF recent_photos.size %]
         <p id="front_photos">
@@ -69,18 +62,48 @@
     [% END %]
 
     [% IF probs.size %]
-
-    
-        <ul id="nearby_lists">
+    <section class="full-width">
+        <ul class="issue-list-a">
         [% FOREACH p IN probs %]
             <li>
-                <a href="/report/[% p.id %]">[% p.title | html %]</a>
-                <small>[% prettify_epoch( p.confirmed_local.epoch, 1 ) %]</small>
+                <a href="/report/[% p.id %]">
+                    <div class="text">
+                        <h4>[% p.title | html %]</h4>
+                        <small>[% prettify_epoch( p.confirmed_local.epoch, 1 ) %]</small>
+                    </div>
+                </a>
             </li>    
         [% END %]
         </ul>
+    </section>
     [% END %]
 </div>
 [% END %]
 
-[% INCLUDE 'footer.html' %]
+
+<div id="front-mobileapps">
+    <h2>Mobile apps</h2>
+
+    <ul>
+        <li><a href="http://itunes.apple.com/gb/app/fixmystreet/id297456545">iPhone</a></li>
+        <li><a href="http://itunes.apple.com/gb/app/streetreport/id371891859">iPhone Street Report</a></li>
+        <li><a href="https://market.android.com/details?id=com.android.fixmystreet">Android</a></li>
+        <li><a href="http://store.ovi.com/content/107557">Nokia</a></li>
+    </ul>
+    
+</div>
+
+<div id="">
+    <h4>[% loc('Are you a developer? Would you like to contribute to FixMyStreet?') %]</h4>
+    <p>[% loc('Our code is open source and <a href="http://github.com/mysociety/fixmystreet">available on GitHub</a>.') %]</p>
+
+    <h4>[% loc('Are you from a council? Would you like better integration with FixMyStreet?') %]</h4>
+    <p><a href="http://www.mysociety.org/fixmystreet-for-local-council-websites/">[% loc('Find out about FixMyStreet for councils') %]</a>.</p>
+</div>
+
+
+
+<!-- [% TRY %][% INCLUDE 'front/news.html' %][% CATCH file %][% END %] -->
+
+
+[% INCLUDE 'footer.html' %]
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss
index a87d9e7e9..404a9b73a 100644
--- a/web/cobrands/fixmystreet/base.scss
+++ b/web/cobrands/fixmystreet/base.scss
@@ -147,6 +147,32 @@ ol li {
   list-style:decimal;
 }
 
+ol.big-numbers {
+  padding: 0;
+  margin: 0;
+  counter-reset: li;
+  > li {
+    position: relative;
+    list-style: none;
+    padding:0 0 0 2.5em;
+    margin-bottom:2em;
+    &:before {
+      content: counter(li);
+      counter-increment: li;
+      position: absolute;
+      left: 0;
+      top:-0.2em;
+      color:#eeeeee;
+      line-height:1;
+      font: {
+        family: 'helvetica', 'arial', sans-serif;
+        weight:bold;
+        size:2.5em;
+      }
+    }
+  }
+}
+
 dl {
   margin: 0;
   padding: 0;
@@ -724,4 +750,125 @@ a:hover.rap-notes-trigger {
 // this is a bit of a hack to get some differentation between desk and mobile
 .desk-only {
   display:none !important;
+}
+
+
+
+/* Front page */
+#front-main {
+  text-align:center;
+  h1 {
+    
+  }
+  h2 {
+    font: {
+      style:italic;
+      family: 'helvetica', 'arial', sans-serif;
+      size:1.1875em;
+    }
+    color:#4d4d4d;
+  }
+  #postcodeForm {
+    @extend .full-width;
+    padding:1em;
+    background:$primary;
+    font-family: 'helvetica', 'arial', sans-serif;
+    label {
+      margin:0;
+    }
+    div {
+      display:table;
+      width:100%;
+      background:#fff;
+      border:1px solid #F3B11E;
+      input#pc {
+        display:table-cell;
+        margin:0;
+        padding:0.25em 2%;
+        width:82%;
+        border:none;
+        background:none;
+      }
+      input#submit {
+        display:table-cell;
+        border:none;
+        padding:0;
+        margin:0;
+        width:14%;
+        height:35px;
+        background:#000;
+        color:#fff;
+        text-transform:uppercase;
+        @include border-radius(0);
+      }
+    }
+  }
+  a#geolocate_link {
+    @include inline-block;
+    vertical-align:top;
+    background:#1a1a1a;
+    color:#C8C8C8;
+    padding:0.5em;
+    font: {
+      family: 'helvetica', 'arial', sans-serif;
+      size:0.8125em;
+    }
+    @include border-radius(0 0 0.25em 0.25em);
+    &:hover {
+      text-decoration:none;
+      background:#2a2a2a;
+    }
+  }
+}
+
+
+#front-howto {
+  #front_stats {
+    display:table;
+    width:100%;
+    background:$primary;
+    font-family: 'helvetica', 'arial', sans-serif;
+    div {
+      display:table-cell;
+      text-align:center;
+      padding:1em;
+      line-height:1.25em;
+      font: {
+        size:0.8125em;
+        weight:bold;
+      }
+      big {
+        display:block;
+        margin-bottom:0.5em;
+        font-size:1.5385em;
+      }
+    }
+  }
+}
+
+#front-recently {}
+
+#front-mobileapps {
+  @extend .full-width;
+  background:#333;
+  padding:1em;
+  @include box-shadow(inset rgba(0, 0, 0, 0.9) 0 0 8px);
+  h2 {
+    color:#fff;
+    margin-top:0;
+  }
+  ul {
+    @include list-reset-soft;
+    li {
+      border-bottom:1px solid #AFAFAF;
+      &:last-child {
+        border-bottom:none;
+      }
+      a {
+        display:block;
+        color:#fff;
+        padding:0.5em 0;
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/sprite.png b/web/cobrands/fixmystreet/images/sprite.png
index bd350d0e9..a72d754f8 100644
--- a/web/cobrands/fixmystreet/images/sprite.png
+++ b/web/cobrands/fixmystreet/images/sprite.png
diff --git a/web/js/fixmystreet.js b/web/js/fixmystreet.js
index 9cb48bb9d..19f1f0402 100644
--- a/web/js/fixmystreet.js
+++ b/web/js/fixmystreet.js
@@ -206,25 +206,25 @@ $(function(){
 
     // Geolocation
     if (geo_position_js.init()) {
-        $('#postcodeForm').append('<p id="geolocate_para">Or <a href="#" id="geolocate_link">locate me automatically</a>').css({ "padding-bottom": "0.5em" });
+        $('#postcodeForm').after('<a href="#" id="geolocate_link">&hellip; or locate me automatically</a>');
         $('#geolocate_link').click(function(e) {
             e.preventDefault();
             // Spinny thing!
-            $('#geolocate_para').append(' <img src="/i/flower.gif" alt="" align="bottom">');
+            $(this).append(' <img src="/i/flower.gif" alt="" align="bottom">');
             geo_position_js.getCurrentPosition(function(pos) {
-                $('#geolocate_para img').remove();
+                $('img', this).remove();
                 var latitude = pos.coords.latitude;
                 var longitude = pos.coords.longitude;
                 location.href = '/around?latitude=' + latitude + ';longitude=' + longitude;
             }, function(err) {
-                $('#geolocate_para img').remove();
+                $('img', this).remove();
                 if (err.code == 1) { // User said no
                 } else if (err.code == 2) { // No position
-                    $('#geolocate_para').html("Could not look up location");
+                    $(this).html("Could not look up location");
                 } else if (err.code == 3) { // Too long
-                    $('#geolocate_para').html("No result returned");
+                    $('this').html("No result returned");
                 } else { // Unknown
-                    $('#geolocate_para').html("Unknown error");
+                    $('this').html("Unknown error");
                 }
             }, {
                 timeout: 10000