From 6422be118d0a59e6df25ce84b41de17cfdf6282d Mon Sep 17 00:00:00 2001
From: Maciej Ziarkowski <maciej.ziarkowski@gmail.com>
Date: Wed, 4 Sep 2019 17:04:07 +0100
Subject: [PATCH] Reorganise/restyle header

---
 app/src/frontend/header.css | 19 ++++++++++++++++---
 app/src/frontend/header.tsx | 27 +++++++++++----------------
 2 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/app/src/frontend/header.css b/app/src/frontend/header.css
index 7dcf4d8a..3d2cbecc 100644
--- a/app/src/frontend/header.css
+++ b/app/src/frontend/header.css
@@ -2,10 +2,8 @@
  * Main header
  */
 .main-header {
-    display: block;
-    min-height: 79px;
     text-decoration: none;
-    border-bottom: 3px solid #222;
+    border-bottom: 2px solid #222;
 }
 .main-header .navbar {
     padding: 0.75em 0.5em 0.75em;
@@ -13,3 +11,18 @@
 .main-header .navbar-brand {
     margin: 0 1em 0 0;
 }
+
+.main-header .shorten-username {
+    text-overflow: '…)';
+    white-space: nowrap;
+    overflow: hidden;
+    display: inline-block;
+    vertical-align: bottom;
+    max-width: 70vw;
+}
+
+@media (min-width: 768px) {
+    .main-header .shorten-username {
+        max-width: 5vw;
+    }
+}
\ No newline at end of file
diff --git a/app/src/frontend/header.tsx b/app/src/frontend/header.tsx
index 7b8ba663..3e9bce04 100644
--- a/app/src/frontend/header.tsx
+++ b/app/src/frontend/header.tsx
@@ -30,19 +30,24 @@ class Header extends React.Component<any, any> { // TODO: add proper types
     render() {
         return (
             <header className="main-header">
-                <nav className="navbar navbar-light navbar-expand-md">
-                    <span className="navbar-brand">
+                <nav className="navbar navbar-light navbar-expand-lg">
+                    <span className="navbar-brand align-self-start">
                         <Logo/>
                     </span>
                     <button className="navbar-toggler navbar-toggler-right" type="button"
-                        onClick={this.handleClick} aria-expanded="false" aria-label="Toggle navigation">
+                        onClick={this.handleClick} aria-expanded={!this.state.collapseMenu} aria-label="Toggle navigation">
                         <span className="navbar-toggler-icon"></span>
                     </button>
                     <div className={this.state.collapseMenu ? 'collapse navbar-collapse' : 'navbar-collapse'}>
                         <ul className="navbar-nav ml-auto">
+                            <li className="nav-item">
+                                <NavLink to="/view/categories.html" className="nav-link">
+                                    View/Edit Maps
+                                </NavLink>
+                            </li>
                             <li className="nav-item">
                                 <a className="nav-link" href="https://pages.colouring.london">
-                                    Hello
+                                    About
                                 </a>
                             </li>
                             <li className="nav-item">
@@ -50,23 +55,13 @@ class Header extends React.Component<any, any> { // TODO: add proper types
                                     Data Categories
                                 </a>
                             </li>
-                            <li className="nav-item">
-                                <NavLink to="/view/categories.html" className="nav-link">
-                                    View/Edit Maps
-                                </NavLink>
-                            </li>
-                            <li className="nav-item">
-                                <a className="nav-link" href="https://pages.colouring.london/about">
-                                    More about
-                                </a>
-                            </li>
                             <li className="nav-item">
                                 <a className="nav-link" href="https://pages.colouring.london/whoisinvolved">
                                     Who&rsquo;s Involved?
                                 </a>
                             </li>
                             <li className="nav-item">
-                                <a className="nav-link" href="https://www.pages.colouring.london/data-ethics">
+                                <a className="nav-link" href="https://pages.colouring.london/data-ethics">
                                     Data Ethics
                                 </a>
                             </li>
@@ -80,7 +75,7 @@ class Header extends React.Component<any, any> { // TODO: add proper types
                                     (
                                         <li className="nav-item">
                                             <NavLink to="/my-account.html" className="nav-link">
-                                                My account (Logged in as {this.props.user.username})
+                                                Account <span className="shorten-username">({this.props.user.username})</span>
                                             </NavLink>
                                         </li>
                                     ):