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

Add basic selected tags display to List Page

Browse Source
This commit is contained in:
G.Ambatte
2023-12-04 21:45:59 +13:00
parent efecfac68a
commit d262f586fc
2 changed files with 85 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -158,7 +158,12 @@ const ListPage = createClass({
} }
} }
urlParams.delete('tag'); urlParams.delete('tag');
// Add tags to URL in the order they were clicked
filterTags.forEach((tag)=>{ urlParams.append('tag', tag); }); filterTags.forEach((tag)=>{ urlParams.append('tag', tag); });
// Sort tags before updating state
filterTags.sort((a, b)=>{
return a.indexOf(':') - b.indexOf(':') != 0 ? a.indexOf(':') - b.indexOf(':') : a.toLowerCase().localeCompare(b.toLowerCase());
});
this.setState({ this.setState({
filterTags filterTags
@@ -187,6 +192,17 @@ const ListPage = createClass({
</div>; </div>;
}, },
renderTagsOptions : function(){
if(this.state.filterTags?.length == 0) return;
console.log('renderTags');
return <div className='tags-container'>
{_.map(this.state.filterTags, (tag, idx)=>{
const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
return <span key={idx} className={matches[1]} onClick={()=>{this.updateListFilter('tag', tag);}}>{matches[2]}</span>;
})}
</div>;
},
renderSortOptions : function(){ renderSortOptions : function(){
return <div className='sort-container'> return <div className='sort-container'>
<h6>Sort by :</h6> <h6>Sort by :</h6>
@@ -197,9 +213,6 @@ const ListPage = createClass({
{/* {this.renderSortOption('Latest', 'latest')} */} {/* {this.renderSortOption('Latest', 'latest')} */}
{this.renderFilterOption()} {this.renderFilterOption()}
</div>; </div>;
}, },
@@ -258,6 +271,7 @@ const ListPage = createClass({
<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()} {this.renderSortOptions()}
{this.renderTagsOptions()}
<div className='content V3'> <div className='content V3'>
<div className='page'> <div className='page'>

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

@@ -52,7 +52,7 @@
} }
} }
} }
.sort-container{ .sort-container {
font-family : 'Open Sans', sans-serif; font-family : 'Open Sans', sans-serif;
position : sticky; position : sticky;
top : 0; top : 0;
@@ -124,4 +124,71 @@
} }
.tags-container {
font-family : 'Open Sans', sans-serif;
position : sticky;
top : 0;
left : 0;
width : 100%;
height : 30px;
background-color : #555;
border-top : 1px solid #666;
border-bottom : 1px solid #666;
color : white;
text-align : center;
z-index : 1;
display : flex;
justify-content : center;
align-items : center;
column-gap : 15px;
row-gap : 5px;
flex-wrap : wrap;
span {
text-transform : uppercase;
font-family : 'Open Sans', sans-serif;
font-size : 11px;
font-weight : bold;
border : 1px solid;
border-radius : 3px;
padding : 3px;
cursor : pointer;
&:before {
font-family: 'Font Awesome 5 Free';
font-size: 12px;
margin-right: 3px;
}
&.type {
background-color: #0080003b;
color: #008000;
border-color: #008000;
&:before{
content: '\f0ad';
}
}
&.group {
background-color: #5050503b;
color: #000000;
border-color: #000000;
&:before{
content: '\f500';
}
}
&.meta {
background-color: #0000803b;
color: #000080;
border-color: #000080;
&:before{
content: '\f05a';
}
}
&.system {
background-color: #8000003b;
color: #800000;
border-color: #800000;
&:before{
content: '\f518';
}
}
}
}
} }