mitchell/mywebsite
1
0
Fork 0
mirror of https://github.com/mgerb/mywebsite synced 2026-01-12 10:52:47 +00:00
Code Issues Releases Wiki Activity

Merge remote-tracking branch 'origin/react'

Browse Source
This commit is contained in:
mgerb42
2016-09-09 19:16:33 +00:00
parent 025257edab cb28f25b97
commit 9c0aabe9aa
7 changed files with 111 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/assets/scss/Content.scss
View File

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

2
client/assets/scss/Sidebar.scss
View File

@@ -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;

1
client/assets/scss/main.scss
View File

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

43
client/js/components/Sidebar.js
View File

@@ -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() {
@@ -27,7 +28,15 @@ export default class Sidebar extends React.Component {
toggler: temp
});
}
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>
<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>
<br/>
<h2>Sensors</h2>
<hr/>
{this.props.sensor.fetchedList ? <SensorList list={this.props.sensor.list}/> : null}
<AboutMe/>
{this.props.sensor.fetchedList ? <SensorList list={this.props.sensor.list} toggleOff={this.toggleOff}/> : null}
</div>
);
}

40
client/js/components/sensors/SensorList.js
View File

@@ -1,24 +1,52 @@
import React from 'react';
import {browserHistory} from 'react-router';
import 'whatwg-fetch';
export default class SensorList extends React.Component {
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}>
<h3>{sensor.location}</h3>
<p>{sensor.temperature}</p>
<p>{date.toString()}</p>
<div key={index} class="row" onClick={this.openLink}>
<div class="item">
<h1>{sensor.temperature}°f</h1>
</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>
)

28
client/js/components/sensors/SensorList.scss Normal file
View File

@@ -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;
}
}
}

35
client/js/components/utils/AboutMe.js Normal file
View File

@@ -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>
);
}
}