Broad layout

Sidebar-constrained header

app/src/frontend/app.tsx

@@ -52,7 +52,7 @@ class App extends React.Component<AppProps, AppState> {
 
     constructor(props: Readonly<AppProps>) {
         super(props);
-        
+
         this.state = {
             user: props.user
         };
@@ -88,7 +88,6 @@ class App extends React.Component<AppProps, AppState> {
                     <Header user={this.state.user} animateLogo={true} />
                 </Route>
             </Switch>
-            <main>
             <Switch>
                 <Route exact path="/about.html" component={AboutPage} />
                 <Route exact path="/login.html">
@@ -125,7 +124,6 @@ class App extends React.Component<AppProps, AppState> {
                 )} />
                 <Route component={NotFound} />
             </Switch>
-            </main>
             </Fragment>
         );
     }

app/src/frontend/building/sidebar.css

@@ -2,18 +2,19 @@
  * Sidebar layout
  */
 .info-container {
-    order: 1;
+    position: absolute;
+    top: 85px;
+    left: 0;
+    bottom: 0;
+    overflow-y: auto;
+    width: 100%;
     padding: 0 0 2em;
     background: #fff;
-    overflow-y: auto;
-    height: 40%;
 }
 
-@media (min-width: 768px){
+@media (min-width: 480px){
     .info-container {
-        order: 0;
-        height: unset;
-        width: 23rem;
+        width: 480px; /* to match .main-header menu width */
     }
 }
 

app/src/frontend/header.css

@@ -2,8 +2,18 @@
  * Main header
  */
 .main-header {
+    z-index: 3000;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background: #fff;
     text-decoration: none;
-    border-bottom: 2px solid #222;
+}
+@media (min-width: 480px){
+    .main-header {
+        width: 480px; /* to match .info-container menu width */
+    }
 }
 .main-header .navbar {
     padding: 0.5em 0.5em 0.5em;
@@ -11,18 +21,7 @@
 .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;
+.main-header .navbar-collapse {
+    height: calc(100vh - 80px);
+    overflow-y: auto;
 }
-
-@media (min-width: 768px) {
-    .main-header .shorten-username {
-        max-width: 5vw;
-    }
-}

app/src/frontend/header.tsx

@@ -42,8 +42,8 @@ class Header extends React.Component<HeaderProps, HeaderState> {
     render() {
         return (
             <header className="main-header">
-                <nav className="navbar navbar-light navbar-expand-lg">
-                    <span className="navbar-brand align-self-start">
+                <nav className="navbar navbar-light">
+                    <span className="navbar-brand">
                         <NavLink to="/">
                             <Logo variant={this.props.animateLogo ? 'animated' : 'default'}/>
                         </NavLink>
@@ -53,7 +53,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
                         <span className="navbar-toggler-icon"></span>
                     </button>
                     <div className={this.state.collapseMenu ? 'collapse navbar-collapse' : 'navbar-collapse'}>
-                        <ul className="navbar-nav ml-auto">
+                        <ul className="navbar-nav flex-column">
                             <li className="nav-item">
                                 <NavLink to="/view/categories" className="nav-link" onClick={this.handleNavigate}>
                                     View/Edit Maps

app/src/frontend/map/map.css

@@ -8,10 +8,17 @@
     box-shadow: 0px 0px 1px 1px #222;
     visibility: hidden;
 }
-
 .map-container {
-    flex: 1;
-    position: relative;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+@media (min-width: 768px) {
+    .map-container {
+        left: 480px;
+    }
 }
 .leaflet-container {
     height: 100%;

app/src/frontend/styles/layout.css

@@ -1,35 +1,12 @@
 /**
  * Main Layout
  */
-
 html, body, #root {
     height: 100%;
 }
-
 body {
     margin: 0;
 }
-
-#root {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-}
-
-main {
-    position: relative;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-}
-
-@media(min-width: 768px) {
-    main {
-        flex-direction: row;
-        justify-content: center;
-    }
- }
 /**
  * Text pages
  */