Add Lines to Desktop

Author: consindo

dist/icons/lines-light.svg

@@ -12,7 +12,7 @@ export class settingsStore {
         this.state[attrname] = preState[attrname]
       }
     }
-    localStorage.setItem('AppVersion', '1.0.0')
+    localStorage.setItem('AppVersion', '1.1.0')
   }
   getState() {
     return this.state

dist/icons/pin.svg

@@ -239,7 +239,6 @@ class Lines extends React.Component {
 
     return(
       <div>
-        {children}
         <div className={className} ref="container" style={styles}>
           <header className='material-header'>
             <div>
@@ -248,6 +247,7 @@ class Lines extends React.Component {
             </div>
           </header>
           {ret}
+          {children}
         </div>
       </div>
     )

js/stores/settingsStore.js

@@ -38,7 +38,7 @@ class SidebarItem extends React.Component {
   }
   render() {
 
-    var classname = 'ss'
+    var classname = (this.props.className || '') + ' ss'
     if (window.location.pathname == this.props.url) {
       classname += ' selected'
     }
@@ -127,6 +127,13 @@ class SavedSations extends React.Component {
             name="Welcome to Transit!"
             description="Transit is your realtime guide to AT Buses, Trains, and Ferries."
           />
+          <SidebarItem
+            url="/l"
+            icon="lines-light.svg"
+            name="Lines"
+            className="lines-btn"
+            description="View all Bus, Train, and Ferry Services"
+          />
           <SidebarItem
             type="install"
             action={this.props.togglePin}

js/views/lines.jsx

@@ -7,6 +7,11 @@
   z-index: 5;
   background: $default-back;
 
+  @media (min-width: 851px) {
+    left: $sidebar-width;
+    z-index: 0;
+  }
+
 
   .material-header {
     height: $navsize;

js/views/savedstations.jsx

@@ -206,13 +206,17 @@
       padding-bottom: 10px;
     }
   }
-
   @media (min-width: 601px) {
     nav {
       box-shadow: 0 0 4px rgba(0,0,0,0.3);
       z-index: 3;
     }
   }
+  @media (max-width: 850px) {
+    .lines-btn {
+      display: none;
+    }
+  }
 
   @media (max-width: 900px) {
     nav {
@@ -234,11 +238,6 @@
   }
 }
 
-@media (min-width: 851px) {
-  // .onboard {
-  //   display: none;
-  // }
-}
 .onboard li:last-child span {
   &:last-child {
     display: none;