External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

update pagination ui

Browse Source
This commit is contained in:
plebeius
2026-02-24 18:00:15 +08:00
parent e853e73beb
commit bec6bf4d51
39 changed files with 180 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/board-pagination/board-pagination.module.css
+61 -6
View File
@@ -35,20 +35,75 @@
color: var(--button-desktop-text-color-hover);
}
/* Footer-style compact pagination (layout in footer-first-row.module.css) */
.pagelist {
display: flex;
align-items: center;
flex-wrap: wrap;
margin: 0;
padding: 3px 7px !important;
overflow: hidden;
list-style: none;
background-color: var(--pagelist-background-color);
}
.footerNavPlain {
font: inherit;
margin: 0;
padding: 0;
border: none;
background: none;
cursor: pointer;
text-decoration: none;
color: inherit;
}
.footerNavPlain:hover {
text-decoration: none;
}
.footerNavPlainDisabled {
font: inherit;
margin: 0;
padding: 0;
border: none;
background: none;
opacity: 0.5;
cursor: default;
color: inherit;
}
.footerPageLink,
.footerPageCurrent {
font-size: 13px;
margin: 0;
padding: 3px 2px;
border: none;
background: transparent;
list-style: none;
overflow: hidden;
color: var(--pagelist-item-text-color, #89a);
}
.footerPageLink {
padding: 2px 6px;
font-size: 12px;
all: unset;
display: inline-block;
font-size: 13px;
margin: 0;
padding: 3px 2px;
border: none;
background: transparent;
color: var(--pagelist-item-text-color, #89a);
text-transform: capitalize;
cursor: pointer;
text-decoration: var(--button-text-decoration);
color: var(--button-desktop-text-color);
}
.footerPageLink:hover {
color: var(--button-desktop-text-color-hover);
color: var(--pagelist-item-text-color-hover, #d00);
text-decoration: var(--button-text-decoration);
}
.footerPageCurrent {
font-weight: bold;
color: var(--button-desktop-text-color-hover);
color: var(--pagelist-item-text-color-current, #000);
}
src/components/board-pagination/board-pagination.tsx
+33 -31
View File
@@ -8,7 +8,7 @@ export interface BoardPaginationProps {
basePath: string;
currentPage: number;
totalPages: number;
/** When true, renders compact footer-style row with [1] [2] ... [10] Next Catalog + Style select */
/** When true, renders pagelist: [All] [1] [2] ... [10] Catalog Archive + Style select */
footerStyle?: boolean;
}
@@ -26,41 +26,43 @@ const BoardPagination = ({ basePath, currentPage, totalPages, footerStyle = fals
if (footerStyle) {
const pageNumbers = Array.from({ length: totalPages }, (_, i) => i + 1);
const ellipsisThreshold = 7;
const showEllipsis = totalPages > ellipsisThreshold;
const visiblePages = showEllipsis ? [1, 2, currentPage, totalPages].filter((p, i, arr) => arr.indexOf(p) === i).sort((a, b) => a - b) : pageNumbers;
const archiveHref = `${basePath}/archive`;
return (
<div className={footerStyles.footerRow}>
<div className={footerStyles.footerLeft}>
{visiblePages.map((page, idx) => {
const isCurrent = page === currentPage;
const prevPage = visiblePages[idx - 1];
const showLeadingEllipsis = showEllipsis && prevPage !== undefined && page - prevPage > 1;
return (
<span key={page}>
{showLeadingEllipsis && <span> ... </span>}
{isCurrent ? (
<span className={styles.footerPageCurrent}>[{page}]</span>
) : (
<Link to={pageHref(page)} className={styles.footerPageLink}>
[{page}]
</Link>
)}
<div className={styles.pagelist}>
{currentPage > 1 && (
<Link to={pageHref(currentPage - 1)} className={styles.footerNavPlain}>
{t('previous')}
</Link>
)}
<Link to={basePath} className={styles.footerPageLink}>
[{t('all')}]
</Link>
{pageNumbers.map((page) =>
page === currentPage ? (
<span key={page} className={styles.footerPageCurrent}>
[{page}]
</span>
);
})}
{nextHref && (
<>
{' '}
<Link to={nextHref} className={styles.footerPageLink}>
{t('next')}
) : (
<Link key={page} to={pageHref(page)} className={styles.footerPageLink}>
[{page}]
</Link>
</>
)}{' '}
),
)}
{currentPage < totalPages ? (
<Link to={pageHref(currentPage + 1)} className={styles.footerNavPlain}>
{t('next')}
</Link>
) : (
<span className={styles.footerNavPlainDisabled}>{t('next')}</span>
)}
<Link to={catalogHref} className={styles.footerPageLink}>
{t('catalog')}
</Link>
<Link to={archiveHref} className={styles.footerPageLink}>
{t('archive')}
</Link>
</div>
<div className={footerStyles.footerRight}>
<span className={footerStyles.styleLabel}>{t('style')}:</span>
@@ -75,12 +77,12 @@ const BoardPagination = ({ basePath, currentPage, totalPages, footerStyle = fals
return (
<div className={styles.pagination}>
{prevHref ? (
<Link to={prevHref} className={styles.paginationButton} aria-label={t('prev')}>
{t('prev')}
<Link to={prevHref} className={styles.paginationButton} aria-label={t('previous')}>
{t('previous')}
</Link>
) : (
<span className={`${styles.paginationButton} ${styles.disabled}`} aria-disabled='true'>
{t('prev')}
{t('previous')}
</span>
)}
{pageNumbers.map((page) => {
src/components/footer/footer.tsx
-1
View File
@@ -24,7 +24,6 @@ export const PageFooterDesktop = ({ firstRow, styleRow }: PageFooterDesktopProps
<footer className={styles.footer}>
<hr />
<div className={styles.firstRow}>{firstRow}</div>
<hr />
{styleRow != null ? <div className={styles.styleRow}>{styleRow}</div> : null}
<div className={styles.boardsBarRow}>
<BoardsBar />
src/themes.css
+50
View File
@@ -57,6 +57,14 @@
--hr-border-top: 1px solid #d9bfb7;
--hr-height: 0px;
/* pagelist */
--pagelist-background-color: #ead6ca;
--pagelist-item-background-color: #f0e0d6;
--pagelist-item-border-color: #d9bfb7;
--pagelist-item-text-color: #800;
--pagelist-item-text-color-hover: red;
--pagelist-item-text-color-current: #800;
/* homepage */
--homepage-infobox-text-color: #000;
--homepage-infobox-bar-text-color: #fff;
@@ -294,6 +302,14 @@
/* footer */
--footer-item-background-color-desktop: #eef2ff;
/* pagelist */
--pagelist-background-color: #c9cde8;
--pagelist-item-background-color: #d6daf0;
--pagelist-item-border-color: #b7c5d9;
--pagelist-item-text-color: #89a;
--pagelist-item-text-color-hover: #d00;
--pagelist-item-text-color-current: #000;
/* homepage */
--homepage-infobox-text-color: #000;
--homepage-infobox-bar-text-color: #000;
@@ -532,6 +548,14 @@
--close-button-background-image: url("/assets/buttons/cross-red.png");
--open-help-button-background-image: url("/assets/buttons/help-red.png");
/* pagelist */
--pagelist-background-color: #ead6ca;
--pagelist-item-background-color: #f0e0d6;
--pagelist-item-border-color: #d9bfb7;
--pagelist-item-text-color: #800;
--pagelist-item-text-color-hover: red;
--pagelist-item-text-color-current: #800;
/* directory modal */
--directory-modal-background-color: #f0e0d6;
--directory-modal-border: 1px solid rgba(0, 0, 0, 0.20);
@@ -736,9 +760,18 @@
--button-desktop-text-color-hover: #d00;
--close-button-background-image: url("/assets/buttons/cross-blue.png");
--open-help-button-background-image: url("/assets/buttons/help-blue.png");
/* footer */
--footer-item-background-color-desktop: #eef2ff;
/* pagelist */
--pagelist-background-color: #c9cde8;
--pagelist-item-background-color: #d6daf0;
--pagelist-item-border-color: #b7c5d9;
--pagelist-item-text-color: #89a;
--pagelist-item-text-color-hover: #d00;
--pagelist-item-text-color-current: #000;
/* homepage */
--homepage-infobox-text-color: #000;
--homepage-infobox-bar-text-color: #000;
@@ -954,6 +987,14 @@
/* filter for inputs */
--filter80: brightness(85%);
/* pagelist */
--pagelist-background-color: #282a2e;
--pagelist-item-background-color: #282a2e;
--pagelist-item-border-color: #111;
--pagelist-item-text-color: #81a2be;
--pagelist-item-text-color-hover: #5f89ac;
--pagelist-item-text-color-current: #c5c8c6;
/* homepage */
--homepage-infobox-text-color: #c5c8c6;
--homepage-infobox-bar-text-color: #c5c8c6;
@@ -1194,6 +1235,15 @@
--button-desktop-text-color-hover: #f30;
--close-button-background-image: url("/assets/buttons/cross-photon.png");
--open-help-button-background-image: url("/assets/buttons/help-photon.png");
/* pagelist */
--pagelist-background-color: #ddd;
--pagelist-item-background-color: #ddd;
--pagelist-item-border-color: #ccc;
--pagelist-item-text-color: #333;
--pagelist-item-text-color-hover: #f30;
--pagelist-item-text-color-current: #333;
/* horizontal rule */
--hr-border: none;
--hr-border-top: 1px solid #ddd;