update the templates for new Bootstrap

replace the Photos front page with something that lists Family names
Add link from species page to family page
be sure to show all matches during search box

server/scripts/app.js

@@ -35,6 +35,7 @@ $(document).ready(function() {
 		        this.$element[0].form.submit();
 		        return item;
 		    },
-		minLength: 3
+		minLength: 3,
+		items: 'all'
 	})
 });

server/scripts/application.js

@@ -128,8 +128,12 @@ class Application {
     let taxonSightingList = new SightingList(tmp, photos)
     taxonSightingList.sortByDate()
 
+    let family_name = Object.keys(taxonSightingList.getTaxonomyHierarchy())[0]
+    logger.debug('dataForTaxonTemplate, family name', family_name)
+
     return {
       name: req.params.common_name,
+      family_name: family_name,
       category: SightingList.getCategoryFromCommonName(req.params.common_name),
       scientificName: taxonSightingList.rows[0]['Scientific Name'],
       photos: taxonSightingList.photos,

server/scripts/sightinglist.js

@@ -480,8 +480,6 @@ class SightingList {
   getTaxonomyHierarchy () {
     var byFamily = {}
 
-    logger.debug(byFamily)
-
     for (var index = 0; index < this.rows.length; index++) {
       var aSighting = this.rows[index]
       var commonName = aSighting['Common Name']

server/views/layouts/default.jsx

@@ -63,7 +63,7 @@ class DefaultLayout extends React.Component {
               </div>
             </li>
 
-            <form action='/search' method='GET' className="form-inline" role="search">
+            <form action='/search' method='GET' className="pl-5-lg form-inline" role="search">
               <div className="form-group">
                 <input id='searchtext' name='searchtext' data-provide="typeahead" type="text" className="typeahead form-control" placeholder="Search" />
               </div>

server/views/photos.jsx

@@ -14,9 +14,14 @@ class Photos extends BirdwalkerComponent {
     let randomImage = family[Math.floor(Math.random() * family.length)]
 
     return (
-      <a href={'/family/' + familyName}>
-        <img alt={this.commonNameFromEbirdFamily(familyName)} src={randomImage['Photo URL']} />
-      </a>
+      <div className='col-md-4'>
+        <div style={{fontWeight: 'bold', paddingTop: '2em', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>
+          <a href={'/family/' + familyName}>{this.commonNameFromEbirdFamily(familyName)}</a>
+        </div>
+        <a href={'/family/' + familyName}>
+          <img alt={this.commonNameFromEbirdFamily(familyName)} src={randomImage['Photo URL']}  className='img-fluid'/>
+        </a>
+      </div>
     )
   }
 
@@ -59,14 +64,13 @@ class Photos extends BirdwalkerComponent {
         </div>
 
         <div className='row'>
-          <div className='col-md-12'>
+          <div className='col'>
             <PageHeading title={this.props.numSpecies + ' species photographed'} />
-
-            <div className='mygallery'>
-              {familyNames.map(familyName => this.generateImageForFamily(familyName, this.props.photosByFamily[familyName]))}
-            </div>
           </div>
         </div>
+        <div className='row'>
+            {familyNames.map(familyName => this.generateImageForFamily(familyName, this.props.photosByFamily[familyName]))}
+        </div>
 
       </DefaultLayout>
     )

server/views/taxon.jsx

@@ -2,6 +2,7 @@ var React = require('react')
 import DefaultLayout from './layouts/default.jsx'
 import BirdwalkerComponent from './birdwalkercomponent.jsx'
 import PageHeading from './pageheading.jsx'
+import { LinkToFamily } from './utilities.jsx'
 
 var moment = require('moment')
 
@@ -32,6 +33,8 @@ class Taxon extends BirdwalkerComponent {
       <DefaultLayout title={this.props.name} subtitle={this.props.scientificName}>
         <PageHeading title={this.props.name} subtitle={this.props.scientificName} />
 
+        <p><LinkToFamily family={this.props.family_name} /></p>
+
         {(this.props.category != 'species') && <CategoryExplainer category={this.props.category} />}
 
         {this.generateThumbnails()}