mstoeck3/forensic-pathways
2
0
Fork 0
Code Issues 17 Pull Requests Projects Releases Activity

styles updates

Browse Source
This commit is contained in:
overcuriousity
2025-07-17 21:06:16 +02:00
parent af23c04219
commit 8c1600fcc4
4 changed files with 184 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/ToolCard.astro
View File

@@ -33,73 +33,79 @@ const cardClass = hasValidProjectUrl ? 'card card-hosted tool-card' : (tool.lice
---
<div class={cardClass} onclick={`window.showToolDetails('${tool.name}')`} style="cursor: pointer;">
<div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.75rem;">
<h3 style="margin: 0;">{tool.name}</h3>
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
<!-- Card Header with Fixed Height -->
<div class="tool-card-header">
<h3>{tool.name}</h3>
<div class="tool-card-badges">
{hasValidProjectUrl && <span class="badge badge-primary">Self-Hosted</span>}
{tool.license !== 'Proprietary' && <span class="badge badge-success">Open Source</span>}
{hasKnowledgebase && <span class="badge badge-error">Infos 📖</span>}
{tool.license !== 'Proprietary' && <span class="badge badge-success">OSS</span>}
{hasKnowledgebase && <span class="badge badge-error">📖</span>}
</div>
</div>
<p class="text-muted" style="font-size: 0.875rem; margin-bottom: 1rem;">
<!-- Description - Truncated to 2 lines -->
<p class="text-muted">
{tool.description}
</p>
<div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem;">
<div style="display: flex; align-items: center; gap: 0.25rem;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<!-- Metadata - Compact Icons with Better Alignment -->
<div class="tool-card-metadata" style="display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 0.75rem; line-height: 1;">
<div class="metadata-item" style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--color-text-secondary); flex-shrink: 1; min-width: 0;">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink: 0;">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<line x1="9" y1="9" x2="15" y2="9"></line>
<line x1="9" y1="15" x2="15" y2="15"></line>
</svg>
<span class="text-muted" style="font-size: 0.75rem;">
{tool.platforms.join(', ')}
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;">
{tool.platforms.slice(0, 2).join(', ')}{tool.platforms.length > 2 ? '...' : ''}
</span>
</div>
<div style="display: flex; align-items: center; gap: 0.25rem;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<div class="metadata-item" style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--color-text-secondary); flex-shrink: 1; min-width: 0;">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink: 0;">
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 6v6l4 2"></path>
</svg>
<span class="text-muted" style="font-size: 0.75rem;">
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;">
{tool.skillLevel}
</span>
</div>
<div style="display: flex; align-items: center; gap: 0.25rem;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<div class="metadata-item" style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--color-text-secondary); flex-shrink: 1; min-width: 0;">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink: 0;">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14 2 14 8 20 8"></polyline>
</svg>
<span class="text-muted" style="font-size: 0.75rem;">
{tool.license}
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;">
{tool.license === 'Proprietary' ? 'Prop.' : tool.license.split(' ')[0]}
</span>
</div>
</div>
<div class="tool-tags-container" style="display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 1rem;">
{tool.tags.map(tag => (
<!-- Tags - Two Lines with Fade -->
<div class="tool-tags-container">
{tool.tags.slice(0, 8).map(tag => (
<span class="tag">{tag}</span>
))}
</div>
<!-- Button section - dual buttons for hosted tools, single for others -->
{hasValidProjectUrl ? (
<!-- Two buttons for tools we're hosting -->
<div style="display: flex; gap: 0.5rem;" onclick="event.stopPropagation();">
<a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-secondary" style="flex: 1;">
<!-- Buttons - Fixed at Bottom -->
<div class="tool-card-buttons" onclick="event.stopPropagation();">
{hasValidProjectUrl ? (
<!-- Two buttons for hosted tools -->
<div class="button-row">
<a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-secondary">
Homepage
</a>
<a href={tool.projectUrl} target="_blank" rel="noopener noreferrer" class="btn btn-primary">
Zugreifen
</a>
</div>
) : (
<!-- Single button for external tools -->
<a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-primary single-button">
Software-Homepage
</a>
<a href={tool.projectUrl} target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="flex: 1;">
Zugreifen
</a>
</div>
) : (
<!-- Single button for tools we're not hosting -->
<a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="width: 100%;" onclick="event.stopPropagation();">
Software-Homepage
</a>
)}
)}
</div>
</div>