Skip to content

Commit fc14002

Browse files
milanofthemilanofthe
authored
Merge pull request #13 from pathsim/feature/card-hover-expansion
Add hover description expansion to package cards
2 parents 7af27aa + 58d5828 commit fc14002

2 files changed

Lines changed: 75 additions & 29 deletions

File tree

‎src/lib/config/packages.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export const packages: Record<PackageId, PackageConfig> = {
7676
id: 'pathsim',
7777
name: 'PathSim',
7878
shortName: 'pathsim',
79-
description: 'A Python library for building and simulating continuous-time, discrete-time, and hybrid dynamical systems using a block-diagram approach.',
79+
description: 'Build and simulate continuous-time, discrete-time, and hybrid dynamical systems using block diagrams.',
8080
logo: 'pathsim_logo.png',
8181
docs: 'pathsim',
8282
api: 'pathsim/api',
@@ -134,7 +134,7 @@ scope.plot()`,
134134
id: 'chem',
135135
name: 'PathSim-Chem',
136136
shortName: 'chem',
137-
description: 'Chemical engineering blocks for PathSim — IK-CAPE thermodynamic property correlations, activity coefficients, equations of state, and tritium processing.',
137+
description: 'Thermodynamic property correlations, activity coefficients, equations of state, and tritium processing.',
138138
logo: 'pathsim_chem_logo.png',
139139
docs: 'chem',
140140
api: 'chem/api',
@@ -194,7 +194,7 @@ scope.plot()`,
194194
id: 'vehicle',
195195
name: 'PathSim-Vehicle',
196196
shortName: 'vehicle',
197-
description: 'Vehicle dynamics blocks for PathSim, including tire models, suspension systems, and powertrain components.',
197+
description: 'Tire models, suspension systems, and powertrain components for vehicle dynamics simulation.',
198198
logo: 'pathsim_vehicle_logo.png',
199199
docs: 'vehicle',
200200
api: 'vehicle/api',
@@ -220,7 +220,7 @@ scope.plot()`,
220220
id: 'flight',
221221
name: 'PathSim-Flight',
222222
shortName: 'flight',
223-
description: 'Flight dynamics blocks for PathSim — aircraft models, 6DoF equations of motion, aerodynamics, and propulsion.',
223+
description: 'Six degrees of freedom equations of motion, aerodynamics, and propulsion for flight simulation.',
224224
logo: 'pathsim_flight_logo.png',
225225
docs: 'flight',
226226
api: 'flight/api',
@@ -241,7 +241,7 @@ scope.plot()`,
241241
id: 'rf',
242242
name: 'PathSim-RF',
243243
shortName: 'rf',
244-
description: 'RF and microwave engineering blocks for PathSim — S-parameter networks via vector fitting, transmission lines, amplifiers with IP3 nonlinearity, and mixers.',
244+
description: 'S-parameter networks, transmission lines, amplifiers, and mixers for RF and microwave simulation.',
245245
logo: 'pathsim_rf_logo.png',
246246
docs: 'rf',
247247
api: 'rf/api',

‎src/routes/+page.svelte‎

Lines changed: 70 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -165,34 +165,37 @@
165165
{#each packageOrder as pkgId}
166166
{@const pkg = packages[pkgId]}
167167
<div class="package-card elevated">
168-
<div class="panel-header">
169-
<span>{pkg.shortName}</span>
170-
<div class="header-actions">
171-
<a href="{base}/{pkg.api}" class="icon-btn" use:tooltip={'API'}>
172-
<Icon name="braces" size={14} />
173-
</a>
174-
<a href="{base}/{pkg.docs}" class="icon-btn" use:tooltip={'Docs'}>
175-
<Icon name="book" size={14} />
176-
</a>
177-
{#if pkg.pypi}
178-
<a href={pkg.pypi} class="icon-btn" use:tooltip={'PyPI'}>
179-
<Icon name="package" size={14} />
168+
<div class="card-info">
169+
<div class="card-info-row">
170+
<span>{pkg.shortName}</span>
171+
<div class="header-actions">
172+
<a href="{base}/{pkg.api}" class="icon-btn" use:tooltip={'API'}>
173+
<Icon name="braces" size={14} />
180174
</a>
181-
{/if}
182-
{#if pkg.examples}
183-
<a href="{base}/{pkg.examples}" class="icon-btn" use:tooltip={'Examples'}>
184-
<Icon name="play" size={14} />
175+
<a href="{base}/{pkg.docs}" class="icon-btn" use:tooltip={'Docs'}>
176+
<Icon name="book" size={14} />
185177
</a>
186-
{/if}
187-
{#if roadmapFlags[pkgId]}
188-
<a href="{base}/{pkgId}/roadmap" class="icon-btn" use:tooltip={'Roadmap'}>
189-
<Icon name="roadmap" size={14} />
178+
{#if pkg.pypi}
179+
<a href={pkg.pypi} class="icon-btn" use:tooltip={'PyPI'}>
180+
<Icon name="package" size={14} />
181+
</a>
182+
{/if}
183+
{#if pkg.examples}
184+
<a href="{base}/{pkg.examples}" class="icon-btn" use:tooltip={'Examples'}>
185+
<Icon name="play" size={14} />
186+
</a>
187+
{/if}
188+
{#if roadmapFlags[pkgId]}
189+
<a href="{base}/{pkgId}/roadmap" class="icon-btn" use:tooltip={'Roadmap'}>
190+
<Icon name="roadmap" size={14} />
191+
</a>
192+
{/if}
193+
<a href={pkg.github} class="icon-btn" use:tooltip={'GitHub'}>
194+
<Icon name="github" size={14} />
190195
</a>
191-
{/if}
192-
<a href={pkg.github} class="icon-btn" use:tooltip={'GitHub'}>
193-
<Icon name="github" size={14} />
194-
</a>
196+
</div>
195197
</div>
198+
<div class="card-description">{pkg.description}</div>
196199
</div>
197200
<button class="package-body" onclick={() => navigateWithTransition(`${base}/${pkg.docs}`)}>
198201
<img src="{base}/{pkg.logo}" alt={pkg.name} />
@@ -384,6 +387,7 @@
384387
}
385388
386389
.package-card {
390+
position: relative;
387391
border-radius: var(--radius-lg);
388392
border: 1px solid var(--border);
389393
overflow: hidden;
@@ -395,6 +399,47 @@
395399
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
396400
}
397401
402+
.card-info {
403+
position: absolute;
404+
top: 0;
405+
left: 0;
406+
right: 0;
407+
z-index: 1;
408+
padding: var(--space-sm) var(--space-lg);
409+
background: var(--surface-raised);
410+
border-bottom: 1px solid var(--border);
411+
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
412+
font-size: var(--font-base);
413+
font-weight: 600;
414+
color: var(--text-muted);
415+
text-transform: uppercase;
416+
letter-spacing: 0.5px;
417+
}
418+
419+
.card-info-row {
420+
display: flex;
421+
align-items: center;
422+
justify-content: space-between;
423+
}
424+
425+
.card-description {
426+
font-size: var(--font-base);
427+
font-weight: 400;
428+
color: var(--text-muted);
429+
text-transform: none;
430+
letter-spacing: normal;
431+
max-height: 0;
432+
overflow: hidden;
433+
opacity: 0;
434+
transition: max-height 0.15s ease, opacity 0.15s ease, margin 0.15s ease;
435+
}
436+
437+
.package-card:hover .card-description {
438+
max-height: 100px;
439+
opacity: 1;
440+
margin-top: 4px;
441+
}
442+
398443
.header-actions {
399444
display: flex;
400445
gap: var(--space-xs);
@@ -406,6 +451,7 @@
406451
justify-content: center;
407452
width: 100%;
408453
padding: var(--space-xl);
454+
padding-top: calc(40px + var(--space-xl));
409455
background: var(--surface);
410456
border: none;
411457
cursor: pointer;

0 commit comments

Comments
 (0)