[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix(ui): implement clickable package table rows (#1277)

authored by

rygrit and committed by
GitHub
96a4969b 83abe343

+20 -4
+20 -4
app/components/Package/TableRow.vue
··· 44 44 45 45 <template> 46 46 <tr 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" 47 + class="group relative 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-fallback transition-colors duration-200" 55 + class="row-link font-mono text-sm text-fg hover:text-accent-fallback transition-colors duration-200" 56 56 dir="ltr" 57 57 > 58 58 {{ pkg.name }} ··· 111 111 name: '~username', 112 112 params: { username: maintainer.username || maintainer.name || '' }, 113 113 }" 114 - class="hover:text-accent-fallback transition-colors duration-200" 114 + class="relative z-10 hover:text-accent-fallback transition-colors duration-200" 115 115 @click.stop 116 116 >{{ maintainer.username || maintainer.name || maintainer.email }}</NuxtLink 117 117 ><span v-if="idx < Math.min(pkg.maintainers.length, 3) - 1">, </span> ··· 127 127 <td v-if="isColumnVisible('keywords')" class="py-2 px-3 text-end"> 128 128 <div 129 129 v-if="pkg.keywords?.length" 130 - class="flex flex-wrap gap-1 justify-end" 130 + class="relative z-10 flex flex-wrap gap-1 justify-end" 131 131 :aria-label="$t('package.card.keywords')" 132 132 > 133 133 <ButtonBase ··· 198 198 </td> 199 199 </tr> 200 200 </template> 201 + 202 + <style scoped> 203 + .row-link { 204 + &::after { 205 + content: ''; 206 + position: absolute; 207 + inset: 0; 208 + cursor: pointer; 209 + } 210 + 211 + &:focus-visible::after { 212 + outline: 2px solid var(--color-fg); 213 + outline-offset: -2px; 214 + } 215 + } 216 + </style>