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

layout improvements

Browse Source
This commit is contained in:
overcuriousity
2025-07-17 14:57:35 +02:00
parent 25cdc64f99
commit 129a1b1a21
4 changed files with 532 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/pages/index.astro
View File

@@ -78,7 +78,7 @@ const tools = data.tools;
<!-- Tools Grid -->
<section id="tools-grid" style="padding-bottom: 2rem;">
<div class="grid grid-cols-3 gap-4" id="tools-container">
<div class="grid-auto-fit" id="tools-container">
{tools.map((tool: any) => (
<ToolCard tool={tool} />
))}
@@ -352,16 +352,16 @@ function createToolCard(tool) {
cardDiv.style.cursor = 'pointer';
cardDiv.onclick = () => (window as any).showToolDetails(tool.name);
// Create button HTML based on hosting status
// Create responsive button HTML
let buttonHTML;
if (hasValidProjectUrl) {
// Two buttons for tools we're hosting
// Two buttons for tools we're hosting - responsive layout
buttonHTML = `
<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;">
<div class="button-container" 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; text-align: center;">
Software-Homepage
</a>
<a href="${tool.projectUrl}" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="flex: 1;">
<a href="${tool.projectUrl}" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="flex: 1; text-align: center;">
Zugreifen
</a>
</div>
@@ -369,28 +369,28 @@ function createToolCard(tool) {
} else {
// Single button for tools we're not hosting
buttonHTML = `
<a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="width: 100%;" onclick="event.stopPropagation();">
<a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="width: 100%; text-align: center;" onclick="event.stopPropagation();">
Software-Homepage
</a>
`;
}
cardDiv.innerHTML = `
<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;">
<div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.75rem; flex-wrap: wrap; gap: 0.5rem;">
<h3 style="margin: 0; flex: 1; min-width: 0;">${tool.name}</h3>
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap; flex-shrink: 0;">
${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>' : ''}
</div>
</div>
<p class="text-muted" style="font-size: 0.875rem; margin-bottom: 1rem;">
<p class="text-muted" style="font-size: 0.875rem; margin-bottom: 1rem; line-height: 1.5;">
${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;">
<div style="display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<line x1="9" y1="9" x2="15" y2="9"></line>
@@ -401,7 +401,7 @@ function createToolCard(tool) {
</span>
</div>
<div style="display: flex; align-items: center; gap: 0.25rem;">
<div style="display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 6v6l4 2"></path>
@@ -411,7 +411,7 @@ function createToolCard(tool) {
</span>
</div>
<div style="display: flex; align-items: center; gap: 0.25rem;">
<div style="display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<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>