forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: add back button and centre icon on compare page (#941)
Co-authored-by: Daniel Roe <daniel@roe.dev>
authored by
rygrit
Daniel Roe
and committed by
GitHub
704987bb
c7ba252c
+14
-10
+7
-6
app/components/Compare/FacetCard.vue
+7
-6
app/components/Compare/FacetCard.vue
···
75
75
<!-- Facet header -->
76
76
<div class="flex items-center gap-1.5 px-3 py-2 bg-bg-subtle border-b border-border">
77
77
<span class="text-xs text-fg-muted uppercase tracking-wider font-medium">{{ label }}</span>
78
-
<span
79
-
v-if="description"
80
-
class="i-carbon:information w-3 h-3 text-fg-subtle"
81
-
:title="description"
82
-
aria-hidden="true"
83
-
/>
78
+
<TooltipApp v-if="description" :text="description" position="top">
79
+
<span
80
+
class="i-carbon:information w-3 h-3 text-fg-subtle"
81
+
:title="description"
82
+
aria-hidden="true"
83
+
/>
84
+
</TooltipApp>
84
85
</div>
85
86
86
87
<!-- Package values -->
+1
-1
app/components/Compare/PackageSelector.vue
+1
-1
app/components/Compare/PackageSelector.vue
···
75
75
:aria-label="$t('compare.selector.remove_package', { package: pkg })"
76
76
@click="removePackage(pkg)"
77
77
>
78
-
<span class="i-carbon:close w-3.5 h-3.5" aria-hidden="true" />
78
+
<span class="i-carbon:close flex items-center w-3.5 h-3.5" aria-hidden="true" />
79
79
</button>
80
80
</div>
81
81
</div>
+6
-3
app/pages/compare.vue
+6
-3
app/pages/compare.vue
···
1
1
<script setup lang="ts">
2
2
import { useRouteQuery } from '@vueuse/router'
3
3
4
-
const router = useRouter()
5
-
6
4
definePageMeta({
7
5
name: 'compare',
8
6
})
7
+
8
+
const router = useRouter()
9
9
10
10
// Sync packages with URL query param (stable ref - doesn't change on other query changes)
11
11
const packagesParam = useRouteQuery<string>('packages', '', { mode: 'replace' })
···
182
182
</section>
183
183
184
184
<!-- Empty state -->
185
-
<section v-else class="text-center py-16 border border-dashed border-border rounded-lg">
185
+
<section
186
+
v-else
187
+
class="text-center px-1.5 py-16 border border-dashed border-border rounded-lg"
188
+
>
186
189
<div class="i-carbon:compare w-12 h-12 text-fg-subtle mx-auto mb-4" aria-hidden="true" />
187
190
<h2 class="font-mono text-lg text-fg-muted mb-2">
188
191
{{ $t('compare.packages.empty_title') }}