From fc6af3cd4e90335cd16a56081409618cdd10cda3 Mon Sep 17 00:00:00 2001 From: mgerb42 Date: Tue, 6 Sep 2016 16:59:46 +0000 Subject: [PATCH 1/2] working on sidebar/sensors --- client/js/components/Sidebar.js | 30 ++--------------- client/js/components/sensors/SensorList.js | 16 ++++++--- client/js/components/sensors/SensorList.scss | 11 ++++++ client/js/components/utils/AboutMe.js | 35 ++++++++++++++++++++ 4 files changed, 59 insertions(+), 33 deletions(-) create mode 100644 client/js/components/sensors/SensorList.scss create mode 100644 client/js/components/utils/AboutMe.js diff --git a/client/js/components/Sidebar.js b/client/js/components/Sidebar.js index ce12e27..de000e5 100644 --- a/client/js/components/Sidebar.js +++ b/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 { @@ -36,33 +36,7 @@ export default class Sidebar extends React.Component { class="fa fa-2x fa-navicon" aria-hidden="true" /> -

About Me

- -

- 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. -

- -

- - eMail -

-

- - LinkedIn -

-

- - GitHub -

-

- - Resume -

- -
- -

Sensors

-
+ {this.props.sensor.fetchedList ? : null} ); diff --git a/client/js/components/sensors/SensorList.js b/client/js/components/sensors/SensorList.js index d7b79eb..a7e2ddb 100644 --- a/client/js/components/sensors/SensorList.js +++ b/client/js/components/sensors/SensorList.js @@ -1,16 +1,20 @@ import React from 'react'; import 'whatwg-fetch'; +import './SensorList.scss'; + export default class SensorList extends React.Component { insertSensorData = (sensor, index) => { const date = new Date(sensor.updated); return ( -
-

{sensor.location}

-

{sensor.temperature}

-

{date.toString()}

+
+

{sensor.temperature}

Connected

+
+

{sensor.location}

+

{date.toString()}

+
); } @@ -18,7 +22,9 @@ export default class SensorList extends React.Component { 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 new file mode 100644 index 0000000..111568f --- /dev/null +++ b/client/js/components/sensors/SensorList.scss @@ -0,0 +1,11 @@ +.SensorList{ + .row{ + display: flex; + flex-direction: row; + align-items: center; + + .item + .item{ + margin-left: 1em; + } + } +} \ No newline at end of file diff --git a/client/js/components/utils/AboutMe.js b/client/js/components/utils/AboutMe.js new file mode 100644 index 0000000..f9dd82d --- /dev/null +++ b/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( +
+

About Me

+ +

+ 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. +

+ +

+ + eMail +

+

+ + LinkedIn +

+

+ + GitHub +

+

+ + Resume +

+
+ ); + } +} \ No newline at end of file From cb28f25b971cd3891cdf6218ec66f4c78ef0b731 Mon Sep 17 00:00:00 2001 From: mgerb42 Date: Thu, 8 Sep 2016 13:34:01 +0000 Subject: [PATCH 2/2] working with sensor styling --- client/assets/scss/Content.scss | 4 --- client/assets/scss/Sidebar.scss | 2 +- client/assets/scss/main.scss | 1 - client/js/components/Sidebar.js | 13 ++++++-- client/js/components/sensors/SensorList.js | 32 +++++++++++++++++--- client/js/components/sensors/SensorList.scss | 17 +++++++++++ 6 files changed, 56 insertions(+), 13 deletions(-) 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