Skip to content

Commit 4e7814a

Browse files
zyyvdanielroe
zyyv
and
danielroe
authored
fix(ui): optimize table style (#812)
Co-authored-by: Daniel Roe <daniel@roe.dev>
1 parent af3503a commit 4e7814a

File tree

3 files changed

+28
-24
lines changed

3 files changed

+28
-24
lines changed

‎app/components/Package/Table.vue‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ function getColumnLabelKey(id: ColumnId): string {
115115
<!-- Name (always visible) -->
116116
<th
117117
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"
119119
:class="{
120120
'cursor-pointer hover:text-fg transition-colors duration-200': isSortable('name'),
121121
}"
@@ -149,23 +149,23 @@ function getColumnLabelKey(id: ColumnId): string {
149149
<th
150150
v-if="isColumnVisible('version')"
151151
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"
153153
>
154154
{{ $t(getColumnLabelKey('version')) }}
155155
</th>
156156

157157
<th
158158
v-if="isColumnVisible('description')"
159159
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"
161161
>
162162
{{ $t(getColumnLabelKey('description')) }}
163163
</th>
164164

165165
<th
166166
v-if="isColumnVisible('downloads')"
167167
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"
169169
:class="{
170170
'cursor-pointer hover:text-fg transition-colors duration-200':
171171
isSortable('downloads'),
@@ -200,7 +200,7 @@ function getColumnLabelKey(id: ColumnId): string {
200200
<th
201201
v-if="isColumnVisible('updated')"
202202
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"
204204
:class="{
205205
'cursor-pointer hover:text-fg transition-colors duration-200': isSortable('updated'),
206206
}"
@@ -234,55 +234,55 @@ function getColumnLabelKey(id: ColumnId): string {
234234
<th
235235
v-if="isColumnVisible('maintainers')"
236236
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"
238238
>
239239
{{ $t(getColumnLabelKey('maintainers')) }}
240240
</th>
241241

242242
<th
243243
v-if="isColumnVisible('keywords')"
244244
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"
246246
>
247247
{{ $t(getColumnLabelKey('keywords')) }}
248248
</th>
249249

250250
<th
251251
v-if="isColumnVisible('qualityScore')"
252252
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"
254254
>
255255
{{ $t(getColumnLabelKey('qualityScore')) }}
256256
</th>
257257

258258
<th
259259
v-if="isColumnVisible('popularityScore')"
260260
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"
262262
>
263263
{{ $t(getColumnLabelKey('popularityScore')) }}
264264
</th>
265265

266266
<th
267267
v-if="isColumnVisible('maintenanceScore')"
268268
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"
270270
>
271271
{{ $t(getColumnLabelKey('maintenanceScore')) }}
272272
</th>
273273

274274
<th
275275
v-if="isColumnVisible('combinedScore')"
276276
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"
278278
>
279279
{{ $t(getColumnLabelKey('combinedScore')) }}
280280
</th>
281281

282282
<th
283283
v-if="isColumnVisible('security')"
284284
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"
286286
>
287287
{{ $t(getColumnLabelKey('security')) }}
288288
</th>
@@ -301,17 +301,17 @@ function getColumnLabelKey(id: ColumnId): string {
301301
<td v-if="isColumnVisible('description')" class="py-3 px-3">
302302
<div class="h-4 w-48 bg-bg-muted rounded animate-pulse" />
303303
</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">
305305
<div class="h-4 w-16 bg-bg-muted rounded animate-pulse ms-auto" />
306306
</td>
307307
<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" />
309309
</td>
310310
<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" />
312312
</td>
313313
<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" />
315315
</td>
316316
</tr>
317317
</template>

‎app/components/Package/TableRow.vue‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,15 @@ const allMaintainersText = computed(() => {
4444

4545
<template>
4646
<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"
4848
tabindex="0"
4949
:data-result-index="index"
5050
>
5151
<!-- Name (always visible) -->
5252
<td class="py-2 px-3">
5353
<NuxtLink
5454
: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"
5656
>
5757
{{ pkg.name }}
5858
</NuxtLink>
@@ -80,7 +80,10 @@ const allMaintainersText = computed(() => {
8080
</td>
8181

8282
<!-- 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+
>
8487
<DateTime
8588
v-if="updatedDate"
8689
:datetime="updatedDate"
@@ -92,7 +95,7 @@ const allMaintainersText = computed(() => {
9295
</td>
9396

9497
<!-- 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">
9699
<span
97100
v-if="pkg.maintainers?.length"
98101
:title="pkg.maintainers.length > 3 ? allMaintainersText : undefined"
@@ -104,7 +107,7 @@ const allMaintainersText = computed(() => {
104107
>
105108
<NuxtLink
106109
: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"
108111
@click.stop
109112
>{{ maintainer.username || maintainer.name || maintainer.email }}</NuxtLink
110113
><span v-if="idx < Math.min(pkg.maintainers.length, 3) - 1">, </span>
@@ -117,10 +120,10 @@ const allMaintainersText = computed(() => {
117120
</td>
118121

119122
<!-- 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">
121124
<div
122125
v-if="pkg.keywords?.length"
123-
class="flex flex-wrap gap-1"
126+
class="flex flex-wrap gap-1 justify-end"
124127
:aria-label="$t('package.card.keywords')"
125128
>
126129
<TagClickable
@@ -130,6 +133,7 @@ const allMaintainersText = computed(() => {
130133
:status="props.filters?.keywords.includes(keyword) ? 'active' : 'default'"
131134
:title="`Filter by ${keyword}`"
132135
@click.stop="emit('clickKeyword', keyword)"
136+
:class="{ 'group-hover:bg-bg-elevated': !props.filters?.keywords.includes(keyword) }"
133137
>
134138
{{ keyword }}
135139
</TagClickable>

‎uno.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ export default defineConfig({
120120
shortcuts: [
121121
// Layout
122122
['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'],
124124

125125
// Focus states - subtle but accessible
126126
['focus-ring', 'outline-none focus-visible:(ring-2 ring-fg/10 ring-offset-2)'],

0 commit comments

Comments
 (0)