f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-07 03:22:38 +00:00
Code Wiki Activity

replace sort table with divs and give UI styling

Browse Source
This commit is contained in:
Gazook89
2022-09-13 10:57:28 -05:00
parent 5e076fc948
commit 46a45a8536
2 changed files with 45 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -12,8 +12,8 @@
-moz-column-gap : auto; -moz-column-gap : auto;
} }
.listPage{ .listPage{
height : unset !important;
.content{ .content{
overflow-y : overlay;
.phb{ .phb{
.noColumns(); .noColumns();
height : auto; height : auto;
@@ -32,47 +32,49 @@
} }
.sort-container{ .sort-container{
font-family : 'Open Sans', sans-serif; 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; background-color : #555;
background-color : #EEE5CE; border-top : 1px solid #666;
color : white;
padding : 2px; padding : 2px;
text-align : center; text-align : center;
z-index : 15; z-index : 500;
display : flex;
justify-content : center;
align-items : center;
h6{ h6{
text-transform : uppercase; text-transform : uppercase;
font-family : 'Open Sans', sans-serif; font-family : 'Open Sans', sans-serif;
font-size : 11px; font-size : 11px;
font-weight : bold; font-weight : bold;
color : #58180D;
} }
table{ .filter-option {
margin : 0px; background-color: transparent !important;
vertical-align : middle; i{
tbody tr{ padding-right : 5px
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;
}
}
} }
} }
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 { h1 {
cursor: pointer; cursor: pointer;