Fixed the User page

changelog.md

@@ -1,5 +1,10 @@
 # changelog
 
+### Sunday, 27/11/2016 - v2.5.1
+- Fixed the column rendering on the new user page. Really should have tested that better
+- Added a hover tooltip to fully read the brew description
+- Made the brew items take up only 25% allowing you to view more per row.
+
 ### Wednesday, 23/11/2016 - v2.5.0
 - Metadata can now be added to brews
 - Added a metadata editor onto the edit and new pages

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

@@ -17,9 +17,9 @@ const BrewItem = React.createClass({
 
 	render : function(){
 		const brew = this.props.brew;
-		return <div className='brewItem'>
+		return <div className='brewItem'title={brew.description}>
 			<h4>{brew.title}</h4>
-			<p className='description'><em>{brew.description}</em></p>
+			<p className='description' ><em>{brew.description}</em></p>
 			<hr />
 			<ul>
 				<li><strong>Authors: </strong> {brew.authors.join(', ')}</li>

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

@@ -2,7 +2,7 @@
 .brewItem{
 	display                     : inline-block;
 	vertical-align              : top;
-	width                       : 33%;
+	width                       : 25%;
 	margin-bottom               : 15px;
 	-webkit-column-break-inside : avoid;
 	page-break-inside           : avoid;

client/homebrew/pages/userPage/userPage.jsx

@@ -9,6 +9,7 @@ const RecentNavItem = require('../../navbar/recent.navitem.jsx');
 const Account = require('../../navbar/account.navitem.jsx');
 const BrewItem = require('./brewItem/brewItem.jsx');
 
+
 const UserPage = React.createClass({
 	getDefaultProps: function() {
 		return {
@@ -18,6 +19,8 @@ const UserPage = React.createClass({
 	},
 
 	renderBrews : function(brews){
+		if(!brews || !brews.length) return <div className='noBrews'>No Brews.</div>
+
 		return _.map(brews, (brew, idx) => {
 			return <BrewItem brew={brew} key={idx}/>
 		});
@@ -29,10 +32,18 @@ const UserPage = React.createClass({
 		});
 	},
 
+	renderPrivateBrews : function(privateBrews){
+		if(!privateBrews || !privateBrews.length) return;
+
+		return [
+			<h1>{this.props.username}'s unpublished brews</h1>,
+			this.renderBrews(privateBrews)
+		];
+	},
+
 	render : function(){
 		const brews = this.getSortedBrews();
 
-
 		return <div className='userPage page'>
 			<Navbar>
 				<Nav.section>
@@ -45,8 +56,7 @@ const UserPage = React.createClass({
 				<div className='phb'>
 					<h1>{this.props.username}'s brews</h1>
 					{this.renderBrews(brews.published)}
-					{brews.private ? <h1>{this.props.username}'s unpublished brews</h1> : null}
-					{this.renderBrews(brews.private)}
+					{this.renderPrivateBrews(brews.private)}
 				</div>
 			</div>
 		</div>

client/homebrew/pages/userPage/userPage.less

@@ -1,12 +1,36 @@
 
+html, body, #reactContainer, .homebrew, .page {
+	height : auto;
+	min-height : 100vh;
+}
+
+.noColumns(){
+	column-count         : auto;
+	column-fill          : auto;
+	column-gap           : auto;
+	column-width         : auto;
+	-webkit-column-count : auto;
+	-moz-column-count    : auto;
+	-webkit-column-width : auto;
+	-moz-column-width    : auto;
+	-webkit-column-gap   : auto;
+	-moz-column-gap      : auto;
+}
+
 .userPage{
 	.content .phb{
-		height       : 80%;
 		min-height   : 350px;
 		margin       : 20px auto;
-		column-count : 1;
+		height : auto;
+		.noColumns();
 		&::after{
 			display : none;
 		}
+
+		.noBrews{
+			margin: 10px 0px;
+			font-style: italic;
+			font-size: 1.3em;
+		}
 	}
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "scripts": {
     "build": "node_modules/.bin/gulp prod",
     "watch": "node_modules/.bin/gulp",