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

new StoresIndexPage fix

Browse Source
This commit is contained in:
mr.zero
2026-08-18 21:33:08 +02:00
parent a99834abf0
commit 7c0f1479b4
2 changed files with 43 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/page/stores/CommandBlock.vue
+4 -2
View File
@@ -30,10 +30,12 @@ async function copy() {
<style scoped>
.cb {
@apply relative bg-gray-900 text-gray-100 rounded-xl overflow-x-auto;
@apply relative block bg-gray-900 text-gray-100 rounded-xl overflow-x-auto;
}
/* Explicitly margin-free: a `pre` carries a browser margin of its own, and the block is
spaced by whatever contains it — otherwise what follows ends up against it. */
.cb pre {
@apply p-4 pr-14 font-mono text-sm leading-relaxed;
@apply m-0 p-4 pr-14 font-mono text-sm leading-relaxed;
}
.cb-copy {
@apply absolute top-2 right-2 w-9 h-9 rounded-lg bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white transition-colors;
apps/frontend/src/page/stores/StoresIndexPage.vue
+39 -26
View File
@@ -74,20 +74,24 @@
</div>
<section class="st-section">
<p class="st-cmd-label">{{ t('stores.installTitle') }}</p>
<CommandBlock :command="current.installCmd" />
<template v-if="current.afterInstallCmd">
<p class="st-cmd-label">{{ t('stores.installThen') }}</p>
<CommandBlock :command="current.afterInstallCmd" />
</template>
<!-- The spacing lives on this one container. Margins on the labels and none on
the button row is what let the buttons sit flush against the last block. -->
<div class="st-cmds">
<p class="st-cmd-label">{{ t('stores.installTitle') }}</p>
<CommandBlock :command="current.installCmd" />
<template v-if="current.afterInstallCmd">
<p class="st-cmd-label">{{ t('stores.installThen') }}</p>
<CommandBlock :command="current.afterInstallCmd" />
</template>
<p class="st-cmd-label">{{ t('stores.useTitle') }}</p>
<CommandBlock :command="current.cliSnippet" />
<p class="st-cmd-label">{{ t('stores.useTitle') }}</p>
<CommandBlock :command="current.cliSnippet" />
<p class="st-cmd-label">{{ t('stores.uninstallTitle') }}</p>
<CommandBlock :command="current.uninstallCmd" />
<p class="st-cmd-label">{{ t('stores.uninstallTitle') }}</p>
<CommandBlock :command="current.uninstallCmd" />
</div>
<div class="st-links">
<div class="st-links st-links-after">
<a :href="current.wikiUrl" target="_blank" rel="noopener noreferrer" class="st-link st-link-indigo">
<i class="fa-solid fa-book"></i> {{ t('stores.docs') }}
</a>
@@ -99,20 +103,21 @@
</a>
</div>
</section>
</template>
<!-- The same either way: which catalog platforms end up installed. A list, not a
paragraph. -->
<section class="st-section">
<h2 class="st-section-title">{{ t('stores.platformsTitle') }}</h2>
<ul class="st-platforms">
<li v-for="p in platforms" :key="p.platform" class="st-platform">
<i :class="p.icon" class="st-platform-icon"></i>
<span class="st-platform-name">{{ p.label }}</span>
<code class="st-platform-ext">{{ p.ext }}</code>
</li>
</ul>
</section>
<!-- Which catalog platforms a store engine can put on a device. The app has no
such list to show: it installs whatever the catalog offers, and says so on the
cards themselves. -->
<section class="st-section">
<h2 class="st-section-title">{{ t('stores.platformsTitle') }}</h2>
<ul class="st-platforms">
<li v-for="p in platforms" :key="p.platform" class="st-platform">
<i :class="p.icon" class="st-platform-icon"></i>
<span class="st-platform-name">{{ p.label }}</span>
<code class="st-platform-ext">{{ p.ext }}</code>
</li>
</ul>
</section>
</template>
<p class="st-engine-line">
{{ t('stores.engineLine') }}
@@ -304,11 +309,19 @@ const engines = [
.st-view-active {
@apply text-emerald-700 border-emerald-500;
}
/* One rhythm for the whole command list, so nothing depends on a margin someone
remembered to add. */
.st-cmds {
@apply space-y-2;
}
.st-cmd-label {
@apply text-xs font-semibold uppercase tracking-wide text-gray-400 mt-4 mb-1;
@apply text-xs font-semibold uppercase tracking-wide text-gray-400 pt-3;
}
.st-cmd-label:first-child {
@apply mt-0;
@apply pt-0;
}
.st-links-after {
@apply mt-6;
}
.st-engine-line {
@apply text-sm text-gray-500 mb-6 flex flex-wrap items-center gap-x-3 gap-y-1;