cards clickability added

src/components/Layout.js

@@ -72,6 +72,7 @@ class Dashboard extends React.Component {
   }
 
   handleSelect (selected, axis) {
+    console.log(selected)
     const matchedEvents = []
     const TIMELINE_AXIS = 0
     if (axis === TIMELINE_AXIS) {
@@ -324,6 +325,7 @@ class Dashboard extends React.Component {
           queryString={app.searchQuery}
           onQueryUpdate={this.updateSearchQuery}
           events={domain.events}
+          onSearchRowClick={this.handleSelect}
         />
         {app.source ? (
           <MediaOverlay

src/components/Search.jsx

@@ -34,7 +34,7 @@ class Search extends React.Component {
       searchResults = []
     } else {
       searchResults = this.props.events.filter(event =>
-        event.description.toLowerCase().includes(queryString.toLowerCase()) || event.location.includes(queryString) || event.category.includes(queryString)
+        event.description.toLowerCase().includes(queryString.toLowerCase()) || event.location.toLowerCase().includes(queryString.toLowerCase()) || event.category.toLowerCase().includes(queryString.toLowerCase()) || event.date.includes(queryString) 
       )
     }
     this.setState({
@@ -55,7 +55,7 @@ class Search extends React.Component {
           </div>
           <div class='search-results'>
             {this.state.searchResults.map(result => {
-              return <SearchRow query={this.props.queryString} category={result.category} location={result.location} date={result.date} description={result.description} />
+              return <SearchRow onSearchRowClick={this.props.onSearchRowClick} eventObj={result} query={this.props.queryString} />
             })}
           </div>
         </div>

src/components/SearchRow.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
-const SearchRow = ({ description, category, location, date, query }) => {
+const SearchRow = ({ query, eventObj, onSearchRowClick }) => {
+  const { description, category, location, date } = eventObj
   function getHighlightedText (text, highlight) {
     // Split text on highlight term, include term itself into parts, ignore case
     const parts = text.split(new RegExp(`(${highlight})`, 'gi'))
@@ -18,16 +19,16 @@ const SearchRow = ({ description, category, location, date, query }) => {
   }
 
   return (
-    <div className='search-row'>
+    <div className='search-row' onClick={() => onSearchRowClick([eventObj])}>
       <div className='location-date-container'>
-        <div className='location-container'>
-          <i className='material-icons'>location_on</i>
-          <p>{getHighlightedText(location, query)}</p>
-        </div>
         <div className='date-container'>
           <i className='material-icons'>event</i>
           <p>{getHighlightedText(date, query)}</p>
         </div>
+        <div className='location-container'>
+          <i className='material-icons'>location_on</i>
+          <p>{getHighlightedText(location, query)}</p>
+        </div>
       </div>
       <p>{getShortDescription(description, query).map(match => {
         return <span>{getHighlightedText(match, query)}...<br /></span>

src/scss/search.scss

@@ -60,14 +60,22 @@
 }
 
 .search-row {
-    color: white;
-    padding-left: 10px;
-    padding-right: 10px;
+    color: black;
+    padding-left: 15px;
+    padding-right: 15px;
     padding-top: 10px;
     padding-bottom: 10px;
-    background-color: grey;
-    border-bottom: 1px white solid;
-    border-top: 1px white solid;
+    background-color: #dfdfdf;
+    transition: background-color 0.4s;
+    border-bottom: 1px black solid;
+    border-top: 1px black solid;
+    font-size:  14px;
+    opacity: 0.9;
+    &:hover {
+        transition: background-color 0.4s;
+        background-color: white;
+        cursor: pointer;
+    }
 }
 
 .search-row > p {
@@ -92,6 +100,11 @@ div.location-date-container > div {
 
 div.location-date-container > div > p {
     display: inline;
-    line-height: 24px;
+    line-height: 17px;
     vertical-align: top;
+}
+
+div.location-date-container > div > i {
+    font-size: 12px;
+    margin-right: 5px;
 }