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

matrix colors

Browse Source
This commit is contained in:
mr.zero
2026-08-04 10:07:01 +02:00
parent 8b72599b3b
commit 0eb507a977
1 changed files with 76 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/page/builds/BuildsIndexPage.vue
+76 -12
View File
@@ -18,14 +18,14 @@
<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">
<th v-for="group in columnGroups" :key="group.label" :colspan="group.kinds.length" :class="['builds-th-group', group.color]">
<i :class="group.icon" class="builds-group-icon"></i>
<span class="builds-group-label">{{ group.label }}</span>
</th>
</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">
<th v-for="(col, colIdx) in group.kinds" :key="col.kind" :class="['builds-th-sub', group.color, { 'builds-group-start': colIdx === 0 }]">
{{ col.sub }}
</th>
</template>
@@ -35,7 +35,7 @@
<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">
<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>
<i v-else class="fa-solid fa-xmark builds-xmark"></i>
</td>
@@ -50,7 +50,7 @@
<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 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>
<span>{{ group.label }}</span>
@@ -89,6 +89,7 @@ const columnGroups = [
{
label: 'Windows',
icon: 'fa-brands fa-windows',
color: 'group-blue',
kinds: [
{ kind: 'win_x64', sub: '64 bit' },
{ kind: 'win_x86', sub: '32 bit' },
@@ -97,6 +98,7 @@ const columnGroups = [
{
label: 'Linux',
icon: 'fa-brands fa-linux',
color: 'group-amber',
kinds: [
{ kind: 'linux_x64', sub: '64 bit' },
],
@@ -104,6 +106,7 @@ const columnGroups = [
{
label: 'Mac',
icon: 'fa-brands fa-apple',
color: 'group-slate',
kinds: [
{ kind: 'mac_x64', sub: 'Intel' },
{ kind: 'mac_arm64', sub: 'ARM' },
@@ -113,6 +116,7 @@ const columnGroups = [
{
label: 'Web',
icon: 'fa-solid fa-globe',
color: 'group-green',
kinds: [
{ kind: 'html', sub: 'HTML5' },
],
@@ -120,6 +124,7 @@ const columnGroups = [
{
label: 'Cartridge',
icon: 'fa-solid fa-gamepad',
color: 'group-purple',
kinds: [
{ kind: 'cartridge', sub: 'Native' },
],
@@ -127,6 +132,7 @@ const columnGroups = [
{
label: 'Others',
icon: 'fa-solid fa-folder-open',
color: 'group-gray',
kinds: [
{ kind: 'source', sub: 'Source' },
{ kind: 'docs', sub: 'Docs' },
@@ -154,19 +160,70 @@ onMounted(() => store.fetch())
@apply px-6 py-4 text-left text-xs font-bold text-gray-400 uppercase tracking-widest bg-gray-50 border-b border-gray-200;
}
.builds-th-group {
@apply px-2 py-3 text-center bg-gray-50 border-b border-gray-200 border-l border-gray-200;
@apply px-2 py-3 text-center border-b border-gray-200;
}
.builds-group-icon {
@apply text-gray-500 text-base;
@apply text-base;
}
.builds-group-label {
@apply ml-1.5 text-xs font-bold text-gray-500 uppercase tracking-wider;
@apply ml-1.5 text-xs font-bold uppercase tracking-wider;
}
.builds-th-sub {
@apply px-3 py-2 text-center text-[10px] font-bold text-gray-400 uppercase tracking-wider bg-gray-50/50;
@apply px-3 py-2 text-center text-[10px] font-bold uppercase tracking-wider;
}
.builds-group-start {
@apply border-l-2;
}
/* Group color themes */
.group-blue .builds-group-icon,
.group-blue .builds-group-label { @apply text-blue-500; }
.th-group.group-blue, th.group-blue { background-color: rgb(239 246 255); }
td.group-blue { background-color: rgb(239 246 255 / 0.4); }
th.group-blue.builds-group-start, td.group-blue.builds-group-start { @apply border-l-blue-300; }
.group-amber .builds-group-icon,
.group-amber .builds-group-label { @apply text-amber-600; }
th.group-amber { background-color: rgb(255 251 235); }
td.group-amber { background-color: rgb(255 251 235 / 0.4); }
th.group-amber.builds-group-start, td.group-amber.builds-group-start { @apply border-l-amber-300; }
.group-slate .builds-group-icon,
.group-slate .builds-group-label { @apply text-slate-500; }
th.group-slate { background-color: rgb(248 250 252); }
td.group-slate { background-color: rgb(248 250 252 / 0.4); }
th.group-slate.builds-group-start, td.group-slate.builds-group-start { @apply border-l-slate-300; }
.group-green .builds-group-icon,
.group-green .builds-group-label { @apply text-emerald-500; }
th.group-green { background-color: rgb(236 253 245); }
td.group-green { background-color: rgb(236 253 245 / 0.4); }
th.group-green.builds-group-start, td.group-green.builds-group-start { @apply border-l-emerald-300; }
.group-purple .builds-group-icon,
.group-purple .builds-group-label { @apply text-purple-500; }
th.group-purple { background-color: rgb(250 245 255); }
td.group-purple { background-color: rgb(250 245 255 / 0.4); }
th.group-purple.builds-group-start, td.group-purple.builds-group-start { @apply border-l-purple-300; }
.group-gray .builds-group-icon,
.group-gray .builds-group-label { @apply text-gray-500; }
th.group-gray { background-color: rgb(249 250 251); }
td.group-gray { background-color: rgb(249 250 251 / 0.4); }
th.group-gray.builds-group-start, td.group-gray.builds-group-start { @apply border-l-gray-300; }
/* Sub-header inherits group tint */
.builds-th-sub.group-blue { @apply text-blue-400; }
.builds-th-sub.group-amber { @apply text-amber-500; }
.builds-th-sub.group-slate { @apply text-slate-400; }
.builds-th-sub.group-green { @apply text-emerald-400; }
.builds-th-sub.group-purple { @apply text-purple-400; }
.builds-th-sub.group-gray { @apply text-gray-400; }
.builds-row {
@apply border-t border-gray-100 hover:bg-gray-50/50 transition-colors;
@apply border-t border-gray-100 transition-colors;
}
.builds-row:hover td {
filter: brightness(0.97);
}
.builds-td-engine {
@apply px-6 py-4 font-bold text-gray-900 whitespace-nowrap;
@@ -196,13 +253,20 @@ onMounted(() => store.fetch())
@apply text-lg font-bold text-gray-900 mb-4 pb-3 border-b border-gray-100;
}
.builds-card-group {
@apply py-2;
@apply py-2 px-3 rounded-lg my-1;
}
.builds-card-group.group-blue { background-color: rgb(239 246 255 / 0.5); }
.builds-card-group.group-amber { background-color: rgb(255 251 235 / 0.5); }
.builds-card-group.group-slate { background-color: rgb(248 250 252 / 0.5); }
.builds-card-group.group-green { background-color: rgb(236 253 245 / 0.5); }
.builds-card-group.group-purple { background-color: rgb(250 245 255 / 0.5); }
.builds-card-group.group-gray { background-color: rgb(249 250 251 / 0.5); }
.builds-card-group-header {
@apply flex items-center gap-2 text-xs font-bold text-gray-500 uppercase tracking-wider mb-2;
@apply flex items-center gap-2 text-xs font-bold uppercase tracking-wider mb-2;
}
.builds-card-group-icon {
@apply text-gray-400 text-sm;
@apply text-sm;
}
.builds-card-kinds {
@apply flex flex-wrap gap-x-5 gap-y-1 pl-5 mb-2;