styling

client/assets/scss/main.scss

@@ -83,10 +83,11 @@ select{
 }
 
 .Loading {
-    display: flex;
     flex: 1;
+    display: flex;
     justify-content: center;
     align-items: center;
+    min-height: 600px;
 }
 
 .btn {

client/js/components/Post.js

@@ -28,16 +28,18 @@ export default class Post extends React.Component {
     const post = this.props.app.post;
     const fetched = this.props.app.fetched;
     const fetching = this.props.app.fetching;
-
+    
+    if(!fetched){
+      return <Loading/>;
+    }
+    
     return (
       <div class="Content">
-          {fetched ?
-          <div>
-            <div dangerouslySetInnerHTML={{__html : marked(post, {renderer : renderer})}}/>
-            <Link to="/" class="link"><i class="fa fa-caret-left" aria-hidden="true"></i> Home</Link>
-          </div>
-          : <Loading/>}
+        <div>
+          <div dangerouslySetInnerHTML={{__html : marked(post, {renderer : renderer})}}/>
+          <Link to="/" class="link"><i class="fa fa-caret-left" aria-hidden="true"></i> Home</Link>
         </div>
+      </div>
     );
   }
 }

client/js/components/Preview.js

@@ -36,19 +36,21 @@ export default class Preview extends React.Component {
   render() {
     const posts = this.props.app.preview.posts;
     const postLimit = this.props.app.postLimit;
-    const fetched = this.props.app.fetched;
+    let fetched = this.props.app.fetched;
     const increasePostLimit = this.props.appActions.increasePostLimit;
-
+    
+    if (!fetched){
+      return <Loading/>; 
+    } 
+    
     return (
       <div class="Content">
-        {fetched ?
         <div>
           {posts.length > 0 ? this.insertPosts(posts): null}
           {posts.length > postLimit ?
             <button class="btn" onClick={increasePostLimit}>Load More</button>
             : null}
         </div>
-        : <Loading/>}
       </div>
     );
   }

client/js/components/sensors/SensorInfo.js

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

client/js/components/sensors/SensorInfo.scss

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

client/js/pages/Index.js

@@ -19,13 +19,13 @@ export default class Index extends React.Component {
   render() {
     return (
       <div>
-            <Header/>
-              <div class="Main">
-                {React.cloneElement(this.props.children, this.props)}
-                <Sidebar sensor={Object.assign({}, this.props.sensor)}/>
-              </div>
-            <Footer/>
+        <Header/>
+          <div class="Main">
+            {React.cloneElement(this.props.children, this.props)}
+            <Sidebar sensor={Object.assign({}, this.props.sensor)}/>
           </div>
+        <Footer/>
+      </div>
     );
   }
 }