more fa icons for matrix
This commit is contained in:
@@ -34,7 +34,10 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(info, platform) in data.platforms" :key="platform" class="builds-row">
|
||||
<td class="builds-td-engine">{{ info.label }}</td>
|
||||
<td class="builds-td-engine">
|
||||
<i :class="engineIcons[platform as string] || defaultEngineIcon" class="builds-engine-icon"></i>
|
||||
{{ info.label }}
|
||||
</td>
|
||||
<template v-for="group in columnGroups" :key="group.label">
|
||||
<td v-for="(col, colIdx) in group.kinds" :key="col.kind" :class="['builds-td-kind', group.color, { 'builds-group-start': colIdx === 0 }]">
|
||||
<i v-if="info.kinds.includes(col.kind)" class="fa-solid fa-check builds-check"></i>
|
||||
@@ -50,7 +53,10 @@
|
||||
<!-- 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>
|
||||
<h3 class="builds-card-title">
|
||||
<i :class="engineIcons[platform as string] || defaultEngineIcon" class="builds-engine-icon"></i>
|
||||
{{ info.label }}
|
||||
</h3>
|
||||
<div v-for="group in columnGroups" :key="group.label" :class="['builds-card-group', group.color]">
|
||||
<div class="builds-card-group-header">
|
||||
<i :class="group.icon" class="builds-card-group-icon"></i>
|
||||
@@ -86,6 +92,17 @@ const { t } = useI18n()
|
||||
const store = useBuildsStore()
|
||||
const { data, error } = storeToRefs(store)
|
||||
|
||||
const engineIcons: Record<string, string> = {
|
||||
tic80: 'fa-solid fa-tv',
|
||||
ebitengine: 'fa-brands fa-golang',
|
||||
love: 'fa-solid fa-heart',
|
||||
godot: 'fa-solid fa-robot',
|
||||
c64: 'fa-solid fa-floppy-disk',
|
||||
bevy: 'fa-solid fa-cubes',
|
||||
phaser: 'fa-solid fa-bolt',
|
||||
}
|
||||
const defaultEngineIcon = 'fa-solid fa-cube'
|
||||
|
||||
const columnGroups = [
|
||||
{
|
||||
label: 'Windows',
|
||||
@@ -232,6 +249,9 @@ th.group-gray.builds-group-start, td.group-gray.builds-group-start { @apply bord
|
||||
.builds-td-engine {
|
||||
@apply px-6 py-4 font-bold text-gray-900 whitespace-nowrap;
|
||||
}
|
||||
.builds-engine-icon {
|
||||
@apply text-gray-400 text-sm mr-2;
|
||||
}
|
||||
.builds-td-kind {
|
||||
@apply px-3 py-4 text-center;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user