4f4d2347c3
Added --shadow-card and --shadow-card-hover tokens to the design system and updated package cards to use them instead of hardcoded values. This completes the package card redesign (DEV-247): - Logo centered at top (64×64px) - Title centered below logo - Vertical centered layout with proper spacing - Card shadow using design tokens - Center-aligned content throughout Design approved by CorporateDesigner. Co-Authored-By: Paperclip <noreply@paperclip.ing>
154 lines
3.5 KiB
Vue
154 lines
3.5 KiB
Vue
<template>
|
||
<div class="packages-page">
|
||
<div class="page-header">
|
||
<div class="container">
|
||
<h1>Software Packages</h1>
|
||
<p>Open source software we deploy and maintain on BasicStack infrastructure</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container page-body">
|
||
<div v-if="packages && packages.length > 0" class="packages-grid">
|
||
<NuxtLink
|
||
v-for="pkg in packages"
|
||
:key="pkg.id"
|
||
:to="`/packages/${pkg.slug}`"
|
||
class="package-card card"
|
||
>
|
||
<img
|
||
v-if="pkg.logo"
|
||
:src="getAssetUrl(pkg.logo)"
|
||
:alt="pkg.name + ' logo'"
|
||
class="package-logo"
|
||
/>
|
||
<div v-else class="package-logo-placeholder">{{ pkg.name[0] }}</div>
|
||
|
||
<h2 class="package-name">{{ pkg.name }}</h2>
|
||
|
||
<p class="package-desc">{{ pkg.short_description }}</p>
|
||
|
||
<div class="package-links" v-if="pkg.website_url || pkg.documentation_url">
|
||
<span v-if="pkg.website_url" class="link-badge">Website</span>
|
||
<span v-if="pkg.documentation_url" class="link-badge">Docs</span>
|
||
</div>
|
||
</NuxtLink>
|
||
</div>
|
||
|
||
<div v-else class="empty">
|
||
<p>No packages found. Content will be added soon.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const { getPackages, getAssetUrl } = useDirectus()
|
||
const { data: packages } = await useAsyncData('packages', () => getPackages())
|
||
|
||
useSeoMeta({
|
||
title: 'Packages – BasicStack',
|
||
description: 'Browse all open source software packages deployed on BasicStack infrastructure.',
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page-header {
|
||
background: var(--color-bg-secondary);
|
||
border-bottom: 1px solid var(--color-border);
|
||
padding: var(--space-2xl) 0;
|
||
}
|
||
|
||
.page-header h1 {
|
||
margin-bottom: var(--space-sm);
|
||
}
|
||
|
||
.page-header p {
|
||
color: var(--color-text-muted);
|
||
margin: 0;
|
||
}
|
||
|
||
.page-body {
|
||
padding: var(--space-2xl) var(--space-lg);
|
||
}
|
||
|
||
.packages-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||
gap: var(--space-lg);
|
||
}
|
||
|
||
.package-card {
|
||
text-decoration: none;
|
||
color: inherit;
|
||
transition: box-shadow 0.2s, transform 0.2s;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
box-shadow: var(--shadow-card);
|
||
min-width: 280px;
|
||
max-width: 360px;
|
||
}
|
||
|
||
.package-card:hover {
|
||
box-shadow: var(--shadow-card-hover);
|
||
transform: translateY(-2px);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.package-logo {
|
||
width: 64px;
|
||
height: 64px;
|
||
object-fit: contain;
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.package-logo-placeholder {
|
||
width: 64px;
|
||
height: 64px;
|
||
border-radius: var(--radius-md);
|
||
background: var(--color-primary);
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.package-name {
|
||
font-size: var(--text-xl);
|
||
font-weight: 600;
|
||
margin: 0 0 var(--space-sm);
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.package-desc {
|
||
color: var(--color-text-secondary);
|
||
font-size: var(--text-sm);
|
||
line-height: 1.5;
|
||
margin: 0 0 20px;
|
||
flex: 1;
|
||
}
|
||
|
||
.package-links {
|
||
display: flex;
|
||
gap: var(--space-sm);
|
||
justify-content: center;
|
||
}
|
||
|
||
.link-badge {
|
||
font-size: 0.75rem;
|
||
color: var(--color-text-muted);
|
||
border: 1px solid var(--color-border);
|
||
padding: 0.125rem 0.5rem;
|
||
border-radius: var(--radius-sm);
|
||
}
|
||
|
||
.empty {
|
||
text-align: center;
|
||
padding: var(--space-3xl) 0;
|
||
color: var(--color-text-muted);
|
||
}
|
||
</style>
|