Merge branch 'master' into pr/1592

client/homebrew/pages/userPage/brewItem/brewItem.jsx

@@ -7,6 +7,7 @@ const moment = require('moment');
 const request = require('superagent');
 
 const googleDriveIcon = require('../../../googleDrive.png');
+const dedent = require('dedent-tabs').default;
 
 const BrewItem = createClass({
 	getDefaultProps : function() {
@@ -110,6 +111,10 @@ const BrewItem = createClass({
 			</div>
 			<hr />
 			<div className='info'>
+				<span title={`Authors:\n${brew.authors.join('\n')}`}>
+					<i className='fas fa-user'/> {brew.authors.join(', ')}
+				</span>
+				<br />
 				<span title={`Last viewed: ${moment(brew.lastViewed).local().format(dateFormatString)}`}>
 					<i className='fas fa-eye'/> {brew.views}
 				</span>
@@ -118,14 +123,12 @@ const BrewItem = createClass({
 						<i className='far fa-file' /> {brew.pageCount}
 					</span>
 				}
-				<span>
+				<span title={dedent`
+					Created: ${moment(brew.createdAt).local().format(dateFormatString)}
+					Last updated: ${moment(brew.updatedAt).local().format(dateFormatString)}`}>
 					<i className='fas fa-sync-alt' /> {moment(brew.updatedAt).fromNow()}
 				</span>
 				{this.renderGoogleDriveIcon()}
-				<br />
-				<span title={`Authors:\n${brew.authors.join('\n')}`}>
-					<i className='fas fa-user'/> {brew.authors.join(', ')}
-				</span>
 			</div>
 
 			<div className='links'>

client/homebrew/pages/userPage/brewItem/brewItem.less

@@ -27,12 +27,11 @@
 	.info{
 		position: initial;
 		bottom: 2px;
-		margin-bottom: 4px;
 		font-family : ScalySans;
 		font-size   : 1.2em;
 		&>span{
-			display      : float;
 			margin-right : 12px;
+			line-height  : 1.5em;
 		}
 	}
 	&:hover{

client/homebrew/pages/userPage/userPage.jsx

@@ -31,8 +31,9 @@ const UserPage = createClass({
 	},
 	getInitialState : function() {
 		return {
-			sortType : 'alpha',
-			sortDir  : 'asc'
+			sortType     : 'alpha',
+			sortDir      : 'asc',
+			filterString : ''
 		};
 	},
 	getUsernameWithS : function() {
@@ -52,7 +53,7 @@ const UserPage = createClass({
 	},
 
 	sortBrewOrder : function(brew){
-		if(!brew.title){brew.title = 'No Title';};
+		if(!brew.title){brew.title = 'No Title';}
 		const mapping = {
 			'alpha'   : _.deburr(brew.title.toLowerCase()),
 			'created' : moment(brew.createdAt).format(),
@@ -91,6 +92,26 @@ const UserPage = createClass({
 		  </td>;
 	},
 
+	handleFilterTextChange : function(e){
+		this.setState({
+			filterString : e.target.value
+		});
+		return;
+	},
+
+	renderFilterOption : function(){
+		return <td>
+			<label>
+				<i className='fas fa-search'></i>
+				<input
+					type='search'
+					placeholder='search title/description'
+					onChange={this.handleFilterTextChange}
+				/>
+			</label>
+		</td>;
+	},
+
 	renderSortOptions : function(){
 		return <div className='sort-container'>
 			<table>
@@ -115,6 +136,7 @@ const UserPage = createClass({
 								{`${(this.state.sortDir == 'asc' ? '\u25B2 ASC' : '\u25BC DESC')}`}
 							</button>
 						</td>
+						{this.renderFilterOption()}
 					</tr>
 				</tbody>
 			</table>
@@ -122,7 +144,12 @@ const UserPage = createClass({
 	},
 
 	getSortedBrews : function(){
-		return _.groupBy(this.props.brews, (brew)=>{
+		const testString = _.deburr(this.state.filterString).toLowerCase();
+		const brewCollection = this.state.filterString ? _.filter(this.props.brews, (brew)=>{
+			return (_.deburr(brew.title).toLowerCase().includes(testString)) ||
+			(_.deburr(brew.description).toLowerCase().includes(testString));
+		}) : this.props.brews;
+		return _.groupBy(brewCollection, (brew)=>{
 			return (brew.published ? 'published' : 'private');
 		});
 	},

client/homebrew/pages/userPage/userPage.less

@@ -34,8 +34,9 @@
 		font-family        : 'Open Sans', sans-serif;
 		position           : fixed;
 		top                : 35px;
+		left               : calc(50vw - 408px);
 		border             : 2px solid #58180D;
-		width              : 675px;
+		width              : 800px;
 		background-color   : #EEE5CE;
 		padding            : 2px;
 		text-align         : center;
@@ -52,6 +53,9 @@
 			vertical-align : middle;
 			tbody tr{
 				background-color: transparent !important;
+				i{
+					padding-right : 5px
+				}
 			button{
 					background-color : transparent;
 					color            : #58180D;