diff options
| -rw-r--r-- | templates/web/fixmystreet/index.html | 144 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/images/sprite.png | bin | 122438 -> 135470 bytes | |||
| -rw-r--r-- | web/cobrands/fixmystreet/layout.scss | 101 |
3 files changed, 172 insertions, 73 deletions
diff --git a/templates/web/fixmystreet/index.html b/templates/web/fixmystreet/index.html index 41067b26b..a63324d60 100644 --- a/templates/web/fixmystreet/index.html +++ b/templates/web/fixmystreet/index.html @@ -27,89 +27,89 @@ </div> </div> +<div class="front-tablewrapper"> + <div id="front-howto"> + <h2>[% loc('How to report a problem') %]</h2> + + <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> -<div id="front-howto"> - <h2>[% loc('How to report a problem') %]</h2> - - <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-recently"> - <h2>[% loc('Recently reported problems') %]</h2> - [% IF recent_photos.size %] - <p id="front_photos"> - [% FOREACH p IN recent_photos %] - <a href="/report/[% p.id %]"><img border="0" height="100" - src="/photo?tn=1;id=[% p.id %]" alt="[% p.title | html %]" title="[% p.title | html %]"></a> + [% + recent_photos = c.cobrand.recent_photos(3); + probs = c.cobrand.recent(); + %] + + [% IF probs.size || recent_photos.size %] + <div id="front-recently"> + <h2>[% loc('Recently reported problems') %]</h2> + +<!-- [% IF recent_photos.size %] + <p id="front_photos"> + [% FOREACH p IN recent_photos %] + <a href="/report/[% p.id %]"><img border="0" height="100" + src="/photo?tn=1;id=[% p.id %]" alt="[% p.title | html %]" title="[% p.title | html %]"></a> + [% END %] + </p> + [% END %] --> + + [% IF probs.size %] + <section class="full-width"> + <ul class="issue-list-a"> + [% FOREACH p IN probs %] + <li> + <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 %] - </p> - [% END %] - - [% IF probs.size %] - <section class="full-width"> - <ul class="issue-list-a"> - [% FOREACH p IN probs %] - <li> - <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> + </div> [% END %] </div> -[% END %] - -<div id="front-mobileapps"> - <h2>Mobile apps</h2> +<div class="front-tablewrapper bordered"> + <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> + <ul> + <li><a class="m-app-iphone" href="http://itunes.apple.com/gb/app/fixmystreet/id297456545">iPhone</a></li> + <li><a class="m-app-droid" href="https://market.android.com/details?id=com.android.fixmystreet">Android</a></li> + <li><a class="m-app-nokia" href="http://store.ovi.com/content/107557">Nokia</a></li> + <li><a class="m-app-iphone-streetreport" href="http://itunes.apple.com/gb/app/streetreport/id371891859">iPhone Street Report</a></li> + </ul> + </div> -<div id="front-ads"> - <ul> - <li> - <h4>[% loc('Are you a developer?') %]</h4> - <p>[% loc('Would you like to contribute to FixMyStreet? Our code is open source and <a href="http://github.com/mysociety/fixmystreet">available on GitHub</a>.') %]</p> - </li> - <li> - <h4>[% loc('Are you from a council?') %]</h4> - <p>[% loc('Would you like better integration with FixMyStreet? <a href="http://www.mysociety.org/fixmystreet-for-local-council-websites/">Find out about FixMyStreet for councils</a>.') %]</p> - </li> - </ul> + <div id="front-ads"> + <ul> + <li> + <h4>[% loc('Are you a developer?') %]</h4> + <p>[% loc('Would you like to contribute to FixMyStreet? Our code is open source and <a href="http://github.com/mysociety/fixmystreet">available on GitHub</a>.') %]</p> + </li> + <li> + <h4>[% loc('Are you from a council?') %]</h4> + <p>[% loc('Would you like better integration with FixMyStreet? <a href="http://www.mysociety.org/fixmystreet-for-local-council-websites/">Find out about FixMyStreet for councils</a>.') %]</p> + </li> + </ul> + </div> </div> - <!-- [% TRY %][% INCLUDE 'front/news.html' %][% CATCH file %][% END %] --> diff --git a/web/cobrands/fixmystreet/images/sprite.png b/web/cobrands/fixmystreet/images/sprite.png Binary files differindex 3c2ce9ee8..04044d1e9 100644 --- a/web/cobrands/fixmystreet/images/sprite.png +++ b/web/cobrands/fixmystreet/images/sprite.png diff --git a/web/cobrands/fixmystreet/layout.scss b/web/cobrands/fixmystreet/layout.scss index e013130f5..f53141135 100644 --- a/web/cobrands/fixmystreet/layout.scss +++ b/web/cobrands/fixmystreet/layout.scss @@ -274,7 +274,7 @@ body.frontpage { position:static; } .content { - padding-top:15em; + padding-top:12em; } } .nav-wrapper-2{ @@ -342,6 +342,105 @@ body.frontpage { } } +.front-tablewrapper { + display:table; + width:100%; + padding:1em 0; + >div { + display:table-cell; + width:50%; + } + #front-howto, + #front-mobileapps { + border-right:1em solid #fff; + } + #front-recently, + #front-ads { + border-left:1em solid #fff; + } + .full-width { + width:auto; + margin:0; + } +} +.bordered { + margin:0 -1em; + padding:0 1em; + width:auto; + border-top:0.25em solid $primary; +} + +#front-howto { + #front_stats { + background:none; + border-top:0.25em solid $primary; + padding-top:1em; + div { + big { + color:$primary; + font-size:3.2308em; + } + } + } +} + +#front-mobileapps { + background:none; + padding:0; + @include box-shadow(inset rgba(0, 0, 0, 0) 0 0 0); + h2 { + color:#222; + margin-top:0; + } + ul { + li { + border-bottom:none; + float:left; + margin:0 1em 1em 0; + a { + color:#222; + padding:0; + width: 96px; + height: 32px; + margin:0 auto; + text-indent: -999999px; + background: url(images/sprite.png) -12px -3610px no-repeat; + @include opacity(0.8); + &:hover { + @include opacity(1); + } + &.m-app-iphone { + background-position: -12px -3610px; + } + &.m-app-iphone-streetreport { + background-position: -12px -3678px; + height:50px; + } + &.m-app-droid { + background-position: -12px -3756px; + } + &.m-app-nokia { + background-position: -12px -3820px; + width:74px; + } + } + } + } +} + +#front-ads { + ul { + display:table; + li { + display:table-cell; + border-bottom:none; + &:last-child { + border-left:1.25em solid #fff; + } + } + } +} + |
