Kingsmai/pokopiawiki.tootaio.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pokemon): add related Pokemon section to detail view

Browse Source 
Fetch related Pokemon based on shared environment and favorite things
Add UI with habitat filtering and highlighted shared attributes
This commit is contained in:
xiaomai
2026-05-02 08:21:46 +08:00
parent f5ab96c2b1
commit 21bbbc7137
6 changed files with 240 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
frontend/src/styles/main.css
View File

@@ -2630,6 +2630,70 @@ button:disabled,
justify-content: flex-end;
}
.related-pokemon-list li {
display: block;
}
.related-pokemon-row {
display: grid;
gap: 12px;
min-width: 0;
}
.related-pokemon-row__header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 12px;
min-width: 0;
}
.related-pokemon-row__name {
min-width: 0;
color: var(--ink);
font-weight: 900;
overflow-wrap: anywhere;
}
.related-pokemon-row__environment {
flex: 0 0 auto;
}
.related-pokemon-row__environment--match,
.related-favourite-chip--match {
border-color: rgba(255, 203, 5, 0.9);
background: rgba(255, 203, 5, 0.34);
color: #172036;
}
.related-pokemon-row__content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
gap: 12px;
min-width: 0;
}
.related-pokemon-row__group {
display: grid;
align-content: start;
gap: 6px;
min-width: 0;
}
.related-pokemon-row__label {
color: var(--muted);
font-size: 0.76rem;
font-weight: 900;
}
.related-favourite-chip {
gap: 6px;
max-width: 100%;
min-width: 0;
overflow-wrap: anywhere;
}
.detail-text {
margin: 0;
color: var(--ink-soft);