diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/cobrands/emptyhomes/css.css | 6 | ||||
| -rw-r--r-- | web/css/_main.scss | 62 | ||||
| -rw-r--r-- | web/css/core.scss | 97 | ||||
| -rw-r--r-- | web/css/ie6.css | 17 | ||||
| -rw-r--r-- | web/down.default.html | 10 | ||||
| -rw-r--r-- | web/i/flower.gif | bin | 0 -> 1644 bytes | |||
| -rw-r--r-- | web/js/fixmystreet.js | 28 | ||||
| -rw-r--r-- | web/js/geo.min.js | 85 |
8 files changed, 277 insertions, 28 deletions
diff --git a/web/cobrands/emptyhomes/css.css b/web/cobrands/emptyhomes/css.css index 168eae2de..e59497880 100644 --- a/web/cobrands/emptyhomes/css.css +++ b/web/cobrands/emptyhomes/css.css @@ -174,10 +174,16 @@ a:hover, a:active { padding: 20px; overflow: auto; } + +.ie6 #emptyhomes-footer { + zoom: 1; +} + #emptyhomes-footer div { float: left; margin-right: 2em; } + #emptyhomes-footer a { color: #FFFFFF; } diff --git a/web/css/_main.scss b/web/css/_main.scss index b4e4a13f0..d74d70ceb 100644 --- a/web/css/_main.scss +++ b/web/css/_main.scss @@ -1,5 +1,17 @@ // Generics +/* Thanks to normalize.css + * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units + * http://clagnut.com/blog/348/#c790 + * 3. Prevents iOS text size adjust after orientation change, without disabling user zoom + * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ + */ +html { + font-size: 100%; /* 1 */ + -webkit-text-size-adjust: 100%; /* 3 */ + -ms-text-size-adjust: 100%; /* 3 */ +} + body { font-family: "Gill Sans", "Gill Sans MT", Helvetica, Arial, sans-serif; margin: 0; @@ -17,6 +29,7 @@ h2 { select, input, textarea { font-size: 99%; + max-width: 99%; } #mysociety { @@ -158,6 +171,20 @@ select, input, textarea { right: 10px; } +.ie6 #logo { + display: none; +} + +.ie6 #logoie { + width: 133px; + height: 26px; + filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/i/mysociety-dark.png',sizingMethod='scale'); + position: absolute; + top: 4em; + right: 10px; + cursor: pointer; +} + #footer { clear: both; text-align: center; @@ -180,3 +207,38 @@ select, input, textarea { } } +@media all and (max-width: 50em) { + #logo { + display: none; + } + #header { + font-size: 150%; + } + #navigation { + position: static; + border-top: solid 2px $header_colour; + border-bottom: solid 2px $header_colour; + margin: 1em 0; + padding: 0.15em 0.5em; + text-align: center; + background-color: $header_back; + color: $header_colour; + + a:hover, a:active { + background-color: $header_colour; + color: $header_back; + -moz-border-radius: 0.5em; + -webkit-border-radius: 0.5em; + border-radius: 0.5em; + } + } + #footer { + width: auto; + padding: 0 1em; + border-top: none; + } + #wrapper { + margin: 0em 1em; + } +} + diff --git a/web/css/core.scss b/web/css/core.scss index 4c64888e5..59abf3e85 100644 --- a/web/css/core.scss +++ b/web/css/core.scss @@ -83,12 +83,11 @@ $map_width: 500px; p#expl { text-align: center; font-size: 150%; - margin: 0 2em; + margin: 0; } #postcodeForm { - display: table; - _width: 33em; + display: table; /* IE6 has fixed width set below */ text-align: center; font-size: 150%; margin: 1em auto; @@ -107,6 +106,12 @@ $map_width: 500px; } } + #geolocate_para { + font-size: 70%; + margin: 2px 0 0 0; + text-align: right; + } + #front_intro { float: left; width: 48%; @@ -117,14 +122,19 @@ $map_width: 500px; } } + #front_stats { + margin: 0 auto; + display: table; /* IE6 is set to floats below */ + border-spacing: 2em 1em; + } + #front_stats div { text-align: center; width: 5.5em; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border-radius: 0.5em; - float: left; - margin: 0 1em 1em; + display: table-cell; big { font-size: 150%; @@ -145,6 +155,10 @@ $map_width: 500px; margin-top: 0; } + #front_photos { + text-align: center; + } + // Forms form { @@ -228,7 +242,7 @@ $map_width: 500px; } #map { - border: solid 1px #000000; + border: solid 1px #666666; width: $map_width; // Twice a tile width height: $map_width; overflow: hidden; @@ -236,6 +250,7 @@ $map_width: 500px; background-color: #f1f1f1; } + /* Drag is only present in noscript form */ #drag { position: absolute; width: $map_width; @@ -538,6 +553,18 @@ $map_width: 500px; right: 3px; } +.ie6 { + #mysociety { + #front_stats div { + float: left; + margin: 0 1em 1em; + } + #postcodeForm { + width: 33em; + } + } +} + // Printing, SCSS doesn't handle @media nesting @media print { @@ -548,3 +575,61 @@ $map_width: 500px; } } +@media all and (max-width: 50em) { + #mysociety { + p#expl { + font-size: 110%; + } + + #postcodeForm { + font-size: 100%; + span { + display: block; + font-size: 150%; + } + #submit { + font-size: 100%; + } + } + + #geolocate_para { + font-size: 100%; + } + + #front_intro { + float: none; + width: auto; + } + #front_recent { + margin-top: 1em; + float: none; + width: auto; + clear: both; + } + #front_photos { + white-space: nowrap; + overflow: hidden; + } + #front_stats { + border-spacing: 0.5em 1em; + } + + #form_sign_in_yes { + float: none; + width: auto; + padding-right: 0; + border-right: none; + margin-bottom: 1em; + } + + #form_sign_in_no, #fieldset #form_sign_in_no { + float: none; + width: auto; + padding-left: 0; + clear: none; + margin-bottom: 1em; + } + + } +} + diff --git a/web/css/ie6.css b/web/css/ie6.css deleted file mode 100644 index fd3e26047..000000000 --- a/web/css/ie6.css +++ /dev/null @@ -1,17 +0,0 @@ -#logo { - display: none; -} - -#logoie { - width: 133px; - height: 26px; - filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/i/mysociety-dark.png',sizingMethod='scale'); - position: absolute; - top: 4em; - right: 10px; - cursor: pointer; -} - -#emptyhomes-footer { - zoom: 1; -} diff --git a/web/down.default.html b/web/down.default.html index 10502d89b..c109ece36 100644 --- a/web/down.default.html +++ b/web/down.default.html @@ -1,12 +1,12 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> -<html lang="en-gb"> +<!doctype html> +<!--[if lt IE 7]><html class="ie6 oldie" lang="en-gb"><![endif]--> +<!--[if IE 7]> <html class="ie7 oldie" lang="en-gb"><![endif]--> +<!--[if IE 8]> <html class="ie8 oldie" lang="en-gb"><![endif]--> +<!--[if gt IE 8]><!--><html lang="en-gb"><!--<![endif]--> <head> <title>FixMyStreet</title> <link rel="stylesheet" type="text/css" href="/css/core.css"> <link rel="stylesheet" type="text/css" href="/css/main.css"> -<!--[if LT IE 7]> - <link rel="stylesheet" type="text/css" href="/css/ie6.css"> -<![endif]--> </head> <body> diff --git a/web/i/flower.gif b/web/i/flower.gif Binary files differnew file mode 100644 index 000000000..7e8f22a77 --- /dev/null +++ b/web/i/flower.gif diff --git a/web/js/fixmystreet.js b/web/js/fixmystreet.js index edab0b5ba..2c404af93 100644 --- a/web/js/fixmystreet.js +++ b/web/js/fixmystreet.js @@ -124,4 +124,32 @@ $(function(){ timer = window.setTimeout(email_alert_close, 2000); }); + // Geolocation + if (geo_position_js.init()) { + $('#postcodeForm').append('<p id="geolocate_para">Or <a href="#" id="geolocate_link">locate me automatically</a>').css({ "padding-bottom": "0.5em" }); + $('#geolocate_link').click(function(e) { + e.preventDefault(); + // Spinny thing! + $('#geolocate_para').append(' <img src="/i/flower.gif" alt="" align="bottom">'); + geo_position_js.getCurrentPosition(function(pos) { + $('#geolocate_para img').remove(); + var latitude = pos.coords.latitude; + var longitude = pos.coords.longitude; + location.href = '/around?latitude=' + latitude + ';longitude=' + longitude; + }, function(err) { + $('#geolocate_para img').remove(); + if (err.code == 1) { // User said no + } else if (err.code == 2) { // No position + $('#geolocate_para').html("Could not look up location"); + } else if (err.code == 3) { // Too long + $('#geolocate_para').html("No result returned"); + } else { // Unknown + $('#geolocate_para').html("Unknown error"); + } + }, { + timeout: 10000 + }); + }); + } + }); diff --git a/web/js/geo.min.js b/web/js/geo.min.js new file mode 100644 index 000000000..4f44b30ca --- /dev/null +++ b/web/js/geo.min.js @@ -0,0 +1,85 @@ +// geo-location-javascript v0.4.8 http://code.google.com/p/geo-location-javascript/ Copyright (c) 2009 Stan Wiechers. Licensed under the MIT licenses. + +var bb_success;var bb_error;var bb_blackberryTimeout_id=-1;function handleBlackBerryLocationTimeout() +{if(bb_blackberryTimeout_id!=-1) +{bb_error({message:"Timeout error",code:3});}} +function handleBlackBerryLocation() +{clearTimeout(bb_blackberryTimeout_id);bb_blackberryTimeout_id=-1;if(bb_success&&bb_error) +{if(blackberry.location.latitude==0&&blackberry.location.longitude==0) +{bb_error({message:"Position unavailable",code:2});} +else +{var timestamp=null;if(blackberry.location.timestamp) +{timestamp=new Date(blackberry.location.timestamp);} +bb_success({timestamp:timestamp,coords:{latitude:blackberry.location.latitude,longitude:blackberry.location.longitude}});} +bb_success=null;bb_error=null;}} +var geo_position_js=function(){var pub={};var provider=null;var u="undefined";pub.showMap=function(latitude,longitude) +{if(typeof(blackberry)!=u) +{blackberry.launch.newMap({"latitude":latitude*100000,"longitude":-longitude*100000});} +else +{window.location="http://maps.google.com/maps?q=loc:"+latitude+","+longitude;}} +pub.getCurrentPosition=function(success,error,opts) +{provider.getCurrentPosition(success,error,opts);} +pub.init=function() +{try +{if(typeof(geo_position_js_simulator)!=u) +{provider=geo_position_js_simulator;} +else if(typeof(bondi)!=u&&typeof(bondi.geolocation)!=u) +{provider=bondi.geolocation;} +else if(typeof(navigator.geolocation)!=u) +{provider=navigator.geolocation;pub.getCurrentPosition=function(success,error,opts) +{function _success(p) +{if(typeof(p.latitude)!=u) +{success({timestamp:p.timestamp,coords:{latitude:p.latitude,longitude:p.longitude}});} +else +{success(p);}} +provider.getCurrentPosition(_success,error,opts);}} +else if(typeof(window.blackberry)!=u&&blackberry.location.GPSSupported) +{if(typeof(blackberry.location.setAidMode)==u) +{return false;} +blackberry.location.setAidMode(2);pub.getCurrentPosition=function(success,error,opts) +{bb_success=success;bb_error=error;if(opts['timeout']) +{bb_blackberryTimeout_id=setTimeout("handleBlackBerryLocationTimeout()",opts['timeout']);} +else +{bb_blackberryTimeout_id=setTimeout("handleBlackBerryLocationTimeout()",60000);} +blackberry.location.onLocationUpdate("handleBlackBerryLocation()");blackberry.location.refreshLocation();} +provider=blackberry.location;} +else if(typeof(window.google)!="undefined"&&typeof(google.gears)!="undefined") +{provider=google.gears.factory.create('beta.geolocation');pub.getCurrentPosition=function(successCallback,errorCallback,options) +{function _successCallback(p) +{if(typeof(p.latitude)!="undefined") +{successCallback({timestamp:p.timestamp,coords:{latitude:p.latitude,longitude:p.longitude}});} +else +{successCallback(p);}} +provider.getCurrentPosition(_successCallback,errorCallback,options);}} +else if(typeof(Mojo)!=u&&typeof(Mojo.Service.Request)!="Mojo.Service.Request") +{provider=true;pub.getCurrentPosition=function(success,error,opts) +{parameters={};if(opts) +{if(opts.enableHighAccuracy&&opts.enableHighAccuracy==true) +{parameters.accuracy=1;} +if(opts.maximumAge) +{parameters.maximumAge=opts.maximumAge;} +if(opts.responseTime) +{if(opts.responseTime<5) +{parameters.responseTime=1;} +else if(opts.responseTime<20) +{parameters.responseTime=2;} +else +{parameters.timeout=3;}}} +r=new Mojo.Service.Request('palm://com.palm.location',{method:"getCurrentPosition",parameters:parameters,onSuccess:function(p){success({timestamp:p.timestamp,coords:{latitude:p.latitude,longitude:p.longitude,heading:p.heading}});},onFailure:function(e){if(e.errorCode==1) +{error({code:3,message:"Timeout"});} +else if(e.errorCode==2) +{error({code:2,message:"Position unavailable"});} +else +{error({code:0,message:"Unknown Error: webOS-code"+errorCode});}}});}} +else if(typeof(device)!=u&&typeof(device.getServiceObject)!=u) +{provider=device.getServiceObject("Service.Location","ILocation");pub.getCurrentPosition=function(success,error,opts) +{function callback(transId,eventCode,result){if(eventCode==4) +{error({message:"Position unavailable",code:2});} +else +{success({timestamp:null,coords:{latitude:result.ReturnValue.Latitude,longitude:result.ReturnValue.Longitude,altitude:result.ReturnValue.Altitude,heading:result.ReturnValue.Heading}});}} +var criteria=new Object();criteria.LocationInformationClass="BasicLocationInformation";provider.ILocation.GetLocation(criteria,callback);}}} +catch(e){if(typeof(console)!=u) +{console.log(e);} +return false;} +return provider!=null;} +return pub;}();
\ No newline at end of file |
