diff --git a/src/components/Layout.js b/src/components/Layout.js index 38c855d..79b5317 100644 --- a/src/components/Layout.js +++ b/src/components/Layout.js @@ -71,6 +71,7 @@ class Dashboard extends React.Component { } handleSelect (selected, axis) { + console.log(selected) const matchedEvents = [] const TIMELINE_AXIS = 0 if (axis === TIMELINE_AXIS) { @@ -337,6 +338,7 @@ class Dashboard extends React.Component { queryString={app.searchQuery} onQueryUpdate={this.updateSearchQuery} events={domain.events} + onSearchRowClick={this.handleSelect} /> {app.source ? ( - 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 {
{this.state.searchResults.map(result => { - return + return })}
diff --git a/src/components/SearchRow.jsx b/src/components/SearchRow.jsx index 675f991..d3d4784 100644 --- a/src/components/SearchRow.jsx +++ b/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 ( -
+
onSearchRowClick([eventObj])}>
-
- location_on -

{getHighlightedText(location, query)}

-
event

{getHighlightedText(date, query)}

+
+ location_on +

{getHighlightedText(location, query)}

+

{getShortDescription(description, query).map(match => { return {getHighlightedText(match, query)}...
diff --git a/src/scss/search.scss b/src/scss/search.scss index deac6ee..ecf3072 100644 --- a/src/scss/search.scss +++ b/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; } \ No newline at end of file