Zaki/Password-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pagination): keep the pager visible while scrolling

Browse Source 
The page buttons sat at the top of the grid and scrolled away, so paging
through a long list meant scrolling back up. Sticky at the scrollport top
with an opaque background; the table header now sticks below it via
--pag-h (measured after append, so a wrapped pager still lines up).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
r-zakarya
2026-07-22 11:22:50 +01:00
parent a1e028bfc5
commit 60cf26b259
2 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+9 -3
View File
@@ -2676,7 +2676,7 @@ body[data-editor-position="center"]:has(#settingsPanel.is-open)::before {
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
background: var(--bg-elev); background: var(--bg-elev);
user-select: none; user-select: none;
position: sticky; top: 0; position: sticky; top: var(--pag-h, 0px);
z-index: 1; z-index: 1;
} }
.entry-table th.is-sortable { cursor: pointer; } .entry-table th.is-sortable { cursor: pointer; }
@@ -2963,10 +2963,16 @@ input[type="password"]::-ms-clear {
.entry-card.is-flash { animation: entryFlash 2.5s ease-out; } .entry-card.is-flash { animation: entryFlash 2.5s ease-out; }
.entry-row.is-flash { animation: entryFlash 2.5s ease-out; } .entry-row.is-flash { animation: entryFlash 2.5s ease-out; }
/* Pagination footer (list + table views). */ /* Pagination bar (all view modes). Sticky so the page buttons stay reachable
while scrolling a long page; z-index beats the sticky table header, which
is pushed down by --pag-h (measured in renderEntries). */
.pagination { .pagination {
position: sticky;
top: 0;
z-index: 2;
background: var(--bg);
display: flex; align-items: center; gap: 6px; display: flex; align-items: center; gap: 6px;
padding: 14px 12px 4px; padding: 14px 12px 10px;
flex-wrap: wrap; flex-wrap: wrap;
font-size: 13px; font-size: 13px;
color: var(--text-dim); color: var(--text-dim);
js/app.js
+6 -1
View File
@@ -2297,7 +2297,12 @@ function renderGrid() {
const pageList = list.slice(start, start + state.pageSize); const pageList = list.slice(start, start + state.pageSize);
if (total > 10) { if (total > 10) {
grid.appendChild(renderPagination(total, totalPages)); const pag = renderPagination(total, totalPages);
grid.appendChild(pag);
// The table header sticks below the sticky pagination bar, not under it.
grid.style.setProperty('--pag-h', pag.offsetHeight + 'px');
} else {
grid.style.setProperty('--pag-h', '0px');
} }
if (state.viewMode === 'table') { if (state.viewMode === 'table') {