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

feat(ui): implement compact grid layout for items and artifacts

Browse Source 
Add compact tooltip mode to EntityCard component
Display 12-column icon grid on desktop for collections
Retain standard card layout with details on mobile devices
This commit is contained in:
xiaomai
2026-05-04 22:19:36 +08:00
parent 28f4e6032c
commit cd0f8868c3
5 changed files with 168 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/views/AncientArtifactList.vue
View File

@@ -113,8 +113,12 @@ watch(artifactQuery, loadArtifacts);
</div>
</FilterPanel>
<div v-if="loading" class="entity-grid catalog-card-grid" aria-busy="true" :aria-label="t('pages.ancientArtifacts.loadingList')">
<article v-for="index in skeletonCardCount" :key="`artifact-skeleton-${index}`" class="entity-card entity-card--skeleton">
<div v-if="loading" class="entity-grid catalog-card-grid collections-card-grid" aria-busy="true" :aria-label="t('pages.ancientArtifacts.loadingList')">
<article
v-for="index in skeletonCardCount"
:key="`artifact-skeleton-${index}`"
class="entity-card entity-card--skeleton entity-card--collection-compact"
>
<Skeleton variant="box" width="92px" height="92px" class="skeleton-entity-mark" />
<div class="entity-card__content">
<Skeleton width="128px" height="24px" />
@@ -122,7 +126,7 @@ watch(artifactQuery, loadArtifacts);
</div>
</article>
</div>
<div v-else class="entity-grid catalog-card-grid">
<div v-else class="entity-grid catalog-card-grid collections-card-grid">
<EntityCard
v-for="artifact in artifacts"
:key="artifact.id"
@@ -131,6 +135,7 @@ watch(artifactQuery, loadArtifacts);
:to="`/ancient-artifacts/${artifact.id}`"
:icon="iconArtifact"
:image="artifactCardImage(artifact)"
compact-tooltip
/>
</div>

11
frontend/src/views/ItemsList.vue
View File

@@ -132,8 +132,12 @@ watch(itemQuery, loadItems);
</div>
</FilterPanel>
<div v-if="loading" class="entity-grid catalog-card-grid" aria-busy="true" :aria-label="t('pages.items.loadingList')">
<article v-for="index in skeletonCardCount" :key="`item-skeleton-${index}`" class="entity-card entity-card--skeleton">
<div v-if="loading" class="entity-grid catalog-card-grid collections-card-grid" aria-busy="true" :aria-label="t('pages.items.loadingList')">
<article
v-for="index in skeletonCardCount"
:key="`item-skeleton-${index}`"
class="entity-card entity-card--skeleton entity-card--collection-compact"
>
<Skeleton variant="box" width="92px" height="92px" class="skeleton-entity-mark" />
<div class="entity-card__content">
<Skeleton width="128px" height="24px" />
@@ -141,7 +145,7 @@ watch(itemQuery, loadItems);
</div>
</article>
</div>
<div v-else class="entity-grid catalog-card-grid">
<div v-else class="entity-grid catalog-card-grid collections-card-grid">
<EntityCard
v-for="item in items"
:key="item.id"
@@ -151,6 +155,7 @@ watch(itemQuery, loadItems);
:icon="iconItem"
:image="itemCardImage(item)"
:ribbon="item.usage?.name"
compact-tooltip
/>
</div>