forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix(ui): optimize table style (#812)
Co-authored-by: Daniel Roe <daniel@roe.dev>
authored by
Chris
Daniel Roe
and committed by
GitHub
4e7814a8
af3503ab
+28
-24
+16
-16
app/components/Package/Table.vue
+16
-16
app/components/Package/Table.vue
···
115
115
<!-- Name (always visible) -->
116
116
<th
117
117
scope="col"
118
-
class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
118
+
class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
119
119
:class="{
120
120
'cursor-pointer hover:text-fg transition-colors duration-200': isSortable('name'),
121
121
}"
···
149
149
<th
150
150
v-if="isColumnVisible('version')"
151
151
scope="col"
152
-
class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider"
152
+
class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none"
153
153
>
154
154
{{ $t(getColumnLabelKey('version')) }}
155
155
</th>
···
157
157
<th
158
158
v-if="isColumnVisible('description')"
159
159
scope="col"
160
-
class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider"
160
+
class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none"
161
161
>
162
162
{{ $t(getColumnLabelKey('description')) }}
163
163
</th>
···
165
165
<th
166
166
v-if="isColumnVisible('downloads')"
167
167
scope="col"
168
-
class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-end focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
168
+
class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
169
169
:class="{
170
170
'cursor-pointer hover:text-fg transition-colors duration-200':
171
171
isSortable('downloads'),
···
200
200
<th
201
201
v-if="isColumnVisible('updated')"
202
202
scope="col"
203
-
class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
203
+
class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
204
204
:class="{
205
205
'cursor-pointer hover:text-fg transition-colors duration-200': isSortable('updated'),
206
206
}"
···
234
234
<th
235
235
v-if="isColumnVisible('maintainers')"
236
236
scope="col"
237
-
class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider"
237
+
class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
238
238
>
239
239
{{ $t(getColumnLabelKey('maintainers')) }}
240
240
</th>
···
242
242
<th
243
243
v-if="isColumnVisible('keywords')"
244
244
scope="col"
245
-
class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider"
245
+
class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
246
246
>
247
247
{{ $t(getColumnLabelKey('keywords')) }}
248
248
</th>
···
250
250
<th
251
251
v-if="isColumnVisible('qualityScore')"
252
252
scope="col"
253
-
class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-end"
253
+
class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
254
254
>
255
255
{{ $t(getColumnLabelKey('qualityScore')) }}
256
256
</th>
···
258
258
<th
259
259
v-if="isColumnVisible('popularityScore')"
260
260
scope="col"
261
-
class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-end"
261
+
class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
262
262
>
263
263
{{ $t(getColumnLabelKey('popularityScore')) }}
264
264
</th>
···
266
266
<th
267
267
v-if="isColumnVisible('maintenanceScore')"
268
268
scope="col"
269
-
class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-end"
269
+
class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
270
270
>
271
271
{{ $t(getColumnLabelKey('maintenanceScore')) }}
272
272
</th>
···
274
274
<th
275
275
v-if="isColumnVisible('combinedScore')"
276
276
scope="col"
277
-
class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider text-end"
277
+
class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
278
278
>
279
279
{{ $t(getColumnLabelKey('combinedScore')) }}
280
280
</th>
···
282
282
<th
283
283
v-if="isColumnVisible('security')"
284
284
scope="col"
285
-
class="py-3 px-3 text-xs font-mono font-medium text-fg-muted uppercase tracking-wider"
285
+
class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none text-end"
286
286
>
287
287
{{ $t(getColumnLabelKey('security')) }}
288
288
</th>
···
301
301
<td v-if="isColumnVisible('description')" class="py-3 px-3">
302
302
<div class="h-4 w-48 bg-bg-muted rounded animate-pulse" />
303
303
</td>
304
-
<td v-if="isColumnVisible('downloads')" class="py-3 px-3 text-end">
304
+
<td v-if="isColumnVisible('downloads')" class="py-3 px-3">
305
305
<div class="h-4 w-16 bg-bg-muted rounded animate-pulse ms-auto" />
306
306
</td>
307
307
<td v-if="isColumnVisible('updated')" class="py-3 px-3">
308
-
<div class="h-4 w-20 bg-bg-muted rounded animate-pulse" />
308
+
<div class="h-4 w-20 bg-bg-muted rounded animate-pulse ms-auto" />
309
309
</td>
310
310
<td v-if="isColumnVisible('maintainers')" class="py-3 px-3">
311
-
<div class="h-4 w-24 bg-bg-muted rounded animate-pulse" />
311
+
<div class="h-4 w-24 bg-bg-muted rounded animate-pulse ms-auto" />
312
312
</td>
313
313
<td v-if="isColumnVisible('keywords')" class="py-3 px-3">
314
-
<div class="h-4 w-32 bg-bg-muted rounded animate-pulse" />
314
+
<div class="h-4 w-32 bg-bg-muted rounded animate-pulse ms-auto" />
315
315
</td>
316
316
</tr>
317
317
</template>
+11
-7
app/components/Package/TableRow.vue
+11
-7
app/components/Package/TableRow.vue
···
44
44
45
45
<template>
46
46
<tr
47
-
class="border-b border-border hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none focus:bg-bg-muted"
47
+
class="group border-b border-border hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none focus:bg-bg-muted"
48
48
tabindex="0"
49
49
:data-result-index="index"
50
50
>
···
52
52
<td class="py-2 px-3">
53
53
<NuxtLink
54
54
:to="packageUrl"
55
-
class="font-mono text-sm text-fg hover:text-accent-muted transition-colors duration-200"
55
+
class="font-mono text-sm text-fg hover:text-accent-fallback transition-colors duration-200"
56
56
>
57
57
{{ pkg.name }}
58
58
</NuxtLink>
···
80
80
</td>
81
81
82
82
<!-- Updated -->
83
-
<td v-if="isColumnVisible('updated')" class="py-2 px-3 font-mono text-xs text-fg-muted">
83
+
<td
84
+
v-if="isColumnVisible('updated')"
85
+
class="py-2 px-3 font-mono text-end text-xs text-fg-muted"
86
+
>
84
87
<DateTime
85
88
v-if="updatedDate"
86
89
:datetime="updatedDate"
···
92
95
</td>
93
96
94
97
<!-- Maintainers -->
95
-
<td v-if="isColumnVisible('maintainers')" class="py-2 px-3 text-sm text-fg-muted">
98
+
<td v-if="isColumnVisible('maintainers')" class="py-2 px-3 text-sm text-fg-muted text-end">
96
99
<span
97
100
v-if="pkg.maintainers?.length"
98
101
:title="pkg.maintainers.length > 3 ? allMaintainersText : undefined"
···
104
107
>
105
108
<NuxtLink
106
109
:to="`/~${maintainer.username || maintainer.name}`"
107
-
class="hover:text-accent-muted transition-colors duration-200"
110
+
class="hover:text-accent-fallback transition-colors duration-200"
108
111
@click.stop
109
112
>{{ maintainer.username || maintainer.name || maintainer.email }}</NuxtLink
110
113
><span v-if="idx < Math.min(pkg.maintainers.length, 3) - 1">, </span>
···
117
120
</td>
118
121
119
122
<!-- Keywords -->
120
-
<td v-if="isColumnVisible('keywords')" class="py-2 px-3">
123
+
<td v-if="isColumnVisible('keywords')" class="py-2 px-3 text-end">
121
124
<div
122
125
v-if="pkg.keywords?.length"
123
-
class="flex flex-wrap gap-1"
126
+
class="flex flex-wrap gap-1 justify-end"
124
127
:aria-label="$t('package.card.keywords')"
125
128
>
126
129
<TagClickable
···
130
133
:status="props.filters?.keywords.includes(keyword) ? 'active' : 'default'"
131
134
:title="`Filter by ${keyword}`"
132
135
@click.stop="emit('clickKeyword', keyword)"
136
+
:class="{ 'group-hover:bg-bg-elevated': !props.filters?.keywords.includes(keyword) }"
133
137
>
134
138
{{ keyword }}
135
139
</TagClickable>
+1
-1
uno.config.ts
+1
-1
uno.config.ts
···
120
120
shortcuts: [
121
121
// Layout
122
122
['container', 'max-w-6xl mx-auto px-4 sm:px-6'],
123
-
['container-sm', 'max-w-4xl mx-auto px-4 sm:px-6'],
123
+
['container-sm', 'max-w-5xl mx-auto px-4 sm:px-6'],
124
124
125
125
// Focus states - subtle but accessible
126
126
['focus-ring', 'outline-none focus-visible:(ring-2 ring-fg/10 ring-offset-2)'],