diff options
| -rw-r--r-- | web/css.css | 45 | ||||
| -rwxr-xr-x | web/index.cgi | 61 |
2 files changed, 81 insertions, 25 deletions
diff --git a/web/css.css b/web/css.css index de805bf36..e8fba38b8 100644 --- a/web/css.css +++ b/web/css.css @@ -6,8 +6,15 @@ body { } h1 { - border-bottom: solid 1px #999999; - margin: 0 0 1em 0; + border-bottom: solid 2px #999999; + margin: 0; +} + +a { + color: #0000ff; +} +a:hover, a:active { + color: #ff0000; } .v { display: none; } @@ -20,21 +27,19 @@ h1 { /* Site-wide layout */ #container { - margin-left: -8em; - width: 100%; - float: right; } #content { - margin-left: 8em; -} -#content > *:first-child { - margin-top: 0; } + #navigation { - width: 5em; - float: left; - padding: 0 1em 0 0; - margin: 0 0 1em 2em; + position: absolute; + top: 1em; + right: 1em; + padding: 0.5em 1em 1em; + background-color: #eeeeee; + border: solid 2px #999999; + margin: 0; + list-style-type: none; } /* Individual pages */ @@ -45,8 +50,8 @@ h1 { height: 500px; position: relative; top: 0; - margin-left: 5em; overflow: hidden; + float: right; } /*#drag { width: 1em; @@ -66,8 +71,18 @@ h1 { font-size: 83%; } #compass { - float: left; + float: right; + margin: 0 1em 1em; } #compass img { border: 0; } + +#relativediv { + position: relative; +} + +ul#current img { + position: absolute; + border: none; +} diff --git a/web/index.cgi b/web/index.cgi index f99874d39..f3c0a8e64 100755 --- a/web/index.cgi +++ b/web/index.cgi @@ -6,7 +6,7 @@ # Copyright (c) 2006 UK Citizens Online Democracy. All rights reserved. # Email: matthew@mysociety.org. WWW: http://www.mysociety.org # -# $Id: index.cgi,v 1.10 2006-09-20 14:51:00 matthew Exp $ +# $Id: index.cgi,v 1.11 2006-09-20 16:12:06 matthew Exp $ use strict; require 5.8.0; @@ -103,6 +103,8 @@ sub display { my $area_info = mySociety::MaPit::get_voting_area_info($lbo); my $name = $area_info->{name}; + my $location = mySociety::MaPit::get_location($pc); + my $out = <<EOF; <h2>$name</h2> <p>Now, please select the location of the problem on the map below. @@ -126,17 +128,9 @@ EOF my $bl_src = $dir . $bl . '.png'; my $br_src = $dir . $br . '.png'; $pc = encode_entities($pc); - $out .= Page::compass($pc, $x, $y); $out .= <<EOF; - <div style="float: right"> - <div> - <h2>Current problems</h2> - </div> - <div> - <h2>Recently fixed problems</h2> - </div> - </div> <form action"=./" method="get"> + <div id="relativediv"> <div id="map"> <input type="hidden" name="x" value="$x"> <input type="hidden" name="y" value="$y"> @@ -144,7 +138,54 @@ EOF <input type="hidden" name="lbo" value="$lbo"> <input type="image" id="2.2" name="$tl" src="$tl_src" style="top:0px; left:0px;"><input type="image" id="3.2" name="$tr" src="$tr_src" style="top:0px; left:250px;"><br><input type="image" id="2.3" name="$bl" src="$bl_src" style="top:250px; left:0px;"><input type="image" id="3.3" name="$br" src="$br_src" style="top:250px; left:250px;"> </div> +EOF + $out .= Page::compass($pc, $x, $y); + $out .= <<EOF; + <div> + <h2>Current problems</h2> + <ul id="current"> +EOF + my %current = ( + 1 => 'Broken lamppost', + 2 => 'Shards of glass', + 3 => 'Abandoned car', + ); + my %fixed = ( + 4 => 'Broken lamppost', + 5 => 'Shards of glass', + 6 => 'Abandoned car', + ); + foreach (sort keys %current) { + my $px = int(rand(500)) - 6; + my $py = int(rand(500)) - 20; + $out .= '<li><a href="/?id=' . $_ . '">'; + $out .= '<img src="/i/pin_red.png" alt="Problem"'; + $out .= ' style="top:'.$py.'px; right:'.$px.'px">'; + $out .= $current{$_}; + $out .= '</a></li>'; + } + $out .= <<EOF; + </ul> + <h2>Recently fixed problems</h2> + <ul> +EOF + foreach (sort keys %fixed) { + $out .= '<li><a href="/?id=' . $_ . '">'; + #$out .= '<img src="/i/pin_red.png" alt="Problem">'; + $out .= $fixed{$_}; + $out .= '</a></li>'; + } + $out .= <<EOF; + </ul> + </div> + +</div> </form> + +<p>If you cannot see a map – if you have images turned off, +or are using a text only browser, for example – please +<a href="./?skippedmap=1">skip this step</a> and we will ask you +to describe the location of your problem instead.</p> EOF return $out; } |