mitchell/mywebsite
1
0
Fork 0
mirror of https://github.com/mgerb/mywebsite synced 2026-01-11 18:32:50 +00:00
Code Issues Releases Wiki Activity

styling

Browse Source
This commit is contained in:
mgerb42
2016-09-27 23:34:30 +00:00
parent 0575487ac4
commit 90b4570d01
8 changed files with 62 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
client/js/components/sensors/SensorInfo.js
View File

@@ -81,27 +81,32 @@ export default class SensorInfo extends React.Component {
render() {
let sensor = this.props.sensor;
let data = this.filterData(sensor.info);
if(!sensor.fetchedUniqueDates){
return <Loading/>;
}
return (
<div class="SensorInfo">
{sensor.fetchedUniqueDates ?
<div class="selector-row">
<h2>{this.props.params.location}</h2>
<select onChange={(e) => {this.onChange(e, 'year')}}>
{sensor.uniqueDates.map(this.loadYearOptions)}
</select>
<select onChange={(e) => {this.onChange(e, 'month')}} value={sensor.selectedMonthIndex}>
{sensor.uniqueDates[sensor.selectedYearIndex].months.map(this.loadMonthOptions)}
</select>
</div>
: <Loading/>}
<div class="selector-row">
<h2>{this.props.params.location}</h2>
<select onChange={(e) => {this.onChange(e, 'year')}}>
{sensor.uniqueDates.map(this.loadYearOptions)}
</select>
<select onChange={(e) => {this.onChange(e, 'month')}} value={sensor.selectedMonthIndex}>
{sensor.uniqueDates[sensor.selectedYearIndex].months.map(this.loadMonthOptions)}
</select>
</div>
{sensor.fetchedInfo ? <LineChart data={data} options={ChartOptions} redraw/> : null}
<p>Sensor data is recorded with a <a href="https://www.sparkfun.com/products/245">DS18B20</a> and <a href="https://www.sparkfun.com/products/13678">ESP8266</a> WiFi microcontroller.</p>
<div>
<Link to="/" class="link"><i class="fa fa-caret-left" aria-hidden="true"></i> Home</Link>
</div>
{sensor.fetchedUniqueDates && sensor.fetchedInfo
? <LineChart data={data} options={ChartOptions} redraw/>
: null}
{sensor.fetchedUniqueDates && sensor.fetchedInfo
? <div class="home"><Link to="/" class="link"><i class="fa fa-caret-left" aria-hidden="true"></i> Home</Link></div>
: null}
</div>
);
}

11
client/js/components/sensors/SensorInfo.scss
View File

@@ -1,20 +1,13 @@
.SensorInfo{
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding-right: 1em;
padding-left: 1em;
min-width: 0;
min-height: 600px;
width: 80%;
.selector-row{
display: flex;
justify-content: center;
margin-bottom: 2em;
select{
margin-left: 5px;
}
}
.home{
margin-top: 1em;
}
}