forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat(ui): add mobile buttons for package nav, and wrap badges (#1188)
authored by
Daniel Roe
and committed by
GitHub
e77dcf95
188e8876
+57
-66
+3
-3
app/components/Package/Skeleton.vue
+3
-3
app/components/Package/Skeleton.vue
···
8
8
>
9
9
<!-- Package header — matches area-header in [...name].vue -->
10
10
<header class="area-header sticky top-14 z-1 bg-[--bg] py-2">
11
-
<div class="flex items-baseline gap-2 sm:gap-3 flex-wrap min-w-0">
11
+
<div class="flex items-baseline gap-x-2 gap-y-1 sm:gap-x-3 flex-wrap min-w-0">
12
12
<!-- Package name -->
13
13
<div class="min-w-0">
14
14
<h1 class="font-mono text-2xl sm:text-3xl font-medium">
···
19
19
<span class="inline-flex items-baseline font-mono text-base sm:text-lg shrink-0">
20
20
<SkeletonInline class="h-6 w-20" />
21
21
</span>
22
-
<!-- Metrics badges placeholder -->
23
-
<div class="flex items-center gap-1.5 relative top-[5px] self-baseline ms-1 sm:ms-2">
22
+
<!-- Metrics badges -->
23
+
<div class="basis-full flex items-center gap-1.5 self-baseline">
24
24
<SkeletonBlock class="w-16 h-5.5 rounded" />
25
25
<SkeletonBlock class="w-13 h-5.5 rounded" />
26
26
<SkeletonBlock class="w-13 h-5.5 rounded" />
+54
-63
app/pages/package/[[org]]/[name].vue
+54
-63
app/pages/package/[[org]]/[name].vue
···
525
525
:class="{ 'border-b': isHeaderPinned }"
526
526
>
527
527
<!-- Package name and version -->
528
-
<div class="flex items-baseline gap-2 sm:gap-3 flex-wrap min-w-0">
528
+
<div class="flex items-baseline gap-x-2 gap-y-1 sm:gap-x-3 flex-wrap min-w-0">
529
529
<div class="group relative flex flex-col items-start min-w-0">
530
530
<h1
531
531
class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
···
605
605
>
606
606
</span>
607
607
608
-
<!-- Package metrics (module format, types) -->
609
-
<div class="flex gap-2 sm:gap-3 flex-wrap">
608
+
<!-- Docs + Code + Compare — inline on desktop, floating bottom bar on mobile -->
609
+
<ButtonGroup
610
+
v-if="resolvedVersion"
611
+
as="nav"
612
+
:aria-label="$t('package.navigation')"
613
+
class="package-nav hidden sm:flex max-sm:flex max-sm:fixed max-sm:z-40 max-sm:inset-is-50% max-sm:-translate-x-50% max-sm:bg-[--bg]/90 max-sm:backdrop-blur-md max-sm:border max-sm:border-border max-sm:rounded-md max-sm:shadow-md"
614
+
>
615
+
<LinkBase
616
+
variant="button-secondary"
617
+
v-if="docsLink"
618
+
:to="docsLink"
619
+
keyshortcut="d"
620
+
classicon="i-carbon:document"
621
+
>
622
+
{{ $t('package.links.docs') }}
623
+
</LinkBase>
624
+
<LinkBase
625
+
variant="button-secondary"
626
+
:to="{ name: 'code', params: { path: [pkg.name, 'v', resolvedVersion] } }"
627
+
keyshortcut="."
628
+
classicon="i-carbon:code"
629
+
>
630
+
{{ $t('package.links.code') }}
631
+
</LinkBase>
632
+
<LinkBase
633
+
variant="button-secondary"
634
+
:to="{ name: 'compare', query: { packages: pkg.name } }"
635
+
keyshortcut="c"
636
+
classicon="i-carbon:compare"
637
+
>
638
+
{{ $t('package.links.compare') }}
639
+
</LinkBase>
640
+
</ButtonGroup>
641
+
642
+
<!-- Package metrics -->
643
+
<div class="basis-full flex gap-2 sm:gap-3 flex-wrap">
610
644
<ClientOnly>
611
645
<PackageMetricsBadges
612
646
v-if="resolvedVersion"
613
647
:package-name="pkg.name"
614
648
:version="resolvedVersion"
615
649
:is-binary="isBinaryOnly"
616
-
class="self-baseline ms-1 sm:ms-2"
650
+
class="self-baseline"
617
651
/>
618
652
619
653
<!-- Package likes -->
···
654
688
</ButtonBase>
655
689
</TooltipApp>
656
690
<template #fallback>
657
-
<div
658
-
class="flex items-center gap-1.5 list-none m-0 p-0 relative top-[5px] self-baseline ms-1 sm:ms-2"
659
-
>
691
+
<div class="flex items-center gap-1.5 list-none m-0 p-0 self-baseline">
660
692
<SkeletonBlock class="w-16 h-5.5 rounded" />
661
693
<SkeletonBlock class="w-13 h-5.5 rounded" />
662
694
<SkeletonBlock class="w-13 h-5.5 rounded" />
···
665
697
</template>
666
698
</ClientOnly>
667
699
</div>
668
-
669
-
<!-- Internal navigation: Docs + Code + Compare (hidden on mobile, shown in external links instead) -->
670
-
<ButtonGroup
671
-
v-if="resolvedVersion"
672
-
as="nav"
673
-
:aria-label="$t('package.navigation')"
674
-
class="hidden sm:flex"
675
-
>
676
-
<LinkBase
677
-
variant="button-secondary"
678
-
v-if="docsLink"
679
-
:to="docsLink"
680
-
keyshortcut="d"
681
-
classicon="i-carbon:document"
682
-
>
683
-
{{ $t('package.links.docs') }}
684
-
</LinkBase>
685
-
<LinkBase
686
-
variant="button-secondary"
687
-
:to="{ name: 'code', params: { path: [pkg.name, 'v', resolvedVersion] } }"
688
-
keyshortcut="."
689
-
classicon="i-carbon:code"
690
-
>
691
-
{{ $t('package.links.code') }}
692
-
</LinkBase>
693
-
<LinkBase
694
-
variant="button-secondary"
695
-
:to="{ name: 'compare', query: { packages: pkg.name } }"
696
-
keyshortcut="c"
697
-
classicon="i-carbon:compare"
698
-
>
699
-
{{ $t('package.links.compare') }}
700
-
</LinkBase>
701
-
</ButtonGroup>
702
700
</div>
703
701
</header>
704
702
···
768
766
<li v-if="fundingUrl">
769
767
<LinkBase :to="fundingUrl" classicon="i-carbon:favorite">
770
768
{{ $t('package.links.fund') }}
771
-
</LinkBase>
772
-
</li>
773
-
<!-- Mobile-only: Docs + Code + Compare links -->
774
-
<li v-if="docsLink && displayVersion" class="sm:hidden">
775
-
<LinkBase :to="docsLink" classicon="i-carbon:document">
776
-
{{ $t('package.links.docs') }}
777
-
</LinkBase>
778
-
</li>
779
-
<li v-if="resolvedVersion" class="sm:hidden">
780
-
<LinkBase
781
-
:to="{ name: 'code', params: { path: [pkg.name, 'v', resolvedVersion] } }"
782
-
classicon="i-carbon:code"
783
-
>
784
-
{{ $t('package.links.code') }}
785
-
</LinkBase>
786
-
</li>
787
-
<li class="sm:hidden">
788
-
<LinkBase
789
-
:to="{ name: 'compare', query: { packages: pkg.name } }"
790
-
classicon="i-carbon:compare"
791
-
>
792
-
{{ $t('package.links.compare') }}
793
769
</LinkBase>
794
770
</li>
795
771
</ul>
···
1371
1347
@media (hover: none) {
1372
1348
.copy-button {
1373
1349
display: none;
1350
+
}
1351
+
}
1352
+
1353
+
/* Mobile floating nav: safe-area positioning + kbd hiding */
1354
+
@media (max-width: 639.9px) {
1355
+
.package-nav {
1356
+
bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
1357
+
}
1358
+
1359
+
.package-nav > :deep(a kbd) {
1360
+
display: none;
1361
+
}
1362
+
1363
+
.package-page {
1364
+
padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
1374
1365
}
1375
1366
}
1376
1367
</style>