Refine layout

Sidebar menu, mobile quirks

app/src/frontend/building/sidebar.css

@@ -7,14 +7,20 @@
     left: 0;
     bottom: 0;
     overflow-y: auto;
-    width: 100%;
+    width: 95%;
     padding: 0 0 2em;
     background: #fff;
+    z-index: 1000;
+    transition: transform 0.3s;
+    transform: translateX(-100%);
 }
-
-@media (min-width: 480px){
+.info-container.onscreen {
+    transform: translateX(0);
+}
+@media (min-width: 768px){
     .info-container {
         width: 480px; /* to match .main-header menu width */
+       transform: translateX(0);
     }
 }
 

app/src/frontend/header.css

@@ -9,19 +9,43 @@
     width: 100%;
     background: #fff;
     text-decoration: none;
+    box-shadow: 2px 0px 2px -2px #000;
 }
-@media (min-width: 480px){
+@media (min-width: 768px){
     .main-header {
         width: 480px; /* to match .info-container menu width */
     }
 }
 .main-header .navbar {
-    padding: 0.5em 0.5em 0.5em;
+    padding: 0;
 }
 .main-header .navbar-brand {
-    margin: 0 1em 0 0;
+    margin: 12px;
+    padding: 0;
 }
 .main-header .navbar-collapse {
-    height: calc(100vh - 80px);
+    height: calc(100vh - 76px);
     overflow-y: auto;
+    transition: height 0.3s;
+}
+.navbar-collapse.collapse {
+    display: block ;
+    height: 0;
+}
+.navbar .nav-link {
+    padding: .5rem 1rem;
+}
+.navbar .navbar-toggler {
+    padding: .5rem .75rem .5rem .75rem;
+    margin-right: 12px;
+}
+.navbar .navbar-toggler-icon {
+    width: 1em;
+    height: 1em;
+}
+.navbar .close {
+    display: inline-block;
+    vertical-align: middle;
+    height: 1em;
+    padding: 0 3px;
 }

app/src/frontend/header.tsx

@@ -50,7 +50,12 @@ class Header extends React.Component<HeaderProps, HeaderState> {
                     </span>
                     <button className="navbar-toggler navbar-toggler-right" type="button"
                         onClick={this.handleClick} aria-expanded={!this.state.collapseMenu} aria-label="Toggle navigation">
-                        <span className="navbar-toggler-icon"></span>
+                        Menu&nbsp;
+                        {
+                            this.state.collapseMenu ?
+                                <span className="navbar-toggler-icon"></span>
+                                : <span className="close">&times;</span>
+                        }
                     </button>
                     <div className={this.state.collapseMenu ? 'collapse navbar-collapse' : 'navbar-collapse'}>
                         <ul className="navbar-nav flex-column">

app/src/frontend/map/map.css

@@ -1,13 +1,3 @@
-.map-notice {
-    padding: 0.5rem 0.75rem;
-    background: #fff;
-    border: 1px solid #fff;
-    border-radius: 4px;
-    z-index: 1000;
-    position: absolute;
-    box-shadow: 0px 0px 1px 1px #222;
-    visibility: hidden;
-}
 .map-container {
     position: absolute;
     top: 0;
@@ -28,21 +18,29 @@
     border: 1px solid #fff;
     box-shadow: 0 0 1px 1px #222;
 }
-
 .leaflet-container .leaflet-control-attribution {
     width: 100%;
     background: #fff;
     background: rgba(255, 255, 255, 0.7);
 }
-
 .leaflet-grab {
     cursor: crosshair;
 }
+.map-notice {
+    position: absolute;
+    top: 3.5rem;
+    left: 0.5rem;
+    z-index: 1000;
+    padding: 0.5rem 0.75rem;
+    background: #fff;
+    border: 1px solid #fff;
+    border-radius: 4px;
+    box-shadow: 0px 0px 1px 1px #222;
+    display: none;
+}
 @media (min-width: 768px){
     /* Only show the "Click a building ..." notice for larger screens */
     .map-notice {
-        left: 0.5rem;
-        top: 3.5rem;
-        visibility: visible;
+        display: block;
     }
 }

app/src/frontend/pages/welcome.css

@@ -4,7 +4,7 @@
 .welcome-float {
     position: absolute;
     z-index: 10000;
-    top: 0;
+    top: 100px;
     width: 100%;
     max-height: 95%;
     max-height: calc(100%-2em);
@@ -22,7 +22,6 @@
         left: 50%;
         margin-left: -22.5em;
         width: 45em;
-        top: 1em;
     }
 }
 

app/src/frontend/styles/content.css

@@ -55,11 +55,11 @@ p a.btn:active {
 h1, h2, h3, h4 {
     font-weight: normal;
 }
-main .h1 {
+article .h1 {
     font-size: 2em;
     margin: 0.5em 0;
 }
-main .h2 {
+article .h2 {
     font-size: 1.5em;
     margin: 0.25em 0 0.5em;
 }

app/src/frontend/styles/layout.css

@@ -10,6 +10,9 @@ body {
 /**
  * Text pages
  */
+article {
+    margin-top: 85px;
+}
 article section {
     overflow: hidden;
     margin: 2.25em 0 4em;