more fa icons

2026-08-03 22:16:58 +02:00
parent bd26c4be63
commit b69c307e0a
4 changed files with 70 additions and 49 deletions
@@ -120,7 +120,7 @@ export default {
    author: 'Author:',
    platform: 'Platform:',
    play: '▶ Play',
-    moreInfo: 'ℹ More Info',
+    moreInfo: 'More Info',
    downloads: 'downloads',
  },
  catalogShow: {
@@ -120,7 +120,7 @@ export default {
    author: 'Szerző:',
    platform: 'Platform:',
    play: '▶ Játék',
-    moreInfo: 'ℹ Részletek',
+    moreInfo: 'Részletek',
    downloads: 'letöltés',
  },
  catalogShow: {
@@ -48,7 +48,7 @@
                  class="btn-play-sm"
                >{{ t('catalog.play') }}</a>
                <RouterLink :to="`/catalog/${software.name}`" class="btn-info-sm">
-                  {{ t('catalog.moreInfo') }}
+                  <i class="fa-solid fa-circle-info"></i> {{ t('catalog.moreInfo') }}
                </RouterLink>
                <span v-if="getTotalDownloads(software.name)" class="text-xs text-gray-400 font-medium ml-1">
                  ↓ {{ getTotalDownloads(software.name) }} {{ t('catalog.downloads') }}
@@ -48,7 +48,7 @@
              </div>
            </div>
            <h2 class="text-xl font-bold text-gray-900 mb-6 flex items-center gap-2">
-              <span class="text-purple-600">ℹ</span> {{ t('catalogShow.projectInfo') }}
+              <i class="fa-solid fa-circle-info text-purple-600"></i> {{ t('catalogShow.projectInfo') }}
            </h2>
            <dl class="space-y-4">
              <div>
@@ -100,7 +100,7 @@
              <table class="w-full text-sm">
                <tbody>
                  <tr v-for="asset in tableAssets(latestStable)" :key="asset.kind" class="border-b border-white/10 last:border-0">
-                    <td class="py-1.5 pr-6 text-indigo-100 whitespace-nowrap">{{ t('catalogShow.assetKind.' + asset.kind) }}</td>
+                    <td class="py-1.5 pr-6 text-indigo-100 whitespace-nowrap"><i :class="assetKindIcon(asset.kind)" class="w-4 text-center"></i> {{ t('catalogShow.assetKind.' + asset.kind) }}</td>
                    <td class="py-1.5 pr-6 w-full font-mono text-xs text-indigo-200/80 break-all">{{ assetFileName(asset.path) }}</td>
                    <td class="py-1.5 text-right whitespace-nowrap">
                      <a v-if="asset.kind === 'docs'" :href="asset.path" target="_blank" class="text-white font-bold hover:underline">{{ t('catalogShow.assetOpen') }}</a>
@@ -126,53 +126,65 @@
                      <th class="px-8 py-4">{{ t('catalogShow.releaseDate') }}</th>
                    </tr>
                  </thead>
-                  <tbody class="divide-y divide-gray-100">
-                    <tr v-for="release in stableReleases" :key="release.version" class="hover:bg-gray-50/50 transition-colors">
-                      <td class="px-8 py-4">
-                        <div class="flex items-center gap-2 mb-2">
-                          <span class="font-bold text-gray-900 text-lg">{{ release.version }}</span>
-                          <span v-if="release.downloadCount" class="text-xs text-gray-400 font-medium">↓ {{ release.downloadCount }}</span>
-                        </div>
-                        <a v-if="release.htmlFolderPath" :href="release.htmlFolderPath" target="_blank" class="text-purple-600 hover:text-purple-900 font-bold text-sm">{{ t('catalogShow.play') }}</a>
-                        <table v-if="tableAssets(release).length" class="mt-2 w-full text-sm">
-                          <tbody>
-                            <tr v-for="asset in tableAssets(release)" :key="asset.kind" class="border-b border-gray-100 last:border-0">
-                              <td class="py-1 pr-6 text-gray-500 whitespace-nowrap">{{ t('catalogShow.assetKind.' + asset.kind) }}</td>
-                              <td class="py-1 pr-6 w-full font-mono text-xs text-gray-400 break-all">{{ assetFileName(asset.path) }}</td>
-                              <td class="py-1 text-right whitespace-nowrap">
-                                <a v-if="asset.kind === 'docs'" :href="asset.path" target="_blank" class="text-blue-600 hover:text-blue-900 font-bold">{{ t('catalogShow.assetOpen') }}</a>
-                                <a v-else :href="downloadUrl(asset.path)" class="text-blue-600 hover:text-blue-900 font-bold">{{ t('catalogShow.assetDownload') }}</a>
-                              </td>
-                            </tr>
-                          </tbody>
-                        </table>
-                      </td>
-                      <td class="px-8 py-4 text-gray-500 align-top pt-5">{{ formatDateTime(release.UpdatedAt) }}</td>
-                    </tr>
+                  <tbody>
+                    <template v-for="release in stableReleases" :key="release.version">
+                      <tr class="border-t border-gray-100 first:border-t-0 hover:bg-gray-50/50 transition-colors">
+                        <td class="px-8 py-4">
+                          <div class="flex items-center gap-2 mb-2">
+                            <span class="font-bold text-gray-900 text-lg">{{ release.version }}</span>
+                            <span v-if="release.downloadCount" class="text-xs text-gray-400 font-medium">↓ {{ release.downloadCount }}</span>
+                          </div>
+                          <a v-if="release.htmlFolderPath" :href="release.htmlFolderPath" target="_blank" class="text-purple-600 hover:text-purple-900 font-bold text-sm">{{ t('catalogShow.play') }}</a>
+                        </td>
+                        <td class="px-8 py-4 text-gray-500 align-top pt-5">{{ formatDateTime(release.UpdatedAt) }}</td>
+                      </tr>
+                      <tr v-if="tableAssets(release).length">
+                        <td colspan="2" class="px-8 pb-4 pt-0">
+                          <table class="w-full text-sm">
+                            <tbody>
+                              <tr v-for="asset in tableAssets(release)" :key="asset.kind" class="border-b border-gray-100 last:border-0">
+                                <td class="py-1 pr-6 text-gray-500 whitespace-nowrap"><i :class="assetKindIcon(asset.kind)" class="w-4 text-center"></i> {{ t('catalogShow.assetKind.' + asset.kind) }}</td>
+                                <td class="py-1 pr-6 w-full font-mono text-xs text-gray-400 break-all">{{ assetFileName(asset.path) }}</td>
+                                <td class="py-1 text-right whitespace-nowrap">
+                                  <a v-if="asset.kind === 'docs'" :href="asset.path" target="_blank" class="text-blue-600 hover:text-blue-900 font-bold">{{ t('catalogShow.assetOpen') }}</a>
+                                  <a v-else :href="downloadUrl(asset.path)" class="text-blue-600 hover:text-blue-900 font-bold">{{ t('catalogShow.assetDownload') }}</a>
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </td>
+                      </tr>
+                    </template>

-                    <tr v-if="devReleases.length > 0" class="bg-yellow-50/30">
+                    <tr v-if="devReleases.length > 0" class="border-t border-gray-100 bg-yellow-50/30">
                      <td colspan="2" class="px-8 py-3 text-[10px] font-black text-yellow-700 uppercase tracking-tighter">{{ t('catalogShow.devVersions') }}</td>
                    </tr>

-                    <tr v-for="release in devReleases" :key="release.version" class="bg-yellow-50/10 hover:bg-yellow-50/30 transition-colors">
-                      <td class="px-8 py-4">
-                        <div class="font-bold text-yellow-800 text-lg mb-2">{{ release.version }}</div>
-                        <a v-if="release.htmlFolderPath" :href="release.htmlFolderPath" target="_blank" class="text-purple-600 hover:text-purple-900 font-bold text-sm">{{ t('catalogShow.play') }}</a>
-                        <table v-if="tableAssets(release).length" class="mt-2 w-full text-sm">
-                          <tbody>
-                            <tr v-for="asset in tableAssets(release)" :key="asset.kind" class="border-b border-gray-100 last:border-0">
-                              <td class="py-1 pr-6 text-gray-500 whitespace-nowrap">{{ t('catalogShow.assetKind.' + asset.kind) }}</td>
-                              <td class="py-1 pr-6 w-full font-mono text-xs text-gray-400 break-all">{{ assetFileName(asset.path) }}</td>
-                              <td class="py-1 text-right whitespace-nowrap">
-                                <a v-if="asset.kind === 'docs'" :href="asset.path" target="_blank" class="text-blue-600 hover:text-blue-900 font-bold">{{ t('catalogShow.assetOpen') }}</a>
-                                <a v-else :href="downloadUrl(asset.path)" class="text-blue-600 hover:text-blue-900 font-bold">{{ t('catalogShow.assetDownload') }}</a>
-                              </td>
-                            </tr>
-                          </tbody>
-                        </table>
-                      </td>
-                      <td class="px-8 py-4 text-gray-500 align-top pt-5">{{ formatDateTime(release.UpdatedAt) }}</td>
-                    </tr>
+                    <template v-for="release in devReleases" :key="release.version">
+                      <tr class="border-t border-gray-100 bg-yellow-50/10 hover:bg-yellow-50/30 transition-colors">
+                        <td class="px-8 py-4">
+                          <div class="font-bold text-yellow-800 text-lg mb-2">{{ release.version }}</div>
+                          <a v-if="release.htmlFolderPath" :href="release.htmlFolderPath" target="_blank" class="text-purple-600 hover:text-purple-900 font-bold text-sm">{{ t('catalogShow.play') }}</a>
+                        </td>
+                        <td class="px-8 py-4 text-gray-500 align-top pt-5">{{ formatDateTime(release.UpdatedAt) }}</td>
+                      </tr>
+                      <tr v-if="tableAssets(release).length" class="bg-yellow-50/10">
+                        <td colspan="2" class="px-8 pb-4 pt-0">
+                          <table class="w-full text-sm">
+                            <tbody>
+                              <tr v-for="asset in tableAssets(release)" :key="asset.kind" class="border-b border-gray-100 last:border-0">
+                                <td class="py-1 pr-6 text-gray-500 whitespace-nowrap"><i :class="assetKindIcon(asset.kind)" class="w-4 text-center"></i> {{ t('catalogShow.assetKind.' + asset.kind) }}</td>
+                                <td class="py-1 pr-6 w-full font-mono text-xs text-gray-400 break-all">{{ assetFileName(asset.path) }}</td>
+                                <td class="py-1 text-right whitespace-nowrap">
+                                  <a v-if="asset.kind === 'docs'" :href="asset.path" target="_blank" class="text-blue-600 hover:text-blue-900 font-bold">{{ t('catalogShow.assetOpen') }}</a>
+                                  <a v-else :href="downloadUrl(asset.path)" class="text-blue-600 hover:text-blue-900 font-bold">{{ t('catalogShow.assetDownload') }}</a>
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </td>
+                      </tr>
+                    </template>
                  </tbody>
                </table>
              </div>
@@ -195,7 +207,7 @@
                  <table v-if="tableAssets(release).length" class="mt-3 w-full text-sm">
                    <tbody>
                      <tr v-for="asset in tableAssets(release)" :key="asset.kind" class="border-b border-gray-100 last:border-0">
-                        <td class="py-1.5 pr-4 text-gray-500 whitespace-nowrap align-top">{{ t('catalogShow.assetKind.' + asset.kind) }}</td>
+                        <td class="py-1.5 pr-4 text-gray-500 whitespace-nowrap align-top"><i :class="assetKindIcon(asset.kind)" class="w-4 text-center"></i> {{ t('catalogShow.assetKind.' + asset.kind) }}</td>
                        <td class="py-1.5 pr-4 w-full font-mono text-xs text-gray-400 break-all align-top">{{ assetFileName(asset.path) }}</td>
                        <td class="py-1.5 text-right whitespace-nowrap align-top">
                          <a v-if="asset.kind === 'docs'" :href="asset.path" target="_blank" class="text-blue-600 font-bold">{{ t('catalogShow.assetOpen') }}</a>
@@ -296,6 +308,15 @@ const tableAssets = (release: Release) =>

 const assetFileName = (path: string) => path.replace(/\/+$/, '').split('/').pop() ?? ''

+const assetKindIcon = (kind: string) =>
+  kind.startsWith('win_') ? 'fa-brands fa-windows'
+    : kind.startsWith('linux_') ? 'fa-brands fa-linux'
+      : kind.startsWith('mac_') ? 'fa-brands fa-apple'
+        : kind === 'cartridge' ? 'fa-solid fa-gamepad'
+          : kind === 'source' ? 'fa-solid fa-code'
+            : kind === 'docs' ? 'fa-solid fa-book'
+              : ''
+
 onMounted(async () => {
  try {
    await store.fetchAll()