diff options
| -rw-r--r-- | templates/web/fixmystreet/footer.html | 20 | ||||
| -rw-r--r-- | templates/web/fixmystreet/index.html | 97 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/base.scss | 147 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/images/sprite.png | bin | 64860 -> 67024 bytes | |||
| -rw-r--r-- | web/js/fixmystreet.js | 14 |
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(' ', ' ') %]</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 Binary files differindex 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">… 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 |
