forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: add RTL support to `PackageCard` (#336)
authored by
Joaquín Sánchez
and committed by
GitHub
88509beb
843e168f
+7
-5
+7
-5
app/components/PackageCard.vue
+7
-5
app/components/PackageCard.vue
···
40
40
class="absolute -inset-px rounded-lg bg-gradient-to-r from-accent/0 via-accent/20 to-accent/0 opacity-100 blur-sm -z-1 pointer-events-none motion-reduce:opacity-50"
41
41
aria-hidden="true"
42
42
/>
43
-
<div class="mb-2 flex items-baseline justify-between gap-2">
43
+
<div class="mb-2 flex items-baseline justify-start gap-2">
44
44
<component
45
45
:is="headingLevel ?? 'h3'"
46
46
class="font-mono text-sm sm:text-base font-medium text-fg group-hover:text-fg transition-colors duration-200 min-w-0 break-all"
···
56
56
>
57
57
<span
58
58
v-if="isExactMatch"
59
-
class="text-xs px-1.5 py-0.5 ml-2 rounded bg-bg-elevated border border-border-hover text-fg"
59
+
class="text-xs px-1.5 py-0.5 ms-2 rounded bg-bg-elevated border border-border-hover text-fg"
60
60
>{{ $t('search.exact_match') }}</span
61
61
>
62
62
</component>
63
+
<span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
63
64
<!-- Mobile: version next to package name -->
64
65
<div class="sm:hidden text-fg-subtle flex items-center gap-1.5 shrink-0">
65
66
<span
···
79
80
/>
80
81
</div>
81
82
</div>
82
-
<div class="flex justify-between items-start gap-4 sm:gap-8">
83
+
<div class="flex justify-start items-start gap-4 sm:gap-8">
83
84
<div class="min-w-0">
84
85
<p
85
86
v-if="result.package.description"
···
121
122
<div class="flex items-center gap-1.5">
122
123
<dt class="sr-only">{{ $t('package.card.weekly_downloads') }}</dt>
123
124
<dd class="flex items-center gap-1.5">
124
-
<span class="i-carbon-chart-line w-3.5 h-3.5 inline-block" aria-hidden="true" />
125
+
<span class="i-carbon:chart-line w-3.5 h-3.5 inline-block" aria-hidden="true" />
125
126
<span class="font-mono">{{ formatNumber(result.downloads.weekly) }}/w</span>
126
127
</dd>
127
128
</div>
128
129
</dl>
129
130
</div>
131
+
<span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
130
132
<!-- Desktop: version and downloads on right side -->
131
133
<div class="hidden sm:flex flex-col gap-2 shrink-0">
132
134
<div class="text-fg-subtle flex items-start gap-2 justify-end">
···
154
156
v-if="result.downloads?.weekly"
155
157
class="text-fg-subtle gap-2 flex items-center justify-end"
156
158
>
157
-
<span class="i-carbon-chart-line w-3.5 h-3.5 inline-block" aria-hidden="true" />
159
+
<span class="i-carbon:chart-line w-3.5 h-3.5 inline-block" aria-hidden="true" />
158
160
<span class="font-mono text-xs">
159
161
{{ formatNumber(result.downloads.weekly) }} {{ $t('common.per_week') }}
160
162
</span>