Styling

public/index.html

@@ -9,7 +9,15 @@
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="shortcut icon" href="https://static.10ninox.com/goth/favicon.ico" />
+
+    <link rel="apple-touch-icon" sizes="180x180" href="https://static.10ninox.com/goth/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="https://static.10ninox.com/goth/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="https://static.10ninox.com/goth/favicon-16x16.png">
+    <link rel="mask-icon" href="https://static.10ninox.com/goth/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#000000">
+    <meta name="theme-color" content="#000000">
+
     <link rel="stylesheet" href="//static.traffy.xyz/lib/leaflet/dist/leaflet.css" />
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css" />
     <link rel="stylesheet" href="https://static.10ninox.com/css/bulma.min.css" />

public/manifest.json

@@ -1,11 +1,21 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Grunt GoTH",
+  "name": "Grunt for GoTH GTFS",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "https://static.10ninox.com/goth/favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
+    },
+    {
+      "src": "https://static.10ninox.com/goth/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "https://static.10ninox.com/goth/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
     }
   ],
   "start_url": "./index.html",

src/components/FloatPane.js

@@ -19,12 +19,6 @@ const StyledLink = styled(Link)`
 }
 `
 
-const StyledLRPaddingNav = styled.nav`
-padding-right: 10px;
-padding-left: 0;
-margin-bottom: 5px !important;
-`
-
 const StyledFloatPane = styled.div`
 min-width: 300px;
 height: 100%;
@@ -32,11 +26,19 @@ width: 25vw;
 z-index: 30;
 background: #fefefefe;
 border-radius: 0 5px 5px 0;
+display: flex;
+flex-direction: column;
 position: fixed;
 left: ${props => props.hidePane ? '-500px' : 0};
 top: 0px;
 `
 
+const StyledLRPaddingNav = styled.nav`
+padding-right: 10px;
+padding-left: 0;
+margin-bottom: 5px !important;
+`
+
 const StyledPaneToggler = styled.div`
 width: 30px
 height: 40px;
@@ -55,11 +57,17 @@ border-radius: 0 5px 5px 0;
 `
 
 const StyledScrollY = styled.div`
-height: 100vh;
+flex-grow: 1;
 overflow: auto;
 padding-bottom: 5rem;
 `
 
+const SmallMuted = styled.p`
+font-size: 0.85rem;
+color: #888;
+clear: both;
+`
+
 const SimpleAgencyList = (props) => (
   <nav className="panel">
     <p className="panel-heading">
@@ -72,7 +80,11 @@ const SimpleAgencyList = (props) => (
     </p>
     {props.agencies.map(ele => (
       <Link key={ele.agency_id} className="panel-block" to={`/map/${ele.agency_id}`}>
+        <div>
           {ele.name}
+          <br />
+          <SmallMuted>{ele.agency_id}</SmallMuted>
+        </div>
       </Link>))}
   </nav>
 )
@@ -140,8 +152,8 @@ class FloatPane extends Component {
           <i className='fas fa-align-justify' />
         </StyledPaneToggler>
         {this.renderTopLevel(loggedIn)}
-        <StyledScrollY>
         <Breadcrumb {...this.state.breadcrumb} />
+        <StyledScrollY>
           <Switch>
             <Route exact path={`/map/stop/new`} render={(props) => (
               <StopForm {...props}

src/components/RouteList.js

@@ -8,10 +8,8 @@ import { getRoute } from '../actions'
 import store from '../store'
 
 const StyledLongName = styled.div`
-margin-left: 1rem;
 font-size: 0.9rem;
-font-style: italic;
-color: #444;
+color: #888;
 `
 
 class RouteList extends Component {
@@ -56,8 +54,11 @@ class RouteList extends Component {
               <span className="panel-icon">
                 <i className="fas fa-code-branch" aria-hidden="true"></i>
               </span>
+              <div>
                 {ele.short_name}
-              {ele.long_name.length > 0 && <StyledLongName>{ ele.long_name }</StyledLongName>}
+                <br/>
+                {ele.long_name.length > 0 && <StyledLongName>{ele.long_name}</StyledLongName>}
+              </div>
             </Link>)
           )}
       </nav>

src/components/Spinner.js

@@ -2,7 +2,8 @@ import React from 'react'
 
 const Spinner = (props) => (
   <span>
-    {props.show && <span className={props.className}><i className="fas fa-spinner" /></span>}
+    {props.show && <span className={props.className}>
+      <i className="far fa-compass fa-pulse" /></span>}
   </span>
 )