make icons

This commit is contained in:
overcuriousity
2025-07-19 23:15:57 +02:00
parent 8cccb0f4a9
commit c01a73bbb7
8 changed files with 632 additions and 281 deletions

View File

@@ -461,7 +461,10 @@ document.addEventListener('DOMContentLoaded', () => {
<div class="tool-recommendation ${tool.type === 'method' ? 'method' : hasValidProjectUrl ? 'hosted' : (tool.license !== 'Proprietary' ? 'oss' : '')}"
onclick="window.showToolDetails('${tool.name}')">
<div class="tool-rec-header">
<h4 class="tool-rec-name">${tool.name}</h4>
<h4 class="tool-rec-name">
${tool.icon ? `<span style="margin-right: 0.5rem;">${tool.icon}</span>` : ''}
${tool.name}
</h4>
<span class="tool-rec-priority ${tool.recommendation.priority}"
style="background-color: ${priorityColors[tool.recommendation.priority]};">
${tool.recommendation.priority}
@@ -474,9 +477,8 @@ document.addEventListener('DOMContentLoaded', () => {
<div class="tool-rec-metadata">
<div style="display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.5rem;">
${tool.type === 'method' ? '<span class="badge" style="background-color: var(--color-method); color: white;">Methode</span>' : ''}
${tool.type !== 'method' && hasValidProjectUrl ? '<span class="badge badge-primary">CC24-Server</span>' : ''}
${tool.type !== 'method' && tool.license !== 'Proprietary' ? '<span class="badge badge-success">Open Source</span>' : ''}
${tool.knowledgebase === true ? '<span class="badge badge-error">📖</span>' : ''}
<span class="badge" style="background-color: var(--color-bg-tertiary); color: var(--color-text);">${tool.skillLevel}</span>
</div>
<div style="font-size: 0.8125rem; color: var(--color-text-secondary);">

View File

@@ -2,6 +2,7 @@
export interface Props {
tool: {
name: string;
icon?: string;
type?: string;
description: string;
domains: string[];
@@ -38,16 +39,18 @@ const cardClass = isMethod ? 'card card-method tool-card' :
(tool.license !== 'Proprietary' ? 'card card-oss tool-card' : 'card tool-card');
---
<div class={cardClass} onclick={`window.showToolDetails('${tool.name}')`} style="cursor: pointer; border-left: 4px solid ${isMethod ? 'var(--color-method)' : hasValidProjectUrl ? 'var(--color-hosted)' : tool.license !== 'Proprietary' ? 'var(--color-oss)' : 'var(--color-border)'};">
<!-- Card Header with Fixed Height -->
<div class={cardClass} onclick={`window.showToolDetails('${tool.name}')`} style="cursor: pointer; border-left: 4px solid {isMethod ? 'var(--color-method)' : hasValidProjectUrl ? 'var(--color-hosted)' : tool.license !== 'Proprietary' ? 'var(--color-oss)' : 'var(--color-border)'};">
<!-- Card Header with Fixed Height -->
<div class="tool-card-header">
<h3>{tool.name}</h3>
<div class="tool-card-badges">
{isMethod && <span class="badge" style="background-color: var(--color-method); color: white;">Methode</span>}
{!isMethod && hasValidProjectUrl && <span class="badge badge-primary">CC24-Server</span>}
{!isMethod && tool.license !== 'Proprietary' && <span class="badge badge-success">OSS</span>}
{hasKnowledgebase && <span class="badge badge-error">📖</span>}
</div>
<h3>
{tool.icon && <span style="margin-right: 0.5rem; font-size: 1.125rem;">{tool.icon}</span>}
{tool.name}
</h3>
<div class="tool-card-badges">
<!-- Only show CC24-Server and Knowledgebase badges -->
{!isMethod && hasValidProjectUrl && <span class="badge badge-primary">CC24-Server</span>}
{hasKnowledgebase && <span class="badge badge-error">📖</span>}
</div>
</div>
<!-- Description - Truncated to 2 lines -->

View File

@@ -65,11 +65,13 @@ domains.forEach((domain: any) => {
<div class={`collaboration-tool-compact ${hasValidProjectUrl ? 'hosted' : tool.license !== 'Proprietary' ? 'oss' : ''}`}
onclick={`window.showToolDetails('${tool.name}')`}>
<div class="tool-compact-header">
<h4 style="margin: 0; font-size: 0.875rem; font-weight: 600;">{tool.name}</h4>
<h4 style="margin: 0; font-size: 0.875rem; font-weight: 600;">
{tool.icon && <span style="margin-right: 0.5rem;">{tool.icon}</span>}
{tool.name}
</h4>
<div style="display: flex; gap: 0.25rem;">
{hasValidProjectUrl && <span class="badge badge--mini badge-primary">CC24-Server</span>}
{tool.license !== 'Proprietary' && <span class="badge badge--mini badge-success">OSS</span>}
{tool.knowledgebase === true && <span class="badge badge--mini badge-error">Infos 📖</span>}
{tool.knowledgebase === true && <span class="badge badge--mini badge-error">📖</span>}
</div>
</div>
<p class="text-muted">
@@ -249,29 +251,25 @@ domains.forEach((domain: any) => {
const isMethod = tool.type === 'method';
// Update modal content
document.getElementById('tool-name').textContent = tool.name;
const toolNameElement = document.getElementById('tool-name');
const iconHtml = tool.icon ? `<span style="margin-right: 0.75rem; font-size: 1.5rem;">${tool.icon}</span>` : '';
toolNameElement.innerHTML = `${iconHtml}${tool.name}`;
document.getElementById('tool-description').textContent = tool.description;
// Badges
// Badges - Only CC24-Server and Knowledgebase
const badgesContainer = document.getElementById('tool-badges');
const hasValidProjectUrl = tool.projectUrl !== undefined &&
tool.projectUrl !== null &&
tool.projectUrl !== "" &&
tool.projectUrl.trim() !== "";
badgesContainer.innerHTML = '';
if (isMethod) {
badgesContainer.innerHTML += '<span class="badge" style="background-color: var(--color-method); color: white;">Methode</span>';
} else {
if (hasValidProjectUrl) {
badgesContainer.innerHTML += '<span class="badge badge-primary">CC24-Server</span>';
}
if (tool.license !== 'Proprietary') {
badgesContainer.innerHTML += '<span class="badge badge-success">Open Source</span>';
}
// Only show CC24-Server and Knowledgebase badges
if (!isMethod && hasValidProjectUrl) {
badgesContainer.innerHTML += '<span class="badge badge-primary">CC24-Server</span>';
}
if (tool.knowledgebase === true) {
badgesContainer.innerHTML += '<span class="badge badge-error">Infos 📖</span>';
badgesContainer.innerHTML += '<span class="badge badge-error">📖</span>';
}
// Metadata - safe array handling