Wiki pagination — 9 cards/page (3 rows), counter X/27, topic filter pills, prev/next

- wikiPerPage = 9 (3 masonry rows × 3 cols), wikiCurrentPage state
- wikiFilteredData holds sorted/filtered list; renderWikiPage slices it
- Topic filter pills below search bar, rendered from unique topics in data
- searchWiki now works with pagination/filters, resets to page 1
- Counter shows '9/27' style, pagination shows Zurück/Weiter with page info
- Language toggle re-renders wiki topics + page
- New CSS: .wiki-topics, .wiki-topic-filter (pill style), .wiki-footer, .wiki-page-btn
This commit is contained in:
Kato
2026-09-05 19:51:06 +00:00
parent 34d9b0b1e2
commit 113ca75502
3 changed files with 198 additions and 20 deletions
+79
View File
@@ -1054,6 +1054,85 @@ body[data-lang="en"] .hide-de { display: none !important; }
.rank-badge.rank-expert { background: #fff3e0; color: #e65100; }
.rank-badge.rank-legend { background: #fce4ec; color: #c62828; }
/* ========================================
WIKI TOPICS — filter pills
======================================== */
.wiki-topics {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 12px 0 20px;
}
.wiki-topic-filter {
background: #f0f2f5;
border: none;
border-radius: 999px;
padding: 5px 12px;
font-size: 13px;
font-weight: 500;
color: #1c1e21;
cursor: pointer;
transition: background 0.2s, color 0.2s;
white-space: nowrap;
}
.wiki-topic-filter:hover {
background: #e4e6eb;
}
.wiki-topic-filter.active {
background: #1877f2;
color: #fff;
}
.wiki-filter-count {
font-size: 11px;
opacity: 0.7;
margin-left: 2px;
}
/* ========================================
WIKI FOOTER — counter + pagination
======================================== */
.wiki-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 24px;
flex-wrap: wrap;
}
.wiki-counter {
font-size: 14px;
font-weight: 600;
color: #65676b;
}
.wiki-pagination {
display: flex;
align-items: center;
gap: 8px;
}
.wiki-page-btn {
background: #f0f2f5;
border: none;
border-radius: 8px;
padding: 6px 14px;
font-size: 13px;
font-weight: 500;
color: #1c1e21;
cursor: pointer;
transition: background 0.2s;
}
.wiki-page-btn:hover:not(:disabled) {
background: #e4e6eb;
}
.wiki-page-btn:disabled {
opacity: 0.4;
cursor: default;
}
.wiki-page-info {
font-size: 13px;
font-weight: 600;
color: #65676b;
}
/* ========================================
WIKI CARDS
======================================== */