diff --git a/client/assets/scss/Content.scss b/client/assets/scss/Content.scss index 1972f84..9c41fdf 100644 --- a/client/assets/scss/Content.scss +++ b/client/assets/scss/Content.scss @@ -24,10 +24,6 @@ display: block; margin: 0 auto; } - code, - pre { - white-space: pre-wrap; - } .btn { width: 100%; } diff --git a/client/assets/scss/Sidebar.scss b/client/assets/scss/Sidebar.scss index d62afa2..ad028b1 100644 --- a/client/assets/scss/Sidebar.scss +++ b/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; diff --git a/client/assets/scss/main.scss b/client/assets/scss/main.scss index 2d8e3d9..d90879e 100644 --- a/client/assets/scss/main.scss +++ b/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; } diff --git a/client/js/components/Sidebar.js b/client/js/components/Sidebar.js index de000e5..dab7bdf 100644 --- a/client/js/components/Sidebar.js +++ b/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() { @@ -27,7 +28,15 @@ export default class Sidebar extends React.Component { toggler: temp }); } - + + toggleOff(){ + if(this.state.toggler !== ""){ + this.setState({ + toggler : "" + }); + } + } + render() { return (
@@ -37,7 +46,7 @@ export default class Sidebar extends React.Component { aria-hidden="true" /> - {this.props.sensor.fetchedList ? : null} + {this.props.sensor.fetchedList ? : null}
); } diff --git a/client/js/components/sensors/SensorList.js b/client/js/components/sensors/SensorList.js index a7e2ddb..c1dfa1f 100644 --- a/client/js/components/sensors/SensorList.js +++ b/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'; -export default class SensorList extends React.Component { +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 ( -
-

{sensor.temperature}

Connected

+
+
+

{sensor.temperature}°f

+

{sensor.location}

-

{date.toString()}

+ Updated: {date.toLocaleString('en-us', options)}
); } + render() { const list = this.props.list; return (

Sensors

-
{list.map(this.insertSensorData)}
) diff --git a/client/js/components/sensors/SensorList.scss b/client/js/components/sensors/SensorList.scss index 111568f..893884f 100644 --- a/client/js/components/sensors/SensorList.scss +++ b/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; + } } + } \ No newline at end of file