style adjustments

This commit is contained in:
overcuriousity 2025-07-16 23:59:43 +02:00
parent 2b061db94e
commit 612536b7c5
3 changed files with 16 additions and 20 deletions

View File

@ -134,7 +134,7 @@ Beispiele:
{index < phases.length - 1 && (
<div class="workflow-arrow">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" stroke-width="2">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" stroke-width="2">
<path d="M5 12h14"/>
<path d="M12 5l7 7-7 7"/>
</svg>

View File

@ -14,18 +14,18 @@ const tools = data.tools;
// Separate collaboration tools from domain-specific tools
const collaborationTools = tools.filter((tool: any) =>
tool.phases && tool.phases.includes('collaboration')
tool.phases && tool.phases.includes('collaboration-general')
);
const domainTools = tools.filter((tool: any) =>
!tool.phases || !tool.phases.includes('collaboration')
!tool.phases || !tool.phases.includes('collaboration-general')
);
// Create matrix structure for domain-specific tools only
const matrix: Record<string, Record<string, any[]>> = {};
domains.forEach((domain: any) => {
matrix[domain.id] = {};
phases.filter((phase: any) => phase.id !== 'collaboration').forEach((phase: any) => {
phases.filter((phase: any) => phase.id !== 'collaboration-general').forEach((phase: any) => {
matrix[domain.id][phase.id] = domainTools.filter((tool: any) =>
tool.domains && tool.domains.includes(domain.id) && tool.phases && tool.phases.includes(phase.id)
);
@ -75,7 +75,7 @@ domains.forEach((domain: any) => {
<thead>
<tr>
<th style="width: 200px;">Domain / Phase</th>
{phases.filter((phase: any) => phase.id !== 'collaboration').map((phase: any) => (
{phases.filter((phase: any) => phase.id !== 'collaboration-general').map((phase: any) => (
<th data-phase={phase.id}>{phase.name}</th>
))}
</tr>
@ -84,7 +84,7 @@ domains.forEach((domain: any) => {
{domains.map((domain: any) => (
<tr data-domain={domain.id}>
<th>{domain.name}</th>
{phases.filter((phase: any) => phase.id !== 'collaboration').map((phase: any) => (
{phases.filter((phase: any) => phase.id !== 'collaboration-general').map((phase: any) => (
<td class="matrix-cell" data-domain={domain.id} data-phase={phase.id}>
{matrix[domain.id][phase.id].map((tool: any) => {
const hasValidProjectUrl = tool.projectUrl !== undefined &&
@ -364,13 +364,13 @@ domains.forEach((domain: any) => {
const dfirMatrixSection = document.getElementById('dfir-matrix-section');
const collaborationContainer = document.getElementById('collaboration-tools-container');
if (selectedPhase === 'collaboration') {
if (selectedPhase === 'collaboration-general') {
// Show only collaboration tools, hide matrix
collaborationSection.style.display = 'block';
dfirMatrixSection.style.display = 'none';
// Filter collaboration tools
const filteredCollaboration = filtered.filter(tool => (tool.phases || []).includes('collaboration'));
const filteredCollaboration = filtered.filter(tool => (tool.phases || []).includes('collaboration-general'));
collaborationContainer.innerHTML = '';
filteredCollaboration.forEach(tool => {
@ -386,7 +386,7 @@ domains.forEach((domain: any) => {
collaborationSection.style.display = 'block';
// Show all collaboration tools that pass general filters
const filteredCollaboration = filtered.filter(tool => (tool.phases || []).includes('collaboration'));
const filteredCollaboration = filtered.filter(tool => (tool.phases || []).includes('collaboration-general'));
collaborationContainer.innerHTML = '';
filteredCollaboration.forEach(tool => {
@ -404,7 +404,7 @@ domains.forEach((domain: any) => {
});
// Re-populate with filtered DFIR tools - with safe array handling
const filteredDfirTools = filtered.filter(tool => !(tool.phases || []).includes('collaboration'));
const filteredDfirTools = filtered.filter(tool => !(tool.phases || []).includes('collaboration-general'));
filteredDfirTools.forEach(tool => {
const hasValidProjectUrl = tool.projectUrl !== undefined &&
tool.projectUrl !== null &&
@ -416,7 +416,7 @@ domains.forEach((domain: any) => {
domains.forEach(domain => {
phases.forEach(phase => {
if (phase !== 'collaboration') {
if (phase !== 'collaboration-general') {
const cell = document.querySelector(`[data-domain="${domain}"][data-phase="${phase}"]`);
if (cell) {
const chip = document.createElement('span');

View File

@ -988,7 +988,7 @@ footer {
}
/* Responsive Design */
@media (width <= 768px) {
@media (width: 768px) {
.grid-cols-2 {
grid-template-columns: 1fr;
}
@ -1099,13 +1099,13 @@ footer {
}
}
@media (width <= 600px) {
@media (width: 600px) {
.phase-tools {
grid-template-columns: 1fr !important;
}
}
@media (width <= 640px) {
@media (width: 640px) {
.phase-buttons {
justify-content: center;
}
@ -1125,7 +1125,7 @@ footer {
}
}
@media (width <= 480px) {
@media (width: 480px) {
.phase-buttons {
flex-direction: column;
gap: 0.375rem;
@ -1251,7 +1251,6 @@ footer {
margin: 0.5rem 0;
}
/* Tool Recommendation Cards */
.tool-recommendation {
background-color: var(--color-bg);
border: 1px solid var(--color-border);
@ -1263,6 +1262,7 @@ footer {
flex-direction: column;
height: 100%;
min-height: 200px;
animation: fadeInUp 0.3s ease-out;
}
.tool-recommendation:hover {
@ -1367,10 +1367,6 @@ footer {
animation: fadeInUp 0.5s ease-out;
}
.tool-recommendation {
animation: fadeInUp 0.3s ease-out;
}
.tool-recommendation:nth-child(1) {
animation-delay: 0.1s;
}