New style map Barnet Cobrand Work in Progress

Also, pull out map positioning JS to a separate file to make cobrands a bit more modular.
author: Struan Donald <struan@exo.org.uk> 2012-04-24 15:49:12 +0100
committer: Struan Donald <struan@exo.org.uk> 2012-04-24 15:49:12 +0100
commit: d7ea16b79d6dd9fe65c4550edf393bbf8fd9d04d (patch)
tree: 4b7c00e01b05d9170968040049e940010cba978c
parent: 4aa639173602d06ec85532c8598d99983b8340b4 (diff)
26 files changed, 829 insertions, 75 deletions
diff --git a/perllib/FixMyStreet/Cobrand/Barnet.pm b/perllib/FixMyStreet/Cobrand/Barnet.pm
index 6f115ec63..eceb656b3 100644
--- a/perllib/FixMyStreet/Cobrand/Barnet.pm
+++ b/perllib/FixMyStreet/Cobrand/Barnet.pm
@@ -9,6 +9,14 @@ sub council_area { return 'Barnet'; }
 sub council_name { return 'Barnet Council'; }
 sub council_url { return 'barnet'; }
 
+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 {
diff --git a/templates/web/barnet/bromley-footer.html b/templates/web/barnet/bromley-footer.html
new file mode 100644
index 000000000..619a6826f
--- /dev/null
+++ b/templates/web/barnet/bromley-footer.html
@@ -0,0 +1,49 @@
+                </div><!-- .content role=main -->
+        <p id="bromley-powered-by" class="desk-only">
+            <a href="http://www.fixmystreet.com/">Powered by <img src="/cobrands/bromley/fms-logo.png" style="height:20px;"></a>
+        </p>
+
+            </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 <img src="/cobrands/bromley/fms-logo.png" style="height:20px;"></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>
+
+    </div> <!-- .wrapper -->
+
+<div id="bromley-footer" class="desk-only">
+	<p class="copy">&copy; 2012 London Borough of Bromley</p>
+		
+	<a href="http://www.direct.gov.uk/"><img src="http://www.bromley.gov.uk/site/images/directgov.jpg" alt="Directgov website link - Public services all in one place" /></a>
+		
+	<ul class="footer-nav">
+		<li><a href="#bromley-header">To the top</a></li>
+		<li><a href="http://www.bromley.gov.uk/terms">Disclaimer</a></li>
+		<li><a href="http://www.bromley.gov.uk/privacy" rel="nofollow">Privacy and cookies</a></li>
+		<li><a href="http://www.bromley.gov.uk/accesstoinfo">Access to information</a></li>
+	</ul>
+
+</div>
+
+    </div></div>
+</body>
+</html>
diff --git a/templates/web/barnet/bromley-header.html b/templates/web/barnet/bromley-header.html
new file mode 100644
index 000000000..50b0f8fa1
--- /dev/null
+++ b/templates/web/barnet/bromley-header.html
@@ -0,0 +1,94 @@
+<!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/bromley/layout.css') %]" media="(min-width:48em)">
+	<link rel="stylesheet" href="[% version('/js/fancybox/jquery.fancybox-1.3.4.css') %]">
+	<link rel="stylesheet" href="[% version('/cobrands/bromley/bromley.css') %]">
+        <!--[if (lt IE 9) & (!IEMobile)]>
+            <link rel="stylesheet" href="[% version('/cobrands/bromley/layout.css') %]">
+        <![endif]-->
+
+        <script src="[% version('/js/modernizr.custom.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>
+                
+	<link rel="Shortcut Icon" type="image/x-icon" href="/cobrands/bromley/favicon.ico">
+
+    </head>
+    <body class="[% bodyclass | html IF bodyclass %]">
+        [%# ie_wrapper is to prevent a horizontal scrollbar in IE7, it appears (from Bromley site) %]
+        <div id="bromley-wrapper"><div id="bromley-ie_wrapper">
+
+<div id="bromley-header" class="desk-only">
+	<ul class="header-nav"> 
+		<li><a href="http://www.bromley.gov.uk/accessibility">Accessibility</a></li>
+		<li><a class="skiplink" href="http://www.bromley.gov.uk/#user-meta" rel="nofollow">Skip to content</a></li>
+		<!-- <li><a rel="nofollow" href="http://www.bromley.gov.uk/a_to_z?previewstyle=generic/print.css">Printer friendly</a></li> -->
+		<!-- <li><a href="http://www.bromley.gov.uk/accessibility/settings">Text size: AAA</a></li> -->
+		<li><div id="google_translate_element"></div></li>
+	</ul>
+			
+	<div class="logo">
+		<a href="http://www.bromley.gov.uk"><img src="/cobrands/bromley/bromley-logo.jpg" alt="London Borough of Bromley logo" width="159" height="114" style="width:159px; height:114px;" /></a>
+	</div>
+			
+	<div class="sign-in">
+        [% 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>
+        [% END %]
+	</div>
+			
+	<div class="main-menu">
+		<ul>
+        <li class="home"><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn"
+            >[% "Report" %]</[% 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 class="last"><[% 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 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>
+                [% END %]
+            </div>
+
+            <h1 class="main desk-only">Reporting a problem in Bromley&rsquo;s streets or parks</h1>
+
+            <div class="container">
+                <div class="content[% " $mainclass" | html IF mainclass %]" role="main">
+
+
diff --git a/templates/web/barnet/footer.html b/templates/web/barnet/footer.html
index 32c6b5f7b..aa29c2495 100644
--- a/templates/web/barnet/footer.html
+++ b/templates/web/barnet/footer.html
@@ -1,7 +1,37 @@
-							</div>
-						<!-- end of content, start of  footer -->
-						</div>
-					</div>
+                </div><!-- .content role=main -->
+        <p id="bromley-powered-by" class="desk-only">
+            <a href="http://www.fixmystreet.com/">Powered by <img src="/cobrands/bromley/fms-logo.png" style="height:20px;"></a>
+        </p>
+            </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 <img src="/cobrands/bromley/fms-logo.png" style="height:20px;"></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>
+
+    </div> <!-- .wrapper -->
+</div>
+</div>
+</div>
+
 <!-- googleoff: index -->
 					<div id="column_nav">
 						<div class="navigation active">
@@ -44,8 +74,7 @@
 						</div>
 					</div>
 <!-- googleon: index -->
-				</div>
-			</div>
-		</div>
+</div>
+</div>
 	</body>
-</html>
-\ No newline at end of file
+</html>
diff --git a/templates/web/barnet/header.html b/templates/web/barnet/header.html
index 955473090..f8b501b70 100644
--- a/templates/web/barnet/header.html
+++ b/templates/web/barnet/header.html
@@ -1,60 +1,98 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
-	<head>
-		<link rel="stylesheet" type="text/css" href="http://pledgebank.barnet.gov.uk/microsites/barnet/site/styles/standard.css" media="screen" />
-<!--[if lte IE 6]>
+<!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="ToC" href="http://www.barnet.gov.uk/site_map" />
+		<meta name="Keywords" content="fixmystreet barnet pothole streetlights report street problem" />
+		<meta name="Description" content="FixMyStreet Barnet: report problems in Barnet like graffiti, fly tipping, broken paving slabs, or street lighting" />
+
+    <!--
+    		<link rel="stylesheet" type="text/css" href="http://pledgebank.barnet.gov.uk/microsites/barnet/site/styles/standard.css" media="screen" />
+<!- -[if lte IE 6]>
 		<link rel="stylesheet" type="text/css" href="http://pledgebank.barnet.gov.uk/microsites/barnet/site/styles/generic/ie-six.css" media="screen" />
 		<link rel="stylesheet" type="text/css" href="http://pledgebank.barnet.gov.uk/microsites/barnet/site/styles/generic/ie-six-print.css" media="print" />
-<![endif]-->
-<!--[if IE 7]>
+<![endif]- ->
+<!- -[if IE 7]>
 	    <link rel="stylesheet" type="text/css" href="http://pledgebank.barnet.gov.uk/microsites/barnet/site/styles/generic/ie-seven.css" media="screen" />
-<![endif]-->		
-<!--[if IE 8]>
+<![endif]- ->		
+<!- -[if IE 8]>
 	    <link rel="stylesheet" type="text/css" href="http://pledgebank.barnet.gov.uk/microsites/barnet/site/styles/generic/ie-eight.css" media="screen" />
-<![endif]-->		
+<![endif]- ->		
 		<link rel="stylesheet" type="text/css" href="http://pledgebank.barnet.gov.uk/microsites/barnet/site/styles/generic/print.css" media="print" />
 		<link rel="stylesheet" type="text/css" href="http://pledgebank.barnet.gov.uk/microsites/barnet/site/styles/generic/handheld.css" media="handheld" />
+    -->
 		<link rel="Shortcut Icon" type="image/x-icon" href="http://pledgebank.barnet.gov.uk/microsites/barnet/site/favicon.ico" />
-		<link rel="ToC" href="http://www.barnet.gov.uk/site_map" />
-		<meta name="Keywords" content="fixmystreet barnet pothole streetlights report street problem" />
-		<meta name="Description" content="FixMyStreet Barnet: report problems in Barnet like graffiti, fly tipping, broken paving slabs, or street lighting" />
 
- 		<link rel="stylesheet" type="text/css" href="[% version('/css/core.css') %]">    
-		<link rel="stylesheet" type="text/css" href="/cobrands/barnet/css/layout.css">
-
-    [% INCLUDE 'common_header_tags.html' %]
-
-	</head>
-	<body>
-		<div id="wrapper">
-			<div id="ie_wrapper">
-<!-- googleoff: index -->
-				<div id="mobile_name">London Borough of Barnet</div>
-				<div id="mast">
-					<div class="pseudoH1">
-						<a href="http://www.barnet.gov.uk/"><span>London Borough of Barnet</span> <img src="http://pledgebank.barnet.gov.uk/microsites/barnet/site/images/blank.gif" alt="London Borough of Barnet logo" /></a>
-					</div>
-					<ul id="skip" class="hidden">
-						<li><a href="#content" rel="nofollow">Skip to content</a></li>
-						<li><a href="#column_nav" rel="nofollow">Skip to main navigation</a></li>
-					</ul>
-					<div class="mast_links"></div>
-					<span class="clear"></span>
-					<div id="search"></div>
-					<div class="clear"></div>
-				</div>
-<!-- googleon: index -->
-				<div id="page_wrap">
-					<div id="page">
-						<div id="breadcrumb">
-<!-- googleoff:all -->
-							<ul>
-								<li><a href="/">FixMyStreet Home</a></li>
-								<li class="bc_end"><span>[% c.req.uri.path == '/'? 'Report a problem' : "$title" | html  %]</span></li>
-							</ul>
-<!-- googleon:all -->
-						</div>
-						<div id="content" class="withWidth fullWidth">
-              <div id="mysociety">
-
-              <!-- end of header --> 
-\ No newline at end of file
+        <link rel="stylesheet" href="[% version('/cobrands/barnet/base.css') %]">
+        <link rel="stylesheet" href="[% version('/cobrands/barnet/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/barnet/layout.css') %]">
+        <![endif]-->
+
+        <script src="[% version('/js/modernizr.custom.76759.js') %]" charset="utf-8"></script>
+        <script src="[% version('/cobrands/barnet/position_map.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>
+        <link rel="stylesheet" href="[% version('/cobrands/barnet/barnet.css') %]">
+
+
+    </head>
+    <body class="[% bodyclass | html IF bodyclass %]">
+        <div id="barnet-wrapper">
+        <div id="ie_wrapper">
+            <div id="mast">
+                <div class="pseudoH1">
+                    <a href="http://www.barnet.gov.uk/"><span>London Borough of Barnet</span> <img src="http://pledgebank.barnet.gov.uk/microsites/barnet/site/images/blank.gif" alt="London Borough of Barnet logo" /></a>
+                </div>
+                <ul id="skip" class="hidden">
+                    <li><a href="#content" rel="nofollow">Skip to content</a></li>
+                    <li><a href="#column_nav" rel="nofollow">Skip to main navigation</a></li>
+                </ul>
+                <div class="mast_links"></div>
+                <span class="clear"></span>
+                <div id="search"></div>
+                <div class="clear"></div>
+            </div>
+            <div id="page_wrap">
+                <div id="page">
+                    <div id="breadcrumb">
+        <!-- googleoff:all -->
+                        <ul>
+                            <li><a href="/">FixMyStreet Home</a></li>
+                            <li class="bc_end"><span>Report a problem</span></li>
+                        </ul>
+        <!-- googleon:all -->
+                    </div>
+                    <div id="content" class="withWidth fullWidth">
+        <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>
+                [% END %]
+            </div>
+
+            <div class="container">
+                <div class="content[% " $mainclass" | html IF mainclass %]" role="main">
+
+              <!-- end of header -->
diff --git a/templates/web/fixmystreet/header.html b/templates/web/fixmystreet/header.html
index 6be57891a..cfd13415d 100644
--- a/templates/web/fixmystreet/header.html
+++ b/templates/web/fixmystreet/header.html
@@ -19,6 +19,7 @@
         <![endif]-->
 
         <script src="[% version('/js/modernizr.custom.76759.js') %]" charset="utf-8"></script>
+        <script src="[% version('/cobrands/fixmystreet/position_map.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>
                 
diff --git a/web/cobrands/barnet/_colours.scss b/web/cobrands/barnet/_colours.scss
new file mode 100644
index 000000000..2f5ccc42b
--- /dev/null
+++ b/web/cobrands/barnet/_colours.scss
@@ -0,0 +1,9 @@
+/* COLOURS */
+
+$primary: #E9E9EA;
+$primary_b: #000000;
+$primary_text: #3E3D44;
+
+$contrast1: #E1E3E4;
+$contrast1_dark: darken(#E1E3E4, 10%);
+$contrast2: #AA8D11;
diff --git a/web/cobrands/barnet/barnet.scss b/web/cobrands/barnet/barnet.scss
new file mode 100644
index 000000000..34b2d79ce
--- /dev/null
+++ b/web/cobrands/barnet/barnet.scss
@@ -0,0 +1,17 @@
+/* Parts of barnet's main CSS needed for its header/footer and adjusted (see
+ * bottom) to not be affected by main FixMyStreet CSS. Not very sustainable;
+ * perhaps we should wrap all council CSS within a SCSS #council ID? Hmm.
+ */
+
+@import "compass";
+
+#column_nav li { list-style: none ;}
+
+#content ol.big-numbers li {
+    padding: 0 0 0 2.5em;
+}
+
+#front-howto #front_stats div big,
+ol.big-numbers > li::before {
+    color: #C0E8E8;
+}
diff --git a/web/cobrands/barnet/base.scss b/web/cobrands/barnet/base.scss
new file mode 100644
index 000000000..44954d909
--- /dev/null
+++ b/web/cobrands/barnet/base.scss
@@ -0,0 +1,6 @@
+@import "../fixmystreet/_h5bp";
+@import "./_colours";
+@import "../fixmystreet/_mixins";
+@import "compass";
+
+@import "../fixmystreet/_base";
diff --git a/web/cobrands/barnet/img/barnet-footer-logo.gif b/web/cobrands/barnet/img/barnet-footer-logo.gif
new file mode 100644
index 000000000..afba1cca2
--- /dev/null
+++ b/web/cobrands/barnet/img/barnet-footer-logo.gif
diff --git a/web/cobrands/barnet/img/barnet-logo.gif b/web/cobrands/barnet/img/barnet-logo.gif
new file mode 100644
index 000000000..86e0f4ee8
--- /dev/null
+++ b/web/cobrands/barnet/img/barnet-logo.gif
diff --git a/web/cobrands/barnet/img/browsealoud.gif b/web/cobrands/barnet/img/browsealoud.gif
new file mode 100644
index 000000000..4fbb3eded
--- /dev/null
+++ b/web/cobrands/barnet/img/browsealoud.gif
diff --git a/web/cobrands/barnet/img/directgov.gif b/web/cobrands/barnet/img/directgov.gif
new file mode 100644
index 000000000..1c9dd22e2
--- /dev/null
+++ b/web/cobrands/barnet/img/directgov.gif
diff --git a/web/cobrands/barnet/img/nav-arrow-active.gif b/web/cobrands/barnet/img/nav-arrow-active.gif
new file mode 100644
index 000000000..89ff9d0b3
--- /dev/null
+++ b/web/cobrands/barnet/img/nav-arrow-active.gif
diff --git a/web/cobrands/barnet/img/nav-bg-active.gif b/web/cobrands/barnet/img/nav-bg-active.gif
new file mode 100644
index 000000000..0d2ec9873
--- /dev/null
+++ b/web/cobrands/barnet/img/nav-bg-active.gif
diff --git a/web/cobrands/barnet/img/social1-facebook.gif b/web/cobrands/barnet/img/social1-facebook.gif
new file mode 100644
index 000000000..41b404df0
--- /dev/null
+++ b/web/cobrands/barnet/img/social1-facebook.gif
diff --git a/web/cobrands/barnet/img/social2-twitter.gif b/web/cobrands/barnet/img/social2-twitter.gif
new file mode 100644
index 000000000..17f368536
--- /dev/null
+++ b/web/cobrands/barnet/img/social2-twitter.gif
diff --git a/web/cobrands/barnet/img/social3-youtube.gif b/web/cobrands/barnet/img/social3-youtube.gif
new file mode 100644
index 000000000..eeb6ba356
--- /dev/null
+++ b/web/cobrands/barnet/img/social3-youtube.gif
diff --git a/web/cobrands/barnet/img/social4-flickr.gif b/web/cobrands/barnet/img/social4-flickr.gif
new file mode 100644
index 000000000..300e75da0
--- /dev/null
+++ b/web/cobrands/barnet/img/social4-flickr.gif
diff --git a/web/cobrands/barnet/layout.scss b/web/cobrands/barnet/layout.scss
new file mode 100644
index 000000000..1f43168d6
--- /dev/null
+++ b/web/cobrands/barnet/layout.scss
@@ -0,0 +1,312 @@
+@import "_colours";
+@import "../fixmystreet/_layout";
+
+// So that map appears underneath the header
+.wrapper {
+    position: relative;
+}
+.ie6, .ie7 {
+    .wrapper {
+        padding-top: 1em;
+    }
+}
+
+#front-main {
+    background: $primary;
+    @include border-radius(1em 1em 0 0);
+    margin-bottom: 1em;
+    padding-top: 0;
+    // layout sets this because base has it slightly lighter
+    h2 {
+        color: $primary_text;
+    }
+}
+
+#front_intro {
+    float: left;
+    margin-right: 3em;
+}
+
+#front_recent {
+    margin-left: 3em;
+}
+
+.content {
+    width: auto;
+}
+
+.nav-wrapper {
+    display: none;
+}
+
+.mappage .content {
+    margin-top: 6em;
+}
+
+.frontpage .content {
+    margin: 0;
+    @include box-shadow(none);
+}
+.ie6, .ie7, .ie8  {
+    .frontpage .content {
+        border: none;
+    }
+}
+
+#content .container h1 {
+    border-bottom: none;
+    font-size: 2em;
+    margin-bottom: 0.5em;
+}
+
+/*
+.mappage #content .container h1 {
+    margin-left: 0;
+}
+*/
+
+#content h1.big-green-banner {
+    font-size: 1em;
+    margin-left: -2em;
+}
+
+/* barnet styles */
+
+.clear {
+    clear: both;
+}
+
+.container {
+  padding: 0 1em;
+}
+
+#site-header {
+    display: none;
+}
+
+#side-form {
+    width: 30em;
+}
+
+#report-a-problem-sidebar {
+    left: 33.5em;
+    top: 7em;
+}
+
+.general-sidebar-notes {
+    left: 31.75em;
+    p {
+        margin-bottom: 0 !important;
+    }
+}
+
+#barnet-wrapper {
+  width: 100%;
+  display: table;
+  caption-side: bottom;
+}
+
+body {font-size: 77%; font-family: Arial, Helvetica, sans-serif; color: #3e3d44; padding: 0; margin: 0; line-height: 1.5; background: #e9e9ea;}
+body > html {font-size: 12px;}
+
+#barnet-wrapper {padding: 0; margin: 20px auto; width: 960px; background: #fff;}
+#ie_wrapper {display: block; padding: 20px 25px 25px;}
+#page {float: left; width: 100%;}
+
+#mast {clear: both;}
+
+#mast .pseudoH1 {margin: 0 0 0 -3px; padding: 0; background: url(img/barnet-logo.gif) no-repeat top left; width: 240px; height: 38px; float: left;}
+#mast .pseudoH1 a, #mast .pseudoH1 a:link, #mast .pseudoH1 a:visited, #mast .pseudoH1 a:hover, #mast .pseudoH1 a:active {display: block; width: 240px; height: 38px; padding: 0; background: url(img/barnet-logo.gif) no-repeat top left;}
+#mast .pseudoH1 span {position: absolute; margin-top: -13000px; top: -13000px;}
+
+#mast .mast_links {float: right; display: inline; margin: 0; padding: 10px 0 0; list-style: none; overflow: hidden;}
+
+#mast #search {clear: both; float: right; margin: 8px 0 0; background: #e1e3e4; border-top: 6px solid #bddadc; border-bottom: 2px solid #c8cacb; width: 100%; padding: 3px 0 2px; height: 21px;}
+
+/* ############################################################## */
+
+#content {margin: 0; width: 910px; overflow: hidden; min-height: 350px;}
+#content.withWidth {margin: 0 0 0 232px; width: 446px; overflow: hidden; float: left; display: inline;}
+#content.fullWidth {width: 678px;}
+#content.home {margin-top: 18px;}
+
+.mappage #content.withWidth {margin: 0 0 0 0px; width: auto; overflow: hidden; float: left; display: inline;}
+.mappage #content.fullWidth {width: 900px;}
+
+#breadcrumb {font-size: .9em; color: #5c6267; padding: 6px 0; margin: 0 0 0 232px;}
+#breadcrumb.full {margin: 0;}
+#breadcrumb ul {margin: 0; padding: 0; list-style: none;}
+#breadcrumb ul li {margin: 0; padding: 0 4px 0 0; display: inline;}
+#breadcrumb ul li a:link, #breadcrumb ul li a:visited, #breadcrumb ul li a:hover, #breadcrumb ul li a:active {color: #5c6267; background: url(../css_img/bcArrow.gif) no-repeat right center; padding: 0 10px 0 0; font-weight: normal;}
+#breadcrumb ul li span {font-weight: normal; color: #5c6267;}
+
+#content h1 {margin: 0 0 20px; font-size: 1.8em; border-bottom: 6px solid #bed9dd; font-family: Georgia, Times, 'Times New Roman', serif; color: #5d6167;}
+#content h1 span {padding: 6px 7px 3px; border: 1px solid #eff1f2; border-bottom: 0 none; display: block;}
+#content h2 {font-size: 1.4em; margin: 18px 0 10px; clear: left;}
+#content h2.signin {font-size: 1.2em; color: #fff; background: #000; padding: 3px 10px; margin-bottom: 0;}
+#content h3 {margin: 18px 0 10px; font-size: 1.2em;}
+#content h3.links-heading {float: left;}
+#content h3#pagenavbox {margin-top: 12px; padding-top: 18px; border-top: 1px solid #e1e1e1;}
+#content h4 {margin: 18px 0 10px; font-size: 1.1em;}
+
+#content p {margin: 0 0 10px;}
+#content p.summary {font-size: 1.1em; line-height: 1.5;}
+#content p.date {margin: 0 0 10px; font-size: .9em; color: #666;}
+#content p.faq {margin: 0 0 9px;}
+#content p.page_down {margin: 0 0 10px; padding-left: 20px; background: url(../css_img/icon_download.gif) no-repeat 0 1px;}
+#content p.news {margin: 0; font-size: 1.1em;}
+#content p.small {font-size: .9em;}
+#content p.note {margin: 0; font-size: .9em; color: #666;}
+#content p.details {margin: 5px 0; padding: 0; font-size: .9em; color: #666;}
+#content p.links-top {float: right; margin-top: 5px; margin-left: 18px;}
+
+#content table {margin: 18px 0; width: 100%;}
+#content table tr {border-width: 0 1px 1px 0; border-style: solid; border-color: #fff; background: #EFF1F2;}
+#content table td {border-width: 0 1px 1px 0; border-style: solid; border-color: #fff; background: #EFF1F2; padding: 5px}
+#content table th {border-width: 0 1px 1px 0; border-style: solid; border-color: #fff; background: #E1E3E4; font-weight: bold; font-size: 1em; line-height: 1.5;}
+#content table caption {font-size: 1.1em;}
+
+#content address {font-style: normal; background: url(../css_img/icon_email.gif) no-repeat 0 4px; padding: 3px 0 15px 20px;}
+
+#content ul li {padding: 0 0 6px;}
+#content ol li {padding: 0 0 6px;}
+
+#content a.icon img {float: left; height: 16px; margin: 0 10px 0 0; width: 16px;}
+
+/* ############################################################## */
+
+#column_nav {width: 214px; float: left; display: inline; padding: 0; margin: -35px 0 0 -910px; border-right: 3px solid #fff;}
+body.mappage #column_nav { display: none; }
+
+
+#column_nav .navigation {background: #fff; margin: 0 0 4px;}
+#column_nav h2 {font-size: 1.2em; padding: 0; height: 29px; margin: 0; border-radius: 0 0 3px 3px; background: url(img/nav-bg-active.gif) left bottom repeat-x; border-top: 6px solid #bddadc;}
+#column_nav #nav1 h2 {border-radius: 0 0 0 3px;}
+#column_nav h2 a {color: #fff; padding: 3px 10px 0 26px; display: block; background: url(img/nav-arrow.gif) 8px 7px no-repeat;}
+#column_nav .active h2 a {background: url(img/nav-arrow-active.gif) 8px 8px no-repeat;}
+#column_nav ul {margin: 0 0 0 4px; padding: 8px 7px 4px; border-width: 0 1px 1px; border-color: #e1e1e1; border-style: solid; border-radius: 3px; list-style: none; background: #fff; background: -moz-linear-gradient(top, #ffffff 0%, #f7f9f8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f7f9f8)); background: -webkit-linear-gradient(top, #ffffff 0%,#f7f9f8 100%); background: -o-linear-gradient(top, #ffffff 0%,#f7f9f8 100%); background: -ms-linear-gradient(top, #ffffff 0%,#f7f9f8 100%); background: linear-gradient(top, #ffffff 0%,#f7f9f8 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f9f8',GradientType=0);}
+#column_nav ul li {margin: 0; padding: 2px 4px; border-bottom: 1px solid #bfc0c1; color: #333; font-size: .9em;}
+#column_nav ul li.lastItem {border-bottom: none;}
+#column_nav ul li a:link, #column_nav ul li a:visited, #column_nav ul li a:hover, #column_nav ul li a:active {display: block; color: #333; font-weight: normal;}
+#column_nav ul li a:hover, #column_nav ul li a:active {text-decoration: none; color: #0090a2;}
+
+/* ############################################################## */
+
+#footer {clear: both; margin: 10px 0 0; padding: 15px 0 0; text-align: left;}
+#footer p {border-top: 1px solid #dadadb; border-bottom: 1px solid #dadadb; margin: 0 0 5px; color: #5d6167; float: left; display: inline; height: 24px; padding: 8px 0 2px; width: 551px;}
+#footer p a {color: #5d6167; font-weight: normal; padding: 0 2px;}
+#footer p.assocLinks {float: right; display: inline; padding: 5px 0; width: 359px;}
+#footer p.assocLinks a {float: left; display: inline; margin: 0 0 0 8px; padding: 0; background-position: center top; background-repeat: no-repeat; width: 24px; height: 24px;}
+#footer p.assocLinks a:active, #footer p.assocLinks a:hover, #footer p.assocLinks a:focus {background-position: center bottom;}
+#footer a#goto_browsealoud {background-image: url(img/browsealoud.gif); width: 95px; height: 25px; margin-top: 1px;}
+#footer a#goto_directgov {background-image: url(img/directgov.gif); width: 90px; margin: 0 0 0 22px;}
+#footer a#share_facebook {background-image: url(img/social1-facebook.gif); margin: 0 0 0 24px;}
+#footer a#share_twitter {background-image: url(img/social2-twitter.gif);}
+#footer a#share_youtube {background-image: url(img/social3-youtube.gif);}
+#footer a#share_flickr {background-image: url(img/social4-flickr.gif);}
+#footer a#share_sharethis {background-image: url(img/social5-sharethis.gif);}
+#bottomBar {background: url(img/barnet-footer-logo.gif) 771px 12px no-repeat #21aaaa; display: block; width: 100%; height: 56px; border-top: 6px solid #bddadc;}
+
+#poweredby {margin: 0 auto; padding: 0 0 18px; display: block; width: 910px; text-align: right; color: #999;}
+#poweredby a {font-weight: normal; color: #999;}
+
+/*
+// Don't want gap that normal site has
+body {
+    .table-cell {
+        .content {
+            margin-left: -20px;
+            margin-top: -120px;
+        }
+    }
+}
+
+.container {
+  width: 446px;
+  padding-left: 232px;
+}
+
+.wrapper {
+  width: 960px;
+}
+
+// Don't want FixMyStreet logo on desktop, and we have a skip to content in
+// Bromley header
+#site-header {
+    display: none;
+}
+
+#site-logo {
+    display: none;
+}
+#user-meta {
+    display: none;
+}
+
+// Currently hiding, but do want some internal navigation somewhere at the end
+.nav-wrapper {
+    display: none;
+}
+
+// White background, so no shadow or margin needed.
+
+// Perhaps fix map location (should be in central?)
+.ie6 #map_box, .ie7 #map_box {
+    right: -32em;
+}
+
+.general-sidebar-notes,
+#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;
+  }
+}
+
+.ie7 .big-green-banner {
+    right: 0;
+}
+
+// Pull OpenLayers navigation down a bit
+#fms_pan_zoom {
+    top: 0.5em !important;
+}
+
+// Fix location of aside sidebar
+body.twothirdswidthpage {
+    .content {
+        aside {
+            @include box-shadow(none);
+        }
+        .sticky-sidebar {
+            aside {
+                position: absolute;
+                top: 0;
+            }
+        }
+    }
+}
+@media only screen and (min-width: 48em) and (max-width: 61em) {
+    body.twothirdswidthpage {
+        .content {
+            .sticky-sidebar {
+                top: auto;
+            }
+        }
+    }
+}
+
+// So as not to interfere with the Bromley footer, make the fixed nav static.
+.shadow-wrap {
+  position: static;
+  padding-top: 0;
+  margin-bottom: 1em;
+  ul#key-tools {
+    border-top: none;
+    border-bottom: 1px solid $primary;
+  }
+}
+ */
diff --git a/web/cobrands/barnet/position_map.js b/web/cobrands/barnet/position_map.js
new file mode 100644
index 000000000..95e6717ee
--- /dev/null
+++ b/web/cobrands/barnet/position_map.js
@@ -0,0 +1,14 @@
+function position_map_box() {
+    var map_pos = 'absolute', map_height = '100%';
+    if ($('html').hasClass('ie6')) {
+        map_pos = 'absolute';
+        map_height = $(window).height();
+    }
+    $('#map_box').prependTo('.wrapper').css({
+        zIndex: 0, position: map_pos,
+        top: $('.wrapper').top, left: $('.wrapper').left,
+        right: $('.wrapper').right, bottom: $('.wrapper').bottom,
+        width: '100%', height: map_height,
+        margin: 0
+    });
+}
diff --git a/web/cobrands/bromley/_colours.scss b/web/cobrands/bromley/_colours.scss
index c0376274e..e178c9db2 100644
--- a/web/cobrands/bromley/_colours.scss
+++ b/web/cobrands/bromley/_colours.scss
@@ -1,8 +1,9 @@
 /* COLOURS */
 
-$primary: rgb(76,120,168);
+$primary: rgb(91,120,147);
 $primary_b: #000000;
 $primary_text: #ffffff;
 
-$contrast1: #00BD08;
+$contrast1: rgb(91,120,147);
+$contrast1_dark: darken(rgb(91,120,147), 10%);
 $contrast2: #AA8D11;
diff --git a/web/cobrands/bromley/base.scss b/web/cobrands/bromley/base.scss
index 4594f832f..9c5ff2b0f 100644
--- a/web/cobrands/bromley/base.scss
+++ b/web/cobrands/bromley/base.scss
@@ -5,3 +5,56 @@
 
 @import "../fixmystreet/_base";
 
+a, a:visited {
+    color: #369;
+    &:hover, &:active {
+        color: #369;
+    }
+}
+
+h1.main {
+    color: $primary;
+    text-align: center;
+    margin: 0.5em 0;
+}
+
+// Want a white header, and logo is slightly bigger
+#site-header {
+    @include background(linear-gradient(#ddd, #fff 10%, #fff));
+    height: 4em;
+}
+
+// Colour tab to match colour scheme
+#nav-link {
+  width: 50px;
+  height: 48px;
+  background: url('/cobrands/bromley/tab-blue.png') 0 0 no-repeat;
+}
+
+// Change logo to logo of council
+#site-logo {
+  display: block;
+  width: 80px;
+  height: 44px;
+  top: 0.9em;
+  background: url('/cobrands/bromley/bromley-logo.s.jpg') 0 0 no-repeat;
+}
+
+#problems-nav {
+    border-bottom:0.25em solid $primary;
+    ul li a {
+        text-transform: none;
+        &.active {
+            background: $primary;
+            color: #fff;
+        }
+    }
+}
+
+.big-green-banner {
+    text-transform: none;
+}
+
+#form_sign_in {
+    margin-top: 1em;
+}
diff --git a/web/cobrands/bromley/layout.scss b/web/cobrands/bromley/layout.scss
index 3dc34c6c7..f773b47f1 100644
--- a/web/cobrands/bromley/layout.scss
+++ b/web/cobrands/bromley/layout.scss
@@ -1,11 +1,131 @@
 @import "_colours";
 @import "../fixmystreet/_layout";
 
-body {
-    background: #fff;
+body { background: #9b9b9b url('http://www.bromley.gov.uk/site/styles/css_img/repeater.gif') repeat-x; }
+#bromley-wrapper { background: #fff url('http://www.bromley.gov.uk/site/styles/css_img/header-corners.gif') center 110px no-repeat; margin: 1px auto 0; padding: 0 15px; width: 955px;}
+.offline #bromley-wrapper { padding: 0 15px 20px; }
+
+// So that map appears underneath the header
+.wrapper {
+    position: relative;
+}
+.ie6, .ie7 {
+    .wrapper {
+        padding-top: 1em;
+    }
 }
 
 #front-main {
     background: $primary;
+    @include border-radius(1em 1em 0 0);
+    margin-bottom: 1em;
+    padding-top: 0;
+    // layout sets this because base has it slightly lighter
+    h2 {
+        color: $primary_text;
+    }
+}
+
+// Don't want gap that normal site has
+body.frontpage {
+    .table-cell {
+        .content {
+            margin-top: 0;
+        }
+    }
+}
+
+// Don't want FixMyStreet logo on desktop, and we have a skip to content in
+// Bromley header
+#site-header {
+    display: none;
+}
+
+#user-meta {
+    display: none;
+}
+
+// Currently hiding, but do want some internal navigation somewhere at the end
+.nav-wrapper {
+    display: none;
+}
+
+// White background, so no shadow or margin needed.
+.content {
+    margin: 0;
+    @include box-shadow(none);
+}
+.ie6, .ie7, .ie8  {
+    .content {
+        border: none;
+    }
+}
+
+// As map can scroll and isn't at the top, give it an edge
+#map_box {
+    border: solid 1px #999;
+    top: 1em;
+    right: 0em;
+    margin: 0;
+}
+
+// Perhaps fix map location (should be in central?)
+.ie6 #map_box, .ie7 #map_box {
+    right: -32em;
+}
+
+.general-sidebar-notes,
+#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;
+  }
+}
+
+.ie7 .big-green-banner {
+    right: 0;
+}
+
+// Pull OpenLayers navigation down a bit
+#fms_pan_zoom {
+    top: 0.5em !important;
+}
+
+// Fix location of aside sidebar
+body.twothirdswidthpage {
+    .content {
+        aside {
+            @include box-shadow(none);
+        }
+        .sticky-sidebar {
+            aside {
+                position: absolute;
+                top: 0;
+            }
+        }
+    }
+}
+@media only screen and (min-width: 48em) and (max-width: 61em) {
+    body.twothirdswidthpage {
+        .content {
+            .sticky-sidebar {
+                top: auto;
+            }
+        }
+    }
+}
+
+// So as not to interfere with the Bromley footer, make the fixed nav static.
+.shadow-wrap {
+  position: static;
+  padding-top: 0;
+  margin-bottom: 1em;
+  ul#key-tools {
+    border-top: none;
+    border-bottom: 1px solid $primary;
+  }
 }
 
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 0db8334fb..ffbf2952f 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -128,17 +128,7 @@ $(function(){
         } else {
             // Make map full screen on non-mobile sizes.
             $html.removeClass('mobile');
-            var map_pos = 'fixed', map_height = '100%';
-            if ($html.hasClass('ie6')) {
-                map_pos = 'absolute';
-                map_height = $(window).height();
-            }
-            $('#map_box').prependTo('.wrapper').css({
-                zIndex: 0, position: map_pos,
-                top: 0, left: 0, right: 0, bottom: 0,
-                width: '100%', height: map_height,
-                margin: 0
-            });
+            position_map_box();
             if (typeof fixmystreet !== 'undefined') {
                 fixmystreet.state_map = 'full';
             }
diff --git a/web/cobrands/fixmystreet/position_map.js b/web/cobrands/fixmystreet/position_map.js
new file mode 100644
index 000000000..b2aaefe8c
--- /dev/null
+++ b/web/cobrands/fixmystreet/position_map.js
@@ -0,0 +1,13 @@
+function position_map_box() {
+    var map_pos = 'fixed', map_height = '100%';
+    if ($('html').hasClass('ie6')) {
+        map_pos = 'absolute';
+        map_height = $(window).height();
+    }
+    $('#map_box').prependTo('.wrapper').css({
+        zIndex: 0, position: map_pos,
+        top: 0, left: 0, right: 0, bottom: 0,
+        width: '100%', height: map_height,
+        margin: 0
+    });
+}
author	Struan Donald <struan@exo.org.uk>	2012-04-24 15:49:12 +0100
committer	Struan Donald <struan@exo.org.uk>	2012-04-24 15:49:12 +0100
commit	d7ea16b79d6dd9fe65c4550edf393bbf8fd9d04d (patch)
tree	4b7c00e01b05d9170968040049e940010cba978c
parent	4aa639173602d06ec85532c8598d99983b8340b4 (diff)