tools/teletypegames
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

build matrix mobile view

Browse Source
This commit is contained in:
mr.zero
2026-08-04 08:47:35 +02:00
parent 5c98ab5983
commit 8b72599b3b
1 changed files with 85 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/page/builds/BuildsIndexPage.vue
+85 -31
View File
@@ -11,38 +11,58 @@
<div v-else-if="!data" class="builds-loading">{{ t('common.loading') }}</div>
<div v-else class="builds-table-wrap">
<table class="builds-table">
<thead>
<!-- Group row -->
<tr>
<th rowspan="2" class="builds-th-engine">Engine</th>
<th v-for="group in columnGroups" :key="group.label" :colspan="group.kinds.length" class="builds-th-group">
<i :class="group.icon" class="builds-group-icon"></i>
<span class="builds-group-label">{{ group.label }}</span>
</th>
</tr>
<!-- Sub-column row -->
<tr>
<template v-for="group in columnGroups" :key="group.label">
<th v-for="col in group.kinds" :key="col.kind" class="builds-th-sub">
{{ col.sub }}
<!-- Desktop table -->
<div v-else class="builds-desktop">
<div class="builds-table-wrap">
<table class="builds-table">
<thead>
<tr>
<th rowspan="2" class="builds-th-engine">Engine</th>
<th v-for="group in columnGroups" :key="group.label" :colspan="group.kinds.length" class="builds-th-group">
<i :class="group.icon" class="builds-group-icon"></i>
<span class="builds-group-label">{{ group.label }}</span>
</th>
</template>
</tr>
</thead>
<tbody>
<tr v-for="(info, platform) in data.platforms" :key="platform" class="builds-row">
<td class="builds-td-engine">{{ info.label }}</td>
<template v-for="group in columnGroups" :key="group.label">
<td v-for="col in group.kinds" :key="col.kind" class="builds-td-kind">
<i v-if="info.kinds.includes(col.kind)" class="fa-solid fa-check builds-check"></i>
<i v-else class="fa-solid fa-xmark builds-xmark"></i>
</td>
</template>
</tr>
</tbody>
</table>
</tr>
<tr>
<template v-for="group in columnGroups" :key="group.label">
<th v-for="col in group.kinds" :key="col.kind" class="builds-th-sub">
{{ col.sub }}
</th>
</template>
</tr>
</thead>
<tbody>
<tr v-for="(info, platform) in data.platforms" :key="platform" class="builds-row">
<td class="builds-td-engine">{{ info.label }}</td>
<template v-for="group in columnGroups" :key="group.label">
<td v-for="col in group.kinds" :key="col.kind" class="builds-td-kind">
<i v-if="info.kinds.includes(col.kind)" class="fa-solid fa-check builds-check"></i>
<i v-else class="fa-solid fa-xmark builds-xmark"></i>
</td>
</template>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Mobile cards -->
<div v-if="data" class="builds-mobile">
<div v-for="(info, platform) in data.platforms" :key="platform" class="builds-card">
<h3 class="builds-card-title">{{ info.label }}</h3>
<div v-for="group in columnGroups" :key="group.label" class="builds-card-group">
<div class="builds-card-group-header">
<i :class="group.icon" class="builds-card-group-icon"></i>
<span>{{ group.label }}</span>
</div>
<div class="builds-card-kinds">
<div v-for="col in group.kinds" :key="col.kind" class="builds-card-kind">
<i :class="info.kinds.includes(col.kind) ? 'fa-solid fa-check builds-check' : 'fa-solid fa-xmark builds-xmark'"></i>
<span class="builds-card-kind-label">{{ col.sub }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="builds-back">
@@ -160,6 +180,40 @@ onMounted(() => store.fetch())
.builds-xmark {
@apply text-gray-200 text-lg;
}
/* Responsive visibility */
.builds-desktop {
@apply hidden md:block;
}
.builds-mobile {
@apply md:hidden space-y-4;
}
/* Mobile cards */
.builds-card {
@apply bg-white rounded-2xl shadow-lg border border-gray-100 p-5;
}
.builds-card-title {
@apply text-lg font-bold text-gray-900 mb-4 pb-3 border-b border-gray-100;
}
.builds-card-group {
@apply py-2;
}
.builds-card-group-header {
@apply flex items-center gap-2 text-xs font-bold text-gray-500 uppercase tracking-wider mb-2;
}
.builds-card-group-icon {
@apply text-gray-400 text-sm;
}
.builds-card-kinds {
@apply flex flex-wrap gap-x-5 gap-y-1 pl-5 mb-2;
}
.builds-card-kind {
@apply flex items-center gap-1.5 text-sm;
}
.builds-card-kind-label {
@apply text-gray-600;
}
.builds-back {
@apply mt-8 text-center;
}