[East Sussex] map and nav cosmetics

 - Use East Sussex-specific position_map.js
 - Display map correctly on desktop
 - Increase default zoom level and use correct grammar for postcode box
 - Tidy up default font size and center elements on postcode form
 - Correctly position report form, allow links in sidebar to be seen
 - Make map guidance text visible on mobile
 - Fix display of site header across all pages
 - More sidebar/header fixes
 - Override some text on the report sidebar to be more friendly
 - Remove unused images
 - Use breadcrumb bar for main nav on desktop
 - Restore correct background colour to footer
 - Tighten up vertical spacing on all pages
 - Slacken vertical spacing on home page
 - Stop the sidebar clobbering the footer
 - Tidy up menu display
 - Ensure form errors are shown properly
 - Add greeting and 'sign out' link to appropriate place
 - Ensure correct width is used on IE8
 - Make 'home' breadcrumb a span instead of a link
 - Hide top 4px border on mobile
 - Remove breadcrumb styling from FMS nav
 - Use ellipsis and correct capitalization on confirm page
 - Don't uppercase all button labels
 - Hide email icon in email fields
 - Don't italicise input placeholder text
 - Use correct font family, alignment and size for various elements
 - Correct box shadow, fix pin alignment, various UI fixes
 - Ensure font size isn't too small. Fix header on wide but small screens
 - Don't adjust .content height for East Sussex pages

16 files changed, 305 insertions, 88 deletions

diff --git a/perllib/FixMyStreet/Cobrand/EastSussex.pm b/perllib/FixMyStreet/Cobrand/EastSussex.pm
index 581fcabc8..9eadbed4e 100644
--- a/perllib/FixMyStreet/Cobrand/EastSussex.pm
+++ b/perllib/FixMyStreet/Cobrand/EastSussex.pm
@@ -34,5 +34,13 @@ sub example_places {
     return ( 'BN7 2LZ', 'White Hill, Lewes' );
 }
 
+sub enter_postcode_text {
+    my ($self) = @_;
+    return 'Enter an East Sussex postcode, or street name and area';
+}
+
+# increase map zoom level so street names are visible
+sub default_map_zoom { return 3; }
+
 1;
 
diff --git a/templates/web/eastsussex/email_sent.html b/templates/web/eastsussex/email_sent.html
new file mode 100644
index 000000000..f64a3cd64
--- /dev/null
+++ b/templates/web/eastsussex/email_sent.html
@@ -0,0 +1,34 @@
+[% INCLUDE 'header.html', bodyclass = 'twothirdswidthpage', title = loc('Create a report') %]
+
+<h1>[% loc("Nearly done! Now check your email&hellip;") %]</h1>
+
+[% IF c.cobrand.moniker != 'zurich' %]
+    <p>[% loc("The confirmation email <strong>may</strong> take a few minutes to arrive &mdash; <em>please</em> be patient.") %]</p>
+[% END %]
+
+<p>[% loc("If you use web-based email or have 'junk mail' filters, you may wish to check your bulk/spam mail folders: sometimes, our messages are marked that way.") %]</p>
+
+[% IF c.cobrand.moniker != 'zurich' %]
+    <p>
+    [% loc("You must now click the link in the email we've just sent you.") %]
+    [% IF email_type == 'problem' %]
+        [% loc("If you do not, your problem will not be posted.") %]
+    [% ELSIF email_type == 'update' %]
+        [% loc("If you do not, your update will not be posted.") %]
+    [% ELSIF email_type == 'alert' %]
+        [% loc("If you do not, your alert will not be activated.") %]
+    [% END %]
+    </p>
+
+    <p>
+    [% IF email_type == 'problem' %]
+        [% loc("(Don't worry &mdash; we'll hang on to your problem report while you're checking your email.)") %]
+    [% ELSIF email_type == 'update' %]
+        [% loc("(Don't worry &mdash; we'll hang on to your update while you're checking your email.)") %]
+    [% ELSIF email_type == 'alert' %]
+        [% loc("(Don't worry &mdash; we'll hang on to your alert while you're checking your email.)") %]
+    [% END %]
+    </p>
+[% END %]
+
+[% INCLUDE 'footer.html' %]
diff --git a/templates/web/eastsussex/footer.html.template b/templates/web/eastsussex/footer.html.template
index f561aff40..e98ea7168 100644
--- a/templates/web/eastsussex/footer.html.template
+++ b/templates/web/eastsussex/footer.html.template
@@ -7,28 +7,26 @@
     <div class="nav-wrapper clearfix">
         <div class="main-menu-wrapper">
             <div class="main-menu">
-            <ul class="clearfix" id="mobile-menu">
-                <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' OR ( c.req.uri.path == '/auth' AND c.req.params.r == 'my' ) %]span[% ELSE %]a href="/my"[% END
-                    %]>[% loc("Your reports") %]</[% ( c.req.uri.path == '/my' OR ( c.req.uri.path == '/auth' AND c.req.params.r == 'my' ) ) ? 'span' : 'a' %]></li>[%
-                %]<li><[% IF c.req.uri.path == '/reports/East+Sussex' %]span[% ELSE %]a href="/reports/East+Sussex"[% 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>
+                <ul class="clearfix" id="mobile-menu">
+                    <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' OR ( c.req.uri.path == '/auth' AND c.req.params.r == 'my' ) %]span[% ELSE %]a href="/my"[% END
+                        %]>[% loc("Your reports") %]</[% ( c.req.uri.path == '/my' OR ( c.req.uri.path == '/auth' AND c.req.params.r == 'my' ) ) ? 'span' : 'a' %]></li>[%
+                    %]<li><[% IF c.req.uri.path == '/reports/East+Sussex' %]span[% ELSE %]a href="/reports/East+Sussex"[% 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>
+                    [% IF c.user_exists %]
+                        <li>
+                            [% tprintf(loc('Hi %s'), c.user.name || c.user.email) %]
+                            <a href="/auth/sign_out">[% loc('sign out') %]</a>
+                        </li>
+                    [% END %]
+                </ul>
             </div>
         </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>
 </div>
 
diff --git a/templates/web/eastsussex/header.html.template b/templates/web/eastsussex/header.html.template
index 8b60779fa..c7fda68f4 100644
--- a/templates/web/eastsussex/header.html.template
+++ b/templates/web/eastsussex/header.html.template
@@ -10,7 +10,7 @@
         <link rel="stylesheet" href="[% start %][% version('/cobrands/' _ c.cobrand.moniker _ '/layout.css') %]">
     <![endif]-->
 
-    <script src="[% start %][% version('/cobrands/fixmystreet/position_map.js') %]" charset="utf-8"></script>
+    <script src="[% start %][% version('/cobrands/' _ c.cobrand.moniker _ '/position_map.js') %]" charset="utf-8"></script>
     [% INCLUDE 'common_header_tags.html', js_override = '/cobrands/fixmystreet/fixmystreet.js', site_title = c.cobrand.site_title %]
     [% extra_js %]
 
@@ -23,7 +23,35 @@
 
 <body id="eastsussex-gov-uk" class="[% bodyclass | html IF bodyclass %]">
 
-{HeaderDesktop}
+<div id="site-header">
+    {HeaderDesktop}
+
+    <div class="container" id="nav-container">
+        <nav id="breadcrumb_breadcrumbTrail">
+            <ol class="breadcrumb screen large">
+                <li>
+                    <a href="/">FixMyStreet</a>
+                </li>
+                <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' OR ( c.req.uri.path == '/auth' AND c.req.params.r == 'my' ) %]span[% ELSE %]a href="/my"[% END
+                    %]>[% loc("Your reports") %]</[% ( c.req.uri.path == '/my' OR ( c.req.uri.path == '/auth' AND c.req.params.r == 'my' ) ) ? 'span' : 'a' %]></li>[%
+                %]<li><[% IF c.req.uri.path == '/reports/East+Sussex' %]span[% ELSE %]a href="/reports/East+Sussex"[% 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>
+            </ol>
+            [% IF c.user_exists %]
+                <div class="sign-in large">
+                    [% tprintf(loc('Hi %s'), c.user.name || c.user.email) %]
+                    <a href="/auth/sign_out">[% loc('sign out') %]</a>
+                </div>
+            [% END %]
+        </nav>
+    </div>
+</div>
 
 <div class="wrapper" id="wrapper"><div id="wrapper2"><div id="wrapper3">
     <div id="mysociety" role="main" class="body">
diff --git a/templates/web/eastsussex/report/new/fill_in_details_text.html b/templates/web/eastsussex/report/new/fill_in_details_text.html
new file mode 100644
index 000000000..3f967a72a
--- /dev/null
+++ b/templates/web/eastsussex/report/new/fill_in_details_text.html
@@ -0,0 +1,10 @@
+[%
+    IF area_ids_to_list.size != 0;
+        loc('East Sussex County Council won&rsquo;t be able to help unless you leave as much detail as you can. Please describe the exact location of the problem (e.g. on a wall), what it is, how long it has been there, a description (and a photo of the problem if you have one), etc.');
+        IF category_extras;
+            ' ' _ loc('Some categories may require additional information.');
+        END;
+    ELSE;
+        loc('Please fill in details of the problem below.');
+    END;
+%]
diff --git a/templates/web/eastsussex/report/new/notes.html b/templates/web/eastsussex/report/new/notes.html
new file mode 100644
index 000000000..c29925925
--- /dev/null
+++ b/templates/web/eastsussex/report/new/notes.html
@@ -0,0 +1,11 @@
+<p>[% loc("Please note:") %]</p>
+
+<ul class="plain-list">
+    <li>[% loc("We will only use your personal information in accordance with our <a href=\"/privacy\">privacy policy.</a>") %]</li>
+  [% IF c.cobrand.moniker != 'zurich' %]
+    <li>[% loc("Please be polite, concise and to the point.") %]</li>
+    <li>[% loc("Please do not be abusive&nbsp;&mdash; abusing your council devalues the service for all users.") %]</li>
+    <li>[% loc("Writing your message entirely in block capitals makes it hard to read, as does a lack of punctuation.") %]</li>
+  [% END %]
+    <li>[% loc("Remember that FixMyStreet is primarily for reporting physical problems that can be fixed. If your problem is not appropriate for submission via this site remember that you can contact us directly using our website <a href=\"http://www.eastsussex.gov.uk\">eastsussex.gov.uk</a>.") %]</li>
+</ul>
diff --git a/web/cobrands/eastsussex/base.scss b/web/cobrands/eastsussex/base.scss
index edf040055..4dc63f800 100644
--- a/web/cobrands/eastsussex/base.scss
+++ b/web/cobrands/eastsussex/base.scss
@@ -3,8 +3,18 @@
 @import "../sass/mixins";
 @import "compass";
 
+$heading-font: Arial, "Helvetica Neue", Helvetica, sans-serif !default;
+
 @import "../sass/base";
 
+body {
+    font-size: 13px;
+}
+
+.content {
+    padding: 0 1em;
+}
+
 a, a:visited {
     color: #369;
     &:hover, &:active {
@@ -35,13 +45,17 @@ h1.main {
     background: $primary;
     height: 76px;
     border-top-width: 4px;
+    margin-top: -4px;
 }
 
 // Colour tab to match colour scheme
 #nav-link {
   width: 50px;
   height: 48px;
-//  background: url('/cobrands/eastsussex/tab-blue.png') 0 0 no-repeat;
+}
+
+#breadcrumb_breadcrumbTrail ol li {
+    list-style: none;
 }
 
 #problems-nav {
@@ -56,9 +70,14 @@ h1.main {
     }
 }
 
+#report-a-problem-sidebar .sidebar-notes a {
+    color: #fff;
+    text-decoration: underline;
+}
+
 .big-green-banner {
     text-transform: none;
-    z-index: 0;
+    z-index: 5000;
 }
 
 #form_sign_in {
@@ -70,8 +89,17 @@ h1.main {
     margin: 0;
     padding: 1em;
 
+    #front-main-container {
+        text-align: center;
+    }
+
     #postcodeForm {
         padding: 1em;
+
+        label {
+            text-align: center;
+        }
+
         div {
             padding-top: 0px;
             input#pc {
@@ -83,10 +111,12 @@ h1.main {
     }
 }
 
+.frontpage #mysociety #front-main-container {
+    h1, h2 {
+        text-align: center;
+    }
+}
 
-//.header {
-//    background: #004b7b url(img/mobile.jpg) repeat-x;
-//}
 
 body > p {
     margin: 0;
@@ -107,7 +137,7 @@ body > p {
             border-radius: 3px;
         }
 
-        a {
+        a, a:hover {
             background-color: #00a1de;
             color: white;
         }
@@ -127,4 +157,30 @@ body > p {
         display: inline-block;
         float: none !important;
     }
+}
+
+button, input[type=submit], .btn {
+    text-transform: none;
+}
+
+.email {
+    background-image: none;
+}
+
+::-webkit-input-placeholder {
+  font-style: normal;
+}
+:-moz-placeholder {
+    font-style: normal;
+}
+:-ms-placeholder {
+    font-style: normal;
+}
+.placeholder {
+    font-style: normal;
+}
+
+
+#geolocate_link {
+    font-size: 1.0em;
 }
\ No newline at end of file
diff --git a/web/cobrands/eastsussex/img/desktop.png b/web/cobrands/eastsussex/img/desktop.png
deleted file mode 100644
index abebf4d40..000000000
--- a/web/cobrands/eastsussex/img/desktop.png
+++ /dev/null
diff --git a/web/cobrands/eastsussex/img/gradient.jpg b/web/cobrands/eastsussex/img/gradient.jpg
deleted file mode 100644
index 0c9c27dd2..000000000
--- a/web/cobrands/eastsussex/img/gradient.jpg
+++ /dev/null
diff --git a/web/cobrands/eastsussex/img/item-type.gif b/web/cobrands/eastsussex/img/item-type.gif
deleted file mode 100644
index 12a941daa..000000000
--- a/web/cobrands/eastsussex/img/item-type.gif
+++ /dev/null
diff --git a/web/cobrands/eastsussex/img/menu-item.gif b/web/cobrands/eastsussex/img/menu-item.gif
deleted file mode 100644
index f0cdc0198..000000000
--- a/web/cobrands/eastsussex/img/menu-item.gif
+++ /dev/null
diff --git a/web/cobrands/eastsussex/img/mobile.jpg b/web/cobrands/eastsussex/img/mobile.jpg
deleted file mode 100644
index 148da59c7..000000000
--- a/web/cobrands/eastsussex/img/mobile.jpg
+++ /dev/null
diff --git a/web/cobrands/eastsussex/img/xmas-lights.jpg b/web/cobrands/eastsussex/img/xmas-lights.jpg
deleted file mode 100644
index a5805779a..000000000
--- a/web/cobrands/eastsussex/img/xmas-lights.jpg
+++ /dev/null
diff --git a/web/cobrands/eastsussex/layout.scss b/web/cobrands/eastsussex/layout.scss
index 8c4388de9..e4a897cc9 100644
--- a/web/cobrands/eastsussex/layout.scss
+++ b/web/cobrands/eastsussex/layout.scss
@@ -17,16 +17,19 @@
 }
 
 .container, .eastsussex-container {
-    width: initial;
+    width: 100%;
     max-width: 966px;
 }
 
-#site-header .header a.contact {
-    text-decoration: underline;
+#menu {
+    height: 55px;
 }
 
 footer {
+    position: relative;
+    z-index: 1000;
     margin-top: 0;
+    background: #aee1f4;
 
     a {
         text-decoration: underline;
@@ -52,6 +55,10 @@ footer {
     }
 }
 
+div.form-error, p.form-error {
+    display: block !important;
+}
+
 body.mappage {
     .main-menu-wrapper {
         position: fixed
@@ -62,66 +69,129 @@ body.mappage {
     }
 
     #fms_pan_zoom {
-        top: 14em!important;
+        top: 16em!important;
     }
 
     #mysociety {
-        padding-top: 7em;
-    }
-
-    #report-a-problem-sidebar {
-        top: 10em;
-
-        .sidebar-notes .plain-list li {
-            font-size: 1em;
-        }
+        margin-top: 0;
+        padding-top: 0;
+        width: auto;
+        background: transparent;
     }
-}
 
-body.mappage, body.twothirdswidthpage {
     .content {
         width: 27em;
-        .sticky-sidebar aside {
-            z-order: 3;
-            top: 16em;
-        }
     }
 
-    /* map page has no menu, so requires less top margin */
-    &.mappage            .content { margin-top: 9em; }
-    &.twothirdswidthpage .content { margin-top: 15em; }
+    #wrapper {
+        display: block;
+        width: auto;
+    }
 
-    #site-header {
-        height: 0;
+    #report-a-problem-sidebar {
+        top: 1em;
     }
+}
 
+.general-sidebar-notes p, #report-a-problem-sidebar p, #report-a-problem-sidebar .sidebar-notes .plain-list li {
+    font-size: 13px;
+    line-height: 14px;
+}
+
+body.twothirdswidthpage.alertindex .content .sticky-sidebar aside {
+    top: -17em;
+}
+
+body.twothirdswidthpage .content .sticky-sidebar aside {
+    top: 0;
+    position: absolute;
 }
 
 body.frontpage {
     #site-header {
-        height: 13em;
+        height: auto;
 
         .mobile-header-nav {
             display: none;
         }
     }
+
+    .content {
+        margin-top: 3em;
+    }
 }
 
 #site-header {
-    height: 10em;
-    border-top-width: 0px;
+    border-top-width: 0;
+    margin-top: 0;
+    background: rgb(3, 160, 227);
+
+    .container {
+        position: relative;
+    }
+
+    #nav-container.container {
+        min-height: 0;
+    }
+
+    #breadcrumb_breadcrumbTrail {
+        position: relative;
+
+        a {
+            color: white;
+        }
+
+
+        .breadcrumb {
+            margin: 9px 0 6px 0;
+
+            span {
+                font-weight: bold;
+            }
+
+            li.level1 a {
+                color: #194c7e;
+            }
+        }
+
+        .sign-in {
+            position: absolute;
+            top: 4px;
+            right: 4px;
+        }
+    }
+
+    .header {
+        a.contact {
+            text-decoration: underline;
+        }
+
+        .alphabet h2 {
+            font-size: 1em;
+            font-weight: bold;
+        }
+    }
 }
 
 #mysociety {
-    margin-top: 9px;
+    margin-top: 0;
     padding-top: 24px;
     padding-bottom: 24px;
 }
 
 .content {
+    margin-top: 0;
     width: auto;
 }
 
+.content, body.twothirdswidthpage .content aside {
+    box-shadow: 0 0 12px 0 #dae1e5;
+}
+
+.banner p#fixed {
+    background-position: -328px -333px;
+}
+
 #skipped-map {
     clear: both;
     margin-top: 3em; /* required to push "Your Reports" visible on Safari/IE */
@@ -164,43 +234,22 @@ body.frontpage {
 }
 
 .main-menu-wrapper {
-    position: absolute;
-    height: 2.4em;
-    top: 162px;
-    z-index: 3;
-    background-color: #FFF;
-    width:100%;
-
-
-    ul {
-        margin: 0;
-    }
-
-    li {
-        list-style-type: none;
-        padding: 0.5em;
-        float: left;
-    }
+    display: none;
+}
 
-    .main-menu {
-        max-width: 966px;
-        margin: 0 auto;
 
-        ul li {
-            a, span {
-                background-color: transparent;
-                color: #369;
-            }
-            span {
-                font-weight: bold;
-            }
-        }
-    }
-}
 
 @media only screen and (max-width: 61em) {
     #main-nav {
         padding-left: 0px;
         float:none;
     }
+
+    #site-header {
+        height: auto;
+    }
+
+    body.twothirdswidthpage .content .sticky-sidebar {
+        top: 1em;
+    }
 }
diff --git a/web/cobrands/eastsussex/position_map.js b/web/cobrands/eastsussex/position_map.js
new file mode 100644
index 000000000..30ee88c67
--- /dev/null
+++ b/web/cobrands/eastsussex/position_map.js
@@ -0,0 +1,21 @@
+function position_map_box() {
+    var $html = $('html');
+    if ($html.hasClass('ie6')) {
+        $('#map_box').prependTo('body').css({
+            zIndex: -1, position: 'absolute',
+            top: 0, left: 0, right: 0, bottom: 0,
+            width: '100%', height: $(window).height(),
+            margin: 0
+        });
+    } else {
+        $('#map_box').prependTo('body').css({
+            zIndex: -1, position: 'fixed',
+            top: 0, left: 0, right: 0, bottom: 0,
+            width: '100%', height: '100%',
+            margin: 0
+        });
+    }
+}
+
+function map_fix() {}
+var slide_wards_down = 0;
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 073f745dd..054bd4480 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -462,7 +462,9 @@ $.fn.drawer = function(id, ajax) {
             if (cobrand == 'bromley') {
                 offset = -110;
             }
-            heightFix(window, '.content', offset, 1);
+            if (cobrand !== "eastsussex") {
+                heightFix(window, '.content', offset, 1);
+            }
             // in case we have a map that isn't full screen
             map_fix();
         }