Merge remote-tracking branch 'origin/react'

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

@@ -2,9 +2,9 @@ import React from 'react';
 
 //components
 import SensorList from './sensors/SensorList';
+import AboutMe from './utils/AboutMe';
 
 //assets
-import me from '../../assets/images/me.jpg';
 import '../../assets/scss/Sidebar.scss';
 
 export default class Sidebar extends React.Component {
@@ -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}>
@@ -36,34 +45,8 @@ export default class Sidebar extends React.Component {
             class="fa fa-2x fa-navicon"
             aria-hidden="true" />
         </a>
-        <h2>About Me</h2>
+        <AboutMe/>
-        <img src={me}/>
+        {this.props.sensor.fetchedList ? <SensorList list={this.props.sensor.list} toggleOff={this.toggleOff}/> : null}
-        <p>
-          My name is Mitchell and I have a passion for software development. I am currently a software engineer and enjoy working on personal projects in my free time.
-        </p>
-
-        <p>
-          <i class="fa fa-envelope" aria-hidden="true"></i>
-          <a class="link" href="mailto:mgerb42@gmail.com"> eMail</a>
-        </p>
-        <p>
-          <i class="fa fa-linkedin-square" aria-hidden="true"></i>
-          <a class="link" href="https://www.linkedin.com/in/mitchell-gerber-125391b3" target="_blank"> LinkedIn</a>
-        </p>
-        <p>
-          <i class="fa fa-github" aria-hidden="true"></i>
-          <a class="link" href="https://github.com/mgerb" target="_blank"> GitHub</a>
-        </p>
-        <p>
-          <i class="fa fa-wpforms" aria-hidden="true"> </i>
-          <a href="/resume" class="link"> Resume</a>
-        </p>
-
-        <br/>
-
-        <h2>Sensors</h2>
-        <hr/>
-        {this.props.sensor.fetchedList ? <SensorList list={this.props.sensor.list}/> : null}
       </div>
     );
   }

client/js/components/sensors/SensorList.js

@@ -1,24 +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}>
+      <div key={index} class="row" onClick={this.openLink}>
-        <h3>{sensor.location}</h3>
+        <div class="item">
-        <p>{sensor.temperature}</p>
+          <h1>{sensor.temperature}°f</h1>
-        <p>{date.toString()}</p>
+        </div>
+        <div class="item">
+          <h3>{sensor.location}</h3>
+          <span class="date">Updated: {date.toLocaleString('en-us', options)}</span>
+        </div>
       </div>
     );
   }
+  
   render() {
     const list = this.props.list;
     
     return (
-      <div>
+      <div class="SensorList">
+        <h2>Sensors</h2>
         {list.map(this.insertSensorData)}
       </div>
     )

client/js/components/sensors/SensorList.scss

@@ -0,0 +1,28 @@
+.SensorList{
+    .row{
+        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;
+        }
+    }
+    
+}

client/js/components/utils/AboutMe.js

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import me from '../../../assets/images/me.jpg';
+
+export default class AboutMe extends React.Component{
+    
+    render(){
+        return(
+            <div>
+                <h2>About Me</h2>
+                <img src={me}/>
+                <p>
+                  My name is Mitchell and I have a passion for software development. I am currently a software engineer and enjoy working on personal projects in my free time.
+                </p>
+        
+                <p>
+                  <i class="fa fa-envelope" aria-hidden="true"></i>
+                  <a class="link" href="mailto:mgerb42@gmail.com"> eMail</a>
+                </p>
+                <p>
+                  <i class="fa fa-linkedin-square" aria-hidden="true"></i>
+                  <a class="link" href="https://www.linkedin.com/in/mitchell-gerber-125391b3" target="_blank"> LinkedIn</a>
+                </p>
+                <p>
+                  <i class="fa fa-github" aria-hidden="true"></i>
+                  <a class="link" href="https://github.com/mgerb" target="_blank"> GitHub</a>
+                </p>
+                <p>
+                  <i class="fa fa-wpforms" aria-hidden="true"> </i>
+                  <a href="/resume" class="link"> Resume</a>
+                </p>
+            </div>
+            );
+    }
+}