Skip to content

fix: blank area in package page #708

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
iiio2 wants to merge 1 commit into from
Closed

fix: blank area in package page #708

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 51 additions & 2 deletions app/pages/package/[...package].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,14 @@ const hasDependencies = computed(() => {
// Vulnerability count for the stats banner
const vulnCount = computed(() => vulnTree.value?.totalCounts.total ?? 0)
const hasVulnerabilities = computed(() => vulnCount.value > 0)
const hasDeprecated = computed(
() => vulnTree.value?.deprecatedPackages && vulnTree.value.deprecatedPackages.length > 0,
)

// Check if vulns area should be shown
const showVulnsArea = computed(() => {
return moduleReplacement.value || hasVulnerabilities.value || hasDeprecated.value
})

// Total transitive dependencies count (from either vuln tree or install size)
// Subtract 1 to exclude the root package itself
Expand Down Expand Up @@ -409,7 +417,11 @@ function handleClick(event: MouseEvent) {
<main class="container flex-1 w-full py-8">
<PackageSkeleton v-if="status === 'pending'" />

<article v-else-if="status === 'success' && pkg" class="package-page">
<article
v-else-if="status === 'success' && pkg"
class="package-page"
:class="{ 'hide-vulns': !showVulnsArea }"
>
<!-- Package header -->
<header
class="area-header sticky top-14 z-1 bg-[--bg] py-2 border-border"
Expand Down Expand Up @@ -949,7 +961,7 @@ function handleClick(event: MouseEvent) {
<h2 id="readme-heading" class="group text-xs text-fg-subtle uppercase tracking-wider mb-4">
<a
href="#readme"
class="inline-flex py-4 px-2 items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
class="inline-flex py-1 px-2 items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
>
{{ $t('package.readme.title') }}
<span
Expand Down Expand Up @@ -1157,6 +1169,43 @@ function handleClick(event: MouseEvent) {
}
}

/* Hide vulns area when empty - mobile */
.package-page.hide-vulns {
grid-template-areas:
'header'
'details'
'install'
'sidebar'
'readme';
}

.package-page.hide-vulns .area-vulns {
display: none;
}

/* Hide vulns area when empty - tablet */
@media (min-width: 1024px) {
.package-page.hide-vulns {
grid-template-areas:
'header header'
'details details'
'install install'
'readme sidebar';
grid-template-rows: auto auto auto 1fr;
}
}

/* Hide vulns area when empty - desktop */
@media (min-width: 1280px) {
.package-page.hide-vulns {
grid-template-areas:
'header sidebar'
'details sidebar'
'install sidebar'
'readme sidebar';
}
}

.area-header {
grid-area: header;
}
Expand Down
Loading