forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: display tooltips on focus for install size + create command (#919)
authored by
Daniel Roe
and committed by
GitHub
191510b4
e1c4c150
+17
-13
+11
-12
app/components/Terminal/Install.vue
+11
-12
app/components/Terminal/Install.vue
···
200
200
<span class="text-fg-subtle font-mono text-sm select-none"
201
201
># {{ $t('package.create.title') }}</span
202
202
>
203
-
<NuxtLink
204
-
:to="`/package/${createPackageInfo.packageName}`"
205
-
class="text-fg-muted hover:text-fg text-xs transition-colors focus-visible:outline-accent/70 rounded"
206
-
:title="$t('package.create.view', { packageName: createPackageInfo.packageName })"
203
+
<TooltipApp
204
+
:text="$t('package.create.view', { packageName: createPackageInfo.packageName })"
207
205
>
208
-
<TooltipApp
209
-
:text="$t('package.create.view', { packageName: createPackageInfo.packageName })"
206
+
<NuxtLink
207
+
:to="`/package/${createPackageInfo.packageName}`"
208
+
class="inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 text-fg-muted hover:text-fg text-xs transition-colors focus-visible:outline-2 focus-visible:outline-accent/70 rounded"
210
209
>
211
-
<span class="i-carbon:information w-3 h-3 mt-1" aria-hidden="true" />
212
-
</TooltipApp>
213
-
<span class="sr-only">{{
214
-
$t('package.create.view', { packageName: createPackageInfo.packageName })
215
-
}}</span>
216
-
</NuxtLink>
210
+
<span class="i-carbon:information w-3 h-3" aria-hidden="true" />
211
+
<span class="sr-only">{{
212
+
$t('package.create.view', { packageName: createPackageInfo.packageName })
213
+
}}</span>
214
+
</NuxtLink>
215
+
</TooltipApp>
217
216
</div>
218
217
219
218
<div
+6
-1
app/pages/package/[...package].vue
+6
-1
app/pages/package/[...package].vue
···
863
863
<dt class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-1">
864
864
{{ $t('package.stats.install_size') }}
865
865
<TooltipApp :text="sizeTooltip">
866
-
<span class="i-carbon:information w-3 h-3 text-fg-subtle" aria-hidden="true" />
866
+
<span
867
+
tabindex="0"
868
+
class="inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 text-fg-subtle cursor-help focus-visible:outline-2 focus-visible:outline-accent/70 rounded"
869
+
>
870
+
<span class="i-carbon:information w-3 h-3" aria-hidden="true" />
871
+
</span>
867
872
</TooltipApp>
868
873
</dt>
869
874
<dd class="font-mono text-sm text-fg">