diff options
48 files changed, 3056 insertions, 2875 deletions
diff --git a/.gitignore b/.gitignore index 85b7ca758..055e181dd 100644 --- a/.gitignore +++ b/.gitignore @@ -19,6 +19,7 @@ tags /web/css/core.css /web/css/main.css /web/cobrands/fixmystreet/*.css +/web/cobrands/bromley/*.css /local /web/cobrands/fixmystreet/compass_app_log.txt diff --git a/bin/make_css b/bin/make_css index 70625b2f4..27cbec1b5 100755 --- a/bin/make_css +++ b/bin/make_css @@ -15,9 +15,10 @@ DIRECTORY=$(cd `dirname $0`/../web && pwd) # FixMyStreet uses compass compass compile --output-style compressed $DIRECTORY/cobrands/fixmystreet +compass compile --output-style compressed $DIRECTORY/cobrands/bromley # The rest are plain sass -for scss in `find $DIRECTORY -name "*.scss" -exec dirname {} \; | uniq | grep -v cobrands/fixmystreet` +for scss in `find $DIRECTORY -name "*.scss" -exec dirname {} \; | uniq | grep -v "cobrands/\(fixmystreet\|bromley\)"` do sass --scss --update --style compressed $scss done diff --git a/bin/populate_bing_cache b/bin/populate_bing_cache index a3bef6759..17c8911d0 100755 --- a/bin/populate_bing_cache +++ b/bin/populate_bing_cache @@ -9,6 +9,8 @@ use Data::Dumper; use FixMyStreet::App; use FixMyStreet::Geocode::Bing; +my $bing_culture = 'en-GB'; + my $reports = FixMyStreet::App->model('DB::Problem')->search( { geocode => undef, @@ -46,7 +48,7 @@ while ( my $report = $reports->next ) { next if $report->geocode; my $j = FixMyStreet::Geocode::Bing::reverse( $report->latitude, - $report->longitude ); + $report->longitude, $bing_culture ); $report->geocode($j); $report->update; diff --git a/perllib/Catalyst/Plugin/Session/State/Cookie.pm b/perllib/Catalyst/Plugin/Session/State/Cookie.pm index c4b61123b..ead8be38d 100644 --- a/perllib/Catalyst/Plugin/Session/State/Cookie.pm +++ b/perllib/Catalyst/Plugin/Session/State/Cookie.pm @@ -50,6 +50,9 @@ sub update_session_cookie { sub cookie_is_rejecting { my ( $c, $cookie ) = @_; + # Don't output cookie for JS files. mySociety addition + return 1 if substr($c->request->path, -3) eq '.js'; + if ( $cookie->{path} ) { return 1 if index '/'.$c->request->path, $cookie->{path}; } diff --git a/perllib/FixMyStreet/App/Controller/My.pm b/perllib/FixMyStreet/App/Controller/My.pm index 60e9dd09f..3de83b265 100644 --- a/perllib/FixMyStreet/App/Controller/My.pm +++ b/perllib/FixMyStreet/App/Controller/My.pm @@ -30,9 +30,16 @@ sub my : Path : Args(0) { my $pins = []; my $problems = {}; - my $rs = $c->user->problems->search( { + + my $params = { state => [ FixMyStreet::DB::Result::Problem->visible_states() ], - }, { + }; + $params = { + %{ $c->cobrand->problems_clause }, + %$params + } if $c->cobrand->problems_clause; + + my $rs = $c->user->problems->search( $params, { order_by => { -desc => 'confirmed' }, rows => 50 } )->page( $p_page ); diff --git a/perllib/FixMyStreet/App/Controller/Report.pm b/perllib/FixMyStreet/App/Controller/Report.pm index 59e3a4410..afe180c29 100644 --- a/perllib/FixMyStreet/App/Controller/Report.pm +++ b/perllib/FixMyStreet/App/Controller/Report.pm @@ -51,7 +51,7 @@ sub display : Path('') : Args(1) { return $c->res->redirect( $c->uri_for($1), 301 ); } - $c->forward('load_problem_or_display_error', [ $id ] ); + $c->forward( 'load_problem_or_display_error', [ $id ] ); $c->forward( 'load_updates' ); $c->forward( 'format_problem_for_display' ); } @@ -88,7 +88,24 @@ sub load_updates : Private { { order_by => 'confirmed' } ); - $c->stash->{updates} = $updates; + my $questionnaires = $c->model('DB::Questionnaire')->search( + { + problem_id => $c->stash->{problem}->id, + whenanswered => { '!=', undef }, + old_state => 'confirmed', new_state => 'confirmed', + }, + { order_by => 'whenanswered' } + ); + + my @combined; + while (my $update = $updates->next) { + push @combined, [ $update->confirmed, $update ]; + } + while (my $update = $questionnaires->next) { + push @combined, [ $update->whenanswered, $update ]; + } + @combined = map { $_->[1] } sort { $a->[0] <=> $b->[0] } @combined; + $c->stash->{updates} = \@combined; return 1; } diff --git a/perllib/FixMyStreet/App/Controller/Reports.pm b/perllib/FixMyStreet/App/Controller/Reports.pm index e7620f755..9fb72121e 100644 --- a/perllib/FixMyStreet/App/Controller/Reports.pm +++ b/perllib/FixMyStreet/App/Controller/Reports.pm @@ -341,9 +341,11 @@ sub load_and_group_problems : Private { { columns => [ 'id', 'council', 'state', 'areas', 'latitude', 'longitude', 'title', 'cobrand', - { duration => { extract => "epoch from current_timestamp-lastupdate" } }, - { age => { extract => "epoch from current_timestamp-confirmed" } }, - { confirmed => { extract => 'epoch from confirmed' } }, + #{ duration => { extract => "epoch from current_timestamp-lastupdate" } }, + #{ age => { extract => "epoch from current_timestamp-confirmed" } }, + { confirmed => { extract => 'epoch from confirmed' } }, + { whensent => { extract => 'epoch from whensent' } }, + { lastupdate => { extract => 'epoch from lastupdate' } }, { photo => 'photo is not null' }, ], order_by => { -desc => 'lastupdate' }, @@ -355,9 +357,10 @@ sub load_and_group_problems : Private { my ( %problems, @pins ); my $re_councils = join('|', keys %{$c->stash->{areas_info}}); - my @cols = ( 'id', 'council', 'state', 'areas', 'latitude', 'longitude', 'title', 'cobrand', 'duration', 'age', 'confirmed', 'photo' ); + my @cols = ( 'id', 'council', 'state', 'areas', 'latitude', 'longitude', 'title', 'cobrand', 'confirmed', 'whensent', 'lastupdate', 'photo' ); while ( my @problem = $problems->next ) { my %problem = zip @cols, @problem; + $problem{is_fixed} = FixMyStreet::DB::Result::Problem->fixed_states()->{$problem{state}}; $c->log->debug( $problem{'cobrand'} . ', cobrand is ' . $c->cobrand->moniker ); if ( !$problem{council} ) { # Problem was not sent to any council, add to possible councils diff --git a/perllib/FixMyStreet/App/View/Web.pm b/perllib/FixMyStreet/App/View/Web.pm index 755f1e405..092e362f9 100644 --- a/perllib/FixMyStreet/App/View/Web.pm +++ b/perllib/FixMyStreet/App/View/Web.pm @@ -75,6 +75,7 @@ sprintf (different name to avoid clash) sub tprintf { my ( $self, $c, $format, @args ) = @_; + @args = @{$args[0]} if ref $args[0] eq 'ARRAY'; return sprintf $format, @args; } diff --git a/perllib/FixMyStreet/Cobrand/Barnet.pm b/perllib/FixMyStreet/Cobrand/Barnet.pm index 9791b071a..6f115ec63 100644 --- a/perllib/FixMyStreet/Cobrand/Barnet.pm +++ b/perllib/FixMyStreet/Cobrand/Barnet.pm @@ -10,7 +10,9 @@ sub council_name { return 'Barnet Council'; } sub council_url { return 'barnet'; } sub disambiguate_location { + my $self = shift; return { + %{ $self->SUPER::disambiguate_location() }, centre => '51.612832,-0.218169', span => '0.0563,0.09', bounds => [ '51.584682,-0.263169', '51.640982,-0.173169' ], diff --git a/perllib/FixMyStreet/Cobrand/Bromley.pm b/perllib/FixMyStreet/Cobrand/Bromley.pm new file mode 100644 index 000000000..75174b638 --- /dev/null +++ b/perllib/FixMyStreet/Cobrand/Bromley.pm @@ -0,0 +1,35 @@ +package FixMyStreet::Cobrand::Bromley; +use base 'FixMyStreet::Cobrand::UKCouncils'; + +use strict; +use warnings; + +sub council_id { return 2482; } +sub council_area { return 'Bromley'; } +sub council_name { return 'Bromley Council'; } +sub council_url { return 'bromley'; } + +sub path_to_web_templates { + my $self = shift; + return [ + FixMyStreet->path_to( 'templates/web', $self->moniker )->stringify, + FixMyStreet->path_to( 'templates/web/fixmystreet' )->stringify + ]; +} + +sub disambiguate_location { + my $self = shift; + return { + %{ $self->SUPER::disambiguate_location() }, + centre => '51.366836,0.040623', + span => '0.154963,0.24347', + bounds => [ '51.289355,-0.081112', '51.444318,0.162358' ], + }; +} + +sub example_places { + return ( 'BR1 3UH', 'Glebe Rd, Bromley' ); +} + +1; + diff --git a/perllib/FixMyStreet/Cobrand/Default.pm b/perllib/FixMyStreet/Cobrand/Default.pm index aacfb5e2b..c45c36b0b 100644 --- a/perllib/FixMyStreet/Cobrand/Default.pm +++ b/perllib/FixMyStreet/Cobrand/Default.pm @@ -239,6 +239,8 @@ Returns disambiguating information available sub disambiguate_location { return { country => 'uk', + bing_culture => 'en-GB', + bing_country => 'United Kingdom' }; } @@ -457,7 +459,7 @@ sub find_closest { my ( $self, $latitude, $longitude, $problem ) = @_; my $str = ''; - if ( my $j = FixMyStreet::Geocode::Bing::reverse( $latitude, $longitude ) ) { + if ( my $j = FixMyStreet::Geocode::Bing::reverse( $latitude, $longitude, disambiguate_location()->{bing_culture} ) ) { # cache the bing results for use in alerts if ( $problem ) { $problem->geocode( $j ); @@ -504,7 +506,7 @@ sub find_closest_address_for_rss { # if we've not cached it then we don't want to look it up in order to avoid # hammering the bing api # if ( !$j ) { - # $j = FixMyStreet::Geocode::Bing::reverse( $latitude, $longitude, 1 ); + # $j = FixMyStreet::Geocode::Bing::reverse( $latitude, $longitude, disambiguate_location()->{bing_culture}, 1 ); # $problem->geocode( $j ); # $problem->update; @@ -914,5 +916,9 @@ Get stats to display on the council reports page sub get_report_stats { return 0; } +sub example_places { + return [ 'B2 4QA', 'Tib St, Manchester' ]; +} + 1; diff --git a/perllib/FixMyStreet/Cobrand/LichfieldDC.pm b/perllib/FixMyStreet/Cobrand/LichfieldDC.pm index 91c5e10ec..4d93aaf76 100644 --- a/perllib/FixMyStreet/Cobrand/LichfieldDC.pm +++ b/perllib/FixMyStreet/Cobrand/LichfieldDC.pm @@ -21,7 +21,9 @@ sub problems_clause { # FIXME - need to double check this is all correct sub disambiguate_location { + my $self = shift; return { + %{ $self->SUPER::disambiguate_location() }, centre => '52.688198,-1.804966', span => '0.1196,0.218675', bounds => [ '52.807793,-1.586291', '52.584891,-1.963232' ], diff --git a/perllib/FixMyStreet/Cobrand/Reading.pm b/perllib/FixMyStreet/Cobrand/Reading.pm index afc2b6ac6..c8591924e 100644 --- a/perllib/FixMyStreet/Cobrand/Reading.pm +++ b/perllib/FixMyStreet/Cobrand/Reading.pm @@ -12,11 +12,13 @@ sub council_name { return 'Reading City Council'; } sub council_url { return 'reading'; } sub disambiguate_location { + my $self = shift; return { + %{ $self->SUPER::disambiguate_location() }, town => 'Reading', - centre => '51.452983169803964,-0.98382678731985973', - span => '0.0833543573028663,0.124500468843446', - bounds => [ '51.409779668156361,-1.0529948144525243', '51.493134025459227,-0.92849434560907829' ], + centre => '51.452983,-0.983827', + span => '0.083355,0.1245', + bounds => [ '51.409779,-1.052994', '51.493134,-0.928494' ], }; } diff --git a/perllib/FixMyStreet/Cobrand/Southampton.pm b/perllib/FixMyStreet/Cobrand/Southampton.pm index 5bb7df3b6..b57091bef 100644 --- a/perllib/FixMyStreet/Cobrand/Southampton.pm +++ b/perllib/FixMyStreet/Cobrand/Southampton.pm @@ -10,7 +10,9 @@ sub council_name { return 'Southampton City Council'; } sub council_url { return 'southampton'; } sub disambiguate_location { + my $self = shift; return { + %{ $self->SUPER::disambiguate_location() }, town => 'Southampton', centre => '50.913822,-1.400493', span => '0.084628,0.15701', diff --git a/perllib/FixMyStreet/Geocode/Bing.pm b/perllib/FixMyStreet/Geocode/Bing.pm index 856d7061e..f00cf9671 100644 --- a/perllib/FixMyStreet/Geocode/Bing.pm +++ b/perllib/FixMyStreet/Geocode/Bing.pm @@ -23,10 +23,11 @@ use Digest::MD5 qw(md5_hex); sub string { my ( $s, $c, $params ) = @_; $s .= '+' . $params->{town} if $params->{town} and $s !~ /$params->{town}/i; - my $url = "http://dev.virtualearth.net/REST/v1/Locations?q=$s&c=en-GB"; # FIXME nb-NO for Norway - $url .= '&mapView=' . $params->{bounds}[0] . ',' . $params->{bounds}[1] + my $url = "http://dev.virtualearth.net/REST/v1/Locations?q=$s"; + $url .= '&userMapView=' . $params->{bounds}[0] . ',' . $params->{bounds}[1] if $params->{bounds}; $url .= '&userLocation=' . $params->{centre} if $params->{centre}; + $url .= '&c=' . $params->{bing_culture} if $params->{bing_culture}; my $cache_dir = FixMyStreet->config('GEO_CACHE') . 'bing/'; my $cache_file = $cache_dir . md5_hex($url); @@ -43,7 +44,7 @@ sub string { if (!$js) { return { error => _('Sorry, we could not parse that location. Please try again.') }; - } elsif ($js =~ /BT\d/) { + } elsif ($js =~ /BT\d/ && $params->{bing_country} eq 'United Kingdom') { return { error => _("We do not currently cover Northern Ireland, I'm afraid.") }; } @@ -54,9 +55,10 @@ sub string { my $results = $js->{resourceSets}->[0]->{resources}; my ( $error, @valid_locations, $latitude, $longitude ); + foreach (@$results) { my $address = $_->{name}; - next unless $_->{address}->{countryRegion} eq 'United Kingdom'; # FIXME This is UK only + next unless $_->{address}->{countryRegion} eq $params->{bing_country}; ( $latitude, $longitude ) = @{ $_->{point}->{coordinates} }; push (@$error, { address => $address, latitude => $latitude, longitude => $longitude }); push (@valid_locations, $_); @@ -66,12 +68,13 @@ sub string { } sub reverse { - my ( $latitude, $longitude, $cache ) = @_; + my ( $latitude, $longitude, $bing_culture, $cache ) = @_; # Get nearest road-type thing from Bing my $key = mySociety::Config::get('BING_MAPS_API_KEY', ''); if ($key) { - my $url = "http://dev.virtualearth.net/REST/v1/Locations/$latitude,$longitude?c=en-GB&key=$key"; + my $url = "http://dev.virtualearth.net/REST/v1/Locations/$latitude,$longitude?key=$key"; + $url .= '&c=' . $bing_culture if $bing_culture; my $j; if ( $cache ) { my $cache_dir = FixMyStreet->config('GEO_CACHE') . 'bing/'; diff --git a/perllib/FixMyStreet/Map/OSM/MapQuest.pm b/perllib/FixMyStreet/Map/OSM/MapQuest.pm new file mode 100644 index 000000000..9cf6de01f --- /dev/null +++ b/perllib/FixMyStreet/Map/OSM/MapQuest.pm @@ -0,0 +1,33 @@ +#!/usr/bin/perl +# +# FixMyStreet:Map::OSM::CycleMap +# OSM CycleMap maps on FixMyStreet. +# +# Copyright (c) 2010 UK Citizens Online Democracy. All rights reserved. +# Email: matthew@mysociety.org; WWW: http://www.mysociety.org/ + +package FixMyStreet::Map::OSM::MapQuest; +use base 'FixMyStreet::Map::OSM'; + +use strict; + +sub map_type { + return 'OpenLayers.Layer.OSM.MapQuestOpen'; +} + +sub map_tiles { + my ($self, $x, $y, $z) = @_; + my $tile_url = $self->base_tile_url(); + return [ + "http://otile1.$tile_url/$z/" . ($x - 1) . "/" . ($y - 1) . ".png", + "http://otile2.$tile_url/$z/$x/" . ($y - 1) . ".png", + "http://otile3.$tile_url/$z/" . ($x - 1) . "/$y.png", + "http://otile4.$tile_url/$z/$x/$y.png", + ]; +} + +sub base_tile_url { + return 'mqcdn.com/tiles/1.0.0/osm/'; +} + +1; diff --git a/perllib/Utils.pm b/perllib/Utils.pm index 954561a08..4e64836c6 100644 --- a/perllib/Utils.pm +++ b/perllib/Utils.pm @@ -190,7 +190,7 @@ sub cleanup_text { for ($input) { # shit -> poo - s{\bdog\s*shit\b}{dog poo}ig; + s{\bdog\s*shite*?\b}{dog poo}ig; # 'portakabin' to '[portable cabin]' (and variations) s{\b(porta)\s*([ck]abin|loo)\b}{[$1ble $2]}ig; @@ -2,7 +2,7 @@ use strict; use warnings; -use Test::More tests => 9; +use Test::More; use FindBin; use lib "$FindBin::Bin/../perllib"; @@ -39,3 +39,26 @@ foreach my $test (@convert_en_to_latlon_tests) { [ $lat, $lon ], # "convert ($e,$n) to ($lat,$lon)"; } + +my @cleanup_tests = ( + [ 'dog shit', 'Dog poo', 'dog poo' ], + [ 'dog shit', 'Dog poo', 'with spaces' ], + [ 'dog shite', 'Dog poo', 'with extra e' ], + [ 'there is dog shit here', 'There is dog poo here', 'with surrounding text' ], + [ 'portacabin', '[portable cabin]', 'cabin' ], + [ 'portaloo', '[portable loo]', 'loo' ], + [ 'porta loo', '[portable loo]', 'with spaces' ], + [ ' this is a report ', 'This is a report', 'leading and trailing spaces' ], + [ 'This is a report ', 'This is a report', 'spaces in the middle' ], + [ 'I AM SHOUTING AT YOU', 'I am shouting at you', 'all shouting' ], + [ 'I am EMPHASISING something', 'I am EMPHASISING something', 'some shouting' ], + [ "This has new\n\n\nlines in it", 'This has new Lines in it', 'no new lines' ], +); + +foreach my $test ( @cleanup_tests ) { + is Utils::cleanup_text( $test->[0]), $test->[1], $test->[2]; +} + +is Utils::cleanup_text( "This has new\n\n\nlines in it", { allow_multiline => 1 } ), "This has new\n\nLines in it", 'new lines allowed'; + +done_testing(); diff --git a/templates/web/barnet/footer.html b/templates/web/barnet/footer.html index 9bbeaa7e9..21848963e 100644 --- a/templates/web/barnet/footer.html +++ b/templates/web/barnet/footer.html @@ -14,7 +14,6 @@ <li class="section">[% c.req.uri.path == '/reports/Barnet' ? '<strong>All reports</strong>' : '<a href="/reports/Barnet">All reports</a>' %]</li> <li class="section">[% c.req.uri.path == '/alert' ? '<strong>Local alerts</strong>' : '<a href="/alert">Local alerts</a>' %]</li> <li class="section">[% c.req.uri.path == '/faq' ? '<strong>Help</strong>' : '<a href="/faq">Help</a>' %]</li> - <li class="section">[% c.req.uri.path == '/contact' ? '<strong>Contact</strong>' : '<a href="/contact">Contact</a>' %]</li> </ul> </ul> </div> <!-- end navigation --> diff --git a/templates/web/bromley/footer.html b/templates/web/bromley/footer.html new file mode 100644 index 000000000..9be0741bf --- /dev/null +++ b/templates/web/bromley/footer.html @@ -0,0 +1,50 @@ + [% IF pagefooter %] + <footer role="content-info"> + <div class="tablewrapper bordered"> + <div id="footer-mobileapps"> + <h4>Mobile apps</h4> + + <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="footer-help"> + </div> + </div> + </footer> + [% END %] + </div><!-- .content role=main --> + </div><!-- .container --> + </div><!-- .table-cell --> + + <div class="nav-wrapper"> + <div class="nav-wrapper-2"> + <div id="main-nav" role="navigation"> + <ul id="mysoc-menu"> + <li><a href="http://www.fixmystreet.com/">Powered by FixMyStreet</a></li> + </ul> + + <ul id="main-menu"> + <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn" + >[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[% + %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="/my"[% END + %]>[% loc("Your reports") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[% + %]<li><[% IF c.req.uri.path == '/reports/Bromley' %]span[% ELSE %]a href="/reports/Bromley"[% END + %]>[% loc("All reports") %]</[% c.req.uri.path == '/reports' ? 'span' : 'a' %]></li>[% + %]<li><[% IF c.req.uri.path == '/alert' %]span[% ELSE %]a href="/alert[% pc ? '/list?pc=' : '' %][% pc | uri %]"[% END + %]>[% loc("Local alerts") %]</[% c.req.uri.path == '/alert' ? 'span' : 'a' %]></li>[% + %]<li><[% IF c.req.uri.path == '/faq' %]span[% ELSE %]a href="/faq"[% END + %]>[% loc("Help") %]</[% c.req.uri.path == '/faq' ? 'span' : 'a' %]></li> + </ul> + </div> + </div> + </div> + +<!-- [% INCLUDE 'debug_footer.html' %] --> + </div> <!-- .wrapper --> +</body> +</html> diff --git a/templates/web/bromley/header.html b/templates/web/bromley/header.html new file mode 100644 index 000000000..f7beabd8c --- /dev/null +++ b/templates/web/bromley/header.html @@ -0,0 +1,57 @@ +<!doctype html> +<!--[if lt IE 7]><html class="no-js ie6 oldie" lang="[% lang_code %]"><![endif]--> +<!--[if IE 7]> <html class="no-js ie7 oldie" lang="[% lang_code %]"><![endif]--> +<!--[if IE 8]> <html class="no-js ie8 oldie" lang="[% lang_code %]"><![endif]--> +<!--[if IE 9]> <html class="no-js ie9 oldie" lang="[% lang_code %]"><![endif]--> +<!--[if gt IE 9]><!--><html class="no-js" lang="[% lang_code %]"><!--<![endif]--> + <head> + <meta name="viewport" content="initial-scale=1.0"> + + <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> + <meta name="HandHeldFriendly" content="true"> + <meta name="mobileoptimized" content="0"> + + <link rel="stylesheet" href="[% version('/cobrands/bromley/base.css') %]"> + <!-- <link rel="stylesheet" href="[% version('/cobrands/fixmystreet/layout.css') %]" media="(min-width:48em)"> --> + <link rel="stylesheet" href="[% version('/js/fancybox/jquery.fancybox-1.3.4.css') %]"> + <!--[if (lt IE 9) & (!IEMobile)]> + <!-- <link rel="stylesheet" href="[% version('/cobrands/fixmystreet/layout.css') %]"> --> + <![endif]--> + + <script src="[% version('/js/modernizr.custom.76759.js') %]" charset="utf-8"></script> + [% INCLUDE 'common_header_tags.html', js_override = '/cobrands/fixmystreet/fixmystreet.js' %] + <script src="[% version('/js/fancybox/jquery.fancybox-1.3.4.pack.js') %]" charset="utf-8"></script> + + [% IF c.req.uri.host == 'osm.fixmystreet.com' %] + <link rel="canonical" href="http://www.fixmystreet.com[% c.req.uri.path_query %]"> + [% END %] + + [% INCLUDE 'tracking_code.html' %] + + </head> + <body class="[% bodyclass | html IF bodyclass %]"> + + <div class="wrapper"> + <div class="table-cell"> + <header id="site-header" role="banner"> + <div class="container"> + <a href="/" id="site-logo">FixMyStreet</a> + <a href="#main-nav" id="nav-link">Main Navigation</a> + </div> + </header> + + <div id="user-meta"> + [% IF c.user_exists %] + <p> + [% tprintf(loc('Hi %s'), c.user.name || c.user.email) %] + <a href="/auth/sign_out">[% loc('sign out') %]</a> + </p> + [% ELSE %] + <!-- <a href="/auth">[% loc('Sign in') %]</a> --> + [% END %] + </div> + + <div class="container"> + <div class="content[% " $mainclass" | html IF mainclass %]" role="main"> + + <!-- [% INCLUDE 'debug_header.html' %] --> diff --git a/templates/web/default/report/display.html b/templates/web/default/report/display.html index 999d332d2..abfff624f 100644 --- a/templates/web/default/report/display.html +++ b/templates/web/default/report/display.html @@ -1,7 +1,7 @@ [% PROCESS "maps/${map.type}.html"; - problem_title = problem.title _ ' - ' _ loc('Viewing a problem') | html; + problem_title = problem.title _ ' - ' _ loc('Viewing a problem'); INCLUDE 'header.html' title = problem_title rss = [ loc('Updates to this problem, FixMyStreet'), "/rss/$problem.id" ] diff --git a/templates/web/default/report/update.html b/templates/web/default/report/update.html new file mode 100644 index 000000000..048968eae --- /dev/null +++ b/templates/web/default/report/update.html @@ -0,0 +1,22 @@ +[% IF loop.first %] +<div id="updates"> + <h2 class="problem-update-list-header">[% loc('Updates') %]</h2> +[% END %] + <div><div class="problem-update"><p><a name="update_[% update.id %]"></a><em> + [% INCLUDE meta_line %] + </em></p></div> +[% IF NOT update.whenanswered %] + <div class="update-text"> + [% add_links( update.text ) | html_para %] + + [% INCLUDE 'report/photo.html' object=update %] + + [% IF c.cobrand.allow_update_reporting %] + <p align="right"> + <small><a rel="nofollow" class="unsuitable-problem" href="[% c.uri_for( '/contact', { id => update.problem_id, update_id => update.id } ) %]">[% loc('Offensive? Unsuitable? Tell us') %]</a></small> + </p> + [% END %] + </div> +[% END %] + </div> +[% '</div>' IF loop.last %] diff --git a/templates/web/default/report/updates.html b/templates/web/default/report/updates.html index 4fd3c75d4..374a7c570 100644 --- a/templates/web/default/report/updates.html +++ b/templates/web/default/report/updates.html @@ -1,36 +1,26 @@ -[% FOREACH update IN updates.all %] -[% IF loop.first %] -<div id="updates"> - <h2 class="problem-update-list-header">[% loc('Updates') %]</h2> +[% FOREACH update IN updates %] +[% INCLUDE 'report/update.html' %] [% END %] - <div><div class="problem-update"><p><a name="update_[% update.id %]"></a><em> - [% IF update.anonymous || update.name == '' %] - [% tprintf( loc( 'Posted anonymously at %s' ), prettify_epoch( update.confirmed_local.epoch ) ) -%] - [%- ELSIF update.user.from_council %] - [% user_name = update.user.name | html %] - [% tprintf( loc( 'Posted by %s (<strong>%s</strong>) at %s' ), user_name, update.user.council, prettify_epoch( update.confirmed_local.epoch ) ) -%] - [%- ELSE %] - [% tprintf( loc( 'Posted by %s at %s' ), update.name, prettify_epoch( update.confirmed_local.epoch ) ) | html -%] - [%- END -%] - [%- c.cobrand.extra_update_meta_text(update) -%] - [%- ", " _ loc( 'marked as fixed' ) IF update.mark_fixed %] - [%- ", " _ loc( 'reopened' ) IF update.mark_open %] - [%- ", " _ tprintf(loc( 'marked as %s' ), update.meta_problem_state) IF update.problem_state %] - </em></p> - </div> +[% BLOCK meta_line %] - <div class="update-text"> - [% add_links( update.text ) | html_para %] + [% IF update.whenanswered %] + [%# A questionnaire update, currently saying report is still open %] + [% tprintf( loc( 'Still open, via questionnaire, %s' ), prettify_epoch( update.whenanswered_local.epoch ) ) %] + [% RETURN %] + [% END %] - [% INCLUDE 'report/photo.html' object=update %] - - [% IF c.cobrand.allow_update_reporting %] - <p align="right"> - <small><a rel="nofollow" class="unsuitable-problem" href="[% c.uri_for( '/contact', { id => update.problem_id, update_id => update.id } ) %]">[% loc('Offensive? Unsuitable? Tell us') %]</a></small> - </p> - [% END %] - </div> - </div> -[% '</div>' IF loop.last %] + [% IF update.anonymous || update.name == '' %] + [% tprintf( loc( 'Posted anonymously at %s' ), prettify_epoch( update.confirmed_local.epoch ) ) -%] + [%- ELSIF update.user.from_council %] + [% user_name = update.user.name | html %] + [% tprintf( loc( 'Posted by %s (<strong>%s</strong>) at %s' ), user_name, update.user.council, prettify_epoch( update.confirmed_local.epoch ) ) -%] + [%- ELSE %] + [% tprintf( loc( 'Posted by %s at %s' ), update.name, prettify_epoch( update.confirmed_local.epoch ) ) | html -%] + [%- END -%] + [%- c.cobrand.extra_update_meta_text(update) -%] + [%- ", " _ loc( 'marked as fixed' ) IF update.mark_fixed %] + [%- ", " _ loc( 'reopened' ) IF update.mark_open %] + [%- ", " _ tprintf(loc( 'marked as %s' ), update.meta_problem_state) IF update.problem_state %] [% END %] + diff --git a/templates/web/default/reports/cobrand_stats.html b/templates/web/default/reports/cobrand_stats.html deleted file mode 100644 index e69de29bb..000000000 --- a/templates/web/default/reports/cobrand_stats.html +++ /dev/null diff --git a/templates/web/default/reports/council.html b/templates/web/default/reports/council.html index ec9efbdbf..0d3d43d82 100755 --- a/templates/web/default/reports/council.html +++ b/templates/web/default/reports/council.html @@ -13,12 +13,13 @@ INCLUDE 'header.html', title = tprintf(loc('%s - Summary reports'), name) context = 'reports' + bodyclass = 'mappage' rss = [ tprintf(loc('Problems within %s, FixMyStreet'), name), rss_url ] %] [% map_html %] -[% IF children.size %] +[% IF c.cobrand.moniker != 'fixmystreet' AND children.size %] <h2 style="clear:right">[% loc('Wards of this council') %]</h2> <p>[% loc('Follow a ward link to view only reports within that ward.') %]</p> <ul> @@ -31,8 +32,16 @@ </div> <div id="side"> +<h1 id="reports_heading"> + [% IF ward %] + [% ward.name %]<span>, </span><a href="[% council_url %]">[% council.name %]</a> + [% ELSE %] + [% council.name %] + [% END %] +</h1> + [% IF council.generation_high == 10 AND c.cobrand.country == 'GB' %] -<p id="unknown">This council no longer exists. +<p id="unknown" class="alert">This council no longer exists. [% IF council.name.match('Penwith|Kerrier|Carrick|Restormel|Caradon|North Cornwall') %] Its area is now covered by <a href="/reports/Cornwall">Cornwall Council</a>. [% ELSIF council.name.match('Durham|Easington|Sedgefield|Teesdale|Wear Valley|Derwentside|Chester le Street') %] @@ -57,60 +66,49 @@ Its area is now covered by <a href="/reports/Bedford">Bedford Borough Council</a <a href="/reports/Central+Bedfordshire">Central Bedfordshire Council</a>. [% END %] </p> +[% ELSIF c.cobrand.moniker == 'fixmystreet' %] + <div class="shadow-wrap"> + <ul id="key-tools"[% IF NOT children.size %] class="singleton"[% END %]> + <li><a rel="nofollow" id="key-tool-updates-area" class="feed" href="[% rss_url %]">[% tprintf(loc('Get updates of problems in this %s'), thing) %]</a></li> + [% IF children.size %] + <li><a href="#council_wards" id="key-tool-wards" class="chevron">[% loc('Wards of this council') %]</a></li> + [% END %] + </ul> + </div> [% ELSE %] -<p><a href="[% rss_url %]"><img align="right" src="/i/feed.png" width="16" height="16" title="[% loc('RSS feed') %]" alt="[% tprintf(loc('RSS feed of problems in this %s'), thing) %]" border="0" hspace="4"></a> + <p><a href="[% rss_url %]"><img align="right" src="/i/feed.png" width="16" height="16" title="[% loc('RSS feed') %]" alt="[% tprintf(loc('RSS feed of problems in this %s'), thing) %]" border="0" hspace="4"></a> [% END %] -[% IF c.cobrand.all_councils_report %] - [% tprintf( loc('This is a summary of all reports for one %s.'), thing ) %] -[% ELSE %] - [% tprintf( loc('This is a summary of all reports for this %s.'), thing ) %] +[% TRY %][% INCLUDE 'reports/cobrand_stats.html' %][% CATCH file %][% END %] + +[% IF c.cobrand.moniker == 'fixmystreet' AND children.size %] +<section id="council_wards" class="hidden-js"> + <h2>[% loc('Wards of this council') %]</h2> + <p>[% loc('Follow a ward link to view only reports within that ward.') %]</p> + <ul class="issue-list-a full-width"> + [% FOR child IN children.values.sort('name') %] + <li><a href="[% child.url %]"><span class="text">[% child.name %]</span></a></li> + [% END %] + </ul> +</section> [% END %] -[% IF ward %] -[% tprintf( loc('You can <a href="%s">view all reports for the council</a> or <a href="/reports">show all councils</a>.'), council_url ) %] -[% ELSE %] -[% loc('You can <a href="/reports">show all councils</a>.') %] +[% IF c.cobrand.moniker == 'fixmystreet' %] +<p class="promo"> + FixMyStreet is now available for local council websites. + <a href="/for-councils">Find out more</a>. +</p> [% END %] -<h2>[% name %]</h2> - -[% INCLUDE 'reports/cobrand_stats.html' %] - - [% INCLUDE 'pagination.html', param = 'p' %] - - [% INCLUDE column - title = loc('Recently fixed') - problems = fixed.${council.id}.new - %] +[% INCLUDE 'pagination.html', param = 'p' %] +<section class="full-width"> [% INCLUDE column - title = loc('New problems') - problems = open.${council.id}.new + problems = problems.${council.id} %] +</section> - [%# This doesn't really need a whole separate template %] - [% IF c.cobrand.moniker == 'emptyhomes' %] - [% - INCLUDE column - title = loc('Older problems') - problems = open.${council.id}.older.merge( open.${council.id}.unknown ) - %] - [% ELSE %] - [% INCLUDE column - title = loc('Older problems') - problems = open.${council.id}.older - %] - [% INCLUDE column - title = loc('Old problems, state unknown') - problems = open.${council.id}.unknown - %] - [% END %] - - [% INCLUDE column - title = loc('Old fixed') - problems = fixed.${council.id}.old - %] +[% INCLUDE 'pagination.html', param = 'p' %] </div> [% INCLUDE 'footer.html' %] @@ -118,9 +116,35 @@ Its area is now covered by <a href="/reports/Bedford">Bedford Borough Council</a [% BLOCK column %] [% IF problems %] -<h3>[% title %]</h3> +<ul class="issue-list-a"> +[% IF c.cobrand.moniker == 'fixmystreet' %] + +[% FOREACH problem IN problems %] + <li> + <a href="[% c.uri_for('/report/' _ problem.id) %]"> + <div class="text"> + <h4>[% problem.title | html %]</h4> + <small>[% prettify_epoch( problem.confirmed, 1 ) %] + [%- IF problem.confirmed != problem.lastupdate AND problem.whensent != problem.lastupdate %], last updated [% prettify_epoch( problem.lastupdate, 1 ) %] + [%- END %]</small> + [% IF problem.councils > 1 %] <small>[% loc('(sent to both)') %]</small> + [% ELSIF problem.councils == 0 %] <small>[% loc('(not sent to council)') %]</small> + [% END %] + [% IF problem.is_fixed %] + <small>[% loc('(fixed)') %]</small> + [% END %] + </div> + [% IF problem.photo %] + <div class="img"> + <img height="60" width="90" src="/photo/[% problem.id %].fp.jpeg" alt=""> + </div> + [% END %] + </a> + </li> +[% END %] + +[% ELSE %] -<ul> [% FOREACH problem IN problems %] <li><a href="[% c.uri_for('/report/' _ problem.id) %]">[% problem.title | html %]</a> [% IF problem.councils > 1 %] <small>[% loc('(sent to both)') %]</small> [% END %] @@ -129,6 +153,8 @@ Its area is now covered by <a href="/reports/Bedford">Bedford Borough Council</a [% END %] </li> [% END %] + +[% END %] </ul> [% END %] diff --git a/templates/web/default/reports/index.html b/templates/web/default/reports/index.html index f14fd079e..283df5285 100755 --- a/templates/web/default/reports/index.html +++ b/templates/web/default/reports/index.html @@ -1,35 +1,41 @@ -[% INCLUDE 'header.html', title = loc('Summary reports') %] +[% INCLUDE 'header.html', title = loc('Summary reports'), bodyclass => 'fullwidthpage' %] +<h1>[% loc('All Reports') %]</h1> + +<div class="intro"> <p> [% loc('This is a summary of all reports on this site; select a particular council to see the reports sent there.') %] [% loc('Greyed-out lines are councils that no longer exist.') %] </p> +</div> -<table cellpadding="3" cellspacing="1" border="0"> +<table cellpadding="3" cellspacing="1" border="0" class="nicetable"> +<thead> <tr> -<th>[% loc('Name') %]</th> -<th>[% loc('New problems') %]</th> -<th>[% loc('Older problems') %]</th> -<th>[% loc('Old problems,<br>state unknown') %]</th> -<th>[% loc('Recently fixed') %]</th> -<th>[% loc('Older fixed') %]</th> +<th class="title">[% loc('Name') %]</th> +<th class="data">[% loc('New <br>problems') %]</th> +<th class="data">[% loc('Older <br>problems') %]</th> +<th class="data">[% loc('Old / unknown <br>problems') %]</th> +<th class="data">[% loc('Recently <br>fixed') %]</th> +<th class="data">[% loc('Older <br>fixed') %]</th> </tr> +</thead> +<tbody> [% FOREACH area IN areas_info_sorted %] <tr align="center" [%- IF area.generation_high == 10 %] class="gone" -[%- ELSIF loop.count % 2 %] class="a" -[%- END -%] -> -<td align="left"><a href="[% area.url %]">[% area.name %]</a></td> -<td>[% open.${area.id}.new or 0 %]</td> -<td>[% open.${area.id}.older or 0 %]</td> -<td>[% open.${area.id}.unknown or 0 %]</td> -<td>[% fixed.${area.id}.new or 0 %]</td> -<td>[% fixed.${area.id}.old or 0 %]</td> +[%- ELSIF ! (loop.count % 2) %] class="a" +[%- END %]> +<td class="title"><a href="[% area.url %]">[% area.name %]</a></td> +<td class="data">[% open.${area.id}.new or 0 %]</td> +<td class="data">[% open.${area.id}.older or 0 %]</td> +<td class="data">[% open.${area.id}.unknown or 0 %]</td> +<td class="data">[% fixed.${area.id}.new or 0 %]</td> +<td class="data">[% fixed.${area.id}.old or 0 %]</td> </tr> [% END %] +</tbody> </table> -[% INCLUDE 'footer.html' %] - +[% INCLUDE 'footer.html', pagefooter = 'yes' %] diff --git a/templates/web/emptyhomes/report/display.html b/templates/web/emptyhomes/report/display.html index 933a05948..bcce6789d 100644 --- a/templates/web/emptyhomes/report/display.html +++ b/templates/web/emptyhomes/report/display.html @@ -1,5 +1,5 @@ [% - problem_title = loc('Viewing a problem') | html; + problem_title = loc('Viewing a problem'); INCLUDE 'header.html' title = problem_title robots = 'noindex, nofollow' diff --git a/templates/web/fixmystreet/alert/index.html b/templates/web/fixmystreet/alert/index.html index 7bec66305..8d4459c01 100644 --- a/templates/web/fixmystreet/alert/index.html +++ b/templates/web/fixmystreet/alert/index.html @@ -21,7 +21,7 @@ within a certain distance of a particular location.') %] <form method="get" action="/alert/list" class="full-width"> <fieldset> <div class="form-txt-submit-box"> - <input type="text" name="pc" value="[% pc | html %]" placeholder="[% loc('e.g. ‘B2 4QA’ or ‘Tib St, Manchester’') %]"> + <input type="text" name="pc" value="[% pc | html %]" placeholder="[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]"> <input class="green-btn" type="submit" value="[% loc('Go') %]"> </div> </fieldset> diff --git a/templates/web/fixmystreet/index.html b/templates/web/fixmystreet/index.html index 605e428a3..04b23ca7f 100644 --- a/templates/web/fixmystreet/index.html +++ b/templates/web/fixmystreet/index.html @@ -38,7 +38,7 @@ Modernizr.load({ <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="[% loc('e.g. ‘B2 4QA’ or ‘Tib St, Manchester’') %]"> + <input type="text" name="pc" value="" id="pc" size="10" maxlength="200" placeholder="[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]"> <input type="submit" value="[% loc('Go') %]" id="submit"> </div> </form> diff --git a/templates/web/fixmystreet/my/my.html b/templates/web/fixmystreet/my/my.html index 687c5686e..4793989f8 100644 --- a/templates/web/fixmystreet/my/my.html +++ b/templates/web/fixmystreet/my/my.html @@ -78,9 +78,13 @@ END %] [% END %] </small> </div> + [% IF p.photo %] + <div class="img"> + <img height="60" width="90" src="/photo/[% p.id %].fp.jpeg" alt=""> + </div> + [% END %] </a> </li> [% "</ul>" IF loop.last %] [% END %] - diff --git a/templates/web/fixmystreet/report/display.html b/templates/web/fixmystreet/report/display.html index 8a1625d88..72c637a5b 100644 --- a/templates/web/fixmystreet/report/display.html +++ b/templates/web/fixmystreet/report/display.html @@ -1,7 +1,7 @@ [% PROCESS "maps/${map.type}.html"; - problem_title = problem.title _ ' - ' _ loc('Viewing a problem') | html; + problem_title = problem.title _ ' - ' _ loc('Viewing a problem'); INCLUDE 'header.html' title = problem_title rss = [ loc('Updates to this problem, FixMyStreet'), "/rss/$problem.id" ] diff --git a/templates/web/fixmystreet/report/update.html b/templates/web/fixmystreet/report/update.html new file mode 100644 index 000000000..0803ac758 --- /dev/null +++ b/templates/web/fixmystreet/report/update.html @@ -0,0 +1,28 @@ +[% IF loop.first %] +<section class="full-width"> + <h4 class="static-with-rule">[% loc('Updates') %]</h4> + <ul class="issue-list"> +[% END %] + <li> + <div class="update-wrap"> + [% IF update.whenanswered %] + <div class="update-text"> + <p class="meta-2"> [% INCLUDE meta_line %] </p> + </div> + [% ELSE %] + <div class="update-text"> + [% add_links( update.text ) | html_para %] + + <p class="meta-2"> + <a name="update_[% update.id %]"></a> + [% INCLUDE meta_line %] + </p> + </div> + [% INCLUDE 'report/photo.html' object=update %] + [% END %] + </div> + </li> +[% IF loop.last %] + </ul> +</section> +[% END %] diff --git a/templates/web/fixmystreet/report/updates.html b/templates/web/fixmystreet/report/updates.html deleted file mode 100644 index 508e2aacc..000000000 --- a/templates/web/fixmystreet/report/updates.html +++ /dev/null @@ -1,36 +0,0 @@ -[% FOREACH update IN updates.all %] -[% IF loop.first %] -<section class="full-width"> - <h4 class="static-with-rule">[% loc('Updates') %]</h4> - <ul class="issue-list"> -[% END %] - <li> - <div class="update-wrap"> - <div class="update-text"> - [% add_links( update.text ) | html_para %] - - <p class="meta-2"> - <a name="update_[% update.id %]"></a> - [% IF update.anonymous || update.name == '' %] - [% tprintf( loc( 'Posted anonymously at %s' ), prettify_epoch( update.confirmed_local.epoch ) ) -%] - [%- ELSIF update.user.from_council %] - [% user_name = update.user.name | html %] - [% tprintf( loc( 'Posted by %s (<strong>%s</strong>) at %s' ), user_name, update.user.council, prettify_epoch( update.confirmed_local.epoch ) ) -%] - [%- ELSE %] - [% tprintf( loc( 'Posted by %s at %s' ), update.name, prettify_epoch( update.confirmed_local.epoch ) ) | html -%] - [%- END -%] - [%- c.cobrand.extra_update_meta_text(update) -%] - [%- ", " _ loc( 'marked as fixed' ) IF update.mark_fixed %] - [%- ", " _ loc( 'reopened' ) IF update.mark_open %] - [%- ", " _ tprintf(loc( 'marked as %s' ), update.meta_problem_state) IF update.problem_state %] - </p> - </div> - - [% INCLUDE 'report/photo.html' object=update %] - </div> - </li> -[% IF loop.last %] - </ul> -</section> -[% END %] -[% END %]
\ No newline at end of file diff --git a/templates/web/fixmystreet/reports/cobrand_stats.html b/templates/web/fixmystreet/reports/cobrand_stats.html deleted file mode 100644 index e69de29bb..000000000 --- a/templates/web/fixmystreet/reports/cobrand_stats.html +++ /dev/null diff --git a/templates/web/fixmystreet/reports/council.html b/templates/web/fixmystreet/reports/council.html deleted file mode 100755 index cf5729fb3..000000000 --- a/templates/web/fixmystreet/reports/council.html +++ /dev/null @@ -1,131 +0,0 @@ -[% IF ward %] - [% name = "$ward.name, $council.name" - thing = loc('ward') - %] -[% ELSE %] - [% name = council.name - thing = loc('council') - %] -[% END %] - -[% - PROCESS "maps/${map.type}.html"; - INCLUDE 'header.html', - title = tprintf(loc('%s - Summary reports'), name) - context = 'reports' - bodyclass = 'mappage' - rss = [ tprintf(loc('Problems within %s, FixMyStreet'), name), rss_url ] -%] - -[% map_html %] -</div> - -<div id="side"> - -<h1 id="reports_heading"> - [% IF ward %] - [% ward.name %]<span>, </span><a href="[% council_url %]">[% council.name %]</a> - [% ELSE %] - [% council.name %] - [% END %] -</h1> - -[% IF council.generation_high == 10 AND c.cobrand.country == 'GB' %] - <p class="alert">This council no longer exists. - [% IF council.name.match('Penwith|Kerrier|Carrick|Restormel|Caradon|North Cornwall') %] - Its area is now covered by <a href="/reports/Cornwall">Cornwall Council</a>. - [% ELSIF council.name.match('Durham|Easington|Sedgefield|Teesdale|Wear Valley|Derwentside|Chester le Street') %] - Its area is now covered by <a href="/reports/Durham+County">Durham County Council</a>. - [% ELSIF council.name.match('Blyth Valley|Wansbeck|Castle Morpeth|Tynedale|Alnwick|Berwick upon Tweed') %] - Its area is now covered by <a href="/reports/Northumberland">Northumberland County Council</a>. - [% ELSIF council.name.match('North Shropshire|Oswestry|Shrewsbury and Atcham|South Shropshire|Bridgnorth') %] - Its area is now covered by <a href="/reports/Shropshire">Shropshire Council</a>. - [% ELSIF council.name.match('Salisbury|West Wiltshire|Kennet|North Wiltshire') %] - Its area is now covered by <a href="/reports/Wiltshire">Wiltshire Council</a>. - [% ELSIF council.name.match('Ellesmere Port and Neston|Vale Royal|Chester') %] - Its area is now covered by <a href="/reports/Cheshire+West+and+Chester">Cheshire West and Chester Council</a>. - [% ELSIF council.name.match('Macclesfield|Congleton|Crewe and Nantwich') %] - Its area is now covered by <a href="/reports/Cheshire+East">Cheshire East Council</a>. - [% ELSIF council.name.match('Mid Bedfordshire|South Bedfordshire') %] - Its area is now covered by <a href="/reports/Central+Bedfordshire">Central Bedfordshire Council</a>. - [% ELSIF council.name.match('Cheshire') %] - Its area is now covered by <a href="/reports/Cheshire+West+and+Chester">Cheshire West and Chester Council</a> or - <a href="/reports/Cheshire+East">Cheshire East Council</a>. - [% ELSIF council.name.match('Bedfordshire') %] - Its area is now covered by <a href="/reports/Bedford">Bedford Borough Council</a> or - <a href="/reports/Central+Bedfordshire">Central Bedfordshire Council</a>. - [% END %] - </p> -[% ELSE %] - <div class="shadow-wrap"> - <ul id="key-tools"[% IF NOT children.size %] class="singleton"[% END %]> - <li><a rel="nofollow" id="key-tool-updates-area" class="feed" href="[% rss_url %]">[% tprintf(loc('Get updates of problems in this %s'), thing) %]</a></li> - [% IF children.size %] - <li><a href="#council_wards" id="key-tool-wards" class="chevron">[% loc('Wards of this council') %]</a></li> - [% END %] - </ul> - </div> -[% END %] - -[% INCLUDE 'reports/cobrand_stats.html' %] - -[% IF children.size %] -<section id="council_wards" class="hidden-js"> - <h2>[% loc('Wards of this council') %]</h2> - <p>[% loc('Follow a ward link to view only reports within that ward.') %]</p> - <ul class="issue-list-a full-width"> - [% FOR child IN children.values.sort('name') %] - <li><a href="[% child.url %]"><span class="text">[% child.name %]</span></a></li> - [% END %] - </ul> -</section> -[% END %] - -[% IF c.cobrand.moniker == 'fixmystreet' %] -<p class="promo"> - FixMyStreet is now available for local council websites. - <a href="/for-councils">Find out more</a>. -</p> -[% END %] - -[% INCLUDE 'pagination.html', param = 'p' %] - -<section class="full-width"> - [% INCLUDE column - problems = problems.${council.id} - %] -</section> - -[% INCLUDE 'pagination.html', param = 'p' %] - -</div> -[% INCLUDE 'footer.html' %] - -[% BLOCK column %] -[% IF problems %] - -<ul class="issue-list-a"> -[% FOREACH problem IN problems %] - <li> - <a href="[% c.uri_for('/report/' _ problem.id) %]"> - <div class="text"> - <h4>[% problem.title | html %]</h4> - <small>[% prettify_epoch( problem.confirmed, 1 ) %]</small> - [% IF problem.councils > 1 %] <small>[% loc('(sent to both)') %]</small> [% END %] - [% IF c.cobrand.moniker != 'emptyhomes' %] - [% IF problem.councils == 0 %] <small>[% loc('(not sent to council)') %]</small> [% END %] - [% END %] - </div> - [% IF problem.photo %] - <div class="img"> - <img height="60" width="90" src="/photo/[% problem.id %].fp.jpeg" alt=""> - </div> - [% END %] - </a> - </li> -[% END %] -</ul> - -[% END %] -[% END %] - diff --git a/templates/web/fixmystreet/reports/index.html b/templates/web/fixmystreet/reports/index.html deleted file mode 100755 index 96367d4bb..000000000 --- a/templates/web/fixmystreet/reports/index.html +++ /dev/null @@ -1,37 +0,0 @@ -[% INCLUDE 'header.html', title = loc('Summary reports'), bodyclass => 'fullwidthpage' %] - -<h1>[% loc('All Reports') %]</h1> - -<div class="intro"> - <p> - [% loc('This is a summary of all reports on this site; select a particular council to see the reports sent there.') %] - [% loc('Greyed-out lines are councils that no longer exist.') %] - </p> -</div> - -<table cellpadding="3" cellspacing="1" border="0" class="nicetable"> - <thead> - <th class="title">[% loc('Name') %]</th> - <th class="data">[% loc('New <br>problems') %]</th> - <th class="data">[% loc('Older <br>problems') %]</th> - <th class="data">[% loc('Old / unknown <br>problems') %]</th> - <th class="data">[% loc('Recently <br>fixed') %]</th> - <th class="data">[% loc('Older <br>fixed') %]</th> - </thead> - - [% FOREACH area IN areas_info_sorted %] - <tr align="center" - [%- IF area.generation_high == 10 %] class="gone" - [%- ELSIF ! (loop.count % 2) %] class="a" - [%- END %]> - <td class="title"><a href="[% area.url %]">[% area.name %]</a></td> - <td class="data">[% open.${area.id}.new or 0 %]</td> - <td class="data">[% open.${area.id}.older or 0 %]</td> - <td class="data">[% open.${area.id}.unknown or 0 %]</td> - <td class="data">[% fixed.${area.id}.new or 0 %]</td> - <td class="data">[% fixed.${area.id}.old or 0 %]</td> - </tr> - [% END %] -</table> - -[% INCLUDE 'footer.html' pagefooter => 'yes' %] diff --git a/templates/web/fixmystreet/reports/ward.html b/templates/web/fixmystreet/reports/ward.html deleted file mode 100755 index 8b65ffb28..000000000 --- a/templates/web/fixmystreet/reports/ward.html +++ /dev/null @@ -1 +0,0 @@ -[% INCLUDE reports/council.html %] diff --git a/web/cobrands/bromley/_colours.scss b/web/cobrands/bromley/_colours.scss new file mode 100644 index 000000000..c0376274e --- /dev/null +++ b/web/cobrands/bromley/_colours.scss @@ -0,0 +1,8 @@ +/* COLOURS */ + +$primary: rgb(76,120,168); +$primary_b: #000000; +$primary_text: #ffffff; + +$contrast1: #00BD08; +$contrast2: #AA8D11; diff --git a/web/cobrands/bromley/base.scss b/web/cobrands/bromley/base.scss new file mode 100644 index 000000000..4594f832f --- /dev/null +++ b/web/cobrands/bromley/base.scss @@ -0,0 +1,7 @@ +@import "../fixmystreet/_h5bp"; +@import "./_colours"; +@import "../fixmystreet/_mixins"; +@import "compass"; + +@import "../fixmystreet/_base"; + diff --git a/web/cobrands/bromley/config.rb b/web/cobrands/bromley/config.rb new file mode 100644 index 000000000..cab97b18f --- /dev/null +++ b/web/cobrands/bromley/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "" +sass_dir = "" +images_dir = "" +javascripts_dir = "" + +# You can select your preferred output style here (can be overridden via the command line): +# output_style = :expanded or :nested or :compact or :compressed + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass + +line_comments = false # by Compass.app diff --git a/web/cobrands/bromley/layout.scss b/web/cobrands/bromley/layout.scss new file mode 100644 index 000000000..3dc34c6c7 --- /dev/null +++ b/web/cobrands/bromley/layout.scss @@ -0,0 +1,11 @@ +@import "_colours"; +@import "../fixmystreet/_layout"; + +body { + background: #fff; +} + +#front-main { + background: $primary; +} + diff --git a/web/cobrands/fixmystreet/_base.scss b/web/cobrands/fixmystreet/_base.scss new file mode 100644 index 000000000..4202564f7 --- /dev/null +++ b/web/cobrands/fixmystreet/_base.scss @@ -0,0 +1,1469 @@ +/* HEADINGS and TYPOGRAPHY */ + +body { + font-family: 'MuseoSans', 'Helvetica', 'Arial', sans-serif; + margin:0; + font-size:1em; + line-height:1.5; + color: #222; + background-color: #fff; +} + + +p { + font-size: 1em; + font-weight: normal; + margin:0 0 1em 0; +} + +small{ + font-family: 'helvetica', 'arial',sans-serif; + font-style: italic; + font-size: 0.8125em; + line-height: 1.2307em; +} + +h1 { + font-family:'Museo300-display', 'Helvetica', 'Arial', sans-serif; + font-size: 2em; + line-height: 1em; + font-weight: normal; + margin-top: 0.5em; + margin-bottom: 0.5em; +} +#front-main h1 { + margin-top: 0.7em; +} +h1#reports_heading span { + display: none; +} +h1#reports_heading a { + display: block; + font-size: 50%; +} + +h2 { + font-family:'Museo300-display', 'Helvetica', 'Arial', sans-serif; + font-size: 1.5em; /*24px*/ + line-height: 1.3333em; /*32px*/ + font-weight: normal; + margin-top: 1.333333333em; /*32px*/ + margin-bottom: 0.666666666em; /*16px*/ +} + +h3 { + font-size: 1.25em; + line-height: 1.20em; + margin-top: 1.2em; + margin-bottom: 0.8em; + font-weight: bold +} + +h4 { + font-size: 1em; + font-weight: bold; + margin-bottom: 1em; +} + +// default list styles +ul, ol { + font-size: 1em; + margin-bottom: 2em; + margin-left: 2em; + padding:0; +} + +li{ + margin-bottom: 0.5em; +} + +ul li{ + list-style: square; +} + +ol li { + list-style:decimal; +} + +// lets you have a traditional ol but with nicely styled numbers +// for older browsers it just falls back to the normal ol +ol.big-numbers { + padding: 0; + margin: 0; + counter-reset: li; // reset counter to be 'li' instead of a number + > li { + position: relative; + list-style: none; + padding:0 0 0 2.5em; + margin-bottom:2em; + &:before { + content: counter(li); // set the content to be whatever the 'li' var is + counter-increment: li; // add to the counter var + position: absolute; + left: 0; + top:-0.2em; + color:#ccc; + line-height:1; + font: { + family: 'helvetica', 'arial', sans-serif; + weight:bold; + size:2.5em; + } + } + } +} + +dl { + margin: 0; + padding: 0; + dt { + font-size: 1em; + line-height: 1.5em; + font-weight: bold; + } + dd { + font-weight: 1em; + line-height: 1.5em; + margin:0 0 1em 0; + } +} + +blockquote { + p:before { + content: '“'; + } + p:after { + content: '”'; + } +} + +pre { + font-family: monospace; +} + +img { + //do this otherwise IE will just not display + //any img without a height defined + height:auto; +} + +select, input, textarea { + font-size: 99%; + max-width: 95%; +} + + +// links +a, +a:visited { + text-decoration:none; + color:#0BA7D1; + &:hover, + &:active { + text-decoration:underline; + color:#0D7CCE; + } +} + +// custom type +.small-print { + @extend small; + margin-bottom: 1.2307em; + color:#666666; +} +.meta{ + color:#555555; + font-style: italic; + margin-bottom: 0px; +} +.meta-2{ + font-family: 'helvetica', 'arial',sans-serif; + color:#666666; + font-style: italic; + font-size: 0.75em; +} + +h4.static{ + font-family: 'helvetica', 'arial',sans-serif; + text-transform: uppercase; + font-size: 0.875em; + line-height: 1.71428em; + color:#666; + margin-top: 2em; +} +h4.static-with-rule{ + @extend.static; + background: #f6f6f6; + border-top: 0.25em solid $primary; + margin-bottom:0.25em; + padding: 0.5em 1em; +} + +/* FORMS */ + +// input placeholders, these need to be on separate lines as if the browser +// can't understand a selector it will invalidate the whole line. +::-webkit-input-placeholder { + color: #666666; + font: { + style:italic; + size:0.9375em; + } +} +:-moz-placeholder { + color:#666666; + font: { + style:italic; + size:0.9375em; + } +} +:-ms-placeholder { + color:#666666; + font: { + style:italic; + size:0.9375em; + } +} +//this only gets used when the browser doesn't support @placeholder +.placeholder { + color:#666666; + font: { + style:italic; + size:0.9375em; + } +} + +// wrap anything inside the form in a fieldset to give +// us the right spacing +fieldset { + margin: 1em; +} + +input[type=text], +input[type=password], +input[type=email], +input[type=file], +textarea { + width: 100%; + // adjust so the sides line up + padding: 0.5em; + margin: 0 0 0 -0.5em; +} + +textarea { + border: 0.125em solid #888888; + @include border-radius(0.25em); + display: block; + font-size: 1em; + line-height: 1.5em; + font-family: 'helvetica', 'arial', sans-serif; + min-height:8em; +} + +input[type=text], +input[type=password], +input[type=email], +input[type=file] { + border: 0.125em solid #888888; + @include border-radius(0.25em); + display: block; + font-size: 1em; + line-height: 1em; +} +input[type=file] { + margin-bottom:1em; +} + +label{ + display: block; + margin-top: 1.25em; + margin-bottom: 0.25em; + font-weight: bold; + &.inline{ + display: inline; + padding: 0 2em 0 1em; + font-weight: normal; + } +} + +// grey background, full width box +.form-box { + margin: 0 -2em 0.25em -2em; + background:#eeeeee; + padding:1em 2em 1em 2em; + max-width:26em; + >input[type=text] { + margin-bottom:1em; + } + .title { + font-size:1.25em; + margin:0.5em 0; + } + h5 { + margin:0; + font: { + size:1.125em; + weight:normal; + } + strong { + font-size:2em; + margin-right:0.25em; + } + } +} +// IE6 doesn't extend the grey box back with the above negative margins, and +// the password box falls off screen for some reason. Just have boring margins, +// it looks okay. +.ie6 .form-box { + margin: 0 0 0.25em 0; +} + +.form-txt-submit-box { + min-height:3em; + input[type=password], + input[type=text], + input[type=email] { + width: 65%; + float:left; + } + input[type=submit] { + float:right; + width:28%; + margin-right:0.25em; + padding-top:0.7em; + padding-bottom:0.6em; + } +} + +.checkbox-group { + margin:1em 0; +} + + +// form errors +div.form-error, +p.form-error { + @include inline-block; + background:#ff0000; + color:#fff; + padding:0 0.5em; + margin:0 0 0 -0.5em; + @include border-radius(0.25em 0.25em 0 0); +} + +input.form-error, +textarea.form-error { + border-color:#ff0000; + @include border-radius(0 0.25em 0.25em 0.25em); +} + +ul.error { + background:#ff0000; + color:#fff; + padding:0 0.5em; + margin:0 0 0 -0.5em; + @include border-radius(0.25em); +} + +// don't display valid error boxes as now the page jump +// won't be until the user submits, which is fine +div.label-valid, +p.label-valid { + display:none !important; + visibility: hidden; +} + + + +/*** LAYOUT ***/ + +// Padding creates page margins on mobile +.container{ + padding: 0 1em; +} + +// Use full width to reverse .container margins +.full-width { + margin: 0 -1em; +} + +// #site-header creates grey bar in mobile +// .nav-wrapper-2 is used on desktop +#site-header{ + border-top: 0.25em solid $primary; + height: 3em; + @include background(linear-gradient(#000, #222 10%, #222 90%, #000)); + .container { + min-height:4em; + } +} +#site-logo{ + display: block; + width: 175px; + height: 40px; + top: 0.4em; + background: url('/cobrands/fixmystreet/images/sprite.png') -3px -3px no-repeat; + text-indent: -999999px; + position: absolute; + z-index:2; +} +.ie6 #site-logo { + background: url('/cobrands/fixmystreet/images/ie_logo.gif') 0 -5px no-repeat; +} +// this is a skip to nav for mobile users only +#nav-link { + width: 50px; + height: 48px; + background: url('/cobrands/fixmystreet/images/sprite.png') -5px -916px no-repeat; + display: block; + text-indent: -999999px; + position: absolute; + right:2em; + top:-2px; + &:hover { + top:2px; + } +} + + +#main-nav{ + ul{ + @include list-reset-soft; + li{ + a, span { + display: block; + padding: 0.5em 1em; + background:#f6f6f6; + color:#333; + font-size: 1.25em; + border-bottom: 0.25em solid #333; + } + a:hover, span.hover { + background: #333; + color:#fff; + text-decoration: none; + } + } + &#mysoc-menu{ + li { + a { + background:$primary; + &#mysoc-logo { + background-image:url('/cobrands/fixmystreet/images/sprite.png'); + background-repeat:no-repeat; + background-position:-240px -38px; + text-indent:-999999px; + } + } + } + } + } +} +.ie6 #main-nav ul#mysoc-menu li a#mysoc-logo { + background: url('/cobrands/fixmystreet/images/ie_mysoc_logo.gif') center no-repeat; +} +//defines where the table caption is (login stuff on mob, nav menu on desktop) +.wrapper { + width:100%; + display:table; + caption-side:bottom; +} +// this is the user's logged in details or the login link etc +#user-meta { + p { + position: relative; + background:$primary; + padding:1em 6em 1em 1em; + a { + position: absolute; + right:1em; + @include inline-block; + text-transform:uppercase; + font-size:0.75em; + background:#333; + padding:0.25em 0.75em; + color:#fff; + @include border-radius(0.25em); + } + } +} + + +// #key-tools is the list that's pulled out an stick to the bottom of the page of desktop, below is mostly just aesthetic +.shadow-wrap { + @extend .full-width; + ul#key-tools{ + @include list-reset-soft; + margin-bottom: 1em; + display: table; + width:100%; + li{ + display: table-cell; + vertical-align: bottom; + text-align: center; + border-right:0.25em solid #fff; + &:last-child { + border-right:none; + } + a { + display: block; + background-color: #f5f5f5; + background-repeat: no-repeat; + color:#333; + padding:4em 2em 1em 2em; + text-transform:uppercase; + font: { + size:0.6875em; + family: 'helvetica', 'arial', sans-serif; + } + &:hover, &.hover, &.active { + text-decoration:none; + background-color:#333; + color:#fff; + } + &.abuse { + background-image:url('/cobrands/fixmystreet/images/sprite.png'); + background-position:center -2424px; + } + &.feed { + background-image:url('/cobrands/fixmystreet/images/sprite.png'); + background-position:center -2563px; + } + &.chevron { + background-image:url('/cobrands/fixmystreet/images/sprite.png'); + background-position:center -2716px; + } + &.hover, &.active { + background-image:url('/cobrands/fixmystreet/images/sprite.png'); + background-position:center -2064px; + } + } + } + } +} + +//because display:table doesn't work we float +.ie6, .ie7 { + .shadow-wrap { + ul#key-tools{ + background:#f5f5f5; + li{ + float:left; + a { + padding-left:1.5em; + padding-right:3em; + } + } + } + } +} +.ie6 .shadow-wrap ul#key-tools li a { + &.abuse { + background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite.gif'); + background-position: right 0px; + } + &.feed { + background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite.gif'); + background-position: right -58px; + } + &.chevron { + background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite.gif'); + background-position: right -116px; + } + &:hover { + background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite_dark.gif'); + } +} + + +//footer blocks +#footer-mobileapps { + @extend .full-width; + padding:1em; + h4 { + margin:0; + } + ul { + @include list-reset-soft; + li { + border-bottom:1px solid #AFAFAF; + &:last-child { + border-bottom:none; + } + a { + display:block; + padding:0.5em 0; + } + } + } +} + +#footer-help { + ul { + @include list-reset-soft; + li { + border-bottom:1px solid #AFAFAF; + &:last-child { + border-bottom:none; + } + h4 { + margin:0.75em 0 0.25em 0; + } + p { + font-size:0.75em; + } + } + } +} + + + +/*BUTTONS*/ + +// Default style set for buttons, inputs and .btn class. Red and green class available. + +button, input[type=submit],.btn{ + @include button-reset; +} + +.green-btn, +button.green-btn, +input.green-btn{ + @include button-reset(#9FDE23, #7FB900, #5B9700, #fff, #9FDE23, #7FB900, #5B9700, #fff); +} + +.red-btn, +button.red-btn, +input.red-btn{ + @include button-reset(#FF0038, #BF002A, #80001C, #fff, #FF0038, #BF002A, #80001C, #fff); +} + +.final-submit, +input.final-submit { + margin:1em 0.5em; + float:right; +} + +.button-right, +.button-left, +a.button-right, +a.button-left { + @include inline-block; + cursor:pointer; + font-size: 1em; + line-height: 1; + margin:0; + border:1px solid #999; + color:#333; + background: #eee; + @include border-radius(4px); + &:hover{ + color:#fff; + background:#777; + text-decoration: none; + border:1px solid #666; + } +} +.button-right, +a.button-right, +:hover.button-right, +a:hover.button-right { + padding:1em 3em 1em 1em; + background-image: url('/cobrands/fixmystreet/images/sprite.png'); + background-repeat:no-repeat; + background-position:right -686px; +} + +.button-left, +a.button-left, +:hover.button-left, +a:hover.button-left { + padding:1em 1em 1em 3em; + background-image: url('/cobrands/fixmystreet/images/sprite.png'); + background-repeat:no-repeat; + background-position:-18px -802px; +} + +.big-green-banner { + position: relative; + z-index:1000; + top:-1.75em; + background: $contrast1; + color: #fff; + padding:1em; + text: { + transform:uppercase; + align:center; + } + font-size:0.875em; + &:before { + content: ""; + left:-0.5em; + top:0; + position: absolute; + width: 0; + height: 0; + border-left: 0.5em solid transparent; + border-bottom: 0.5em solid #4B8304; + } +} + +.banner { + position: relative; + z-index:1100; + p { + position: absolute; + top:-1.95em; + right:0; + @include inline-block; + font-size:0.6875em;//11px + line-height:1em; + padding:0.5em 1em; + margin:0; + color:#1a1a1a; + background: #ccc; + text: { + transform:uppercase; + align:center; + } + &:before { + content: ""; + left:-0.5em; + top:0; + position: absolute; + width: 0; + height: 0; + border-left: 0.5em solid transparent; + border-bottom: 0.5em solid #888; + } + &#fixed { + color:#fff; + background: $contrast1; + &:before { + border-bottom: 0.5em solid #4B8304; + } + } + } +} + +/*OTHER*/ + +.plain-list { + @include list-reset-soft; + li { + margin-bottom:1em; + } +} + +.issue-list{ + margin: 0 0 1em 0; + padding: 0; + border-bottom: 0.25em solid $primary; + li{ + list-style: none; + background: #f6f6f6; + margin: 0.25em 0 0 0; + padding: 0.5em 1em; + display:block; + .update-wrap { + display:table; + width:100%; + .update-text, + .update-img { + display:table-cell; + vertical-align:top; + p { + margin-bottom: 0.5em; + } + } + .update-img { + text-align:right; + img { + margin:-0.5em -1em 0 0.5em; + height:auto; + } + } + } + } +} +//display:table fixes +.ie7, .ie7 { + .issue-list li .update-wrap { + .update-text { + float:left; + width:19em; + } + .update-img { + float:right; + } + } +} + +.issue-list-a { + margin: 0 0 1em 0; + padding: 0; + border-bottom: 0.25em solid $primary; + li { + list-style: none; + margin:0; + padding:0; + a { + margin: 0.25em 0 0 0; + display:table; + background: #f6f6f6; + color:#222222; + width:100%; + &:hover { + text-decoration:none; + color:#222222; + background:#e6e6e6; + } + .text, + .img { + display:table-cell; + vertical-align:top; + } + .img { + text-align:right; + img { + height:auto; + } + } + .text { + padding:0.25em 1em; + h4 { + margin:0; + } + small { + color:#666; + } + } + } + >p { + margin: 0.25em 0 0 0; + padding: 0.5em 1em; + background: #f6f6f6; + } + } +} +.list-a { + @extend .issue-list-a; + a { + padding:0.5em 1em; + font-weight:bold; + } +} +//display:table fixes +.ie6, .ie7 { + .issue-list-a { + overflow:hidden; + li a { + clear:both; + width:auto; + display:block; + overflow:hidden; + .text { + float:left; + width:18em; + } + .img { + width:6.25em; + float:right; + } + } + } +} +.ie6 .issue-list-a li a { + height:5.5em; + .img img { + height:60px; + } +} + +// fancybox gallery images have a magnifying glass in the corner +.update-img { + a { + @include inline-block; + position:relative; + span { + position:absolute; + top:0; + right:0; + display:block; + width:20px; + height:20px; + opacity: 0.5; + background:#fff url(images/sprite.png) -16px -1098px no-repeat; + //hide text - http://nicolasgallagher.com/another-css-image-replacement-technique/ + font: 0/0 a; + color: transparent; + } + &:hover span { + opacity: 1; + } + } +} +//bit of a hack - as we can't use em's, push the span out to the right +//by how much it would be if the user did not resize the text +.issue-list li .update-wrap .update-img a span { + right:-16px; + top:-8px; +} + +.problem-header { + margin-bottom:1em; +} +.problem-header .update-img { + float: right; + margin-left: 0.5em; + margin-bottom: 0.5em; +} + +// map stuff +#map_box{ + @extend .full-width; + background: #333; + height: 29em; + margin-bottom: 1em; + overflow: hidden; + position: relative; + #map { + width:100%; + height:100%; + } +} + +// OpenLayers fix for navigation being top right +// Left and right so that zoom can be left, pan right. +#fms_pan_zoom { + right: 0.5em !important; + top: 0.5em !important; + left: 0.5em !important; +} +// The left and right of the above causes the navigation to move off-screen left in IE6. +// XXX Need to check IE7 +.ie6 #fms_pan_zoom { + left: auto !important; +} + +// Openlayers map controls (overrides) +#fms_pan_zoom_panup, +#fms_pan_zoom_pandown, +#fms_pan_zoom_panleft, +#fms_pan_zoom_panright, +#fms_pan_zoom_zoomin, +#fms_pan_zoom_zoomout { + width:36px !important; + height:36px !important; + text-indent:-999999px; + opacity:0.85; + background:url('/cobrands/fixmystreet/images/sprite.png') no-repeat; + &:hover { + opacity:1; + } + filter: none !important; // Override OpenLayers PNG handling of the navigation +} + +#fms_pan_zoom_zoomworld { + display:none !important; + visibility:none !important; +} + +#fms_pan_zoom_panup { + background-position:-42px -222px; + right:30px !important; + left: auto !important; + top:0 !important; +} +#fms_pan_zoom_pandown { + background-position:-42px -282px; + right:30px !important; + left: auto !important; + top:72px !important; +} +#fms_pan_zoom_panleft { + background-position:-12px -252px; + width:48px !important; + right:48px !important; + left: auto !important; + top:36px !important; +} +#fms_pan_zoom_panright { + background-position:-60px -252px; + width:48px !important; + right:0 !important; + left: auto !important; + top:36px !important; +} +#fms_pan_zoom_zoomin { + background-position:-152px -223px; + height:44px !important; + left:0 !important; + top:0 !important; +} +#fms_pan_zoom_zoomout { + background-position:-152px -259px; + height:44px !important; + left:0 !important; + top:44px !important; +} + +//hide pins, show old reports etc +#sub_map_links { + position: absolute; + left: 0; + right:0; + bottom: 0; + z-index: 1100; + background:#333; + background:rgba(0, 0, 0, 0.7); + margin:0; + a { + @include inline-block; + font-size:0.6875em; + color:#fff; + padding:0.6em 3em 0.5em 1em; + background-repeat:no-repeat; + &#hide_pins_link { + background-image:url('/cobrands/fixmystreet/images/sprite.png'); + background-position: right -3976px; + } + &#all_pins_link { + background-image:url('/cobrands/fixmystreet/images/sprite.png'); + background-position: right -4022px; + } + &#map_permalink { + background-image:url('/cobrands/fixmystreet/images/sprite.png'); + background-position: right -4070px; + } + &.feed { + background-image:url('/cobrands/fixmystreet/images/sprite.png'); + background-position: right -3936px; + } + &:hover { + background-color:#000; + text-decoration:none; + } + } +} + +.ie6 #sub_map_links a { + &#hide_pins_link { + background-image:url('/cobrands/fixmystreet/images/ie_sub_map_links_sprite.gif'); + background-position: right 1px; + } + &#all_pins_link { + background-image:url('/cobrands/fixmystreet/images/ie_sub_map_links_sprite.gif'); + background-position: right -45px; + } + &#map_permalink { + background-image:url('/cobrands/fixmystreet/images/ie_sub_map_links_sprite.gif'); + background-position: right -93px; + } +} + +#mob_sub_map_links { + position: absolute; + z-index:1100; + bottom:0; + display:table; + margin:0; + width:100%; + background:rgba(0, 0, 0, 0.7); + a { + color:#fff; + width:50%; + padding:0.5em 0; + font-size:1em; + display:table-cell; + text-align:center; + &:hover { + background:#000; + text-decoration:none; + } + } + &.map_complete { + background:none; + display:block; + border-bottom:4px solid #fff; + a#try_again { + display:block; + margin:0 auto 6em auto; + background:rgba(0, 0, 0, 0.8); + @include border-radius(0.5em); + } + a#mob_ok { + position:absolute; + right:1em; + bottom:0; + height:20px; + padding-top:30px; + display:block; + width:4em; + background:#fff url('/cobrands/fixmystreet/images/sprite.png') 12px -4140px no-repeat; + color:#000; + } + } +} + +.mobile-map-banner { + margin:0; + position: absolute; + top:0; + left:0; + right:0; + font-size:0.75em; + background:rgba(0, 0, 0, 0.7); + padding:0.75em 30px; + a { + @include button-reset(#333, #1a1a1a, #1a1a1a, #fff, #333, #1a1a1a, #1a1a1a, #fff); + font: { + weight:normal; + size:0.875em; + } + line-height:1; + padding:0.5em 0.75em; + position:absolute; + left:0.3em; + top:0.3em; + } +} + +.olControlAttribution { + bottom: 3.25em !important; + right: 0.25em !important; + left: 0.25em !important; + color: #222222; + font-size:0.75em !important; +} +.olControlAttribution img { + vertical-align: bottom; +} +.olControlPermalink { + bottom: 3px !important; + right: 3px; +} + +/* Drag is only present in noscript form. XXX Copy from core. */ +#drag { + input, img { + position: absolute; + border: none; + max-width: none; + } + input { + cursor: crosshair; + background-color: #cccccc; + } + img { + cursor: move; + } + img.pin { + z-index: 100; + background-color: inherit; + } + a img.pin { + cursor: pointer; + cursor: hand; + } +} + +// only on mobile, this is a sidebar on desk (#report-a-problem-sidebar) +a.rap-notes-trigger, +a:hover.rap-notes-trigger { + display:block; + width:90%; + padding-left:5%; + padding-right:5%; +} +.rap-notes { + margin:1em 0; +} + +//report a problem tabs +#problems-nav { + padding:0 1em; + overflow:hidden; + border-bottom:0.25em solid #333; + ul { + @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; + } + } + } + } +} + +//display:table fixes +.ie6, .ie7 { + #problems-nav { + clear:both; + margin:0; + padding:0; + ul li { + float:left; + } + } +} + + +table.nicetable { + width:100%; + margin-bottom:2em; + thead { + border-bottom:0.25em solid #ccc; + th { + font-size:0.75em; + } + } + tr { + &.a { + background:#f6f6f6; + } + &:nth-child(even) { + background:#f6f6f6; + } + &.gone { + color: #666666; + background-color: #cccccc; + } + &:hover { + background:#FFF5CC; + cursor:pointer; + } + td { + padding:0.25em; + a { + &:hover { + text-decoration:none; + } + } + } + } + .title { + text-align:left; + } + .data { + width:12%; + } +} + +.promo { + @extend .full-width; + background:$primary; + padding:1em; + margin-bottom:1em; + overflow:hidden; + position: relative; + .close-promo { + position:absolute; + top:0.5em; + right:0.5em; + display:block; + width:16px; + height:16px; + text-indent:-999999px; + background:url(images/sprite.png) -341px -263px no-repeat; + @include border-radius(4px); + &:hover { + background:#222 url(images/sprite.png) -341px -223px no-repeat; + } + } +} + +.alert { + @extend .full-width; + background:#ff0000; + padding:1em; + margin-bottom:1em; + color:#fff; + a, a:hover { + color:$primary; + } +} + +.pagination { + text-align:center; + padding:0.5em 1em; + background:#eee; + position:relative; + .prev { + position:absolute; + left:0.5em; + } + .next { + position:absolute; + right:0.5em; + } + a { + @include inline-block; + background:$primary; + padding-left:0.5em; + padding-right:0.5em; + color:#1a1a1a; + &:hover { + color:#1a1a1a; + text-decoration:none; + background:$primary/1.1; + } + } +} + +// this is a bit of a hack to get some differentation between desk and mobile +.desk-only { + display:none !important; +} + +// hide anything with this class if js is working +.js .hidden-js { + display: none; + visibility: hidden; +} + +// hide anything with this class if js is NOT working +.no-js .hidden-nojs { + display: none !important; + visibility: hidden; +} + + +/* Front page */ +#front-main { + text-align:center; + h2 { + font: { + style:italic; + family: 'helvetica', 'arial', sans-serif; + size:1.1875em; + } + color:#4d4d4d; + } + #postcodeForm { + @extend .full-width; + padding:1em; + color: $primary_text; + background: $primary; + font-family: 'helvetica', 'arial', sans-serif; + label { + margin:0; + } + div { + display:table; + width:100%; + background:#fff; + border:1px solid $primary_b; + input#pc { + display:table-cell; + margin:0; + padding:0.25em 2%; + width:82%; + border:none; + background:none; + line-height:1.5em; + } + 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); + &:hover { + background:#333; + } + } + } + } + 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%; + color: $primary_text; + 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 { + .issue-list-a { + border-bottom:none; + margin-bottom:0; + } +} + +#alerts { + ul { + margin-bottom: 1em; + } + li { + padding: 0em; + margin-bottom: 0.5em; + } + .a { + background: #f6f6f6; + } + img[width="16"] { + float: right; + } +} + diff --git a/web/cobrands/fixmystreet/_colours.scss b/web/cobrands/fixmystreet/_colours.scss index 8179f470d..2463cdeeb 100644 --- a/web/cobrands/fixmystreet/_colours.scss +++ b/web/cobrands/fixmystreet/_colours.scss @@ -1,11 +1,8 @@ /* COLOURS */ -$colour_dark: #4e1602; -$colour: #c23704; -$colour_alt: #ffeeaa; - - $primary: #FFD000; +$primary_b: #F3B11E; +$primary_text: #222; $contrast1: #00BD08; -$contrast2: #AA8D11;
\ No newline at end of file +$contrast2: #AA8D11; diff --git a/web/cobrands/fixmystreet/_layout.scss b/web/cobrands/fixmystreet/_layout.scss new file mode 100644 index 000000000..534b285b1 --- /dev/null +++ b/web/cobrands/fixmystreet/_layout.scss @@ -0,0 +1,1065 @@ +@import "compass"; +@import "_mixins"; + +//hacks for desk/mob only stuff +.desk-only { + display:block !important; +} +.mob-only { + display:none !important; +} + +body { + background: #1A1A1A url(/cobrands/fixmystreet/images/tile.jpg) 0 0 repeat; +} + +h1 { + margin-top: 0; +} + +// Page wrapper and header bits follow + +.container{ + margin: 0 auto; + padding: 0em; + width: 60em; + position: relative; + z-index:1; +} + +//z-index stack order gets reset to 0 in ie6/7 if you position anything, +//so to fix things we give it a high value (don't ask me why) +//see: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/ +//this affects #site-logo +.ie6, .ie7 { + .container { + z-index:100; + } +} + +.wrapper{ + display: table; + caption-side: top; + width: 100%; + .table-cell { + display:table-cell; + } +} + +//pad the top of the wrapper to allow space for the menu to fit in +//when its positioned absolute below +.ie6, .ie7 { + .wrapper { + padding-top:4em; + } +} + +.nav-wrapper{ + display: table-caption; + .nav-wrapper-2{ + width: 100%; + min-height: 4em; + position: absolute; + border-top:4px solid #1a1a1a; + @include border-image(url(/cobrands/fixmystreet/images/tile-y-border.jpg) 4 0 0 0); + border-left:0; + border-right:0; + z-index:2; + } +} + +//position absolute the menu as ie doesn't like display:table +.ie6, .ie7 { + .nav-wrapper { + position: absolute; + top:0; + left:0; + width:100%; + .nav-wrapper-2 { + // position static as well so we fix lots of the z-index issues + position:static; + } + } +} + +// Resets a lot of the mobile styling. #site-header only used to help position logo on desktop +#site-header { + height: auto; + background: none; + border-top: 0px; + .container { + position: static;//reset position so the nav links become clickable + } +} +#site-logo { + top: 0.9em; + position: absolute; + z-index: 3; +} +.ie6, .ie7 { + #site-header { + height:3em; + .container { + //ie broken z-index bug: the site-logo won't appear if we don't do this + //doesn't seem to render the nav link unclickable like in other browsers + position: relative; + } + } + #site-logo { + position: absolute; + top:-3.25em; + } +} +#nav-link { + left:-999999px; +} +#main-nav{ + margin: 0 auto; + padding: 0em; + width: 60em; + ul{ + list-style: none; + padding: 0px; + margin: 0px; + float:right; + li{ + list-style: none; + display: inline; + margin: 0px; + padding: 0px; + float:left; + a, + span { + display: block; + color:#fff; + background: none; + border-bottom: none; + } + } + &#main-menu{ + li{ + a, span{ + padding: 0.75em; + font-size: 0.9em; + } + a:hover{ + background:#444; + @include background(linear-gradient(#000, #444 10%, #444 95%, #111)); + } + a.report-a-problem-btn { + background:$primary; + padding:0.25em; + margin:0.5em; + color:#333; + @include border-radius(0.25em); + &:hover { + background:$primary/1.1; + } + } + span { + color:$primary; + } + } + } + &#mysoc-menu{ + padding: 0em 0.5em; + margin-left: 0.25em; + background:$primary url(/cobrands/fixmystreet/images/tile-y.jpg); + @include border-radius(0 0 0.375em 0.375em); + li{ + a{ + background:none; + color:#000; + text-transform: uppercase; + font-size: 0.6875em; + padding: 1.3em 0.7em 1em 0.7em; + &#mysoc-logo { + width:84px; + height:16px; + background-position:-260px -43px; + opacity: 0.8; + &:hover { + opacity: 1; + } + } + &:hover{ + color:#fff; + } + } + } + } + } +} + + + + +// .content Is the white box + +// The narrow single column box +.content{ + width: 27em; + margin-top: 3em; + background: #fff; + padding: 1em; + padding-bottom: 3em; + margin-left: 0.5em; + margin-bottom: -1em; + @include box-shadow(0px 0px 6px 1px #000); +} +.ie6, .ie7, .ie8 { + .content { + // If no box-shadow, just want a boring black border to stand it out from the map. + border: 1px solid black; + //take off margins so we line up properly + margin: 0; + } +} +//weird margining thing for ie8 +.ie8 .content { + margin-top:3em; +} + +// map page - has fixed header and different styling +body.mappage { + .content { + float:left; + } + #main-nav ul#main-menu li a, + #main-nav ul#main-menu li span { + padding: 1.4em 0.75em 1.35em 0.75em; + } + #main-nav ul#main-menu li a.report-a-problem-btn { + padding: 0.5em; + margin:0.9em 0.25em 0.85em 0.25em; + } + .nav-wrapper{ + .nav-wrapper-2{ + position: fixed; + background: #222; + @include background(linear-gradient(#000, #222 10%, #222 90%, #000)); + } + } + #site-logo{ + position: fixed; + } +} +.ie6, .ie7 { + body.mappage { + // The below is *mandatory* to allow pins/zoom to be clickable in IE6/7. Do NOT remove. + .container { + float: left; + width: 27em; + margin-left: 1.4em; + } + .nav-wrapper{ + z-index:1; + .nav-wrapper-2 { + position:static; + } + } + #site-logo { + position: absolute; + } + } +} +.ie6 { + body.mappage { + .container { + margin-left: 0.7em; + } + } +} +//ie8 needs different stuff on .nav-wrapper so we +//have to define all the rest of it again as this resets +//the z-index base yet again :S +.ie8 { + body.mappage { + .nav-wrapper{ + position: relative; + z-index:0; + .nav-wrapper-2 { + position:static; + } + } + #site-logo { + position: absolute; + } + } +} + + + +// full width page +body.fullwidthpage { + .content { + width: 57em; + } + .intro { + width:40em; + } +} +// two thirds width page, also has option for a sidebar which can be sticky or not +body.twothirdswidthpage { + @extend .fullwidthpage; + .content { + width:40em; + position: relative; + aside { + background:#eee; + position:absolute; + left:42em; + top:0; + z-index: -1; + width:13em; + padding:1em; + @include box-shadow(0px 0px 6px 1px #000); + h2 { + margin-top: 0; + } + img { + margin-bottom: 0.25em; + } + } + .sticky-sidebar { + position: absolute; + left:42em; + z-index: -1; + aside { + position: fixed; + top:7em; + left:auto; + } + } + } +} +//as ie6 doesn't like 'fixed' we will make it absolute again +.ie6 body.twothirdswidthpage .content .sticky-sidebar { + position:static; + aside { + position:absolute; + left:42em; + top:0; + } +} + + +// table wrapper - this enables anything to become a +// table with div children as table cells +.tablewrapper { + display:table; + width:100%; + padding:0 0 1em 0; + >div { + display:table-cell; + width:50%; + } + .full-width { + width:auto; + margin:0; + } +} + +//fix table to be a block for ie, float the children +.ie6, .ie7 { + .tablewrapper { + display:block; + div {//ie6 doesn't support '>div', so we'll go with the somewhat risker 'div' + width:48%; + display:block; + float: left; + border:none !important; + } + } +} + +// adds border to the top and goes full width +.bordered { + margin:0 -1em; + padding:0 1em; + width:auto; + border-top:0.25em solid $primary; +} + +//footer blocks +#footer-mobileapps { + border-right:1em solid #fff; + background:none; + padding:0; + @include box-shadow(inset rgba(0, 0, 0, 0) 0 0 0); + h2 { + color:#222; + margin-top:0; + } + ul { + @include list-reset; + 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(/cobrands/fixmystreet/images/sprite.png) -12px -3610px no-repeat; + opacity: 0.8; + &:hover { + 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; + } + } + } + } +} +.ie6, .ie7 { + #footer-mobileapps { + margin:0 0.5em; + margin-right:2%; + } +} +.ie6 #footer-mobileapps ul li a { + background:url(/cobrands/fixmystreet/images/ie_mobileapps.gif) -1px -1px no-repeat; + &.m-app-iphone-streetreport { + background-position: -1px -69px; + height:50px; + } + &.m-app-droid { + background-position: -1px -148px; + } + &.m-app-nokia { + background-position: -1px -212px; + width:74px; + } +} + +#footer-help { + border-left:1em solid #fff; + ul { + display:table; + li { + display:table-cell; + border-bottom:none; + &:last-child { + border-left:1.25em solid #fff; + } + } + } +} +.ie6, .ie7 { + #footer-help { + margin-left:2%; + ul { + width:100%; + li { + float:left; + width:45% + } + } + } +} + + +// map box (fallback for non js really as most users +// will have fullscreen map) +#map_box{ + position: absolute; + height: 29em; + width: 29em; + right: 1em; + top: 3em; + z-index:1; +} + +// Pull OpenLayers navigation down a bit +#fms_pan_zoom { + top: 4.75em !important; +} + +// push zoom back over to right +#fms_pan_zoom_zoomin { + left:auto !important; + right:30px; + top:130px !important; +} +#fms_pan_zoom_zoomout { + left:auto !important; + right:30px; + top:174px !important; +} + +.olControlAttribution { + bottom:0.5em !important; + left: auto !important; +} + +#sub_map_links { + left:auto; + bottom:auto; + bottom:2em; + #map_links_toggle { + display:block; + cursor: pointer; + position:absolute; + left:-1em; + width:1em; + height:100%; + background:#000 url(/cobrands/fixmystreet/images/sprite.png) right -4119px no-repeat; + @include border-radius(0.25em 0 0 0.25em); + &:hover { + left:-1.5em; + //use border so we don't have to redefine the background-position + border-right:0.5em solid #000; + } + &.closed { + background-position: right -4159px; + } + } +} +.ie6 #sub_map_links #map_links_toggle { + height:1.75em; + background:#000 url('images/ie_sub_map_links_sprite.gif') center -143px no-repeat; + &.closed { + background-position: center -183px; + } +} + +// log in bit, pokes above the .content div +#user-meta{ + display:block; + position: relative; + max-width: 57em; + margin:0 auto; + p { + @include inline-block; + position:absolute; + top:1em; + height:2em; + padding:0.25em 6em 0.5em 0.5em; + @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px); + a { + top:0.5em; + right:0.5em; + font-size:0.6875em; + padding:0.5em 0.75em; + line-height:1em; + &:hover { + text-decoration:none; + background:#444; + } + } + } +} +.ie6, .ie7 { + #user-meta { + z-index:1; + p { + top:-2em; + } + } +} +.ie6 #user-meta { + width:57em; //ie6 doesn't like max-width +} + + + +// Wraps around #key-tools box - sticks to the bottom of the screen on desktop +.shadow-wrap { + position:fixed; + z-index:10; //this is just to ensure anythign inside .content that has position set goes sites it + bottom: 0; + width: 29em; + overflow: hidden; + padding-top: 3em; + ul#key-tools { + border-top: 0.25em solid $primary; + margin: 0; + @include box-shadow(-0em 0px 1em 1em #fff); + li { + border:none; + a { + font-size: 0.75em; + color:#666; + padding: 0.5em 1.5em 0.5em 0; + text-transform:none; + &.abuse { + background-image:url(/cobrands/fixmystreet/images/sprite.png); + background-position:right -2935px; + } + &.feed { + background-image:url(/cobrands/fixmystreet/images/sprite.png); + background-position:right -3074px; + } + &.chevron { + background-image:url(/cobrands/fixmystreet/images/sprite.png); + background-position:right -3225px; + } + &.hover { + background-image:url(/cobrands/fixmystreet/images/sprite.png); + background-position:right -1876px; + } + } + } + &.singleton { + li { + text-align:right; + a { + padding-right:3em; + } + } + } + } + &.static { + padding:0 0 1em 0; + position: static; + } +} +// The padding is for the fading out when it's fixed positioned, which it isn't in IE6. +.ie6 .shadow-wrap { + padding-top: 0; +} + +// pokes over the RHS with a little triangle +.big-green-banner { + top:auto; + right:-1.25em; + margin-left:-2em; + font-size:1.375em; + padding:1em 3em 1em 1em; + background: $contrast1 url(/cobrands/fixmystreet/images/sprite.png) right -2188px no-repeat; + &:before { + right:0; + left:auto; + top:-0.5em; + position: absolute; + border-top: 0.5em solid transparent; + border-left: 0.5em solid #4B8304; + border-bottom:none; + } +} +.ie6 .big-green-banner { + background: $contrast1 url(/cobrands/fixmystreet/images/ie_green_chevron.gif) right center no-repeat; +} + +.banner { + // state banners + p { + top:-2.25em; + padding:1em; + &:before { + left:-0.75em; + border-left: 0.75em solid transparent; + border-bottom: 0.75em solid #888; + } + &#fixed { + padding-top:5em; + background-image:url(/cobrands/fixmystreet/images/sprite.png); + background-position:-324px -326px; + background-repeat:no-repeat; + &:before { + border-bottom: 0.75em solid #4B8304; + } + } + } +} +.ie6 .banner p { + top:-1.5em; + &#fixed { + background-image:url(/cobrands/fixmystreet/images/ie_fixed.gif); + background-position:center 0.75em; + } +} + + +// for pulling elements fullwidth regardless +// of .contents' padding +.full-width{ + margin: 0 0 0em -1em; + width: 29em; +} + +/*FORMS*/ +input[type=text], +input[type=password], +input[type=email], +textarea{ + width: 25em; +} +.form-box { + max-width:25em; +} + + +/* form errors */ +div.form-error, +p.form-error { + display:block; + width:24.7em; +} + +input.form-error, +textarea.form-error { + @include border-radius(0 0 0.25em 0.25em); +} + + +// Report a problem sidebar notes +#report-a-problem-sidebar { + position:absolute; + z-index:-1;//push behind .content, .container resets z-index for this + left:29.5em; + top:5em; + width:15em; + @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px); + .sidebar-tips { + background:#eeeeee; + padding:1em; + font-size:0.75em; + } + .sidebar-notes { + background:#333333; + padding:1em; + color:#ffffff; + font-size:0.75em; + } +} +.ie6, .ie7 { + #report-a-problem-sidebar { + left: 29em; // 0.5em left margin gone on .content in IE6/7, so reduce this accordingly. + } +} + +.no-js .general-sidebar-notes, +.no-js #report-a-problem-sidebar { + position: static; + width: auto; + @include box-shadow(rgba(0, 0, 0, 0), 0, 0, 0); + .sidebar-tips, + .sidebar-notes { + font-size:1em; + } +} + +// More general sidebar notes +.general-sidebar-notes { + position: absolute; + left:29.5em; + width:15em; + z-index: -1; //push behind .content, .container resets z-index for this + @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px); + p { + background:#eeeeee; + font-size:0.75em; + padding:0.75em; + margin:0; + &.dark { + background:#333333; + color:#ffffff; + } + } +} + +// Frontpage + +body.frontpage { + .table-cell { + // we do this so we can have full screen width elements + >.container { + width:100%; + } + .content { + margin:14em auto 0 auto; + } + } + .nav-wrapper-2{ + height:6em; + } + #site-header{ + height:9em; + } + #site-logo{ + top:3em; + width: 300px; + height: 60px; + background-position:-2px -108px; + } + #user-meta { + z-index:10; + p { + top:-4em; + right:0; + color:#FFD000; + background:none; + @include box-shadow(rgba(0, 0, 0, 0) 0 0 0); + a { + background:#fff; + color:#1a1a1a; + &:hover { + background:#ddd; + } + } + } + } +} +//logo fix +.ie6, .ie7, .ie8 { + body.frontpage { + #site-logo { + position:relative; + width:60em; + margin:0 auto; + } + } +} +.ie6, .ie7 { + body.frontpage { + #site-header { + height:3em; + } + #site-logo { + top:-1em; + } + #user-meta p { + top:-2em; + } + } +} +.ie6 body.frontpage #site-logo { + background:url(/cobrands/fixmystreet/images/ie_front_logo.gif) 0 0 no-repeat; +} +//weird margining thing for ie8 +.ie8 body.frontpage { + #front-main { + top:-12em; + } + .table-cell .content { + margin-top:12em; + } +} + +// big yellow bit full screen width +#front-main { + color: $primary_text; + background: $primary url(/cobrands/fixmystreet/images/tile-y.jpg); + position:absolute; + width:100%; + left:0; + top:-15em; + #front-main-container { + max-width: 57em; + margin:0 auto; + } + h2 { + font-style:normal; + margin:0; + color:#222; + } + #postcodeForm { + background:none; + overflow:hidden; + margin-right:0.5em; + label { + margin:0.5em 0; + } + div { + display:block; + margin:0 auto; + width:20em; + overflow:hidden; + input#pc { + display:block; + float:left; + padding:0.25em 0.5em; + height:1.5em; + width:16em; + } + input#submit { + display:block; + float:right; + width:3em; + height:2.3em; + padding-top:0.2em; + } + } + } + a#geolocate_link { + background:none; + color:#222; + margin:-1em 0 0.5em 0; + &:hover { + text-decoration:underline; + background:none; + } + } +} +.ie6, .ie7 { + #front-main { + top:2em; + } +} + + +#front-howto { + border-right:1em solid #fff; + #front_stats { + background:none; + border-top:0.25em solid $primary; + padding-top:1em; + div { + big { + color:$primary; + font-size:3.2308em; + } + } + } +} +.ie6, .ie7 { + #front_stats { + div { + width:8em; + float:left; + } + } +} + +#front-recently { + border-left:1em solid #fff; +} + +#front-howto h2, +#front-recently h2 { + margin-top:0; +} + + +.ie6, .ie7 { + .tablewrapper { + #front-howto { + margin-right:2%; + } + #front-recently { + margin-left:2%; + } + } +} + + + + +/* MEDIA QUERIES */ +@media only screen and (min-width: 48em) and (max-width: 61em) { + .container { + width: 100%; + } + /*FORMS*/ + input[type=text], + input[type=password], + input[type=email], + textarea{ + width: 95%; + } + + // Remove central positioning of mainmenu and float right. + // Left padding is to ensure no overlap of the site-logo + // Background styling replicates header styling + + #main-nav{ + width: auto; + float:right; + padding-left: 180px; + } + .nav-wrapper { + // width:auto; + .nav-wrapper-2 { + // width:auto; + } + } + + //Main menu drops below logo and my-soc menu + #main-menu{ + margin-top: 3em; + } + //therefore header needs to open up + #site-header { + height:6em; + } + // Pull OpenLayers navigation down a bit more + #fms_pan_zoom { + top: 7em !important; + } + + //fix the left margin on login bit + #user-meta { + p { + left:1em; + } + } + body.frontpage { + #user-meta { + p { + left:auto; + } + } + } + + //Map becomes percentage width + #map_box{ + left: 32em; + width:auto; + } + + //put the RAP notes into the main copy area + // Note: Also used for the non-JS case. + #report-a-problem-sidebar, + .general-sidebar-notes { + position: static; + width: auto; + @include box-shadow(rgba(0, 0, 0, 0), 0, 0, 0); + .sidebar-tips, + .sidebar-notes { + font-size:1em; + } + } + + //Revert to mobile use of the .full-width class + .full-width{ + width: auto; + margin: 0em -1em 0 -1em; + } + + //make fullpage auto width + body.fullwidthpage .content { + width: auto; + } + + //make twothirdswidthpage nearly as small as main + //.content: just enough to still fit the sidebar in + body.twothirdswidthpage { + .content { + width:30em; + .sticky-sidebar { + left:32em; + top:30em; + aside { + top:9em; + } + } + } + } +} diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss index a17c93912..55b006b42 100644 --- a/web/cobrands/fixmystreet/base.scss +++ b/web/cobrands/fixmystreet/base.scss @@ -9,7 +9,6 @@ @import "_mixins"; @import "compass"; - /* HEADINGS and TYPOGRAPHY */ @font-face { @@ -74,1468 +73,5 @@ noindex:-o-prefocus, #site-header { font-family: sans-serif; } - -body { - font-family: 'MuseoSans', 'Helvetica', 'Arial', sans-serif; - margin:0; - font-size:1em; - line-height:1.5; - color:#222; -} - - -p { - font-size: 1em; - font-weight: normal; - margin:0 0 1em 0; -} - -small{ - font-family: 'helvetica', 'arial',sans-serif; - font-style: italic; - font-size: 0.8125em; - line-height: 1.2307em; -} - -h1 { - font-family:'Museo300-display', 'Helvetica', 'Arial', sans-serif; - font-size: 2em; - line-height: 1em; - font-weight: normal; - margin-top: 0.5em; - margin-bottom: 0.5em; -} -#front-main h1 { - margin-top: 0.7em; -} -h1#reports_heading span { - display: none; -} -h1#reports_heading a { - display: block; - font-size: 50%; -} - -h2 { - font-family:'Museo300-display', 'Helvetica', 'Arial', sans-serif; - font-size: 1.5em; /*24px*/ - line-height: 1.3333em; /*32px*/ - font-weight: normal; - margin-top: 1.333333333em; /*32px*/ - margin-bottom: 0.666666666em; /*16px*/ -} - -h3 { - font-size: 1.25em; - line-height: 1.20em; - margin-top: 1.2em; - margin-bottom: 0.8em; - font-weight: bold -} - -h4 { - font-size: 1em; - font-weight: bold; - margin-bottom: 1em; -} - -// default list styles -ul, ol { - font-size: 1em; - margin-bottom: 2em; - margin-left: 2em; - padding:0; -} - -li{ - margin-bottom: 0.5em; -} - -ul li{ - list-style: square; -} - -ol li { - list-style:decimal; -} - -// lets you have a traditional ol but with nicely styled numbers -// for older browsers it just falls back to the normal ol -ol.big-numbers { - padding: 0; - margin: 0; - counter-reset: li; // reset counter to be 'li' instead of a number - > li { - position: relative; - list-style: none; - padding:0 0 0 2.5em; - margin-bottom:2em; - &:before { - content: counter(li); // set the content to be whatever the 'li' var is - counter-increment: li; // add to the counter var - position: absolute; - left: 0; - top:-0.2em; - color:#ccc; - line-height:1; - font: { - family: 'helvetica', 'arial', sans-serif; - weight:bold; - size:2.5em; - } - } - } -} - -dl { - margin: 0; - padding: 0; - dt { - font-size: 1em; - line-height: 1.5em; - font-weight: bold; - } - dd { - font-weight: 1em; - line-height: 1.5em; - margin:0 0 1em 0; - } -} - -blockquote { - p:before { - content: '“'; - } - p:after { - content: '”'; - } -} - -pre { - font-family: monospace; -} - -img { - //do this otherwise IE will just not display - //any img without a height defined - height:auto; -} - -select, input, textarea { - font-size: 99%; - max-width: 95%; -} - - -// links -a, -a:visited { - text-decoration:none; - color:#0BA7D1; - &:hover, - &:active { - text-decoration:underline; - color:#0D7CCE; - } -} - -// custom type -.small-print { - @extend small; - margin-bottom: 1.2307em; - color:#666666; -} -.meta{ - color:#555555; - font-style: italic; - margin-bottom: 0px; -} -.meta-2{ - font-family: 'helvetica', 'arial',sans-serif; - color:#666666; - font-style: italic; - font-size: 0.75em; -} - -h4.static{ - font-family: 'helvetica', 'arial',sans-serif; - text-transform: uppercase; - font-size: 0.875em; - line-height: 1.71428em; - color:#666; - margin-top: 2em; -} -h4.static-with-rule{ - @extend.static; - background: #f6f6f6; - border-top: 0.25em solid $primary; - margin-bottom:0.25em; - padding: 0.5em 1em; -} - -/* FORMS */ - -// input placeholders, these need to be on separate lines as if the browser -// can't understand a selector it will invalidate the whole line. -::-webkit-input-placeholder { - color: #666666; - font: { - style:italic; - size:0.9375em; - } -} -:-moz-placeholder { - color:#666666; - font: { - style:italic; - size:0.9375em; - } -} -:-ms-placeholder { - color:#666666; - font: { - style:italic; - size:0.9375em; - } -} -//this only gets used when the browser doesn't support @placeholder -.placeholder { - color:#666666; - font: { - style:italic; - size:0.9375em; - } -} - -// wrap anything inside the form in a fieldset to give -// us the right spacing -fieldset { - margin: 1em; -} - -input[type=text], -input[type=password], -input[type=email], -input[type=file], -textarea { - width: 100%; - // adjust so the sides line up - padding: 0.5em; - margin: 0 0 0 -0.5em; -} - -textarea { - border: 0.125em solid #888888; - @include border-radius(0.25em); - display: block; - font-size: 1em; - line-height: 1.5em; - font-family: 'helvetica', 'arial', sans-serif; - min-height:8em; -} - -input[type=text], -input[type=password], -input[type=email], -input[type=file] { - border: 0.125em solid #888888; - @include border-radius(0.25em); - display: block; - font-size: 1em; - line-height: 1em; -} -input[type=file] { - margin-bottom:1em; -} - -label{ - display: block; - margin-top: 1.25em; - margin-bottom: 0.25em; - font-weight: bold; - &.inline{ - display: inline; - padding: 0 2em 0 1em; - font-weight: normal; - } -} - -// grey background, full width box -.form-box { - margin: 0 -2em 0.25em -2em; - background:#eeeeee; - padding:1em 2em 1em 2em; - max-width:26em; - >input[type=text] { - margin-bottom:1em; - } - .title { - font-size:1.25em; - margin:0.5em 0; - } - h5 { - margin:0; - font: { - size:1.125em; - weight:normal; - } - strong { - font-size:2em; - margin-right:0.25em; - } - } -} -// IE6 doesn't extend the grey box back with the above negative margins, and -// the password box falls off screen for some reason. Just have boring margins, -// it looks okay. -.ie6 .form-box { - margin: 0 0 0.25em 0; -} - -.form-txt-submit-box { - min-height:3em; - input[type=password], - input[type=text], - input[type=email] { - width: 65%; - float:left; - } - input[type=submit] { - float:right; - width:28%; - margin-right:0.25em; - padding-top:0.7em; - padding-bottom:0.6em; - } -} - -.checkbox-group { - margin:1em 0; -} - - -// form errors -div.form-error, -p.form-error { - @include inline-block; - background:#ff0000; - color:#fff; - padding:0 0.5em; - margin:0 0 0 -0.5em; - @include border-radius(0.25em 0.25em 0 0); -} - -input.form-error, -textarea.form-error { - border-color:#ff0000; - @include border-radius(0 0.25em 0.25em 0.25em); -} - -ul.error { - background:#ff0000; - color:#fff; - padding:0 0.5em; - margin:0 0 0 -0.5em; - @include border-radius(0.25em); -} - -// don't display valid error boxes as now the page jump -// won't be until the user submits, which is fine -div.label-valid, -p.label-valid { - display:none !important; - visibility: hidden; -} - - - -/*** LAYOUT ***/ - -// Padding creates page margins on mobile -.container{ - padding: 0 1em; -} - -// Use full width to reverse .container margins -.full-width { - margin: 0 -1em; -} - -// #site-header creates grey bar in mobile -// .nav-wrapper-2 is used on desktop -#site-header{ - border-top: 0.25em solid $primary; - height: 3em; - @include background(linear-gradient(#000, #222 10%, #222 90%, #000)); - .container { - min-height:4em; - } -} -#site-logo{ - display: block; - width: 175px; - height: 40px; - top: 0.4em; - background: url('images/sprite.png') -3px -3px no-repeat; - text-indent: -999999px; - position: absolute; - z-index:2; -} -.ie6 #site-logo { - background: url('images/ie_logo.gif') 0 -5px no-repeat; -} -// this is a skip to nav for mobile users only -#nav-link { - width: 50px; - height: 48px; - background: url('images/sprite.png') -5px -916px no-repeat; - display: block; - text-indent: -999999px; - position: absolute; - right:2em; - top:-2px; - &:hover { - top:2px; - } -} - - -#main-nav{ - ul{ - @include list-reset-soft; - li{ - a, span { - display: block; - padding: 0.5em 1em; - background:#f6f6f6; - color:#333; - font-size: 1.25em; - border-bottom: 0.25em solid #333; - } - a:hover, span.hover { - background: #333; - color:#fff; - text-decoration: none; - } - } - &#mysoc-menu{ - li { - a { - background:$primary; - &#mysoc-logo { - background-image:url('images/sprite.png'); - background-repeat:no-repeat; - background-position:-240px -38px; - text-indent:-999999px; - } - } - } - } - } -} -.ie6 #main-nav ul#mysoc-menu li a#mysoc-logo { - background: url('images/ie_mysoc_logo.gif') center no-repeat; -} -//defines where the table caption is (login stuff on mob, nav menu on desktop) -.wrapper { - width:100%; - display:table; - caption-side:bottom; -} -// this is the user's logged in details or the login link etc -#user-meta { - p { - position: relative; - background:$primary; - padding:1em 6em 1em 1em; - a { - position: absolute; - right:1em; - @include inline-block; - text-transform:uppercase; - font-size:0.75em; - background:#333; - padding:0.25em 0.75em; - color:#fff; - @include border-radius(0.25em); - } - } -} - - -// #key-tools is the list that's pulled out an stick to the bottom of the page of desktop, below is mostly just aesthetic -.shadow-wrap { - @extend .full-width; - ul#key-tools{ - @include list-reset-soft; - margin-bottom: 1em; - display: table; - width:100%; - li{ - display: table-cell; - vertical-align: bottom; - text-align: center; - border-right:0.25em solid #fff; - &:last-child { - border-right:none; - } - a { - display: block; - background-color: #f5f5f5; - background-repeat: no-repeat; - color:#333; - padding:4em 2em 1em 2em; - text-transform:uppercase; - font: { - size:0.6875em; - family: 'helvetica', 'arial', sans-serif; - } - &:hover, &.hover, &.active { - text-decoration:none; - background-color:#333; - color:#fff; - } - &.abuse { - background-image:url('images/sprite.png'); - background-position:center -2424px; - } - &.feed { - background-image:url('images/sprite.png'); - background-position:center -2563px; - } - &.chevron { - background-image:url('images/sprite.png'); - background-position:center -2716px; - } - &.hover, &.active { - background-image:url('images/sprite.png'); - background-position:center -2064px; - } - } - } - } -} - -//because display:table doesn't work we float -.ie6, .ie7 { - .shadow-wrap { - ul#key-tools{ - background:#f5f5f5; - li{ - float:left; - a { - padding-left:1.5em; - padding-right:3em; - } - } - } - } -} -.ie6 .shadow-wrap ul#key-tools li a { - &.abuse { - background-image:url('images/ie_key_tools_sprite.gif'); - background-position: right 0px; - } - &.feed { - background-image:url('images/ie_key_tools_sprite.gif'); - background-position: right -58px; - } - &.chevron { - background-image:url('images/ie_key_tools_sprite.gif'); - background-position: right -116px; - } - &:hover { - background-image:url('images/ie_key_tools_sprite_dark.gif'); - } -} - - -//footer blocks -#footer-mobileapps { - @extend .full-width; - padding:1em; - h4 { - margin:0; - } - ul { - @include list-reset-soft; - li { - border-bottom:1px solid #AFAFAF; - &:last-child { - border-bottom:none; - } - a { - display:block; - padding:0.5em 0; - } - } - } -} - -#footer-help { - ul { - @include list-reset-soft; - li { - border-bottom:1px solid #AFAFAF; - &:last-child { - border-bottom:none; - } - h4 { - margin:0.75em 0 0.25em 0; - } - p { - font-size:0.75em; - } - } - } -} - - - -/*BUTTONS*/ - -// Default style set for buttons, inputs and .btn class. Red and green class available. - -button, input[type=submit],.btn{ - @include button-reset; -} - -.green-btn, -button.green-btn, -input.green-btn{ - @include button-reset(#9FDE23, #7FB900, #5B9700, #fff, #9FDE23, #7FB900, #5B9700, #fff); -} - -.red-btn, -button.red-btn, -input.red-btn{ - @include button-reset(#FF0038, #BF002A, #80001C, #fff, #FF0038, #BF002A, #80001C, #fff); -} - -.final-submit, -input.final-submit { - margin:1em 0.5em; - float:right; -} - -.button-right, -.button-left, -a.button-right, -a.button-left { - @include inline-block; - cursor:pointer; - font-size: 1em; - line-height: 1; - margin:0; - border:1px solid #999; - color:#333; - background: #eee; - @include border-radius(4px); - &:hover{ - color:#fff; - background:#777; - text-decoration: none; - border:1px solid #666; - } -} -.button-right, -a.button-right, -:hover.button-right, -a:hover.button-right { - padding:1em 3em 1em 1em; - background-image: url('images/sprite.png'); - background-repeat:no-repeat; - background-position:right -686px; -} - -.button-left, -a.button-left, -:hover.button-left, -a:hover.button-left { - padding:1em 1em 1em 3em; - background-image: url('images/sprite.png'); - background-repeat:no-repeat; - background-position:-18px -802px; -} - -.big-green-banner { - position: relative; - z-index:1000; - top:-1.75em; - background: $contrast1; - color: #fff; - padding:1em; - text: { - transform:uppercase; - align:center; - } - font-size:0.875em; - &:before { - content: ""; - left:-0.5em; - top:0; - position: absolute; - width: 0; - height: 0; - border-left: 0.5em solid transparent; - border-bottom: 0.5em solid #4B8304; - } -} - -.banner { - position: relative; - z-index:1100; - p { - position: absolute; - top:-1.95em; - right:0; - @include inline-block; - font-size:0.6875em;//11px - line-height:1em; - padding:0.5em 1em; - margin:0; - color:#1a1a1a; - background: #ccc; - text: { - transform:uppercase; - align:center; - } - &:before { - content: ""; - left:-0.5em; - top:0; - position: absolute; - width: 0; - height: 0; - border-left: 0.5em solid transparent; - border-bottom: 0.5em solid #888; - } - &#fixed { - color:#fff; - background: $contrast1; - &:before { - border-bottom: 0.5em solid #4B8304; - } - } - } -} - -/*OTHER*/ - -.plain-list { - @include list-reset-soft; - li { - margin-bottom:1em; - } -} - -.issue-list{ - margin: 0 0 1em 0; - padding: 0; - border-bottom: 0.25em solid $primary; - li{ - list-style: none; - background: #f6f6f6; - margin: 0.25em 0 0 0; - padding: 0.5em 1em; - display:block; - .update-wrap { - display:table; - width:100%; - .update-text, - .update-img { - display:table-cell; - vertical-align:top; - p { - margin-bottom: 0.5em; - } - } - .update-img { - text-align:right; - img { - margin:-0.5em -1em 0 0.5em; - height:auto; - } - } - } - } -} -//display:table fixes -.ie7, .ie7 { - .issue-list li .update-wrap { - .update-text { - float:left; - width:19em; - } - .update-img { - float:right; - } - } -} - -.issue-list-a { - margin: 0 0 1em 0; - padding: 0; - border-bottom: 0.25em solid $primary; - li { - list-style: none; - margin:0; - padding:0; - a { - margin: 0.25em 0 0 0; - display:table; - background: #f6f6f6; - color:#222222; - width:100%; - &:hover { - text-decoration:none; - color:#222222; - background:#e6e6e6; - } - .text, - .img { - display:table-cell; - vertical-align:top; - } - .img { - text-align:right; - img { - height:auto; - } - } - .text { - padding:0.25em 1em; - h4 { - margin:0; - } - small { - color:#666; - } - } - } - >p { - margin: 0.25em 0 0 0; - padding: 0.5em 1em; - background: #f6f6f6; - } - } -} -.list-a { - @extend .issue-list-a; - a { - padding:0.5em 1em; - font-weight:bold; - } -} -//display:table fixes -.ie6, .ie7 { - .issue-list-a { - overflow:hidden; - li a { - clear:both; - width:auto; - display:block; - overflow:hidden; - .text { - float:left; - width:18em; - } - .img { - width:6.25em; - float:right; - } - } - } -} -.ie6 .issue-list-a li a { - height:5.5em; - .img img { - height:60px; - } -} - -// fancybox gallery images have a magnifying glass in the corner -.update-img { - a { - @include inline-block; - position:relative; - span { - position:absolute; - top:0; - right:0; - display:block; - width:20px; - height:20px; - opacity: 0.5; - background:#fff url(images/sprite.png) -16px -1098px no-repeat; - //hide text - http://nicolasgallagher.com/another-css-image-replacement-technique/ - font: 0/0 a; - color: transparent; - } - &:hover span { - opacity: 1; - } - } -} -//bit of a hack - as we can't use em's, push the span out to the right -//by how much it would be if the user did not resize the text -.issue-list li .update-wrap .update-img a span { - right:-16px; - top:-8px; -} - -.problem-header { - margin-bottom:1em; -} -.problem-header .update-img { - float: right; - margin-left: 0.5em; - margin-bottom: 0.5em; -} - -// map stuff -#map_box{ - @extend .full-width; - background: #333; - height: 29em; - margin-bottom: 1em; - overflow: hidden; - position: relative; - #map { - width:100%; - height:100%; - } -} - -// OpenLayers fix for navigation being top right -// Left and right so that zoom can be left, pan right. -#fms_pan_zoom { - right: 0.5em !important; - top: 0.5em !important; - left: 0.5em !important; -} -// The left and right of the above causes the navigation to move off-screen left in IE6. -// XXX Need to check IE7 -.ie6 #fms_pan_zoom { - left: auto !important; -} - -// Openlayers map controls (overrides) -#fms_pan_zoom_panup, -#fms_pan_zoom_pandown, -#fms_pan_zoom_panleft, -#fms_pan_zoom_panright, -#fms_pan_zoom_zoomin, -#fms_pan_zoom_zoomout { - width:36px !important; - height:36px !important; - text-indent:-999999px; - opacity:0.85; - background:url('images/sprite.png') no-repeat; - &:hover { - opacity:1; - } - filter: none !important; // Override OpenLayers PNG handling of the navigation -} - -#fms_pan_zoom_zoomworld { - display:none !important; - visibility:none !important; -} - -#fms_pan_zoom_panup { - background-position:-42px -222px; - right:30px !important; - left: auto !important; - top:0 !important; -} -#fms_pan_zoom_pandown { - background-position:-42px -282px; - right:30px !important; - left: auto !important; - top:72px !important; -} -#fms_pan_zoom_panleft { - background-position:-12px -252px; - width:48px !important; - right:48px !important; - left: auto !important; - top:36px !important; -} -#fms_pan_zoom_panright { - background-position:-60px -252px; - width:48px !important; - right:0 !important; - left: auto !important; - top:36px !important; -} -#fms_pan_zoom_zoomin { - background-position:-152px -223px; - height:44px !important; - left:0 !important; - top:0 !important; -} -#fms_pan_zoom_zoomout { - background-position:-152px -259px; - height:44px !important; - left:0 !important; - top:44px !important; -} - -//hide pins, show old reports etc -#sub_map_links { - position: absolute; - left: 0; - right:0; - bottom: 0; - z-index: 1100; - background:#333; - background:rgba(0, 0, 0, 0.7); - margin:0; - a { - @include inline-block; - font-size:0.6875em; - color:#fff; - padding:0.6em 3em 0.5em 1em; - background-repeat:no-repeat; - &#hide_pins_link { - background-image:url('images/sprite.png'); - background-position: right -3976px; - } - &#all_pins_link { - background-image:url('images/sprite.png'); - background-position: right -4022px; - } - &#map_permalink { - background-image:url('images/sprite.png'); - background-position: right -4070px; - } - &.feed { - background-image:url('images/sprite.png'); - background-position: right -3936px; - } - &:hover { - background-color:#000; - text-decoration:none; - } - } -} - -.ie6 #sub_map_links a { - &#hide_pins_link { - background-image:url('images/ie_sub_map_links_sprite.gif'); - background-position: right 1px; - } - &#all_pins_link { - background-image:url('images/ie_sub_map_links_sprite.gif'); - background-position: right -45px; - } - &#map_permalink { - background-image:url('images/ie_sub_map_links_sprite.gif'); - background-position: right -93px; - } -} - -#mob_sub_map_links { - position: absolute; - z-index:1100; - bottom:0; - display:table; - margin:0; - width:100%; - background:rgba(0, 0, 0, 0.7); - a { - color:#fff; - width:50%; - padding:0.5em 0; - font-size:1em; - display:table-cell; - text-align:center; - &:hover { - background:#000; - text-decoration:none; - } - } - &.map_complete { - background:none; - display:block; - border-bottom:4px solid #fff; - a#try_again { - display:block; - margin:0 auto 6em auto; - background:rgba(0, 0, 0, 0.8); - @include border-radius(0.5em); - } - a#mob_ok { - position:absolute; - right:1em; - bottom:0; - height:20px; - padding-top:30px; - display:block; - width:4em; - background:#fff url('images/sprite.png') 12px -4140px no-repeat; - color:#000; - } - } -} - -.mobile-map-banner { - margin:0; - position: absolute; - top:0; - left:0; - right:0; - font-size:0.75em; - background:rgba(0, 0, 0, 0.7); - padding:0.75em 30px; - a { - @include button-reset(#333, #1a1a1a, #1a1a1a, #fff, #333, #1a1a1a, #1a1a1a, #fff); - font: { - weight:normal; - size:0.875em; - } - line-height:1; - padding:0.5em 0.75em; - position:absolute; - left:0.3em; - top:0.3em; - } -} - -.olControlAttribution { - bottom: 3.25em !important; - right: 0.25em !important; - left: 0.25em !important; - color: #222222; - font-size:0.75em !important; -} -.olControlAttribution img { - vertical-align: bottom; -} -.olControlPermalink { - bottom: 3px !important; - right: 3px; -} - -/* Drag is only present in noscript form. XXX Copy from core. */ -#drag { - input, img { - position: absolute; - border: none; - max-width: none; - } - input { - cursor: crosshair; - background-color: #cccccc; - } - img { - cursor: move; - } - img.pin { - z-index: 100; - background-color: inherit; - } - a img.pin { - cursor: pointer; - cursor: hand; - } -} - -// only on mobile, this is a sidebar on desk (#report-a-problem-sidebar) -a.rap-notes-trigger, -a:hover.rap-notes-trigger { - display:block; - width:90%; - padding-left:5%; - padding-right:5%; -} -.rap-notes { - margin:1em 0; -} - -//report a problem tabs -#problems-nav { - padding:0 1em; - overflow:hidden; - border-bottom:0.25em solid #333; - ul { - @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; - } - } - } - } -} - -//display:table fixes -.ie6, .ie7 { - #problems-nav { - clear:both; - margin:0; - padding:0; - ul li { - float:left; - } - } -} - - -table.nicetable { - width:100%; - margin-bottom:2em; - thead { - border-bottom:0.25em solid #ccc; - th { - font-size:0.75em; - } - } - tr { - &.a { - background:#f6f6f6; - } - &:nth-child(even) { - background:#f6f6f6; - } - &.gone { - color: #666666; - background-color: #cccccc; - } - &:hover { - background:#FFF5CC; - cursor:pointer; - } - td { - padding:0.25em; - a { - &:hover { - text-decoration:none; - } - } - } - } - .title { - text-align:left; - } - .data { - width:12%; - } -} - -.promo { - @extend .full-width; - background:$primary; - padding:1em; - margin-bottom:1em; - overflow:hidden; - position: relative; - .close-promo { - position:absolute; - top:0.5em; - right:0.5em; - display:block; - width:16px; - height:16px; - text-indent:-999999px; - background:url(images/sprite.png) -341px -263px no-repeat; - @include border-radius(4px); - &:hover { - background:#222 url(images/sprite.png) -341px -223px no-repeat; - } - } -} - -.alert { - @extend .full-width; - background:#ff0000; - padding:1em; - margin-bottom:1em; - color:#fff; - a, a:hover { - color:$primary; - } -} - -.pagination { - text-align:center; - padding:0.5em 1em; - background:#eee; - position:relative; - .prev { - position:absolute; - left:0.5em; - } - .next { - position:absolute; - right:0.5em; - } - a { - @include inline-block; - background:$primary; - padding-left:0.5em; - padding-right:0.5em; - color:#1a1a1a; - &:hover { - color:#1a1a1a; - text-decoration:none; - background:$primary/1.1; - } - } -} - -// this is a bit of a hack to get some differentation between desk and mobile -.desk-only { - display:none !important; -} - -// hide anything with this class if js is working -.js .hidden-js { - display: none; - visibility: hidden; -} - -// hide anything with this class if js is NOT working -.no-js .hidden-nojs { - display: none !important; - visibility: hidden; -} - - -/* Front page */ -#front-main { - text-align:center; - 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; - line-height:1.5em; - } - 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); - &:hover { - background:#333; - } - } - } - } - 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 { - .issue-list-a { - border-bottom:none; - margin-bottom:0; - } -} - -#alerts { - ul { - margin-bottom: 1em; - } - li { - padding: 0em; - margin-bottom: 0.5em; - } - .a { - background: #f6f6f6; - } - img[width="16"] { - float: right; - } -} +@import "_base"; diff --git a/web/cobrands/fixmystreet/layout.scss b/web/cobrands/fixmystreet/layout.scss index e1a6f474f..f9d5b3930 100644 --- a/web/cobrands/fixmystreet/layout.scss +++ b/web/cobrands/fixmystreet/layout.scss @@ -1,1066 +1,3 @@ - -@import "compass"; @import "_colours"; -@import "_mixins"; - -//hacks for desk/mob only stuff -.desk-only { - display:block !important; -} -.mob-only { - display:none !important; -} - -body { - background: #1A1A1A url(images/tile.jpg) 0 0 repeat; -} - -h1 { - margin-top: 0; -} - -// Page wrapper and header bits follow - -.container{ - margin: 0 auto; - padding: 0em; - width: 60em; - position: relative; - z-index:1; -} - -//z-index stack order gets reset to 0 in ie6/7 if you position anything, -//so to fix things we give it a high value (don't ask me why) -//see: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/ -//this affects #site-logo -.ie6, .ie7 { - .container { - z-index:100; - } -} - -.wrapper{ - display: table; - caption-side: top; - width: 100%; - .table-cell { - display:table-cell; - } -} - -//pad the top of the wrapper to allow space for the menu to fit in -//when its positioned absolute below -.ie6, .ie7 { - .wrapper { - padding-top:4em; - } -} - -.nav-wrapper{ - display: table-caption; - .nav-wrapper-2{ - width: 100%; - min-height: 4em; - position: absolute; - border-top:4px solid #1a1a1a; - @include border-image(url(images/tile-y-border.jpg) 4 0 0 0); - border-left:0; - border-right:0; - z-index:2; - } -} - -//position absolute the menu as ie doesn't like display:table -.ie6, .ie7 { - .nav-wrapper { - position: absolute; - top:0; - left:0; - width:100%; - .nav-wrapper-2 { - // position static as well so we fix lots of the z-index issues - position:static; - } - } -} - -// Resets a lot of the mobile styling. #site-header only used to help position logo on desktop -#site-header { - height: auto; - background: none; - border-top: 0px; - .container { - position: static;//reset position so the nav links become clickable - } -} -#site-logo { - top: 0.9em; - position: absolute; - z-index: 3; -} -.ie6, .ie7 { - #site-header { - height:3em; - .container { - //ie broken z-index bug: the site-logo won't appear if we don't do this - //doesn't seem to render the nav link unclickable like in other browsers - position: relative; - } - } - #site-logo { - position: absolute; - top:-3.25em; - } -} -#nav-link { - left:-999999px; -} -#main-nav{ - margin: 0 auto; - padding: 0em; - width: 60em; - ul{ - list-style: none; - padding: 0px; - margin: 0px; - float:right; - li{ - list-style: none; - display: inline; - margin: 0px; - padding: 0px; - float:left; - a, - span { - display: block; - color:#fff; - background: none; - border-bottom: none; - } - } - &#main-menu{ - li{ - a, span{ - padding: 0.75em; - font-size: 0.9em; - } - a:hover{ - background:#444; - @include background(linear-gradient(#000, #444 10%, #444 95%, #111)); - } - a.report-a-problem-btn { - background:$primary; - padding:0.25em; - margin:0.5em; - color:#333; - @include border-radius(0.25em); - &:hover { - background:$primary/1.1; - } - } - span { - color:$primary; - } - } - } - &#mysoc-menu{ - padding: 0em 0.5em; - margin-left: 0.25em; - background:$primary url(images/tile-y.jpg); - @include border-radius(0 0 0.375em 0.375em); - li{ - a{ - background:none; - color:#000; - text-transform: uppercase; - font-size: 0.6875em; - padding: 1.3em 0.7em 1em 0.7em; - &#mysoc-logo { - width:84px; - height:16px; - background-position:-260px -43px; - opacity: 0.8; - &:hover { - opacity: 1; - } - } - &:hover{ - color:#fff; - } - } - } - } - } -} - - - - -// .content Is the white box - -// The narrow single column box -.content{ - width: 27em; - margin-top: 3em; - background: #fff; - padding: 1em; - padding-bottom: 3em; - margin-left: 0.5em; - margin-bottom: -1em; - @include box-shadow(0px 0px 6px 1px #000); -} -.ie6, .ie7, .ie8 { - .content { - // If no box-shadow, just want a boring black border to stand it out from the map. - border: 1px solid black; - //take off margins so we line up properly - margin: 0; - } -} -//weird margining thing for ie8 -.ie8 .content { - margin-top:3em; -} - -// map page - has fixed header and different styling -body.mappage { - .content { - float:left; - } - #main-nav ul#main-menu li a, - #main-nav ul#main-menu li span { - padding: 1.4em 0.75em 1.35em 0.75em; - } - #main-nav ul#main-menu li a.report-a-problem-btn { - padding: 0.5em; - margin:0.9em 0.25em 0.85em 0.25em; - } - .nav-wrapper{ - .nav-wrapper-2{ - position: fixed; - background: #222; - @include background(linear-gradient(#000, #222 10%, #222 90%, #000)); - } - } - #site-logo{ - position: fixed; - } -} -.ie6, .ie7 { - body.mappage { - // The below is *mandatory* to allow pins/zoom to be clickable in IE6/7. Do NOT remove. - .container { - float: left; - width: 27em; - margin-left: 1.4em; - } - .nav-wrapper{ - z-index:1; - .nav-wrapper-2 { - position:static; - } - } - #site-logo { - position: absolute; - } - } -} -.ie6 { - body.mappage { - .container { - margin-left: 0.7em; - } - } -} -//ie8 needs different stuff on .nav-wrapper so we -//have to define all the rest of it again as this resets -//the z-index base yet again :S -.ie8 { - body.mappage { - .nav-wrapper{ - position: relative; - z-index:0; - .nav-wrapper-2 { - position:static; - } - } - #site-logo { - position: absolute; - } - } -} - - - -// full width page -body.fullwidthpage { - .content { - width: 57em; - } - .intro { - width:40em; - } -} -// two thirds width page, also has option for a sidebar which can be sticky or not -body.twothirdswidthpage { - @extend .fullwidthpage; - .content { - width:40em; - position: relative; - aside { - background:#eee; - position:absolute; - left:42em; - top:0; - z-index: -1; - width:13em; - padding:1em; - @include box-shadow(0px 0px 6px 1px #000); - h2 { - margin-top: 0; - } - img { - margin-bottom: 0.25em; - } - } - .sticky-sidebar { - position: absolute; - left:42em; - z-index: -1; - aside { - position: fixed; - top:7em; - left:auto; - } - } - } -} -//as ie6 doesn't like 'fixed' we will make it absolute again -.ie6 body.twothirdswidthpage .content .sticky-sidebar { - position:static; - aside { - position:absolute; - left:42em; - top:0; - } -} - - -// table wrapper - this enables anything to become a -// table with div children as table cells -.tablewrapper { - display:table; - width:100%; - padding:0 0 1em 0; - >div { - display:table-cell; - width:50%; - } - .full-width { - width:auto; - margin:0; - } -} - -//fix table to be a block for ie, float the children -.ie6, .ie7 { - .tablewrapper { - display:block; - div {//ie6 doesn't support '>div', so we'll go with the somewhat risker 'div' - width:48%; - display:block; - float: left; - border:none !important; - } - } -} - -// adds border to the top and goes full width -.bordered { - margin:0 -1em; - padding:0 1em; - width:auto; - border-top:0.25em solid $primary; -} - -//footer blocks -#footer-mobileapps { - border-right:1em solid #fff; - background:none; - padding:0; - @include box-shadow(inset rgba(0, 0, 0, 0) 0 0 0); - h2 { - color:#222; - margin-top:0; - } - ul { - @include list-reset; - 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; - opacity: 0.8; - &:hover { - 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; - } - } - } - } -} -.ie6, .ie7 { - #footer-mobileapps { - margin:0 0.5em; - margin-right:2%; - } -} -.ie6 #footer-mobileapps ul li a { - background:url(images/ie_mobileapps.gif) -1px -1px no-repeat; - &.m-app-iphone-streetreport { - background-position: -1px -69px; - height:50px; - } - &.m-app-droid { - background-position: -1px -148px; - } - &.m-app-nokia { - background-position: -1px -212px; - width:74px; - } -} - -#footer-help { - border-left:1em solid #fff; - ul { - display:table; - li { - display:table-cell; - border-bottom:none; - &:last-child { - border-left:1.25em solid #fff; - } - } - } -} -.ie6, .ie7 { - #footer-help { - margin-left:2%; - ul { - width:100%; - li { - float:left; - width:45% - } - } - } -} - - -// map box (fallback for non js really as most users -// will have fullscreen map) -#map_box{ - position: absolute; - height: 29em; - width: 29em; - right: 1em; - top: 3em; - z-index:1; -} - -// Pull OpenLayers navigation down a bit -#fms_pan_zoom { - top: 4.75em !important; -} - -// push zoom back over to right -#fms_pan_zoom_zoomin { - left:auto !important; - right:30px; - top:130px !important; -} -#fms_pan_zoom_zoomout { - left:auto !important; - right:30px; - top:174px !important; -} - -.olControlAttribution { - bottom:0.5em !important; - left: auto !important; -} - -#sub_map_links { - left:auto; - bottom:auto; - bottom:2em; - #map_links_toggle { - display:block; - cursor: pointer; - position:absolute; - left:-1em; - width:1em; - height:100%; - background:#000 url(images/sprite.png) right -4119px no-repeat; - @include border-radius(0.25em 0 0 0.25em); - &:hover { - left:-1.5em; - //use border so we don't have to redefine the background-position - border-right:0.5em solid #000; - } - &.closed { - background-position: right -4159px; - } - } -} -.ie6 #sub_map_links #map_links_toggle { - height:1.75em; - background:#000 url('images/ie_sub_map_links_sprite.gif') center -143px no-repeat; - &.closed { - background-position: center -183px; - } -} - -// log in bit, pokes above the .content div -#user-meta{ - display:block; - position: relative; - max-width: 57em; - margin:0 auto; - p { - @include inline-block; - position:absolute; - top:1em; - height:2em; - padding:0.25em 6em 0.5em 0.5em; - @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px); - a { - top:0.5em; - right:0.5em; - font-size:0.6875em; - padding:0.5em 0.75em; - line-height:1em; - &:hover { - text-decoration:none; - background:#444; - } - } - } -} -.ie6, .ie7 { - #user-meta { - z-index:1; - p { - top:-2em; - } - } -} -.ie6 #user-meta { - width:57em; //ie6 doesn't like max-width -} - - - -// Wraps around #key-tools box - sticks to the bottom of the screen on desktop -.shadow-wrap { - position:fixed; - z-index:10; //this is just to ensure anythign inside .content that has position set goes sites it - bottom: 0; - width: 29em; - overflow: hidden; - padding-top: 3em; - ul#key-tools { - border-top: 0.25em solid $primary; - margin: 0; - @include box-shadow(-0em 0px 1em 1em #fff); - li { - border:none; - a { - font-size: 0.75em; - color:#666; - padding: 0.5em 1.5em 0.5em 0; - text-transform:none; - &.abuse { - background-image:url(images/sprite.png); - background-position:right -2935px; - } - &.feed { - background-image:url(images/sprite.png); - background-position:right -3074px; - } - &.chevron { - background-image:url(images/sprite.png); - background-position:right -3225px; - } - &.hover { - background-image:url(images/sprite.png); - background-position:right -1876px; - } - } - } - &.singleton { - li { - text-align:right; - a { - padding-right:3em; - } - } - } - } - &.static { - padding:0 0 1em 0; - position: static; - } -} -// The padding is for the fading out when it's fixed positioned, which it isn't in IE6. -.ie6 .shadow-wrap { - padding-top: 0; -} - -// pokes over the RHS with a little triangle -.big-green-banner { - top:auto; - right:-1.25em; - margin-left:-2em; - font-size:1.375em; - padding:1em 3em 1em 1em; - background: $contrast1 url(images/sprite.png) right -2188px no-repeat; - &:before { - right:0; - left:auto; - top:-0.5em; - position: absolute; - border-top: 0.5em solid transparent; - border-left: 0.5em solid #4B8304; - border-bottom:none; - } -} -.ie6 .big-green-banner { - background: $contrast1 url(images/ie_green_chevron.gif) right center no-repeat; -} - -.banner { - // state banners - p { - top:-2.25em; - padding:1em; - &:before { - left:-0.75em; - border-left: 0.75em solid transparent; - border-bottom: 0.75em solid #888; - } - &#fixed { - padding-top:5em; - background-image:url(images/sprite.png); - background-position:-324px -326px; - background-repeat:no-repeat; - &:before { - border-bottom: 0.75em solid #4B8304; - } - } - } -} -.ie6 .banner p { - top:-1.5em; - &#fixed { - background-image:url(images/ie_fixed.gif); - background-position:center 0.75em; - } -} - - -// for pulling elements fullwidth regardless -// of .contents' padding -.full-width{ - margin: 0 0 0em -1em; - width: 29em; -} - -/*FORMS*/ -input[type=text], -input[type=password], -input[type=email], -textarea{ - width: 25em; -} -.form-box { - max-width:25em; -} - - -/* form errors */ -div.form-error, -p.form-error { - display:block; - width:24.7em; -} - -input.form-error, -textarea.form-error { - @include border-radius(0 0 0.25em 0.25em); -} - - -// Report a problem sidebar notes -#report-a-problem-sidebar { - position:absolute; - z-index:-1;//push behind .content, .container resets z-index for this - left:29.5em; - top:5em; - width:15em; - @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px); - .sidebar-tips { - background:#eeeeee; - padding:1em; - font-size:0.75em; - } - .sidebar-notes { - background:#333333; - padding:1em; - color:#ffffff; - font-size:0.75em; - } -} -.ie6, .ie7 { - #report-a-problem-sidebar { - left: 29em; // 0.5em left margin gone on .content in IE6/7, so reduce this accordingly. - } -} - -.no-js .general-sidebar-notes, -.no-js #report-a-problem-sidebar { - position: static; - width: auto; - @include box-shadow(rgba(0, 0, 0, 0), 0, 0, 0); - .sidebar-tips, - .sidebar-notes { - font-size:1em; - } -} - -// More general sidebar notes -.general-sidebar-notes { - position: absolute; - left:29.5em; - width:15em; - z-index: -1; //push behind .content, .container resets z-index for this - @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px); - p { - background:#eeeeee; - font-size:0.75em; - padding:0.75em; - margin:0; - &.dark { - background:#333333; - color:#ffffff; - } - } -} - -// Frontpage - -body.frontpage { - .table-cell { - // we do this so we can have full screen width elements - >.container { - width:100%; - } - .content { - margin:14em auto 0 auto; - } - } - .nav-wrapper-2{ - height:6em; - } - #site-header{ - height:9em; - } - #site-logo{ - top:3em; - width: 300px; - height: 60px; - background-position:-2px -108px; - } - #user-meta { - z-index:10; - p { - top:-4em; - right:0; - color:#FFD000; - background:none; - @include box-shadow(rgba(0, 0, 0, 0) 0 0 0); - a { - background:#fff; - color:#1a1a1a; - &:hover { - background:#ddd; - } - } - } - } -} -//logo fix -.ie6, .ie7, .ie8 { - body.frontpage { - #site-logo { - position:relative; - width:60em; - margin:0 auto; - } - } -} -.ie6, .ie7 { - body.frontpage { - #site-header { - height:3em; - } - #site-logo { - top:-1em; - } - #user-meta p { - top:-2em; - } - } -} -.ie6 body.frontpage #site-logo { - background:url(images/ie_front_logo.gif) 0 0 no-repeat; -} -//weird margining thing for ie8 -.ie8 body.frontpage { - #front-main { - top:-12em; - } - .table-cell .content { - margin-top:12em; - } -} - -// big yellow bit full screen width -#front-main { - background:$primary url(images/tile-y.jpg); - position:absolute; - width:100%; - left:0; - top:-15em; - #front-main-container { - max-width: 57em; - margin:0 auto; - } - h2 { - font-style:normal; - margin:0; - color:#222; - } - #postcodeForm { - background:none; - overflow:hidden; - margin-right:0.5em; - label { - margin:0.5em 0; - } - div { - display:block; - margin:0 auto; - width:20em; - overflow:hidden; - input#pc { - display:block; - float:left; - padding:0.25em 0.5em; - height:1.5em; - width:16em; - } - input#submit { - display:block; - float:right; - width:3em; - height:2.3em; - padding-top:0.2em; - } - } - } - a#geolocate_link { - background:none; - color:#222; - margin:-1em 0 0.5em 0; - &:hover { - text-decoration:underline; - background:none; - } - } -} -.ie6, .ie7 { - #front-main { - top:2em; - } -} - - -#front-howto { - border-right:1em solid #fff; - #front_stats { - background:none; - border-top:0.25em solid $primary; - padding-top:1em; - div { - big { - color:$primary; - font-size:3.2308em; - } - } - } -} -.ie6, .ie7 { - #front_stats { - div { - width:8em; - float:left; - } - } -} - -#front-recently { - border-left:1em solid #fff; -} - -#front-howto h2, -#front-recently h2 { - margin-top:0; -} - - -.ie6, .ie7 { - .tablewrapper { - #front-howto { - margin-right:2%; - } - #front-recently { - margin-left:2%; - } - } -} - - - - -/* MEDIA QUERIES */ -@media only screen and (min-width: 48em) and (max-width: 61em) { - .container { - width: 100%; - } - /*FORMS*/ - input[type=text], - input[type=password], - input[type=email], - textarea{ - width: 95%; - } - - // Remove central positioning of mainmenu and float right. - // Left padding is to ensure no overlap of the site-logo - // Background styling replicates header styling - - #main-nav{ - width: auto; - float:right; - padding-left: 180px; - } - .nav-wrapper { - // width:auto; - .nav-wrapper-2 { - // width:auto; - } - } - - //Main menu drops below logo and my-soc menu - #main-menu{ - margin-top: 3em; - } - //therefore header needs to open up - #site-header { - height:6em; - } - // Pull OpenLayers navigation down a bit more - #fms_pan_zoom { - top: 7em !important; - } - - //fix the left margin on login bit - #user-meta { - p { - left:1em; - } - } - body.frontpage { - #user-meta { - p { - left:auto; - } - } - } - - //Map becomes percentage width - #map_box{ - left: 32em; - width:auto; - } - - //put the RAP notes into the main copy area - // Note: Also used for the non-JS case. - #report-a-problem-sidebar, - .general-sidebar-notes { - position: static; - width: auto; - @include box-shadow(rgba(0, 0, 0, 0), 0, 0, 0); - .sidebar-tips, - .sidebar-notes { - font-size:1em; - } - } - - //Revert to mobile use of the .full-width class - .full-width{ - width: auto; - margin: 0em -1em 0 -1em; - } - - //make fullpage auto width - body.fullwidthpage .content { - width: auto; - } +@import "_layout"; - //make twothirdswidthpage nearly as small as main - //.content: just enough to still fit the sidebar in - body.twothirdswidthpage { - .content { - width:30em; - .sticky-sidebar { - left:32em; - top:30em; - aside { - top:9em; - } - } - } - } -} diff --git a/web/js/map-OpenStreetMap.js b/web/js/map-OpenStreetMap.js index 50f159635..54bf95964 100644 --- a/web/js/map-OpenStreetMap.js +++ b/web/js/map-OpenStreetMap.js @@ -79,14 +79,14 @@ OpenLayers.Layer.OSM.Mapnik = OpenLayers.Class(OpenLayers.Layer.OSM, { }); /** - * Class: OpenLayers.Layer.OSM.Osmarender + * Class: OpenLayers.Layer.OSM.MapQuestOpen * * Inherits from: * - <OpenLayers.Layer.OSM> */ -OpenLayers.Layer.OSM.Osmarender = OpenLayers.Class(OpenLayers.Layer.OSM, { +OpenLayers.Layer.OSM.MapQuestOpen = OpenLayers.Class(OpenLayers.Layer.OSM, { /** - * Constructor: OpenLayers.Layer.OSM.Osmarender + * Constructor: OpenLayers.Layer.OSM.MapQuestOpen * * Parameters: * name - {String} @@ -94,16 +94,22 @@ OpenLayers.Layer.OSM.Osmarender = OpenLayers.Class(OpenLayers.Layer.OSM, { */ initialize: function(name, options) { var url = [ - "http://a.tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png", - "http://b.tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png", - "http://c.tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png" + "http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png", + "http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png", + "http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png", + "http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png" ]; - options = OpenLayers.Util.extend({ numZoomLevels: 18, buffer: 0 }, options); + options = OpenLayers.Util.extend({ + /* Below line added to OSM's file in order to allow minimum zoom level */ + maxResolution: 156543.0339/Math.pow(2, options.zoomOffset || 0), + numZoomLevels: 19, + buffer: 0 + }, options); var newArguments = [name, url, options]; OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments); }, - CLASS_NAME: "OpenLayers.Layer.OSM.Osmarender" + CLASS_NAME: "OpenLayers.Layer.OSM.MapQuestOpen" }); /** |