forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: use full-width layout for org, user + package pages (#92)
authored by
Jonathan Hutchison
and committed by
GitHub
72cd3be7
61b7a447
+26
-24
+23
-21
app/components/PackageListControls.vue
+23
-21
app/components/PackageListControls.vue
···
52
52
<!-- Filter input -->
53
53
<div class="flex-1 relative">
54
54
<label for="package-filter" class="sr-only">Filter packages</label>
55
-
<span
56
-
class="absolute left-3 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
55
+
<div
56
+
class="absolute h-full w-10 flex items-center justify-center text-fg-subtle pointer-events-none"
57
57
aria-hidden="true"
58
58
>
59
-
<span class="i-carbon-search inline-block w-4 h-4" />
60
-
</span>
59
+
<div class="i-carbon-search inline-block w-4 h-4" />
60
+
</div>
61
61
<input
62
62
id="package-filter"
63
63
v-model="filterValue"
64
64
type="search"
65
65
:placeholder="placeholder ?? 'Filter packages...'"
66
66
autocomplete="off"
67
-
class="w-full bg-bg-subtle border border-border rounded-lg pl-9 pr-4 py-2 font-mono text-sm text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:(border-border-hover outline-none)"
67
+
class="w-full bg-bg-subtle border border-border rounded-lg pl-10 pr-4 py-2 font-mono text-sm text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:(border-border-hover outline-none)"
68
68
/>
69
69
</div>
70
70
71
71
<!-- Sort select -->
72
-
<div class="relative shrink-0">
72
+
<div class="relative shrink-0 flex">
73
73
<label for="package-sort" class="sr-only">Sort packages</label>
74
-
<select
75
-
id="package-sort"
76
-
v-model="sortValue"
77
-
class="appearance-none bg-bg-subtle border border-border rounded-lg pl-3 pr-8 py-2 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 focus:(border-border-hover outline-none) hover:border-border-hover"
78
-
>
79
-
<option v-for="option in sortOptions" :key="option.value" :value="option.value">
80
-
{{ option.label }}
81
-
</option>
82
-
</select>
83
-
<span
84
-
class="absolute right-3 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
85
-
aria-hidden="true"
86
-
>
87
-
<span class="i-carbon-chevron-down w-4 h-4" />
88
-
</span>
74
+
<div class="relative">
75
+
<select
76
+
id="package-sort"
77
+
v-model="sortValue"
78
+
class="appearance-none bg-bg-subtle border border-border rounded-lg pl-3 pr-8 py-2 font-mono text-sm text-fg cursor-pointer transition-colors duration-200 focus:(border-border-hover outline-none) hover:border-border-hover"
79
+
>
80
+
<option v-for="option in sortOptions" :key="option.value" :value="option.value">
81
+
{{ option.label }}
82
+
</option>
83
+
</select>
84
+
<div
85
+
class="absolute right-3 top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none"
86
+
aria-hidden="true"
87
+
>
88
+
<div class="i-carbon-chevron-down w-4 h-4" />
89
+
</div>
90
+
</div>
89
91
</div>
90
92
</div>
91
93
+1
-1
app/pages/@[org].vue
+1
-1
app/pages/@[org].vue
+1
-1
app/pages/[...package].vue
+1
-1
app/pages/[...package].vue
···
320
320
</script>
321
321
322
322
<template>
323
-
<main class="container py-8 sm:py-12 overflow-hidden">
323
+
<main class="container py-8 sm:py-12 overflow-hidden w-full">
324
324
<PackageSkeleton v-if="status === 'pending'" />
325
325
326
326
<article v-else-if="status === 'success' && pkg" class="animate-fade-in min-w-0">
+1
-1
app/pages/~[username].vue
+1
-1
app/pages/~[username].vue