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

improve related software

Browse Source
This commit is contained in:
overcuriousity
2025-07-27 22:48:02 +02:00
parent 88938d522d
commit d8eb2b556b
5 changed files with 55 additions and 2189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/ToolMatrix.astro
View File

@@ -520,6 +520,7 @@ domains.forEach((domain: any) => {
`;
const relatedConcepts = tool.related_concepts || [];
const relatedSoftware = tool.related_software || [];
if (relatedConcepts.length > 0 && modalType === 'primary') {
const conceptLinks = relatedConcepts.map(conceptName => {
const concept = toolsData.find(t => t.name === conceptName && t.type === 'concept');
@@ -555,6 +556,49 @@ domains.forEach((domain: any) => {
</div>
`;
}
if (relatedSoftware.length > 0 && modalType === 'primary') {
const softwareLinks = relatedSoftware.map(softwareName => {
const software = toolsData.find(t => t.name === softwareName && (t.type === 'software' || t.type === 'method'));
if (software) {
const isHosted = window.isToolHosted(software);
const isSoftwareMethod = software.type === 'method';
const bgColor = isSoftwareMethod ? 'var(--color-method-bg)' :
isHosted ? 'var(--color-hosted-bg)' : 'var(--color-oss-bg)';
const borderColor = isSoftwareMethod ? 'var(--color-method)' :
isHosted ? 'var(--color-hosted)' : 'var(--color-oss)';
return `<button class="tag cursor-pointer" style="background-color: ${bgColor}; border: 1px solid ${borderColor}; color: ${borderColor}; transition: var(--transition-fast);"
onclick="event.stopPropagation(); window.showToolDetails('${softwareName}', 'secondary')"
onmouseover="this.style.backgroundColor='${borderColor}'; this.style.color='white';"
onmouseout="this.style.backgroundColor='${bgColor}'; this.style.color='${borderColor}';">
${softwareName}
</button>`;
}
return `<span class="tag" style="background-color: var(--color-bg-tertiary); color: var(--color-text-secondary);">${softwareName}</span>`;
}).join('');
const isMobile = window.innerWidth <= 768;
const collapseOnMobile = isMobile && relatedSoftware.length > 2;
tagsHTML += `
<div class="mt-4">
<div class="flex items-center gap-2 mb-2">
<strong style="color: var(--color-text);">Verwandte Software:</strong>
${collapseOnMobile ? `
<button id="software-toggle-${modalType}"
onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === '▼' ? '▲' : '▼';"
class="btn-icon text-xs">
▼
</button>
` : ''}
</div>
<div ${collapseOnMobile ? 'class="hidden"' : ''} class="flex flex-wrap gap-1">
${softwareLinks}
</div>
</div>
`;
}
elements.tags.innerHTML = tagsHTML;