make icons
This commit is contained in:
@@ -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);">
|
||||
|
||||
@@ -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 -->
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user