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

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

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