f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-01 06:33:32 +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){ renderSortOption : function(sortTitle, sortValue){
return <div> return <div className='sort-option'>
<button <button
value={`${sortValue}`} value={`${sortValue}`}
onClick={this.handleSortOptionChange} onClick={this.handleSortOptionChange}
className={`${(this.state.sortType == sortValue ? 'active' : '')}`} className={`${(this.state.sortType == sortValue ? 'active' : '')}`}
> >
{`${sortTitle}`} {`${sortTitle}`}
</button> </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>; </div>;
}, },
@@ -165,26 +174,17 @@ const ListPage = createClass({
renderSortOptions : function(){ renderSortOptions : function(){
return <div className='sort-container'> return <div className='sort-container'>
<h6>Sort by :</h6> <h6>Sort by :</h6>
{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')} */}
<h6>Direction :</h6> {this.renderFilterOption()}
<button
onClick={this.handleSortDirChange}
className='sortDir'
>
{`${(this.state.sortDir == 'asc' ? '\u25B2 ASC' : '\u25BC DESC')}`}
</button>
{this.renderFilterOption()}
</div>; </div>;
}, },

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

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