Merge branch 'master' into pr/2395

client/homebrew/homebrew.less

@@ -11,7 +11,10 @@
 			position   : relative;
 			height     : calc(~"100% - 29px"); //Navbar height
 			flex       : auto;
+			overflow-y : hidden;
+		}
+		&.listPage .content {
 			overflow-y : scroll;
 		}
 	}
-}
+}

client/homebrew/navbar/navbar.less

@@ -78,6 +78,8 @@
 			width      : 100%;
 			overflow   : hidden auto;
 			max-height : ~"calc(100vh - 28px)";
+			scrollbar-color : #666 #333;
+			scrollbar-width : thin;
 			h4{
 				display          : block;
 				box-sizing       : border-box;

client/homebrew/pages/basePages/listPage/listPage.jsx

@@ -114,15 +114,17 @@ const ListPage = createClass({
 	},
 
 	renderSortOption : function(sortTitle, sortValue){
-		return <td>
+		return <div className={`sort-option ${(this.state.sortType == sortValue ? 'active' : '')}`}>
-				  <button
+			<button
-					  value={`${sortValue}`}
+				value={`${sortValue}`}
-					  onClick={this.handleSortOptionChange}
+				onClick={this.state.sortType == sortValue ? this.handleSortDirChange : this.handleSortOptionChange}
-					  className={`${(this.state.sortType == sortValue ? 'active' : '')}`}
+			>
-				  >
+				{`${sortTitle}`}
-  					{`${sortTitle}`}
+			</button>
-		 		  </button>
+			{this.state.sortType == sortValue &&
-		  </td>;
+				<i className={`sortDir fas ${this.state.sortDir == 'asc' ? 'fa-sort-up' : 'fa-sort-down'}`}></i>
+			}
+		  </div>;
 	},
 
 	handleFilterTextChange : function(e){
@@ -150,7 +152,7 @@ const ListPage = createClass({
 	},
 
 	renderFilterOption : function(){
-		return <td>
+		return <div className='filter-option'>
 			<label>
 				<i className='fas fa-search'></i>
 				<input
@@ -160,37 +162,22 @@ const ListPage = createClass({
 					value={this.state.filterString}
 				/>
 			</label>
-		</td>;
+		</div>;
 	},
 
 	renderSortOptions : function(){
 		return <div className='sort-container'>
-			<table>
+			<h6>Sort by :</h6>
-				<tbody>
+			{this.renderSortOption('Title', 'alpha')}
-					<tr>
+			{this.renderSortOption('Created Date', 'created')}
-						<td>
+			{this.renderSortOption('Updated Date', 'updated')}
-							<h6>Sort by :</h6>
+			{this.renderSortOption('Views', 'views')}
-						</td>
+			{/* {this.renderSortOption('Latest', 'latest')} */}
-						{this.renderSortOption('Title', 'alpha')}
+
-						{this.renderSortOption('Created Date', 'created')}
+			{this.renderFilterOption()}
-						{this.renderSortOption('Updated Date', 'updated')}
+
-						{this.renderSortOption('Views', 'views')}
+
-						{/* {this.renderSortOption('Latest', 'latest')} */}
+
-				    	<td>
-							<h6>Direction :</h6>
-						</td>
-						<td>
-							<button
-								onClick={this.handleSortDirChange}
-								className='sortDir'
-							>
-								{`${(this.state.sortDir == 'asc' ? '\u25B2 ASC' : '\u25BC DESC')}`}
-							</button>
-						</td>
-						{this.renderFilterOption()}
-					</tr>
-				</tbody>
-			</table>
 		</div>;
 	},
 
@@ -233,10 +220,10 @@ const ListPage = createClass({
 		return <div className='listPage sitePage'>
 			<link href='/themes/V3/5ePHB/style.css' rel='stylesheet'/>
 			{this.props.navItems}
+			{this.renderSortOptions()}
 
 			<div className='content V3'>
 				<div className='phb page'>
-					{this.renderSortOptions()}
 					{this.renderBrewCollection(this.state.brewCollection)}
 				</div>
 			</div>

client/homebrew/pages/basePages/listPage/listPage.less

@@ -13,7 +13,6 @@
 }
 .listPage{
 	.content{
-		overflow-y : overlay;
 		.phb{
 			.noColumns();
 			height     : auto;
@@ -32,68 +31,74 @@
 	}
 	.sort-container{
 		font-family        : 'Open Sans', sans-serif;
-		position           : fixed;
+		position           : sticky;
-		top                : 35px;
+		top                : 0;
-		left               : calc(50vw - 400px);
+		left               : 0;
-		border             : 2px solid #58180D;
+		width              : 100%;
-		width              : 800px;
+		height             : 30px;
-		background-color   : #EEE5CE;
+		background-color   : #555;
-		padding            : 2px;
+		border-top         : 1px solid #666;
+		border-bottom         : 1px solid #666;
+		color              : white;
 		text-align         : center;
-		z-index            : 15;
+		z-index            : 500;
+		display            : flex;
+		justify-content    : center;
+		align-items        : baseline;
+		column-gap         : 15px;
+		row-gap            : 5px;
+		flex-wrap          : wrap;
 		h6{
 			text-transform : uppercase;
 			font-family    : 'Open Sans', sans-serif;
 			font-size      : 11px;
 			font-weight    : bold;
-			color          : #58180D;
 		}
-		table{
+		.sort-option {
-			margin : 0px;
+			display: flex;
-			vertical-align : middle;
+			align-items: center;
-			tbody tr{
+			padding: 0 8px;
-				background-color: transparent !important;
+			color: #ccc;
-				i{
+			height: 100%;
-					padding-right : 5px
+
-				}
+			&:hover{
-			button{
+				background-color : #444;
-					background-color : transparent;
+			}
-					color            : #58180D;
+
-					font-family    : 'Open Sans', sans-serif;
+			&.active {
-					font-size      : 11px;
+			font-weight: bold;
-					text-transform : uppercase;
+			color: #ddd;
-					font-weight      : normal;
+			background-color: #333;
-					&.active{
+
-						font-weight : bold;
+			button {
-						border      : 2px solid #58180D;
+				color: white;
-					}
+				font-weight: 800;
-					&.sortDir{
+				height: 100%;
-						width : 75px;
+				& + .sortDir {
-					}
+					padding-left: 5px;
 				}
 			}
 		}
-	}
+
-	h1 {
-		cursor: pointer;
-		&.active {
-			color: #58180D;
 		}
-		&.inactive {
+		.filter-option {
-			color: #707070;
+			margin-left: 20px;
-			
+			background-color : transparent !important;
-		}
+			font-size        : 11px;
-		&.active::before, &.inactive::before {
+			i{
-			font-family: 'Font Awesome 5 Free';
+				padding-right : 5px;
-			font-weight: 900;
+			}
-			font-size: 0.6cm;
-    			padding-right: 0.5em;
-		}
-		&.active::before {
-			content: '\f107';
-		}
-		&.inactive::before {
-			content: '\f105';
 		}
+		button{
+				background-color : transparent;
+				font-family      : 'Open Sans', sans-serif;
+				text-transform   : uppercase;
+				font-weight      : normal;
+				font-size        : 11px;
+				color            : #ccc;
+				padding          : 0;
+			}
+
+
 	}
 }

shared/naturalcrit/splitPane/splitPane.jsx

@@ -69,7 +69,8 @@ const SplitPane = createClass({
 		this.setState({ isDragging: false });
 	},
 
-	handleDown : function(){
+	handleDown : function(e){
+		e.preventDefault();
 		this.setState({ isDragging: true });
 		//this.unFocus()
 	},