forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix(ui): align like button (#926)
authored by
Wojciech Maj
and committed by
GitHub
95f8c028
36999892
+27
-25
+27
-25
app/pages/package/[...package].vue
+27
-25
app/pages/package/[...package].vue
···
542
542
543
543
<!-- Package metrics (module format, types) -->
544
544
<ClientOnly>
545
-
<PackageMetricsBadges
546
-
v-if="resolvedVersion"
547
-
:package-name="pkg.name"
548
-
:version="resolvedVersion"
549
-
:is-binary="isBinaryOnly"
550
-
class="self-baseline ms-1 sm:ms-2"
551
-
/>
552
-
553
-
<!-- Package likes -->
554
-
<button
555
-
@click="likeAction"
556
-
type="button"
557
-
class="inline-flex items-center gap-1.5 font-mono text-sm text-fg hover:text-fg-muted transition-colors duration-200"
558
-
:title="$t('package.links.like')"
559
-
>
560
-
<span
561
-
:class="
562
-
likesData?.userHasLiked
563
-
? 'i-lucide-heart-minus text-red-500'
564
-
: 'i-lucide-heart-plus'
565
-
"
566
-
class="w-4 h-4"
567
-
aria-hidden="true"
545
+
<div class="flex gap-2 sm:gap-3 flex-wrap">
546
+
<PackageMetricsBadges
547
+
v-if="resolvedVersion"
548
+
:package-name="pkg.name"
549
+
:version="resolvedVersion"
550
+
:is-binary="isBinaryOnly"
551
+
class="self-baseline ms-1 sm:ms-2"
568
552
/>
569
-
<span>{{ formatCompactNumber(likesData?.totalLikes ?? 0, { decimals: 1 }) }}</span>
570
-
</button>
553
+
554
+
<!-- Package likes -->
555
+
<button
556
+
@click="likeAction"
557
+
type="button"
558
+
class="inline-flex items-center gap-1.5 font-mono text-sm text-fg hover:text-fg-muted transition-colors duration-200"
559
+
:title="$t('package.links.like')"
560
+
>
561
+
<span
562
+
:class="
563
+
likesData?.userHasLiked
564
+
? 'i-lucide-heart-minus text-red-500'
565
+
: 'i-lucide-heart-plus'
566
+
"
567
+
class="w-4 h-4"
568
+
aria-hidden="true"
569
+
/>
570
+
<span>{{ formatCompactNumber(likesData?.totalLikes ?? 0, { decimals: 1 }) }}</span>
571
+
</button>
572
+
</div>
571
573
572
574
<template #fallback>
573
575
<div class="flex items-center gap-1.5 self-baseline ms-1 sm:ms-2">