frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🎨 Styling tweaks to pagination controls

Browse Source
This commit is contained in:
Rishi Ghan
2022-11-03 21:40:23 -07:00
parent b1fb256189
commit 3cb9588bbf
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/client/components/Library/Library.tsx
View File

@@ -43,6 +43,7 @@ export const Library = (): ReactElement => {
), ),
); );
}, []); }, []);
const [{ pageIndex, pageSize }, setPagination] = const [{ pageIndex, pageSize }, setPagination] =
React.useState<PaginationState>({ React.useState<PaginationState>({
pageIndex: 1, pageIndex: 1,
@@ -133,14 +134,13 @@ export const Library = (): ReactElement => {
<div className="column is-half"> <div className="column is-half">
<SearchBar /> <SearchBar />
</div> </div>
{/* pagination control */} {/* pagination controls */}
<nav className="pagination columns"> <nav className="pagination columns">
<div className="box is-size-6 mr-3 mt-2 has-text-weight-semibold has-text-left"> <div className="mr-4 has-text-weight-semibold has-text-left">
<p>Page {pageIndex} of {Math.ceil(totalPages / pageSize)}</p> <p className="is-size-5">Page {pageIndex} of {Math.ceil(totalPages / pageSize)}</p>
<p>{totalPages} comics in all</p> {/* <p>{totalPages} comics in all</p> */}
</div> </div>
<div className="field has-addons"> <div className="field has-addons">
<p className="control"> <p className="control">
<div className="button" onClick={() => goToPreviousPage()}> <i className="fas fa-chevron-left"></i></div> <div className="button" onClick={() => goToPreviousPage()}> <i className="fas fa-chevron-left"></i></div>
</p> </p>