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

refactor(pokemon): simplify list card to display only image and name

Browse Source 
Remove environment, types, skills, and meta from the list view
Update CSS and skeleton loaders for a centered, larger image layout
This commit is contained in:
xiaomai
2026-05-02 21:37:09 +08:00
parent 874ecc5625
commit 97f06794a8
3 changed files with 33 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/views/PokemonList.vue
View File

@@ -3,8 +3,6 @@ import { Icon } from '@iconify/vue';
import { computed, onMounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import EditMeta from '../components/EditMeta.vue';
import EntityChips from '../components/EntityChips.vue';
import EntityCard from '../components/EntityCard.vue';
import FilterPanel from '../components/FilterPanel.vue';
import PageHeader from '../components/PageHeader.vue';
@@ -44,10 +42,6 @@ async function loadPokemon() {
loading.value = false;
}
function pokemonTypeIconSrc(typeId: number): string | null {
return typeId >= 1 && typeId <= 19 ? `/types/small/${typeId}.png` : null;
}
function pokemonCardImage(item: Pokemon) {
return item.image ? { src: item.image.url, alt: t('pages.pokemon.imageAlt', { name: item.name, variant: item.image.variant }) } : undefined;
}
@@ -128,41 +122,22 @@ watch(query, loadPokemon);
</div>
</FilterPanel>
<div v-if="loading" class="entity-grid" aria-busy="true" :aria-label="t('pages.pokemon.loadingList')">
<div v-if="loading" class="entity-grid pokemon-list-grid" aria-busy="true" :aria-label="t('pages.pokemon.loadingList')">
<article v-for="index in skeletonCardCount" :key="index" class="entity-card entity-card--skeleton">
<Skeleton variant="box" width="42px" height="42px" class="skeleton-entity-mark" />
<Skeleton variant="box" width="92px" height="92px" class="skeleton-entity-mark" />
<div class="entity-card__content">
<Skeleton width="76%" height="24px" />
<Skeleton width="58%" />
<Skeleton width="68%" />
<div class="skeleton-chip-row">
<Skeleton v-for="chipIndex in 2" :key="`skills-${chipIndex}`" width="64px" class="skeleton-chip" />
</div>
<div class="skeleton-chip-row">
<Skeleton v-for="chipIndex in 3" :key="`things-${chipIndex}`" width="72px" class="skeleton-chip" />
</div>
<Skeleton width="128px" height="24px" />
</div>
</article>
</div>
<div v-else class="entity-grid">
<div v-else class="entity-grid pokemon-list-grid">
<EntityCard
v-for="item in pokemon"
:key="item.id"
:title="`#${item.id} ${item.name}`"
:subtitle="t('pages.pokemon.environmentPrefix', { name: item.environment.name })"
:to="`/pokemon/${item.id}`"
:image="pokemonCardImage(item)"
>
<EditMeta :entity="item" />
<div v-if="item.types.length" class="chips">
<span v-for="type in item.types" :key="type.id" class="chip pokemon-type-chip">
<img v-if="pokemonTypeIconSrc(type.id)" class="pokemon-type-chip__icon" :src="pokemonTypeIconSrc(type.id) ?? undefined" alt="" aria-hidden="true" />
<span>{{ type.name }}</span>
</span>
</div>
<EntityChips :items="item.skills" />
<EntityChips :items="item.favorite_things" />
</EntityCard>
/>
</div>
<PokemonEdit v-if="showEditor" />