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

styles

Browse Source
This commit is contained in:
overcuriousity
2025-07-18 14:09:32 +02:00
parent 4608faca86
commit d6e1023e40
4 changed files with 86 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/ToolMatrix.astro
View File

@@ -34,9 +34,19 @@ domains.forEach((domain: any) => {
---
<div id="matrix-container" class="matrix-wrapper" style="display: none;">
<!-- Collaboration Tools Section (compact horizontal layout for matrix view) -->
<div id="collaboration-tools-section" style="margin-bottom: 1.5rem;">
<h3 style="margin-bottom: 0.75rem; color: var(--color-text); font-size: 1.125rem;">Übergreifend & Kollaboration</h3>
<div id="collaboration-tools-section" class="collaboration-section-collapsed" style="margin-bottom: 1.5rem;">
<div class="collaboration-header" onclick="toggleCollaborationSection()" style="cursor: pointer; display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.1rem;">
<h3 style="margin: 0; color: var(--color-text); font-size: 1.125rem;">Übergreifend & Kollaboration</h3>
<div class="collaboration-expand-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="collaboration-content" style="display: none;">
<div class="collaboration-tools-compact" id="collaboration-tools-container">
{collaborationTools.map((tool: any) => {
const hasValidProjectUrl = tool.projectUrl !== undefined &&
@@ -54,7 +64,7 @@ domains.forEach((domain: any) => {
{tool.knowledgebase === true && <span class="badge badge--mini badge-error">Infos 📖</span>}
</div>
</div>
<p style="font-size: 0.75rem; color: var(--color-text-secondary); margin: 0.25rem 0; line-height: 1.3;">
<p class="text-muted">
{tool.description}
</p>
<div style="display: flex; gap: 0.75rem; font-size: 0.6875rem; color: var(--color-text-secondary);">
@@ -190,6 +200,33 @@ domains.forEach((domain: any) => {
}
}
// Toggle collaboration section
function toggleCollaborationSection() {
const section = document.getElementById('collaboration-tools-section');
const content = document.querySelector('.collaboration-content');
const icon = document.querySelector('.collaboration-expand-icon svg');
if (!section || !content || !icon) return;
const isExpanded = section.classList.contains('collaboration-section-expanded');
if (isExpanded) {
// Collapse
section.classList.remove('collaboration-section-expanded');
section.classList.add('collaboration-section-collapsed');
content.style.display = 'none';
icon.style.transform = 'rotate(0deg)';
} else {
// Expand
section.classList.remove('collaboration-section-collapsed');
section.classList.add('collaboration-section-expanded');
content.style.display = 'block';
icon.style.transform = 'rotate(180deg)';
}
}
// Make function globally available
window.toggleCollaborationSection = toggleCollaborationSection;
// Helper function to create compact collaboration tool cards for matrix view
function createCollaborationToolCardCompact(tool) {
const hasValidProjectUrl = tool.projectUrl !== undefined &&
@@ -211,7 +248,7 @@ domains.forEach((domain: any) => {
${tool.knowledgebase === true ? '<span class="badge badge--mini badge-error">Infos 📖</span>' : ''}
</div>
</div>
<p style="font-size: 0.75rem; color: var(--color-text-secondary); margin: 0.25rem 0; line-height: 1.3;">
<p class="text-muted">
${tool.description}
</p>
<div style="display: flex; gap: 0.75rem; font-size: 0.6875rem; color: var(--color-text-secondary);">