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

pagination controls render separately

Browse Source
This commit is contained in:
Víctor Losada Hernández
2024-02-13 10:48:19 +01:00
parent 2f323cde8a
commit 9fc8af6553
2 changed files with 60 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
client/homebrew/pages/archivePage/archivePage.jsx
View File

@@ -75,6 +75,32 @@ const ArchivePage = createClass({
window.history.replaceState(null, null, url);
},
renderPaginationControls() {
const { title, brewCollection, page, totalPages, error } = this.state;
const pages = new Array(totalPages).fill().map((_, index) => (
<li key={index} className={`pageNumber ${page === index + 1 ? 'currentPage' : ''}`} onClick={() => this.loadPage(index+1)}>{index + 1}</li>
));
return (
<div className="paginationControls">
{page > 1 && (
<button
className="previousPage"
onClick={() => this.loadPage(page - 1)}
>
&lt;&lt;
</button>
)}
<ol className='pages'>{pages}</ol>
{page < totalPages && (
<button className="nextPage" onClick={() => this.loadPage(page + 1)}>
&gt;&gt;
</button>
)}
</div>
);
},
renderFoundBrews() {
const { title, brewCollection, page, totalPages, error } = this.state;
@@ -102,15 +128,7 @@ const ArchivePage = createClass({
{brewCollection.map((brew, index)=>(
<BrewItem brew={brew} key={index} reportError={this.props.reportError} />
))}
<div className='paginationControls'>
{page > 1 && (
<button className='previousPage' onClick={()=>this.loadPage(page - 1)}>Previous Page</button>
)}
<span className='currentPage'>Page {page}</span>
{page < totalPages && (
<button className='nextPage' onClick={()=>this.loadPage(page + 1)}>Next Page</button>
)}
</div>
{this.renderPagination()}
</div>
);
},

45
client/homebrew/pages/archivePage/archivePage.less
View File

@@ -166,28 +166,49 @@ body {
position: absolute;
left: 50%;
translate: -50%;
width: 500px;
width: auto;
display: grid;
place-items: center;
grid-template-areas: "previousPage currentPage nextPage";
grid-template-columns: 50px 1fr 50px;
.currentPage {
.pages {
grid-area: currentPage;
height: 100%;
width: 100%;
display: block;
display: flex;
justify-content:space-evenly;
text-align: center;
color: white;
font-family: Open Sans;
font-weight: 900;
padding: 5px 8px;
.pageNumber {
color: white;
font-family: Open Sans;
font-weight: 900;
text-underline-position: under;
margin-inline:10px;
cursor: pointer;
&.currentPage {
color:gold;
text-decoration:underline;
pointer-events:none;
}
}
}
button {
width:max-content;
border-radius:5px;
&.previousPage {
grid-area: previousPage;
}
&.nextPage {
grid-area: nextPage;
}
}
button.previousPage {
grid-area: previousPage;
}
button.nextPage {
grid-area: nextPage;
}
}
hr {