From 46a45a85360e6588b87c3724ef848f3dede39e18 Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Tue, 13 Sep 2022 10:57:28 -0500
Subject: [PATCH] replace sort table with divs and give UI styling

---
 .../pages/basePages/listPage/listPage.jsx     | 28 ++++----
 .../pages/basePages/listPage/listPage.less    | 66 ++++++++++---------
 2 files changed, 45 insertions(+), 49 deletions(-)

diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx
index 0969b9f2a..b81f9c8e0 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.jsx
+++ b/client/homebrew/pages/basePages/listPage/listPage.jsx
@@ -114,7 +114,7 @@ const ListPage = createClass({
 	},
 
 	renderSortOption : function(sortTitle, sortValue){
-		return <td>
+		return <div>
 				  <button
 					  value={`${sortValue}`}
 					  onClick={this.handleSortOptionChange}
@@ -122,7 +122,7 @@ const ListPage = createClass({
 				  >
   					{`${sortTitle}`}
 		 		  </button>
-		  </td>;
+		  </div>;
 	},
 
 	handleFilterTextChange : function(e){
@@ -150,7 +150,7 @@ const ListPage = createClass({
 	},
 
 	renderFilterOption : function(){
-		return <td>
+		return <div className='filter-option'>
 			<label>
 				<i className='fas fa-search'></i>
 				<input
@@ -160,37 +160,31 @@ const ListPage = createClass({
 					value={this.state.filterString}
 				/>
 			</label>
-		</td>;
+		</div>;
 	},
 
 	renderSortOptions : function(){
 		return <div className='sort-container'>
-			<table>
-				<tbody>
-					<tr>
-						<td>
 							<h6>Sort by :</h6>
-						</td>
 						{this.renderSortOption('Title', 'alpha')}
 						{this.renderSortOption('Created Date', 'created')}
 						{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 +227,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>
diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less
index d4efbe445..a6d465420 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.less
+++ b/client/homebrew/pages/basePages/listPage/listPage.less
@@ -12,8 +12,8 @@
 	-moz-column-gap      : auto;
 }
 .listPage{
+	height : unset !important;
 	.content{
-		overflow-y : overlay;
 		.phb{
 			.noColumns();
 			height     : auto;
@@ -32,47 +32,49 @@
 	}
 	.sort-container{
 		font-family        : 'Open Sans', sans-serif;
-		position           : fixed;
-		top                : 35px;
-		left               : calc(50vw - 400px);
-		border             : 2px solid #58180D;
-		width              : 800px;
-		background-color   : #EEE5CE;
+		position           : sticky;
+		top                : 0;
+		left               : 0;
+		width              : 100%;
+		background-color   : #555;
+		border-top         : 1px solid #666;
+		color              : white;
 		padding            : 2px;
 		text-align         : center;
-		z-index            : 15;
+		z-index            : 500;
+		display            : flex;
+		justify-content    : center;
+		align-items        : center;
 		h6{
 			text-transform : uppercase;
 			font-family    : 'Open Sans', sans-serif;
 			font-size      : 11px;
 			font-weight    : bold;
-			color          : #58180D;
 		}
-		table{
-			margin : 0px;
-			vertical-align : middle;
-			tbody tr{
-				background-color: transparent !important;
-				i{
-					padding-right : 5px
-				}
-			button{
-					background-color : transparent;
-					color            : #58180D;
-					font-family    : 'Open Sans', sans-serif;
-					font-size      : 11px;
-					text-transform : uppercase;
-					font-weight      : normal;
-					&.active{
-						font-weight : bold;
-						border      : 2px solid #58180D;
-					}
-					&.sortDir{
-						width : 75px;
-					}
-				}
+		.filter-option {
+			background-color: transparent !important;
+			i{
+				padding-right : 5px
 			}
 		}
+		button{
+				background-color : transparent;
+				font-family      : 'Open Sans', sans-serif;
+				font-size        : 11px;
+				text-transform   : uppercase;
+				font-weight      : normal;
+				color            : #888;
+				&.active{
+					font-weight      : bold;
+					text-decoration  : underline;
+					color            : unset;
+				}
+				&.sortDir{
+					width : 75px;
+				}
+			}
+		
+		
 	}
 	h1 {
 		cursor: pointer;