Skip to content

Commit ec7a5b8

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

1 file changed

Lines changed: 71 additions & 39 deletions

File tree

‎app/components/Package/Versions.vue‎

Lines changed: 71 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -319,14 +319,14 @@ function getTagVersions(tag: string): VersionDisplay[] {
319319
<!-- Dist-tag rows (limited to MAX_VISIBLE_TAGS) -->
320320
<div v-for="row in visibleTagRows" :key="row.id">
321321
<div
322-
class="flex items-center gap-2 pe-2 px-1"
323-
:class="row.tag === 'latest' ? 'bg-bg-subtle rounded-lg' : ''"
322+
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"
323+
:class="row.tag === 'latest' ? 'bg-bg-subtle' : ''"
324324
>
325325
<!-- Expand button (only if there are more versions to show) -->
326326
<button
327327
v-if="getTagVersions(row.tag).length > 1 || !hasLoadedAll"
328328
type="button"
329-
class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors rounded-sm"
329+
class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors rounded-sm relative z-10"
330330
:aria-expanded="expandedTags.has(row.tag)"
331331
:aria-label="
332332
expandedTags.has(row.tag)
@@ -359,11 +359,11 @@ function getTagVersions(tag: string): VersionDisplay[] {
359359
<div>
360360
<NuxtLink
361361
:to="versionRoute(row.primaryVersion.version)"
362-
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"
362+
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-['']"
363363
:class="
364364
row.primaryVersion.deprecated
365-
? 'text-red-400 hover:text-red-300'
366-
: 'text-fg-muted hover:text-fg'
365+
? 'text-red-400 group-hover/version-row:text-red-300'
366+
: 'text-fg-muted group-hover/version-row:text-fg'
367367
"
368368
:title="
369369
row.primaryVersion.deprecated
@@ -381,7 +381,10 @@ function getTagVersions(tag: string): VersionDisplay[] {
381381
{{ row.primaryVersion.version }}
382382
</NuxtLink>
383383
</div>
384-
<div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
384+
<div
385+
v-if="row.tags.length"
386+
class="flex items-center gap-1 mt-0.5 flex-wrap relative z-10"
387+
>
385388
<span
386389
v-for="tag in row.tags"
387390
:key="tag"
@@ -392,7 +395,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
392395
</span>
393396
</div>
394397
</div>
395-
<div class="flex items-center gap-2 shrink-0">
398+
<div class="flex items-center gap-2 shrink-0 relative z-10">
396399
<DateTime
397400
v-if="row.primaryVersion.time"
398401
:datetime="row.primaryVersion.time"
@@ -406,6 +409,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
406409
:package-name="packageName"
407410
:version="row.primaryVersion.version"
408411
compact
412+
:linked="false"
409413
/>
410414
</div>
411415
</div>
@@ -416,15 +420,19 @@ function getTagVersions(tag: string): VersionDisplay[] {
416420
v-if="expandedTags.has(row.tag) && getTagVersions(row.tag).length > 1"
417421
class="ms-4 ps-2 border-is border-border space-y-0.5 pe-2"
418422
>
419-
<div v-for="v in getTagVersions(row.tag).slice(1)" :key="v.version" class="py-1">
423+
<div
424+
v-for="v in getTagVersions(row.tag).slice(1)"
425+
:key="v.version"
426+
class="py-1 relative group/version-row hover:bg-bg-elevated/20 focus-within:bg-bg-elevated/20 transition-colors duration-200"
427+
>
420428
<div class="flex items-center justify-between gap-2">
421429
<NuxtLink
422430
:to="versionRoute(v.version)"
423-
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
431+
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
424432
:class="
425433
v.deprecated
426-
? 'text-red-400 hover:text-red-300'
427-
: 'text-fg-subtle hover:text-fg-muted'
434+
? 'text-red-400 group-hover/version-row:text-red-300'
435+
: 'text-fg-subtle group-hover/version-row:text-fg-muted'
428436
"
429437
:title="
430438
v.deprecated
@@ -439,7 +447,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
439447
/>
440448
{{ v.version }}
441449
</NuxtLink>
442-
<div class="flex items-center gap-2 shrink-0">
450+
<div class="flex items-center gap-2 shrink-0 relative z-10">
443451
<DateTime
444452
v-if="v.time"
445453
:datetime="v.time"
@@ -453,12 +461,13 @@ function getTagVersions(tag: string): VersionDisplay[] {
453461
:package-name="packageName"
454462
:version="v.version"
455463
compact
464+
:linked="false"
456465
/>
457466
</div>
458467
</div>
459468
<div
460469
v-if="v.tags?.length && filterExcludedTags(v.tags, row.tags).length"
461-
class="flex items-center gap-1 mt-0.5"
470+
class="flex items-center gap-1 mt-0.5 relative z-10"
462471
>
463472
<span
464473
v-for="tag in filterExcludedTags(v.tags, row.tags)"
@@ -519,15 +528,19 @@ function getTagVersions(tag: string): VersionDisplay[] {
519528
<!-- Expanded other versions -->
520529
<div v-if="otherVersionsExpanded" class="ms-4 ps-2 border-is border-border space-y-0.5">
521530
<!-- Hidden tag rows (overflow from visible tags) -->
522-
<div v-for="row in hiddenTagRows" :key="row.id" class="py-1">
531+
<div
532+
v-for="row in hiddenTagRows"
533+
:key="row.id"
534+
class="py-1 relative group/version-row hover:bg-bg-subtle focus-within:bg-bg-subtle transition-colors duration-200 rounded-lg"
535+
>
523536
<div class="flex items-center justify-between gap-2">
524537
<NuxtLink
525538
:to="versionRoute(row.primaryVersion.version)"
526-
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
539+
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
527540
:class="
528541
row.primaryVersion.deprecated
529-
? 'text-red-400 hover:text-red-300'
530-
: 'text-fg-muted hover:text-fg'
542+
? 'text-red-400 group-hover/version-row:text-red-300'
543+
: 'text-fg-muted group-hover/version-row:text-fg'
531544
"
532545
:title="
533546
row.primaryVersion.deprecated
@@ -544,7 +557,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
544557
/>
545558
{{ row.primaryVersion.version }}
546559
</NuxtLink>
547-
<div class="flex items-center gap-2 shrink-0 pe-2">
560+
<div class="flex items-center gap-2 shrink-0 pe-2 relative z-10">
548561
<DateTime
549562
v-if="row.primaryVersion.time"
550563
:datetime="row.primaryVersion.time"
@@ -555,7 +568,10 @@ function getTagVersions(tag: string): VersionDisplay[] {
555568
/>
556569
</div>
557570
</div>
558-
<div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
571+
<div
572+
v-if="row.tags.length"
573+
class="flex items-center gap-1 mt-0.5 flex-wrap relative z-10"
574+
>
559575
<span
560576
v-for="tag in row.tags"
561577
:key="tag"
@@ -571,12 +587,15 @@ function getTagVersions(tag: string): VersionDisplay[] {
571587
<template v-if="otherMajorGroups.length > 0">
572588
<div v-for="group in otherMajorGroups" :key="group.groupKey">
573589
<!-- Version group header -->
574-
<div v-if="group.versions.length > 1" class="py-1">
590+
<div
591+
v-if="group.versions.length > 1"
592+
class="py-1 relative group/version-row hover:bg-bg-subtle focus-within:bg-bg-subtle transition-colors duration-200 rounded-lg"
593+
>
575594
<div class="flex items-center justify-between gap-2">
576595
<div class="flex items-center gap-2 min-w-0">
577596
<button
578597
type="button"
579-
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"
598+
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"
580599
:aria-expanded="expandedMajorGroups.has(group.groupKey)"
581600
:aria-label="
582601
expandedMajorGroups.has(group.groupKey)
@@ -599,11 +618,11 @@ function getTagVersions(tag: string): VersionDisplay[] {
599618
<NuxtLink
600619
v-if="group.versions[0]?.version"
601620
:to="versionRoute(group.versions[0]?.version)"
602-
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
621+
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
603622
:class="
604623
group.versions[0]?.deprecated
605-
? 'text-red-400 hover:text-red-300'
606-
: 'text-fg-muted hover:text-fg'
624+
? 'text-red-400 group-hover/version-row:text-red-300'
625+
: 'text-fg-muted group-hover/version-row:text-fg'
607626
"
608627
:title="
609628
group.versions[0]?.deprecated
@@ -621,7 +640,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
621640
{{ group.versions[0]?.version }}
622641
</NuxtLink>
623642
</div>
624-
<div class="flex items-center gap-2 shrink-0 pe-2">
643+
<div class="flex items-center gap-2 shrink-0 pe-2 relative z-10">
625644
<DateTime
626645
v-if="group.versions[0]?.time"
627646
:datetime="group.versions[0]?.time"
@@ -635,12 +654,13 @@ function getTagVersions(tag: string): VersionDisplay[] {
635654
:package-name="packageName"
636655
:version="group.versions[0]?.version"
637656
compact
657+
:linked="false"
638658
/>
639659
</div>
640660
</div>
641661
<div
642662
v-if="group.versions[0]?.tags?.length"
643-
class="flex items-center gap-1 ms-5 flex-wrap"
663+
class="flex items-center gap-1 ms-5 flex-wrap relative z-10"
644664
>
645665
<span
646666
v-for="tag in group.versions[0].tags"
@@ -653,18 +673,21 @@ function getTagVersions(tag: string): VersionDisplay[] {
653673
</div>
654674
</div>
655675
<!-- Single version (no expand needed) -->
656-
<div v-else class="py-1">
676+
<div
677+
v-else
678+
class="py-1 relative group/version-row hover:bg-bg-subtle focus-within:bg-bg-subtle transition-colors duration-200 rounded-lg"
679+
>
657680
<div class="flex items-center justify-between gap-2">
658681
<div class="flex items-center gap-2 min-w-0">
659682
<span class="w-4 shrink-0" />
660683
<NuxtLink
661684
v-if="group.versions[0]?.version"
662685
:to="versionRoute(group.versions[0]?.version)"
663-
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
686+
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
664687
:class="
665688
group.versions[0]?.deprecated
666-
? 'text-red-400 hover:text-red-300'
667-
: 'text-fg-muted hover:text-fg'
689+
? 'text-red-400 group-hover/version-row:text-red-300'
690+
: 'text-fg-muted group-hover/version-row:text-fg'
668691
"
669692
:title="
670693
group.versions[0]?.deprecated
@@ -682,7 +705,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
682705
{{ group.versions[0]?.version }}
683706
</NuxtLink>
684707
</div>
685-
<div class="flex items-center gap-2 shrink-0 pe-2">
708+
<div class="flex items-center gap-2 shrink-0 pe-2 relative z-10">
686709
<DateTime
687710
v-if="group.versions[0]?.time"
688711
:datetime="group.versions[0]?.time"
@@ -696,10 +719,14 @@ function getTagVersions(tag: string): VersionDisplay[] {
696719
:package-name="packageName"
697720
:version="group.versions[0]?.version"
698721
compact
722+
:linked="false"
699723
/>
700724
</div>
701725
</div>
702-
<div v-if="group.versions[0]?.tags?.length" class="flex items-center gap-1 ms-5">
726+
<div
727+
v-if="group.versions[0]?.tags?.length"
728+
class="flex items-center gap-1 ms-5 relative z-10"
729+
>
703730
<span
704731
v-for="tag in group.versions[0].tags"
705732
:key="tag"
@@ -715,15 +742,19 @@ function getTagVersions(tag: string): VersionDisplay[] {
715742
v-if="expandedMajorGroups.has(group.groupKey) && group.versions.length > 1"
716743
class="ms-6 space-y-0.5"
717744
>
718-
<div v-for="v in group.versions.slice(1)" :key="v.version" class="py-1">
745+
<div
746+
v-for="v in group.versions.slice(1)"
747+
:key="v.version"
748+
class="py-1 relative group/version-row hover:bg-bg-elevated/20 focus-within:bg-bg-elevated/20 transition-colors duration-200"
749+
>
719750
<div class="flex items-center justify-between gap-2">
720751
<NuxtLink
721752
:to="versionRoute(v.version)"
722-
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
753+
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
723754
:class="
724755
v.deprecated
725-
? 'text-red-400 hover:text-red-300'
726-
: 'text-fg-subtle hover:text-fg-muted'
756+
? 'text-red-400 group-hover/version-row:text-red-300'
757+
: 'text-fg-subtle group-hover/version-row:text-fg-muted'
727758
"
728759
:title="
729760
v.deprecated
@@ -738,7 +769,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
738769
/>
739770
{{ v.version }}
740771
</NuxtLink>
741-
<div class="flex items-center gap-2 shrink-0 pe-2">
772+
<div class="flex items-center gap-2 shrink-0 pe-2 relative z-10">
742773
<DateTime
743774
v-if="v.time"
744775
:datetime="v.time"
@@ -752,10 +783,11 @@ function getTagVersions(tag: string): VersionDisplay[] {
752783
:package-name="packageName"
753784
:version="v.version"
754785
compact
786+
:linked="false"
755787
/>
756788
</div>
757789
</div>
758-
<div v-if="v.tags?.length" class="flex items-center gap-1 mt-0.5">
790+
<div v-if="v.tags?.length" class="flex items-center gap-1 mt-0.5 relative z-10">
759791
<span
760792
v-for="tag in v.tags"
761793
:key="tag"

0 commit comments

Comments
 (0)