Update footer, put signed in message in header.

4 files changed, 69 insertions, 16 deletions

diff --git a/templates/web/default/footer.html b/templates/web/default/footer.html
index 9222436e2..657d9d826 100644
--- a/templates/web/default/footer.html
+++ b/templates/web/default/footer.html
@@ -4,16 +4,18 @@
 <h2 class="v">[% loc('Navigation') %]</h2>
 <ul id="navigation">
 <li><a href="/">[% loc("Report a problem") %]</a></li>
+<li id="nav_new"><a href="/my">[% loc("Your reports") %]</a></li>
 <li><a href="/reports">[% loc("All reports") %]</a></li>
 <li><a href="/alert[% pc ? '/list?pc=' : '' %][% pc | uri %]">[% loc("Local alerts") %]</a></li>
 <li><a href="/faq">[% loc("Help") %]</a></li>
-<li><a href="/contact">[% loc("Contact") %]</a></li>
 </ul>
 
 [% loc('<a href="http://www.mysociety.org/"><img id="logo" width="133" height="26" src="/i/mysociety-dark.png" alt="View mySociety.org"><span id="logoie"></span></a>') %]
 
 <p id="footer">
-    [% loc('Built by <a href="http://www.mysociety.org/">mySociety</a>, using some <a href="http://github.com/mysociety/fixmystreet">clever</a>&nbsp;<a href="https://secure.mysociety.org/cvstrac/dir?d=mysociety/services/TilMa">code</a>.') %]
+    [% loc('Built by <a href="http://www.mysociety.org/">mySociety</a>') %]
+    | <a href="http://github.com/mysociety/fixmystreet">[% loc('Source code') %]</a>
+    | <a href="/contact">[% loc("Contact FixMyStreet") %]</a>
 </p>
 
 [% INCLUDE 'tracking_code.html' %]
diff --git a/templates/web/default/header.html b/templates/web/default/header.html
index 52f066663..67a5fe631 100644
--- a/templates/web/default/header.html
+++ b/templates/web/default/header.html
@@ -16,6 +16,15 @@
             [%- loc('Fix<span id="my">My</span>Street') %]
         [%- IF NOT title AND NOT c.req.path %]</h1>[% ELSE %]</a></div>[% END %]
 
+        <ul id="meta">
+            [% IF c.user_exists %]
+                <li>[% tprintf(loc('Signed in as %s'), c.user.name || c.user.email) %]
+                <li><a href="/auth/logout">[% loc('Sign out') %]</a></li>
+            [% ELSE %]
+                <li>&nbsp;</li>
+            [% END %]
+        </ul>
+
         <div id="wrapper"><div id="mysociety">
 
     [% INCLUDE 'debug_header.html' %]
diff --git a/web/css/_main.scss b/web/css/_main.scss
index 44fd82b3b..0b9cf33ab 100644
--- a/web/css/_main.scss
+++ b/web/css/_main.scss
@@ -79,7 +79,23 @@ select, input, textarea {
 
 /* Can't put the margin in #mysociety because of above IE craziness */
 #wrapper {
-    margin: 2em;
+    margin: 1em 2em 2em;
+}
+
+#meta {
+    list-style-type: none;
+    margin: 0.25em 0 0 1em;
+    padding: 0;
+    font-size: 0.875em;
+    li {
+        display: inline;
+        margin: 0;
+        padding: 0 0 0 0.25em;
+        border-left: solid 1px $header_colour;
+    }
+    li:first-child {
+        border-left: none;
+    }
 }
 
 .v {
@@ -111,6 +127,12 @@ select, input, textarea {
     a:hover, a:active {
         background-color: $header_colour;
         color: $header_back;
+        -moz-border-radius-topleft: 0.5em;
+        -webkit-border-top-left-radius: 0.5em;
+        border-radius-top-left: 0.5em;
+        -moz-border-radius-topright: 0.5em;
+        -webkit-border-top-right-radius: 0.5em;
+        border-radius-top-right: 0.5em;
     }
 }
 
@@ -129,11 +151,10 @@ select, input, textarea {
 
 #footer {
     clear: both;
-    text-align: right;
-    font-size: 83%;
-    border-top: solid 1px $header_colour;
-    display: table;
-    margin: 2em 0 1em auto;
-    padding: 2px 4px;
+    text-align: center;
+    border-top: solid 2px $header_back;
+    width: 50%;
+    margin: 2em auto 0;
+    padding: 1em;
 }
 
diff --git a/web/css/main.css b/web/css/main.css
index ddea37970..686b74d40 100644
--- a/web/css/main.css
+++ b/web/css/main.css
@@ -77,7 +77,23 @@ select, input, textarea {
 
 /* Can't put the margin in #mysociety because of above IE craziness */
 #wrapper {
-  margin: 2em;
+  margin: 1em 2em 2em;
+}
+
+#meta {
+  list-style-type: none;
+  margin: 0.25em 0 0 1em;
+  padding: 0;
+  font-size: 0.875em;
+}
+#meta li {
+  display: inline;
+  margin: 0;
+  padding: 0 0 0 0.25em;
+  border-left: solid 1px #5e552b;
+}
+#meta li:first-child {
+  border-left: none;
 }
 
 .v {
@@ -108,6 +124,12 @@ select, input, textarea {
 #navigation a:hover, #navigation a:active {
   background-color: #5e552b;
   color: #e3d595;
+  -moz-border-radius-topleft: 0.5em;
+  -webkit-border-top-left-radius: 0.5em;
+  border-radius-top-left: 0.5em;
+  -moz-border-radius-topright: 0.5em;
+  -webkit-border-top-right-radius: 0.5em;
+  border-radius-top-right: 0.5em;
 }
 
 #nav_new a {
@@ -125,10 +147,9 @@ select, input, textarea {
 
 #footer {
   clear: both;
-  text-align: right;
-  font-size: 83%;
-  border-top: solid 1px #5e552b;
-  display: table;
-  margin: 2em 0 1em auto;
-  padding: 2px 4px;
+  text-align: center;
+  border-top: solid 2px #e3d595;
+  width: 50%;
+  margin: 2em auto 0;
+  padding: 1em;
 }