Skip to content

Commit 56fc57f

Browse files
alexdlnalexdln
committed
chore: improve deprecated label on versions mobile
1 parent 449e356 commit 56fc57f

1 file changed

Lines changed: 34 additions & 17 deletions

File tree

‎app/pages/package/[[org]]/[name]/versions.vue‎

Lines changed: 34 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -269,7 +269,7 @@ const flatItems = computed<FlatItem[]>(() => {
269269
<main class="flex-1 flex flex-col">
270270
<!-- Header -->
271271
<header class="border-b border-border bg-bg sticky top-14 z-20">
272-
<div class="container py-3 flex items-center justify-between gap-4">
272+
<div class="container py-3 flex items-center justify-between gap-2 sm:gap-4">
273273
<div class="flex items-center gap-2 min-w-0">
274274
<NuxtLink
275275
:to="packageRoute(packageName)"
@@ -297,7 +297,7 @@ const flatItems = computed<FlatItem[]>(() => {
297297
<!-- Latest — featured card -->
298298
<div
299299
v-if="latestTagRow"
300-
class="border-y sm:rounded-lg sm:border border-accent/40 bg-accent/5 px-4 py-4 relative flex max-sm:flex-col sm:items-center justify-between gap-4 hover:bg-accent/8 transition-colors"
300+
class="border-y sm:rounded-lg sm:border border-accent/40 bg-accent/5 px-4 py-4 relative flex max-sm:flex-col sm:items-center justify-between gap-2 sm:gap-4 hover:bg-accent/8 transition-colors"
301301
>
302302
<!-- Left: tags + version + deprecated -->
303303
<div>
@@ -312,10 +312,14 @@ const flatItems = computed<FlatItem[]>(() => {
312312
>
313313
<span
314314
v-if="fullVersionMap?.get(latestTagRow!.version)?.deprecated"
315-
class="text-xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded"
315+
class="text-xs font-medium text-red-700 dark:text-red-400 relative z-10"
316316
:title="fullVersionMap!.get(latestTagRow!.version)!.deprecated"
317-
>deprecated</span
318317
>
318+
<span class="sm:hidden i-lucide:octagon-alert" aria-hidden="true"></span>
319+
<span class="max-sm:sr-only bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded"
320+
>deprecated</span
321+
>
322+
</span>
319323
</div>
320324
<div class="flex items-center gap-2">
321325
<LinkBase
@@ -336,7 +340,7 @@ const flatItems = computed<FlatItem[]>(() => {
336340
</div>
337341
</div>
338342
<!-- Right: downloads + date -->
339-
<div class="flex sm:items-center gap-4 shrink-0 relative z-10">
343+
<div class="flex sm:items-center gap-2 sm:gap-4 shrink-0 relative z-10">
340344
<span
341345
v-if="getVersionDownloads(latestTagRow!.version)"
342346
class="max-w-32 md:w-32 grid grid-flow-col auto-cols-max items-center gap-1 text-xs text-fg-muted tabular-nums sm:justify-end"
@@ -376,10 +380,10 @@ const flatItems = computed<FlatItem[]>(() => {
376380
<div
377381
v-for="row in otherTagRows"
378382
:key="row.id"
379-
class="flex items-center gap-4 px-4 py-2.5 border-b border-border last:border-0 hover:bg-bg-subtle transition-colors relative"
383+
class="flex items-center gap-2 sm:gap-4 px-4 py-2.5 border-b border-border last:border-0 hover:bg-bg-subtle transition-colors relative"
380384
>
381385
<!-- Tag labels -->
382-
<div class="max-w-32 md:w-32 shrink-0 flex flex-wrap gap-x-1.5 gap-y-0.5">
386+
<div class="max-w-[max(32px,32vw)] md:w-32 shrink-0 flex flex-wrap gap-x-1.5 gap-y-0.5">
383387
<span
384388
v-for="tag in row.tags"
385389
:key="tag"
@@ -390,10 +394,10 @@ const flatItems = computed<FlatItem[]>(() => {
390394
</div>
391395

392396
<!-- Version + Provenance + Deprecated -->
393-
<div class="flex-1 min-w-0 flex items-center gap-2 truncate overflow-hidden">
397+
<div class="flex-1 flex items-center gap-2">
394398
<LinkBase
395399
:to="packageRoute(packageName, row.version)"
396-
class="block! text-sm after:absolute after:inset-0 after:content-[''] truncate"
400+
class="block! min-w-16 max-sm:max-w-40 text-sm after:absolute after:inset-0 after:content-[''] truncate"
397401
:title="row.version"
398402
dir="ltr"
399403
>
@@ -409,10 +413,14 @@ const flatItems = computed<FlatItem[]>(() => {
409413
/>
410414
<span
411415
v-if="fullVersionMap?.get(row.version)?.deprecated"
412-
class="text-xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded relative z-10"
416+
class="text-xs font-medium text-red-700 dark:text-red-400 relative z-10"
413417
:title="fullVersionMap!.get(row.version)!.deprecated"
414-
>deprecated</span
415418
>
419+
<span class="sm:hidden i-lucide:octagon-alert" aria-hidden="true"></span>
420+
<span class="max-sm:sr-only bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded"
421+
>deprecated</span
422+
>
423+
</span>
416424
</div>
417425

418426
<!-- Downloads -->
@@ -445,7 +453,7 @@ const flatItems = computed<FlatItem[]>(() => {
445453

446454
<!-- ── Version History ───────────────────────────────────────────────── -->
447455
<section v-if="versionGroups.length > 0">
448-
<div class="flex items-center justify-between gap-2 mb-3">
456+
<div class="flex max-sm:flex-col sm:items-center justify-between gap-2 mb-3">
449457
<h2 class="text-sm text-fg-subtle uppercase">
450458
{{ $t('package.versions.page_title') }}
451459
<span class="ms-1 normal-case font-normal"> ({{ versionStrings.length }}) </span>
@@ -461,7 +469,7 @@ const flatItems = computed<FlatItem[]>(() => {
461469
:aria-describedby="isInvalidRange ? 'version-filter-error' : undefined"
462470
autocomplete="off"
463471
size="sm"
464-
class="w-36 sm:w-64"
472+
class="w-36 sm:w-64 max-sm:w-full"
465473
:class="isInvalidRange ? 'pe-7 !border-red-500' : ''"
466474
/>
467475
<Transition
@@ -534,9 +542,14 @@ const flatItems = computed<FlatItem[]>(() => {
534542
<span class="text-sm font-medium">{{ item.label }}</span>
535543
<span
536544
v-if="deprecatedGroupKeys.has(item.groupKey)"
537-
class="text-xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded"
538-
>deprecated</span
545+
class="text-xs font-medium text-red-700 dark:text-red-400 relative z-10"
539546
>
547+
<span class="sm:hidden i-lucide:octagon-alert" aria-hidden="true"></span>
548+
<span
549+
class="max-sm:sr-only bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded"
550+
>deprecated</span
551+
>
552+
</span>
540553
<span class="text-xs text-fg-subtle">({{ item.versions.length }})</span>
541554
<span class="text-xs text-fg-muted truncate" :title="item.versions[0]" dir="ltr"
542555
>v{{ item.versions[0] }}</span
@@ -628,10 +641,14 @@ const flatItems = computed<FlatItem[]>(() => {
628641
</div>
629642
<span
630643
v-if="fullVersionMap?.get(item.version)?.deprecated"
631-
class="text-xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded relative z-10"
644+
class="text-xs font-medium text-red-700 dark:text-red-400 relative z-10"
632645
:title="fullVersionMap.get(item.version)!.deprecated"
633646
>
634-
deprecated
647+
<span class="sm:hidden i-lucide:octagon-alert" aria-hidden="true"></span>
648+
<span
649+
class="max-sm:sr-only bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded"
650+
>deprecated</span
651+
>
635652
</span>
636653
</div>
637654

0 commit comments

Comments
 (0)