From 8c1600fcc4a150bbf9278177613f74833d0268ce Mon Sep 17 00:00:00 2001 From: overcuriousity Date: Thu, 17 Jul 2025 21:06:16 +0200 Subject: [PATCH] styles updates --- .env.example | 17 ++++++ src/components/ToolCard.astro | 76 ++++++++++++------------ src/pages/index.astro | 82 ++++++++++++-------------- src/styles/global.css | 105 ++++++++++++++++++++++++++++------ 4 files changed, 184 insertions(+), 96 deletions(-) create mode 100644 .env.example diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..7148949 --- /dev/null +++ b/.env.example @@ -0,0 +1,17 @@ +# AI Configuration +AI_API_ENDPOINT=https://aiendpoint.org +AI_API_KEY=your_apikey_here +AI_MODEL='ai_model_name_here' + +# OIDC Configuration +OIDC_ENDPOINT=https://oidc-provider.org +OIDC_CLIENT_ID=your_oidc_client_id +OIDC_CLIENT_SECRET=your_oidc_client_secret + +AUTHENTICATION_NECESSARY=false # Always set this to true in prod + + +# Application +PUBLIC_BASE_URL=http://localhost:4321 + +NODE_ENV=development \ No newline at end of file diff --git a/src/components/ToolCard.astro b/src/components/ToolCard.astro index a6a36fb..db3c258 100644 --- a/src/components/ToolCard.astro +++ b/src/components/ToolCard.astro @@ -33,73 +33,79 @@ const cardClass = hasValidProjectUrl ? 'card card-hosted tool-card' : (tool.lice ---
-
-

{tool.name}

-
+ +
+

{tool.name}

+
{hasValidProjectUrl && Self-Hosted} - {tool.license !== 'Proprietary' && Open Source} - {hasKnowledgebase && Infos 📖} + {tool.license !== 'Proprietary' && OSS} + {hasKnowledgebase && 📖}
-

+ +

{tool.description}

-
-
- + +
+
+ - - {tool.platforms.join(', ')} + + {tool.platforms.slice(0, 2).join(', ')}{tool.platforms.length > 2 ? '...' : ''}
-
- +
+ - + {tool.skillLevel}
-
- +
+ - - {tool.license} + + {tool.license === 'Proprietary' ? 'Prop.' : tool.license.split(' ')[0]}
-
- {tool.tags.map(tag => ( + +
+ {tool.tags.slice(0, 8).map(tag => ( {tag} ))}
- - {hasValidProjectUrl ? ( - -
\ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index 3139e6f..af2c752 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -347,86 +347,78 @@ function createToolCard(tool) { const hasKnowledgebase = tool.knowledgebase === true; const cardDiv = document.createElement('div'); - const cardClass = hasValidProjectUrl ? 'card card-hosted' : (tool.license !== 'Proprietary' ? 'card card-oss' : 'card'); + const cardClass = hasValidProjectUrl ? 'card card-hosted tool-card' : (tool.license !== 'Proprietary' ? 'card card-oss tool-card' : 'card tool-card'); cardDiv.className = cardClass; cardDiv.style.cursor = 'pointer'; cardDiv.onclick = () => (window as any).showToolDetails(tool.name); - // Create responsive button HTML - let buttonHTML; - if (hasValidProjectUrl) { - // Two buttons for tools we're hosting - responsive layout - buttonHTML = ` -
- - Software-Homepage - - - Zugreifen - -
- `; - } else { - // Single button for tools we're not hosting - buttonHTML = ` - - Software-Homepage - - `; - } - cardDiv.innerHTML = ` -
-

${tool.name}

-
+
+

${tool.name}

+
${hasValidProjectUrl ? 'Self-Hosted' : ''} - ${tool.license !== 'Proprietary' ? 'Open Source' : ''} - ${hasKnowledgebase ? 'Infos 📖' : ''} + ${tool.license !== 'Proprietary' ? 'OSS' : ''} + ${hasKnowledgebase ? '📖' : ''}
-

+

${tool.description}

-
-
- +
+
+ - - ${(tool.platforms || []).join(', ')} + + ${(tool.platforms || []).slice(0, 2).join(', ')}${tool.platforms && tool.platforms.length > 2 ? '...' : ''}
-
- +
+ - + ${tool.skillLevel}
-
- +
+ - - ${tool.license} + + ${tool.license === 'Proprietary' ? 'Prop.' : tool.license.split(' ')[0]}
-
- ${(tool.tags || []).map(tag => `${tag}`).join('')} +
+ ${(tool.tags || []).slice(0, 8).map(tag => `${tag}`).join('')}
- ${buttonHTML} +
+ ${hasValidProjectUrl ? ` +
+ + Homepage + + + Zugreifen + +
+ ` : ` + + Software-Homepage + + `} +
`; return cardDiv; diff --git a/src/styles/global.css b/src/styles/global.css index d5c6a6e..d64229c 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -309,9 +309,8 @@ input[type="checkbox"] { box-shadow: 0 0 0 1px var(--color-hosted); } -/* Adjust gradient for different card types */ .card-hosted .tool-tags-container::after { - background: linear-gradient(to bottom, transparent 0%, var(--color-hosted-bg) 80%); + background: linear-gradient(to right, transparent 0%, var(--color-hosted-bg) 70%); } .card-oss { @@ -320,7 +319,7 @@ input[type="checkbox"] { } .card-oss .tool-tags-container::after { - background: linear-gradient(to bottom, transparent 0%, var(--color-oss-bg) 80%); + background: linear-gradient(to right, transparent 0%, var(--color-oss-bg) 70%); } /* Grid and Layout */ @@ -456,36 +455,110 @@ input[type="checkbox"] { box-shadow: inset 0 0 0 1px rgb(59 130 246 / 40%); } -/* Tool Card Description Truncation - 4 lines max */ +.tool-card { + height: 300px; + display: flex; + flex-direction: column; + padding: 1.25rem; +} + +/* Card Header - Fixed Height */ +.tool-card .tool-card-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + min-height: 2.5rem; + margin-bottom: 0.75rem; +} + +.tool-card .tool-card-header h3 { + margin: 0; + font-size: 1.125rem; + line-height: 1.3; + flex: 1; + margin-right: 0.75rem; +} + +.tool-card .tool-card-badges { + display: flex; + gap: 0.375rem; + flex-wrap: wrap; + flex-shrink: 0; + align-items: flex-start; +} + .tool-card .text-muted { - display: -webkit-box !important; - -webkit-line-clamp: 4; - line-clamp: 4; + display: -webkit-box; + -webkit-line-clamp: 3; + line-clamp: 3; -webkit-box-orient: vertical; - overflow: hidden !important; + overflow: hidden; line-height: 1.4; - max-height: calc(1.4em * 4); + max-height: calc(1.4em * 3); + font-size: 0.875rem; + margin-bottom: 1rem; + word-break: break-word; } -/* Tool Card Tags Truncation - 3 lines max (uses height approach since we need flex) */ +/* Tool Card Tags - 2 lines max with better spacing */ .tool-card .tool-tags-container { - max-height: calc(1.5em * 3 + 0.5rem) !important; /* 3 lines + gap space */ - overflow: hidden !important; + display: flex; + flex-wrap: wrap; + gap: 0.25rem; + max-height: 2.5rem; + overflow: hidden; position: relative; + margin-bottom: 1rem; + flex-shrink: 0; } -/* Add subtle fade for truncated tags */ +.tool-card .tag { + font-size: 0.75rem; + padding: 0.25rem 0.5rem; + margin: 0; + white-space: nowrap; +} + +/* Subtle fade effect for truncated tags */ .tool-card .tool-tags-container::after { content: ''; position: absolute; bottom: 0; - left: 0; right: 0; - height: 1.2em; - background: linear-gradient(to bottom, transparent 0%, var(--color-bg) 80%); + width: 3rem; + height: 100%; + background: linear-gradient(to right, transparent 0%, var(--color-bg) 70%); pointer-events: none; + opacity: 0.8; } +.tool-card .tool-card-buttons { + margin-top: auto; + flex-shrink: 0; +} + +.tool-card .button-row { + display: flex; + gap: 0.5rem; +} + +.tool-card .button-row .btn { + flex: 1; + font-size: 0.8125rem; + padding: 0.625rem 1rem; +} + +.tool-card .single-button { + width: 100%; + font-size: 0.8125rem; + padding: 0.625rem 1rem; +} + +/* Normal sized badges */ +.tool-card .badge { + font-size: 0.75rem; + padding: 0.25rem 0.5rem; +} .tool-chip { display: inline-block;