Skip to content

Commit 96b53f7

Browse files
IdrisGitIdrisGit
committed
fix(style): make whole card clickable using strechted link method instead of just the version number
1 parent ea25ecb commit 96b53f7

File tree

1 file changed

+71
-39
lines changed

1 file changed

+71
-39
lines changed

‎app/components/Package/Versions.vue‎

Lines changed: 71 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -322,14 +322,14 @@ function getTagVersions(tag: string): VersionDisplay[] {
322322
<!-- Dist-tag rows (limited to MAX_VISIBLE_TAGS) -->
323323
<div v-for="row in visibleTagRows" :key="row.id">
324324
<div
325-
class="flex items-center gap-2 pe-2 px-1"
326-
:class="row.tag === 'latest' ? 'bg-bg-subtle rounded-lg' : ''"
325+
class="flex items-center gap-2 pe-2 px-1 relative group/version-row hover:bg-bg-subtle focus-within:bg-bg-subtle transition-colors duration-200 rounded-lg"
326+
:class="row.tag === 'latest' ? 'bg-bg-subtle' : ''"
327327
>
328328
<!-- Expand button (only if there are more versions to show) -->
329329
<button
330330
v-if="getTagVersions(row.tag).length > 1 || !hasLoadedAll"
331331
type="button"
332-
class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors rounded-sm"
332+
class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors rounded-sm relative z-10"
333333
:aria-expanded="expandedTags.has(row.tag)"
334334
:aria-label="
335335
expandedTags.has(row.tag)
@@ -362,11 +362,11 @@ function getTagVersions(tag: string): VersionDisplay[] {
362362
<div>
363363
<NuxtLink
364364
:to="versionRoute(row.primaryVersion.version)"
365-
class="block font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1 focus-visible:outline-none focus-visible:text-accent"
365+
class="block font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1 focus-visible:outline-none focus-visible:text-accent after:absolute after:inset-0 after:content-['']"
366366
:class="
367367
row.primaryVersion.deprecated
368-
? 'text-red-400 hover:text-red-300'
369-
: 'text-fg-muted hover:text-fg'
368+
? 'text-red-400 group-hover/version-row:text-red-300'
369+
: 'text-fg-muted group-hover/version-row:text-fg'
370370
"
371371
:title="
372372
row.primaryVersion.deprecated
@@ -384,7 +384,10 @@ function getTagVersions(tag: string): VersionDisplay[] {
384384
{{ row.primaryVersion.version }}
385385
</NuxtLink>
386386
</div>
387-
<div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
387+
<div
388+
v-if="row.tags.length"
389+
class="flex items-center gap-1 mt-0.5 flex-wrap relative z-10"
390+
>
388391
<span
389392
v-for="tag in row.tags"
390393
:key="tag"
@@ -395,7 +398,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
395398
</span>
396399
</div>
397400
</div>
398-
<div class="flex items-center gap-2 shrink-0">
401+
<div class="flex items-center gap-2 shrink-0 relative z-10">
399402
<DateTime
400403
v-if="row.primaryVersion.time"
401404
:datetime="row.primaryVersion.time"
@@ -409,6 +412,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
409412
:package-name="packageName"
410413
:version="row.primaryVersion.version"
411414
compact
415+
:linked="false"
412416
/>
413417
</div>
414418
</div>
@@ -419,15 +423,19 @@ function getTagVersions(tag: string): VersionDisplay[] {
419423
v-if="expandedTags.has(row.tag) && getTagVersions(row.tag).length > 1"
420424
class="ms-4 ps-2 border-is border-border space-y-0.5 pe-2"
421425
>
422-
<div v-for="v in getTagVersions(row.tag).slice(1)" :key="v.version" class="py-1">
426+
<div
427+
v-for="v in getTagVersions(row.tag).slice(1)"
428+
:key="v.version"
429+
class="py-1 relative group/version-row hover:bg-bg-elevated/20 focus-within:bg-bg-elevated/20 transition-colors duration-200"
430+
>
423431
<div class="flex items-center justify-between gap-2">
424432
<NuxtLink
425433
:to="versionRoute(v.version)"
426-
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
434+
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
427435
:class="
428436
v.deprecated
429-
? 'text-red-400 hover:text-red-300'
430-
: 'text-fg-subtle hover:text-fg-muted'
437+
? 'text-red-400 group-hover/version-row:text-red-300'
438+
: 'text-fg-subtle group-hover/version-row:text-fg-muted'
431439
"
432440
:title="
433441
v.deprecated
@@ -442,7 +450,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
442450
/>
443451
{{ v.version }}
444452
</NuxtLink>
445-
<div class="flex items-center gap-2 shrink-0">
453+
<div class="flex items-center gap-2 shrink-0 relative z-10">
446454
<DateTime
447455
v-if="v.time"
448456
:datetime="v.time"
@@ -456,12 +464,13 @@ function getTagVersions(tag: string): VersionDisplay[] {
456464
:package-name="packageName"
457465
:version="v.version"
458466
compact
467+
:linked="false"
459468
/>
460469
</div>
461470
</div>
462471
<div
463472
v-if="v.tags?.length && filterExcludedTags(v.tags, row.tags).length"
464-
class="flex items-center gap-1 mt-0.5"
473+
class="flex items-center gap-1 mt-0.5 relative z-10"
465474
>
466475
<span
467476
v-for="tag in filterExcludedTags(v.tags, row.tags)"
@@ -522,15 +531,19 @@ function getTagVersions(tag: string): VersionDisplay[] {
522531
<!-- Expanded other versions -->
523532
<div v-if="otherVersionsExpanded" class="ms-4 ps-2 border-is border-border space-y-0.5">
524533
<!-- Hidden tag rows (overflow from visible tags) -->
525-
<div v-for="row in hiddenTagRows" :key="row.id" class="py-1">
534+
<div
535+
v-for="row in hiddenTagRows"
536+
:key="row.id"
537+
class="py-1 relative group/version-row hover:bg-bg-subtle focus-within:bg-bg-subtle transition-colors duration-200 rounded-lg"
538+
>
526539
<div class="flex items-center justify-between gap-2">
527540
<NuxtLink
528541
:to="versionRoute(row.primaryVersion.version)"
529-
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
542+
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
530543
:class="
531544
row.primaryVersion.deprecated
532-
? 'text-red-400 hover:text-red-300'
533-
: 'text-fg-muted hover:text-fg'
545+
? 'text-red-400 group-hover/version-row:text-red-300'
546+
: 'text-fg-muted group-hover/version-row:text-fg'
534547
"
535548
:title="
536549
row.primaryVersion.deprecated
@@ -547,7 +560,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
547560
/>
548561
{{ row.primaryVersion.version }}
549562
</NuxtLink>
550-
<div class="flex items-center gap-2 shrink-0 pe-2">
563+
<div class="flex items-center gap-2 shrink-0 pe-2 relative z-10">
551564
<DateTime
552565
v-if="row.primaryVersion.time"
553566
:datetime="row.primaryVersion.time"
@@ -558,7 +571,10 @@ function getTagVersions(tag: string): VersionDisplay[] {
558571
/>
559572
</div>
560573
</div>
561-
<div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
574+
<div
575+
v-if="row.tags.length"
576+
class="flex items-center gap-1 mt-0.5 flex-wrap relative z-10"
577+
>
562578
<span
563579
v-for="tag in row.tags"
564580
:key="tag"
@@ -574,12 +590,15 @@ function getTagVersions(tag: string): VersionDisplay[] {
574590
<template v-if="otherMajorGroups.length > 0">
575591
<div v-for="group in otherMajorGroups" :key="group.groupKey">
576592
<!-- Version group header -->
577-
<div v-if="group.versions.length > 1" class="py-1">
593+
<div
594+
v-if="group.versions.length > 1"
595+
class="py-1 relative group/version-row hover:bg-bg-subtle focus-within:bg-bg-subtle transition-colors duration-200 rounded-lg"
596+
>
578597
<div class="flex items-center justify-between gap-2">
579598
<div class="flex items-center gap-2 min-w-0">
580599
<button
581600
type="button"
582-
class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors shrink-0 focus-visible:outline-accent/70 rounded-sm"
601+
class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors shrink-0 focus-visible:outline-accent/70 rounded-sm relative z-10"
583602
:aria-expanded="expandedMajorGroups.has(group.groupKey)"
584603
:aria-label="
585604
expandedMajorGroups.has(group.groupKey)
@@ -602,11 +621,11 @@ function getTagVersions(tag: string): VersionDisplay[] {
602621
<NuxtLink
603622
v-if="group.versions[0]?.version"
604623
:to="versionRoute(group.versions[0]?.version)"
605-
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
624+
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
606625
:class="
607626
group.versions[0]?.deprecated
608-
? 'text-red-400 hover:text-red-300'
609-
: 'text-fg-muted hover:text-fg'
627+
? 'text-red-400 group-hover/version-row:text-red-300'
628+
: 'text-fg-muted group-hover/version-row:text-fg'
610629
"
611630
:title="
612631
group.versions[0]?.deprecated
@@ -624,7 +643,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
624643
{{ group.versions[0]?.version }}
625644
</NuxtLink>
626645
</div>
627-
<div class="flex items-center gap-2 shrink-0 pe-2">
646+
<div class="flex items-center gap-2 shrink-0 pe-2 relative z-10">
628647
<DateTime
629648
v-if="group.versions[0]?.time"
630649
:datetime="group.versions[0]?.time"
@@ -638,12 +657,13 @@ function getTagVersions(tag: string): VersionDisplay[] {
638657
:package-name="packageName"
639658
:version="group.versions[0]?.version"
640659
compact
660+
:linked="false"
641661
/>
642662
</div>
643663
</div>
644664
<div
645665
v-if="group.versions[0]?.tags?.length"
646-
class="flex items-center gap-1 ms-5 flex-wrap"
666+
class="flex items-center gap-1 ms-5 flex-wrap relative z-10"
647667
>
648668
<span
649669
v-for="tag in group.versions[0].tags"
@@ -656,18 +676,21 @@ function getTagVersions(tag: string): VersionDisplay[] {
656676
</div>
657677
</div>
658678
<!-- Single version (no expand needed) -->
659-
<div v-else class="py-1">
679+
<div
680+
v-else
681+
class="py-1 relative group/version-row hover:bg-bg-subtle focus-within:bg-bg-subtle transition-colors duration-200 rounded-lg"
682+
>
660683
<div class="flex items-center justify-between gap-2">
661684
<div class="flex items-center gap-2 min-w-0">
662685
<span class="w-4 shrink-0" />
663686
<NuxtLink
664687
v-if="group.versions[0]?.version"
665688
:to="versionRoute(group.versions[0]?.version)"
666-
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
689+
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
667690
:class="
668691
group.versions[0]?.deprecated
669-
? 'text-red-400 hover:text-red-300'
670-
: 'text-fg-muted hover:text-fg'
692+
? 'text-red-400 group-hover/version-row:text-red-300'
693+
: 'text-fg-muted group-hover/version-row:text-fg'
671694
"
672695
:title="
673696
group.versions[0]?.deprecated
@@ -685,7 +708,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
685708
{{ group.versions[0]?.version }}
686709
</NuxtLink>
687710
</div>
688-
<div class="flex items-center gap-2 shrink-0 pe-2">
711+
<div class="flex items-center gap-2 shrink-0 pe-2 relative z-10">
689712
<DateTime
690713
v-if="group.versions[0]?.time"
691714
:datetime="group.versions[0]?.time"
@@ -699,10 +722,14 @@ function getTagVersions(tag: string): VersionDisplay[] {
699722
:package-name="packageName"
700723
:version="group.versions[0]?.version"
701724
compact
725+
:linked="false"
702726
/>
703727
</div>
704728
</div>
705-
<div v-if="group.versions[0]?.tags?.length" class="flex items-center gap-1 ms-5">
729+
<div
730+
v-if="group.versions[0]?.tags?.length"
731+
class="flex items-center gap-1 ms-5 relative z-10"
732+
>
706733
<span
707734
v-for="tag in group.versions[0].tags"
708735
:key="tag"
@@ -718,15 +745,19 @@ function getTagVersions(tag: string): VersionDisplay[] {
718745
v-if="expandedMajorGroups.has(group.groupKey) && group.versions.length > 1"
719746
class="ms-6 space-y-0.5"
720747
>
721-
<div v-for="v in group.versions.slice(1)" :key="v.version" class="py-1">
748+
<div
749+
v-for="v in group.versions.slice(1)"
750+
:key="v.version"
751+
class="py-1 relative group/version-row hover:bg-bg-elevated/20 focus-within:bg-bg-elevated/20 transition-colors duration-200"
752+
>
722753
<div class="flex items-center justify-between gap-2">
723754
<NuxtLink
724755
:to="versionRoute(v.version)"
725-
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
756+
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
726757
:class="
727758
v.deprecated
728-
? 'text-red-400 hover:text-red-300'
729-
: 'text-fg-subtle hover:text-fg-muted'
759+
? 'text-red-400 group-hover/version-row:text-red-300'
760+
: 'text-fg-subtle group-hover/version-row:text-fg-muted'
730761
"
731762
:title="
732763
v.deprecated
@@ -741,7 +772,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
741772
/>
742773
{{ v.version }}
743774
</NuxtLink>
744-
<div class="flex items-center gap-2 shrink-0 pe-2">
775+
<div class="flex items-center gap-2 shrink-0 pe-2 relative z-10">
745776
<DateTime
746777
v-if="v.time"
747778
:datetime="v.time"
@@ -755,10 +786,11 @@ function getTagVersions(tag: string): VersionDisplay[] {
755786
:package-name="packageName"
756787
:version="v.version"
757788
compact
789+
:linked="false"
758790
/>
759791
</div>
760792
</div>
761-
<div v-if="v.tags?.length" class="flex items-center gap-1 mt-0.5">
793+
<div v-if="v.tags?.length" class="flex items-center gap-1 mt-0.5 relative z-10">
762794
<span
763795
v-for="tag in v.tags"
764796
:key="tag"

0 commit comments

Comments
 (0)