[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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
··· 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>