RomanNum3ral
/
tubearchivist
mirror of https://github.com/tubearchivist/tubearchivist.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix mobile pagination layout wrap

This commit is contained in:
Simon 2025-07-31 21:17:04 +07:00
parent d2bbc7c583
commit 95c0e35db7
No known key found for this signature in database
GPG Key ID: 2C15AA5E89985DD4
2 changed files with 136 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

235
frontend/src/components/Pagination.tsx
View File

@ -84,129 +84,136 @@ const Pagination = ({ pagination, setPage }: Props) => {
<br />
{totalHits > 1 && (
<>
{currentPage > 1 && (
<>
<Link
to={`${Routes.Home}?${params}`}
className="pagination-item"
onClick={event => {
event.preventDefault();
setPage(0);
}}
>
First
</Link>{' '}
</>
)}
{prev_pages !== false &&
prev_pages &&
prev_pages.map((page: number) => {
if (hasParams) {
return (
<Fragment key={page}>
<Link
to={`${Routes.Home}?page=${page}&${params}`}
className="pagination-item"
onClick={event => {
event.preventDefault();
setPage(page);
}}
>
{page}
</Link>{' '}
</Fragment>
);
} else {
return (
<Fragment key={page}>
<Link
to={`${Routes.Home}?page=${page}`}
className="pagination-item"
onClick={event => {
event.preventDefault();
setPage(page);
}}
>
{page}
</Link>{' '}
</Fragment>
);
}
})}
{currentPage > 0 && <span>{`< Page ${currentPage} `}</span>}
{next_pages && next_pages.length > 0 && (
<>
<span>{'>'}</span>{' '}
{next_pages.map(page => {
if (hasParams) {
return (
<Fragment key={page}>
<a
className="pagination-item"
href={`?page=${page}&${params}`}
onClick={event => {
event.preventDefault();
setPage(page);
}}
>
{page}
</a>{' '}
</Fragment>
);
} else {
return (
<Fragment key={page}>
<a
className="pagination-item"
href={`?page=${page}`}
onClick={event => {
event.preventDefault();
setPage(page);
}}
>
{page}
</a>{' '}
</Fragment>
);
}
})}
</>
)}
{lastPage > 0 && (
<>
{hasParams && (
<a
<span>
{currentPage > 1 && (
<>
<Link
to={`${Routes.Home}?${params}`}
className="pagination-item"
href={`?page=${lastPage}&${params}`}
onClick={event => {
event.preventDefault();
setPage(lastPage || 0);
setPage(0);
}}
>
{hasMaxHits && `Max (${lastPage})`}
{!hasMaxHits && `Last (${lastPage})`}
</a>
First
</Link>{' '}
</>
)}
{prev_pages !== false && prev_pages && (
<>
{prev_pages.map((page: number) => {
if (hasParams) {
return (
<Fragment key={page}>
<Link
to={`${Routes.Home}?page=${page}&${params}`}
className="pagination-item"
onClick={event => {
event.preventDefault();
setPage(page);
}}
>
{page}
</Link>{' '}
</Fragment>
);
} else {
return (
<Fragment key={page}>
<Link
to={`${Routes.Home}?page=${page}`}
className="pagination-item"
onClick={event => {
event.preventDefault();
setPage(page);
}}
>
{page}
</Link>{' '}
</Fragment>
);
}
})}
</>
)}
</span>
{currentPage > 0 && (
<span>{`< Page ${currentPage} ${next_pages && next_pages.length > 0 ? '>' : ''}`}</span>
)}
<span>
<>
{next_pages && next_pages.length > 0 && (
<>
{next_pages.map(page => {
if (hasParams) {
return (
<Fragment key={page}>
<a
className="pagination-item"
href={`?page=${page}&${params}`}
onClick={event => {
event.preventDefault();
setPage(page);
}}
>
{page}
</a>{' '}
</Fragment>
);
} else {
return (
<Fragment key={page}>
<a
className="pagination-item"
href={`?page=${page}`}
onClick={event => {
event.preventDefault();
setPage(page);
}}
>
{page}
</a>{' '}
</Fragment>
);
}
})}
</>
)}
{!hasParams && (
<a
className="pagination-item"
href={`?page=${lastPage}`}
onClick={event => {
event.preventDefault();
setPage(lastPage || 0);
}}
>
{hasMaxHits && `Max (${lastPage})`}
{!hasMaxHits && `Last (${lastPage})`}
</a>
{lastPage > 0 && (
<>
{hasParams && (
<a
className="pagination-item"
href={`?page=${lastPage}&${params}`}
onClick={event => {
event.preventDefault();
setPage(lastPage || 0);
}}
>
{hasMaxHits && `Max (${lastPage})`}
{!hasMaxHits && `Last (${lastPage})`}
</a>
)}
{!hasParams && (
<a
className="pagination-item"
href={`?page=${lastPage}`}
onClick={event => {
event.preventDefault();
setPage(lastPage || 0);
}}
>
{hasMaxHits && `Max (${lastPage})`}
{!hasMaxHits && `Last (${lastPage})`}
</a>
)}
</>
)}
</>
)}
</span>
</>
)}
</div>

15
frontend/src/style.css
View File

@ -709,14 +709,22 @@ video:-webkit-full-screen {
/* pagination */
.pagination {
padding: 30px 0;
display: flex;
justify-content: center;
flex-wrap: nowrap;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.pagination span {
padding: 0 10px;
}
.pagination-item {
padding: 5px;
border: 1px solid;
margin: 0 2px;
}
/* info box */
@ -1451,6 +1459,13 @@ video:-webkit-full-screen {
label {
text-align: unset;
}
.pagination {
flex-wrap: wrap;
row-gap: 1.2rem;
}
.pagination span {
width: 100%;
}
}
.video-popup-menu img {