f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-02 17:12:45 +00:00
Code Wiki Activity

Changed from Radios to Buttons

Browse Source
This commit is contained in:
G.Ambatte
2021-07-27 23:14:05 +12:00
parent b80a249cf7
commit 1031e8a55a
2 changed files with 65 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
client/homebrew/pages/userPage/userPage.jsx
View File

@@ -25,14 +25,12 @@ const UserPage = createClass({
return { return {
username : '', username : '',
brews : [], brews : [],
sortType : 'alpha',
sortDir : 'desc'
}; };
}, },
getInitialState : function() { getInitialState : function() {
return { return {
sortType : 'alpha', sortType : 'alpha',
sortDir : 'desc' sortDir : 'asc'
}; };
}, },
getUsernameWithS : function() { getUsernameWithS : function() {
@@ -51,23 +49,19 @@ const UserPage = createClass({
}); });
}, },
sortBrews : function(brews, sortType){ sortBrewOrder : function(brew){
if(sortType == 'alpha') { const mapping = {
return _.orderBy(brews, (brew)=>{ return _.deburr(brew.title.toLowerCase()); }, this.state.sortDir); 'alpha' : _.deburr(brew.title.toLowerCase()),
} 'created' : brew.createdAt,
if(sortType == 'created'){ 'updated' : brew.updatedAt,
return _.orderBy(brews, (brew)=>{ return brew.createdAt; }, this.state.sortDir); 'views' : brew.views,
} 'latest' : brew.lastViewed
if(sortType == 'updated'){ };
return _.orderBy(brews, (brew)=>{ return brew.updatedAt; }, this.state.sortDir); return mapping[this.state.sortType];
} },
if(sortType == 'views'){
return _.orderBy(brews, (brew)=>{ return brew.views; }, this.state.sortDir); sortBrews : function(brews){
} return _.orderBy(brews, (brew)=>{ return this.sortBrewOrder(brew); }, this.state.sortDir);
if(sortType == 'latest'){
return _.orderBy(brews, (brew)=>{ return brew.lastViewed; }, this.state.sortDir);
}
return _.orderBy(brews, (brew)=>{ return _.deburr(brew.title.toLowerCase()); }, this.state.sortDir);
}, },
handleSortOptionChange : function(event){ handleSortOptionChange : function(event){
@@ -77,51 +71,49 @@ const UserPage = createClass({
}, },
handleSortDirChange : function(event){ handleSortDirChange : function(event){
const newDir = (this.state.sortDir == 'asc' ? 'desc' : 'asc');
this.setState({ this.setState({
sortDir : `${newDir}` sortDir : `${(this.state.sortDir == 'asc' ? 'desc' : 'asc')}`
}); });
}, },
renderSortRadioOption : function(sortTitle, sortValue){ renderSortOption : function(sortTitle, sortValue){
return <td> return <td>
<label> <button
<input
type='radio'
name='sortType'
value={`${sortValue}`} value={`${sortValue}`}
checked={this.state.sortType == `${sortValue}`} onClick={this.handleSortOptionChange}
className='sort-radio' className={`${(this.state.sortType == sortValue ? 'active' : '')}`}
onChange={this.handleSortOptionChange} >
/> {`${sortTitle}`}
{`${sortTitle}`} </button>
</label>
</td>; </td>;
}, },
renderSortOptions : function(){ renderSortOptions : function(){
return <div className='sort-container'> return <div className='sort-container'>
<table> <table>
<tr> <tbody>
<td> <tr>
<h6>Sort Type :</h6> <td>
</td> <h6>Sort by :</h6>
{this.renderSortRadioOption('Title', 'alpha')} </td>
{this.renderSortRadioOption('Created Date', 'created')} {this.renderSortOption('Title', 'alpha')}
{this.renderSortRadioOption('Updated Date', 'updated')} {this.renderSortOption('Created Date', 'created')}
{this.renderSortRadioOption('Views', 'views')} {this.renderSortOption('Updated Date', 'updated')}
{/* {this.renderSortRadioOption('Latest', 'latest')} */} {this.renderSortOption('Views', 'views')}
<td> {/* {this.renderSortOption('Latest', 'latest')} */}
<h6>Direction :</h6> <td>
</td> <h6>Direction :</h6>
<td> </td>
<button <td>
onClick={this.handleSortDirChange} <button
> onClick={this.handleSortDirChange}
{`${(this.state.sortDir == 'asc' ? '\u2B9D ASC' : '\u2B9F DESC')}`} className='sortDir'
</button> >
</td> {`${(this.state.sortDir == 'asc' ? '\u25B2 ASC' : '\u25BC DESC')}`}
</tr> </button>
</td>
</tr>
</tbody>
</table> </table>
</div>; </div>;
}, },

27
client/homebrew/pages/userPage/userPage.less
View File

@@ -47,14 +47,27 @@
font-weight : bold; font-weight : bold;
color : #58180D; color : #58180D;
} }
button{
background-color : #58180D;
border : 5px double white;
width : 75px;
}
table{ table{
margin-top : 1px; margin : 0px;
margin-bottom : 0; vertical-align : middle;
tbody tr{
background-color: transparent !important;
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;
}
}
}
} }
} }
} }