forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix(ui): make package name selectable (#594)
Co-authored-by: Daniel Roe <daniel@roe.dev>
authored by
Adebesin Tolulope (Lope)
Daniel Roe
and committed by
GitHub
df3cc513
22169b2f
+31
-16
+31
-16
app/pages/package/[...package].vue
+31
-16
app/pages/package/[...package].vue
···
418
418
>
419
419
<!-- Package name and version -->
420
420
<div class="flex items-baseline gap-2 sm:gap-3 flex-wrap min-w-0">
421
-
<h1
422
-
class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
423
-
:title="pkg.name"
424
-
>
425
-
<NuxtLink
426
-
v-if="orgName"
427
-
:to="{ name: 'org', params: { org: orgName } }"
428
-
class="text-fg-muted hover:text-fg transition-colors duration-200"
429
-
>@{{ orgName }}</NuxtLink
430
-
><span v-if="orgName">/</span>
421
+
<div class="group relative flex flex-col items-start min-w-0">
422
+
<h1
423
+
class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
424
+
:title="pkg.name"
425
+
>
426
+
<NuxtLink
427
+
v-if="orgName"
428
+
:to="{ name: 'org', params: { org: orgName } }"
429
+
class="text-fg-muted hover:text-fg transition-colors duration-200"
430
+
>
431
+
@{{ orgName }}
432
+
</NuxtLink>
433
+
<span v-if="orgName">/</span>
434
+
<span :class="{ 'text-fg-muted': orgName }">
435
+
{{ orgName ? pkg.name.replace(`@${orgName}/`, '') : pkg.name }}
436
+
</span>
437
+
</h1>
438
+
439
+
<!-- Floating copy button -->
431
440
<TooltipAnnounce :text="$t('common.copied')" :isVisible="copiedPkgName">
432
441
<button
442
+
type="button"
433
443
@click="copyPkgName()"
434
-
aria-describedby="copy-pkg-name"
435
-
class="cursor-copy active:scale-95 transition-transform"
444
+
class="copy-button absolute z-20 left-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap text-fg-muted bg-bg border-border opacity-0 -translate-y-1 pointer-events-none transition-all duration-150 group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/40"
445
+
:aria-label="$t('package.copy_name')"
436
446
>
437
-
{{ orgName ? pkg.name.replace(`@${orgName}/`, '') : pkg.name }}
447
+
<span class="i-carbon:copy w-3.5 h-3.5" aria-hidden="true" />
448
+
{{ $t('package.copy_name') }}
438
449
</button>
439
450
</TooltipAnnounce>
440
-
</h1>
441
-
442
-
<span id="copy-pkg-name" class="sr-only">{{ $t('package.copy_name') }}</span>
451
+
</div>
443
452
<span
444
453
v-if="resolvedVersion"
445
454
class="inline-flex items-baseline gap-1.5 font-mono text-base sm:text-lg text-fg-muted shrink-0"
···
1213
1222
.package-page > * {
1214
1223
max-width: 100%;
1215
1224
min-width: 0;
1225
+
}
1226
+
1227
+
@media (hover: none) {
1228
+
.copy-button {
1229
+
display: none;
1230
+
}
1216
1231
}
1217
1232
</style>