Greatly improved the user page UI

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

@@ -15,23 +15,39 @@ const BrewItem = React.createClass({
 		};
 	},
 
+	renderEditLink: function(){
+		if(!this.props.brew.editId) return;
+
+		return <a href={`/edit/${this.props.brew.editId}`} target='_blank'>
+			<i className='fa fa-pencil' />
+		</a>
+	},
+
 	render : function(){
 		const brew = this.props.brew;
-		return <div className='brewItem'title={brew.description}>
-			<h4>{brew.title}</h4>
-			<p className='description' ><em>{brew.description}</em></p>
+		return <div className='brewItem'>
+			<h2>{brew.title}</h2>
+			<p className='description' >{brew.description}</p>
 			<hr />
-			<ul>
-				<li><strong>Authors: </strong> {brew.authors.join(', ')}</li>
-				<li>
-					<strong>Last updated: </strong>
-					{moment(brew.updatedAt).fromNow()}
-				</li>
-				<li><strong>Views: </strong> {brew.views} </li>
-			</ul>
 
-			<a href={`/share/${brew.shareId}`} target='_blank'>Share link</a>
-			{(!!brew.editId ? <a href={`/edit/${brew.editId}`} target='_blank'>Edit link</a> : null)}
+			<div className='info'>
+				<span>
+					<i className='fa fa-user' /> {brew.authors.join(', ')}
+				</span>
+				<span>
+					<i className='fa fa-eye' /> {brew.views}
+				</span>
+				<span>
+					<i className='fa fa-refresh' /> {moment(brew.updatedAt).fromNow()}
+				</span>
+			</div>
+
+			<div className='links'>
+				<a href={`/share/${brew.shareId}`} target='_blank'>
+					<i className='fa fa-share-alt' />
+				</a>
+				{this.renderEditLink()}
+			</div>
 		</div>
 	}
 });

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

@@ -1,21 +1,60 @@
 
 .brewItem{
+	position                    : relative;
 	display                     : inline-block;
 	vertical-align              : top;
 	box-sizing                  : border-box;
-	width                       : 30%;
+	box-sizing                  : border-box;
+	overflow                    : hidden;
+	width                       : 48%;
+	margin-right                : 15px;
 	margin-bottom               : 15px;
+	padding                     : 5px 15px 5px 8px;
 	padding-right               : 15px;
+	border                      : 1px solid #c9ad6a;
+	border-radius               : 5px;
 	-webkit-column-break-inside : avoid;
 	page-break-inside           : avoid;
 	break-inside                : avoid;
-	p.description{
-		//overflow      : hidden;
-		//width         : 90%;
-		//text-overflow : ellipsis;
-		white-space   : nowrap;
+	h4{
+		margin-bottom : 5px;
+		font-size     : 2.2em;
 	}
-	a{
-		margin-right : 10px;
+	.info{
+		font-family : ScalySans;
+		font-size   : 1.2em;
+		&>span{
+			margin-right : 15px;
+		}
+	}
+	&:hover{
+		.links{
+			opacity : 1;
+		}
+	}
+	&:nth-child(2n + 1){
+		margin-right : 0px;
+	}
+	.links{
+		.animate(opacity);
+		position         : absolute;
+		top              : 0px;
+		right            : 0px;
+		height           : 100%;
+		width            : 2em;
+		opacity          : 0;
+		background-color : fade(black, 60%);
+		text-align       : center;
+		a{
+			.animate(opacity);
+			display   : block;
+			margin    : 8px 0px;
+			opacity   : 0.6;
+			font-size : 1.3em;
+			color     : white;
+			&:hover{
+				opacity : 1;
+			}
+		}
 	}
 }

client/homebrew/pages/userPage/userPage.jsx

@@ -26,9 +26,11 @@ const UserPage = React.createClass({
 	},
 
 	renderBrews : function(brews){
-		if(!brews || !brews.length) return <div className='noBrews'>No Brews.</div>
+		if(!brews || !brews.length) return <div className='noBrews'>No Brews.</div>;
 
-		return _.map(brews, (brew, idx) => {
+		const sortedBrews = _.sortBy(brews, (brew)=>{ return brew.title; });
+
+		return _.map(sortedBrews, (brew, idx) => {
 			return <BrewItem brew={brew} key={idx}/>
 		});
 	},

client/homebrew/pages/userPage/userPage.less

@@ -27,6 +27,7 @@
 				font-size  : 1.3em;
 				font-style : italic;
 			}
+
 		}
 	}
 }