f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-24 22:52:40 +00:00
Code Wiki Activity

move dir button next to active sort option

Browse Source
This commit is contained in:
Gazook89
2022-09-13 12:26:28 -05:00
parent 46a45a8536
commit cfdbe06d07
2 changed files with 40 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -114,14 +114,23 @@ const ListPage = createClass({
},
renderSortOption : function(sortTitle, sortValue){
return <div>
<button
value={`${sortValue}`}
onClick={this.handleSortOptionChange}
className={`${(this.state.sortType == sortValue ? 'active' : '')}`}
>
{`${sortTitle}`}
</button>
return <div className='sort-option'>
<button
value={`${sortValue}`}
onClick={this.handleSortOptionChange}
className={`${(this.state.sortType == sortValue ? 'active' : '')}`}
>
{`${sortTitle}`}
</button>
{this.state.sortType == sortValue ?
<button
onClick={this.handleSortDirChange}
className='sortDir'
>
{this.state.sortDir == 'asc' ? <i className='fas fa-sort-amount-up'></i> : <i className='fas fa-sort-amount-down'></i>}
</button>
: ''
}
</div>;
},
@@ -165,26 +174,17 @@ const ListPage = createClass({
renderSortOptions : function(){
return <div className='sort-container'>
<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')} */}
<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')} */}
<h6>Direction :</h6>
{this.renderFilterOption()}
<button
onClick={this.handleSortDirChange}
className='sortDir'
>
{`${(this.state.sortDir == 'asc' ? '\u25B2 ASC' : '\u25BC DESC')}`}
</button>
{this.renderFilterOption()}
</div>;
},

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

@@ -45,6 +45,9 @@
display : flex;
justify-content : center;
align-items : center;
column-gap : 15px;
row-gap : 5px;
flex-wrap : wrap;
h6{
text-transform : uppercase;
font-family : 'Open Sans', sans-serif;
@@ -52,50 +55,35 @@
font-weight : bold;
}
.filter-option {
background-color: transparent !important;
margin-left: 20px;
background-color : transparent !important;
font-size : 11px;
i{
padding-right : 5px
padding-right : 5px;
}
}
button{
background-color : transparent;
font-family : 'Open Sans', sans-serif;
font-size : 11px;
text-transform : uppercase;
font-weight : normal;
font-size : 11px;
color : #888;
padding : 0;
&.active{
font-weight : bold;
text-decoration : underline;
color : unset;
color : white;
border-bottom : 1px solid white;
}
&.sortDir{
width : 75px;
width : auto;
padding: 5px;
&:hover {
color: white;
}
}
}
}
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';
}
}
}