working with sensor styling

client/assets/scss/Content.scss

@@ -24,10 +24,6 @@
         display: block;
         margin: 0 auto;
     }
-    code,
-    pre {
-        white-space: pre-wrap;
-    }
     .btn {
         width: 100%;
     }

client/assets/scss/Sidebar.scss

@@ -8,10 +8,10 @@ $transitionDuration: 0.4s;
         width: 100%;
         height: auto;
         border-radius: 0.5em;
+        margin-top: 0.5em;
     }
     h2 {
         text-align: center;
-        margin-bottom: 0.5em;
     }
     a.toggler {
         display: none;

client/assets/scss/main.scss

@@ -4,7 +4,6 @@ $backgroundColor: #FFFFFF;
 html {
     font-family: 'Roboto Slab', serif;
     overflow: auto;
-    
     @media (max-width: 768px) {
         overflow-x: hidden;   
     }

client/js/components/Sidebar.js

@@ -17,6 +17,7 @@ export default class Sidebar extends React.Component {
     };
 
     this.onToggle = this.onToggle.bind(this);
+    this.toggleOff = this.toggleOff.bind(this);
   }
 
   onToggle() {
@@ -28,6 +29,14 @@ export default class Sidebar extends React.Component {
     });
   }
   
+  toggleOff(){
+    if(this.state.toggler !== ""){
+      this.setState({
+        toggler : ""
+      });
+    }
+  }
+  
   render() {
     return (
       <div class={"Sidebar " + this.state.toggler}>
@@ -37,7 +46,7 @@ export default class Sidebar extends React.Component {
             aria-hidden="true" />
         </a>
         <AboutMe/>
-        {this.props.sensor.fetchedList ? <SensorList list={this.props.sensor.list}/> : null}
+        {this.props.sensor.fetchedList ? <SensorList list={this.props.sensor.list} toggleOff={this.toggleOff}/> : null}
       </div>
     );
   }

client/js/components/sensors/SensorList.js

@@ -1,30 +1,52 @@
 import React from 'react';
+import {browserHistory} from 'react-router';
 import 'whatwg-fetch';
 
 import './SensorList.scss';
 
+const options = {
+  month: 'numeric',
+  day: 'numeric',
+  year: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  hour12: true
+};
+
 export default class SensorList extends React.Component {
   
+  constructor(){
+    super();
+    this.openLink = this.openLink.bind(this);
+  }
+  
+  openLink(){
+    browserHistory.push("/");
+    this.props.toggleOff();
+  }
+  
   insertSensorData = (sensor, index) => {
     const date = new Date(sensor.updated);
 
     return (
-      <div key={index} class="row">
+      <div key={index} class="row" onClick={this.openLink}>
-        <div class="item"><h1>{sensor.temperature}</h1><p>Connected</p></div>
+        <div class="item">
+          <h1>{sensor.temperature}°f</h1>
+        </div>
         <div class="item">
           <h3>{sensor.location}</h3>
-          <p>{date.toString()}</p>
+          <span class="date">Updated: {date.toLocaleString('en-us', options)}</span>
         </div>
       </div>
     );
   }
+  
   render() {
     const list = this.props.list;
     
     return (
       <div class="SensorList">
         <h2>Sensors</h2>
-        <hr/>
         {list.map(this.insertSensorData)}
       </div>
     )

client/js/components/sensors/SensorList.scss

@@ -3,9 +3,26 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+        cursor: pointer;
+        margin-left: -1em;
+        margin-right: -1em;
+        padding: 1em;
+        
+        &:hover{
+            background-color: gray;
+        }
         
         .item + .item{
             margin-left: 1em;
         }
+        
+        h2{
+            margin-bottom: 0;
         }
+        
+        .date{
+            font-size: .8em;
+        }
+    }
+    
 }