f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-26 11:42:39 +00:00
Code Wiki Activity

Merge pull request #2379 from Gazook89/filter-sort-as-divs

Browse Source 
Change User Page search bar to Divs
This commit is contained in:
Trevor Buckner
2022-09-25 22:21:58 -04:00
committed by GitHub
parent 6ade9925d7 910868cfdb
commit f74b84bd12
2 changed files with 82 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
client/homebrew/pages/basePages/listPage/listPage.jsx
View File

@@ -114,15 +114,17 @@ const ListPage = createClass({
},
renderSortOption : function(sortTitle, sortValue){
return <td>
<button
value={`${sortValue}`}
onClick={this.handleSortOptionChange}
className={`${(this.state.sortType == sortValue ? 'active' : '')}`}
>
{`${sortTitle}`}
</button>
</td>;
return <div className={`sort-option ${(this.state.sortType == sortValue ? 'active' : '')}`}>
<button
value={`${sortValue}`}
onClick={this.state.sortType == sortValue ? this.handleSortDirChange : this.handleSortOptionChange}
>
{`${sortTitle}`}
</button>
{this.state.sortType == sortValue &&
<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>
<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>
<h6>Sort by :</h6>
{this.renderSortOption('Title', 'alpha')}
{this.renderSortOption('Created Date', 'created')}
{this.renderSortOption('Updated Date', 'updated')}
{this.renderSortOption('Views', 'views')}
{/* {this.renderSortOption('Latest', 'latest')} */}
{this.renderFilterOption()}
</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>

109
client/homebrew/pages/basePages/listPage/listPage.less
View File

@@ -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;
top : 35px;
left : calc(50vw - 400px);
border : 2px solid #58180D;
width : 800px;
background-color : #EEE5CE;
padding : 2px;
position : sticky;
top : 0;
left : 0;
width : 100%;
height : 30px;
background-color : #555;
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{
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;
}
.sort-option {
display: flex;
align-items: center;
padding: 0 8px;
color: #ccc;
height: 100%;
&:hover{
background-color : #444;
}
&.active {
font-weight: bold;
color: #ddd;
background-color: #333;
button {
color: white;
font-weight: 800;
height: 100%;
& + .sortDir {
padding-left: 5px;
}
}
}
}
h1 {
cursor: pointer;
&.active {
color: #58180D;
}
&.inactive {
color: #707070;
}
&.active::before, &.inactive::before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 0.6cm;
padding-right: 0.5em;
}
&.active::before {
content: '\f107';
}
&.inactive::before {
content: '\f105';
.filter-option {
margin-left: 20px;
background-color : transparent !important;
font-size : 11px;
i{
padding-right : 5px;
}
}
button{
background-color : transparent;
font-family : 'Open Sans', sans-serif;
text-transform : uppercase;
font-weight : normal;
font-size : 11px;
color : #ccc;
padding : 0;
}
}
}