style adjustments
This commit is contained in:
parent
2b061db94e
commit
612536b7c5
@ -134,7 +134,7 @@ Beispiele:
|
|||||||
|
|
||||||
{index < phases.length - 1 && (
|
{index < phases.length - 1 && (
|
||||||
<div class="workflow-arrow">
|
<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="M5 12h14"/>
|
||||||
<path d="M12 5l7 7-7 7"/>
|
<path d="M12 5l7 7-7 7"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
@ -14,18 +14,18 @@ const tools = data.tools;
|
|||||||
|
|
||||||
// Separate collaboration tools from domain-specific tools
|
// Separate collaboration tools from domain-specific tools
|
||||||
const collaborationTools = tools.filter((tool: any) =>
|
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) =>
|
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
|
// Create matrix structure for domain-specific tools only
|
||||||
const matrix: Record<string, Record<string, any[]>> = {};
|
const matrix: Record<string, Record<string, any[]>> = {};
|
||||||
domains.forEach((domain: any) => {
|
domains.forEach((domain: any) => {
|
||||||
matrix[domain.id] = {};
|
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) =>
|
matrix[domain.id][phase.id] = domainTools.filter((tool: any) =>
|
||||||
tool.domains && tool.domains.includes(domain.id) && tool.phases && tool.phases.includes(phase.id)
|
tool.domains && tool.domains.includes(domain.id) && tool.phases && tool.phases.includes(phase.id)
|
||||||
);
|
);
|
||||||
@ -75,7 +75,7 @@ domains.forEach((domain: any) => {
|
|||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th style="width: 200px;">Domain / Phase</th>
|
<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>
|
<th data-phase={phase.id}>{phase.name}</th>
|
||||||
))}
|
))}
|
||||||
</tr>
|
</tr>
|
||||||
@ -84,7 +84,7 @@ domains.forEach((domain: any) => {
|
|||||||
{domains.map((domain: any) => (
|
{domains.map((domain: any) => (
|
||||||
<tr data-domain={domain.id}>
|
<tr data-domain={domain.id}>
|
||||||
<th>{domain.name}</th>
|
<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}>
|
<td class="matrix-cell" data-domain={domain.id} data-phase={phase.id}>
|
||||||
{matrix[domain.id][phase.id].map((tool: any) => {
|
{matrix[domain.id][phase.id].map((tool: any) => {
|
||||||
const hasValidProjectUrl = tool.projectUrl !== undefined &&
|
const hasValidProjectUrl = tool.projectUrl !== undefined &&
|
||||||
@ -364,13 +364,13 @@ domains.forEach((domain: any) => {
|
|||||||
const dfirMatrixSection = document.getElementById('dfir-matrix-section');
|
const dfirMatrixSection = document.getElementById('dfir-matrix-section');
|
||||||
const collaborationContainer = document.getElementById('collaboration-tools-container');
|
const collaborationContainer = document.getElementById('collaboration-tools-container');
|
||||||
|
|
||||||
if (selectedPhase === 'collaboration') {
|
if (selectedPhase === 'collaboration-general') {
|
||||||
// Show only collaboration tools, hide matrix
|
// Show only collaboration tools, hide matrix
|
||||||
collaborationSection.style.display = 'block';
|
collaborationSection.style.display = 'block';
|
||||||
dfirMatrixSection.style.display = 'none';
|
dfirMatrixSection.style.display = 'none';
|
||||||
|
|
||||||
// Filter collaboration tools
|
// Filter collaboration tools
|
||||||
const filteredCollaboration = filtered.filter(tool => (tool.phases || []).includes('collaboration'));
|
const filteredCollaboration = filtered.filter(tool => (tool.phases || []).includes('collaboration-general'));
|
||||||
collaborationContainer.innerHTML = '';
|
collaborationContainer.innerHTML = '';
|
||||||
|
|
||||||
filteredCollaboration.forEach(tool => {
|
filteredCollaboration.forEach(tool => {
|
||||||
@ -386,7 +386,7 @@ domains.forEach((domain: any) => {
|
|||||||
collaborationSection.style.display = 'block';
|
collaborationSection.style.display = 'block';
|
||||||
|
|
||||||
// Show all collaboration tools that pass general filters
|
// 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 = '';
|
collaborationContainer.innerHTML = '';
|
||||||
|
|
||||||
filteredCollaboration.forEach(tool => {
|
filteredCollaboration.forEach(tool => {
|
||||||
@ -404,7 +404,7 @@ domains.forEach((domain: any) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Re-populate with filtered DFIR tools - with safe array handling
|
// 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 => {
|
filteredDfirTools.forEach(tool => {
|
||||||
const hasValidProjectUrl = tool.projectUrl !== undefined &&
|
const hasValidProjectUrl = tool.projectUrl !== undefined &&
|
||||||
tool.projectUrl !== null &&
|
tool.projectUrl !== null &&
|
||||||
@ -416,7 +416,7 @@ domains.forEach((domain: any) => {
|
|||||||
|
|
||||||
domains.forEach(domain => {
|
domains.forEach(domain => {
|
||||||
phases.forEach(phase => {
|
phases.forEach(phase => {
|
||||||
if (phase !== 'collaboration') {
|
if (phase !== 'collaboration-general') {
|
||||||
const cell = document.querySelector(`[data-domain="${domain}"][data-phase="${phase}"]`);
|
const cell = document.querySelector(`[data-domain="${domain}"][data-phase="${phase}"]`);
|
||||||
if (cell) {
|
if (cell) {
|
||||||
const chip = document.createElement('span');
|
const chip = document.createElement('span');
|
||||||
|
@ -988,7 +988,7 @@ footer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive Design */
|
/* Responsive Design */
|
||||||
@media (width <= 768px) {
|
@media (width: 768px) {
|
||||||
.grid-cols-2 {
|
.grid-cols-2 {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
@ -1099,13 +1099,13 @@ footer {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (width <= 600px) {
|
@media (width: 600px) {
|
||||||
.phase-tools {
|
.phase-tools {
|
||||||
grid-template-columns: 1fr !important;
|
grid-template-columns: 1fr !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (width <= 640px) {
|
@media (width: 640px) {
|
||||||
.phase-buttons {
|
.phase-buttons {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
@ -1125,7 +1125,7 @@ footer {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (width <= 480px) {
|
@media (width: 480px) {
|
||||||
.phase-buttons {
|
.phase-buttons {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.375rem;
|
gap: 0.375rem;
|
||||||
@ -1251,7 +1251,6 @@ footer {
|
|||||||
margin: 0.5rem 0;
|
margin: 0.5rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tool Recommendation Cards */
|
|
||||||
.tool-recommendation {
|
.tool-recommendation {
|
||||||
background-color: var(--color-bg);
|
background-color: var(--color-bg);
|
||||||
border: 1px solid var(--color-border);
|
border: 1px solid var(--color-border);
|
||||||
@ -1263,6 +1262,7 @@ footer {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: 200px;
|
min-height: 200px;
|
||||||
|
animation: fadeInUp 0.3s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tool-recommendation:hover {
|
.tool-recommendation:hover {
|
||||||
@ -1367,10 +1367,6 @@ footer {
|
|||||||
animation: fadeInUp 0.5s ease-out;
|
animation: fadeInUp 0.5s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tool-recommendation {
|
|
||||||
animation: fadeInUp 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tool-recommendation:nth-child(1) {
|
.tool-recommendation:nth-child(1) {
|
||||||
animation-delay: 0.1s;
|
animation-delay: 0.1s;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user