UI improvements

caseycesari · May 24, 2016 · 3c874df · 3c874df
1 parent 432b28a
commit 3c874df
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 29 deletions.
diff --git a/src/css/app.css b/src/css/app.css
@@ -1,3 +1,4 @@
 body {
-    padding-top: 50px;
+    padding-top: 70px;
+    padding-bottom: 30px;
 }
diff --git a/src/index.html b/src/index.html
@@ -8,9 +8,8 @@
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
         <link rel="stylesheet" href="css/app.css">
     </head>
-    <body>
-        <div id="app" class="container">
-        </div>
+    <body role="document">
+        <div id="app"></div>
     </body>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

diff --git a/src/js/components/App.js b/src/js/components/App.js
@@ -57,8 +57,9 @@ export default class App extends Component {
         return (
           <div>
             <Header />
-            <h1>eBird Hotspot Viewer</h1>
-            {content}
+            <div className="container" role="main">
+              {content}
+            </div>
           </div>
         );
     }

diff --git a/src/js/components/Home.js b/src/js/components/Home.js
@@ -3,12 +3,18 @@ import { Link } from 'react-router';
 
 export default function App() {
     return (
-      <Link
-        to="/hotspots"
-        type="button"
-        className="btn btn-primary"
-      >
-        View nearby hotspots
-      </Link>
+      <div className="jumbotron">
+        <h1>eBird Hotspot Viewer</h1>
+        <p>View observations from the last two weeks at nearby hotspots</p>
+        <p>
+          <Link
+            to="/hotspots"
+            type="button"
+            className="btn btn-primary"
+          >
+            View nearby hotspots
+          </Link>
+        </p>
+      </div>
     );
 }
diff --git a/src/js/components/HotspotList.js b/src/js/components/HotspotList.js
@@ -34,7 +34,7 @@ export default class HotspotList extends Component {
         if ((this.state.location.lat && this.state.location.lng) &&
             (!this.state.hotspots || this.state.hotspots.length === 0)) {
             $.ajax({
-                url: `http://ebird.org/ws1.1/ref/hotspot/geo?dist=${10}&lat=${this.state.location.lat}&lng=${this.state.location.lng}&fmt=json`,
+                url: `http://ebird.org/ws1.1/ref/hotspot/geo?dist=${10}&back=${14}&lat=${this.state.location.lat}&lng=${this.state.location.lng}&fmt=json`,
                 dataType: 'json',
                 cache: false,
                 success: data => {
@@ -58,7 +58,7 @@ export default class HotspotList extends Component {
     render() {
         let content = <Loading message={'Loading nearby hotspots...'} />;
 
-        if (this.state.hotspots) {
+        if (this.state.hotspots && this.state.hotspots.length !== 0) {
             content = this.state.hotspots.map(h =>
               <Hotspot
                 key={h.locID}
@@ -70,6 +70,7 @@ export default class HotspotList extends Component {
 
         return (
           <div>
+            <h3>Nearby hotspots</h3>
             <ul className="list-group">{content}</ul>
           </div>
         );

diff --git a/src/js/components/Sighting.js b/src/js/components/Sighting.js
@@ -1,15 +1,18 @@
 import React, { PropTypes } from 'react';
 
 const propTypes = {
+    obsDt: PropTypes.string,
     comName: PropTypes.string,
     howMany: PropTypes.number,
 };
 
 export default function Sighting(props) {
     return (
-      <li className="list-group-item">
-        <span>{props.comName}, {props.howMany}</span>
-      </li>
+      <tr>
+        <td>{props.obsDt}</td>
+        <td>{props.comName}</td>
+        <td>{props.howMany}</td>
+      </tr>
     );
 }
 

diff --git a/src/js/components/SightingsList.js b/src/js/components/SightingsList.js
@@ -1,10 +1,11 @@
 import React, { Component, PropTypes } from 'react';
-import Sighting from './Sighting.js';
-import { Actions } from '../actions/Actions';
 import { Link } from 'react-router';
+import $ from 'jquery';
 
+import { Actions } from '../actions/Actions';
 import { Store } from '../stores/Store';
-import $ from 'jquery';
+import Sighting from './Sighting.js';
+import Loading from './Loading';
 
 function getState() {
     return {
@@ -55,22 +56,41 @@ export default class SightingsList extends Component {
         Actions.setHotspotId(undefined);
     }
 
-
     render() {
-        let content = '';
+        let content = <Loading message={'Fetching recent observations...'} />;
+        let title = '';
+
         if (this.state.sightings) {
-            content = this.state.sightings.map(s =>
-              <Sighting key={Math.random()} comName={s.comName} howMany={s.howMany} />
+            title = this.state.sightings[0].locName;
+            let sightings = this.state.sightings.map(s =>
+              <Sighting
+                key={Math.random()}
+                obsDt={s.obsDt}
+                comName={s.comName}
+                howMany={s.howMany}
+              />
+            );
+            content = (
+              <table className="table table-hover table-responsive">
+                <tbody>
+                  <tr>
+                    <th>Date</th>
+                    <th>Species</th>
+                    <th>Count</th>
+                  </tr>
+                  {sightings}
+                </tbody>
+              </table>
             );
+        } else if (this.state.sightings && this.state.sightings.length === 0) {
+            content = <em>No recent sightings</em>;
         }
 
         return (
           <div>
             <Link to="/hotspots" onClick={this.setHotspotId}>&larr; Back to hotspot list</Link>
-            <div>
-              <strong>{this.props.params.hotspotId}</strong>
-            </div>
-              {content}
+            <h3>{title}</h3>
+            {content}
           </div>
         );
     }