From 7450d010c66be4a06dce839deb5cfa60238bb3c2 Mon Sep 17 00:00:00 2001 From: Kato Date: Sat, 5 Sep 2026 15:28:39 +0000 Subject: [PATCH] =?UTF-8?q?Redesign=20wiki=20=E2=80=94=20individual=20card?= =?UTF-8?q?s=20with=20topic=20badge,=20subtopic=20headline,=20teaser,=20da?= =?UTF-8?q?te=20(yyyy-mm-dd)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/styles.css | 142 +++++++++++++++++++++++++++++++++++++++++++++++-- js/main.js | 85 +++++++++++++++++++++-------- 2 files changed, 202 insertions(+), 25 deletions(-) diff --git a/css/styles.css b/css/styles.css index 101fa40..cadcbc2 100644 --- a/css/styles.css +++ b/css/styles.css @@ -784,8 +784,9 @@ body[data-lang="en"] .hide-de { display: none !important; } ======================================== */ .wiki-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: 12px; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + gap: 20px; + margin-top: 30px; } .wiki-card { padding: 16px; @@ -837,6 +838,90 @@ body[data-lang="en"] .hide-de { display: none !important; } color: #65676b; } .wiki-card-subtopic { color: #1877f2; } + +/* ======================================== + WIKI NEW DESIGN — Individual Cards +*/ +.wiki-card-new { + background: #fff; + border-radius: 12px; + padding: 24px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); + cursor: pointer; + border-left: 4px solid #1877f2; + position: relative; + overflow: hidden; +} +.wiki-card-new:hover { + transform: translateY(-3px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); + border-left-color: #0d5fc9; +} +.wiki-card-new:active { + transform: translateY(0) scale(0.99); +} + +.wiki-topic-badge { + display: inline-block; + padding: 4px 10px; + background: #e7f3ff; + color: #1877f2; + font-size: 12px; + font-weight: 600; + border-radius: 6px; + margin-bottom: 12px; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.wiki-subtopic-headline { + font-size: 18px; + font-weight: 700; + color: #1a1a2e; + margin: 0 0 12px 0; + line-height: 1.3; +} + +.wiki-teaser { + font-size: 14px; + color: #65676b; + line-height: 1.5; + margin: 0 0 16px 0; +} + +.wiki-card-meta { + display: flex; + align-items: center; + justify-content: space-between; + padding-top: 12px; + border-top: 1px solid #f0f2f5; +} + +.wiki-date { + font-size: 13px; + color: #999; + font-weight: 500; +} + +.wiki-read-more { + font-size: 13px; + color: #1877f2; + font-weight: 600; + display: flex; + align-items: center; + gap: 4px; +} + +.wiki-read-more::after { + content: '→'; + transition: transform 0.2s ease; +} + +.wiki-card-new:hover .wiki-read-more::after { + transform: translateX(4px); +} + .no-results { padding: 20px; text-align: center; color: #65676b; } .loading-text { padding: 20px; text-align: center; color: #65676b; font-style: italic; } @@ -952,7 +1037,58 @@ body[data-lang="en"] .hide-de { display: none !important; } .user-detail-company { color: #65676b; text-align: center; } /* ======================================== - TELEGRAM BANNER + +/* ======================================== + WIKI MODAL ENHANCED + ======================================== */ +.wiki-modal-topic { + display: inline-block; + padding: 4px 10px; + background: #e7f3ff; + color: #1877f2; + font-size: 12px; + font-weight: 600; + border-radius: 6px; + margin-bottom: 12px; + text-transform: uppercase; + letter-spacing: 0.5px; +} +.wiki-modal-date { + font-size: 13px; + color: #999; + font-weight: 500; + margin-bottom: 16px; +} +.wiki-modal-subtitle { + font-size: 16px; + color: #1877f2; + margin: 16px 0 8px; + border-bottom: 1px solid #f0f2f5; + padding-bottom: 4px; +} +.wiki-modal-text { + font-size: 14px; + line-height: 1.6; + color: #333; + margin-bottom: 24px; +} +.wiki-modal-close { + background: #f0f2f5; + border: none; + padding: 8px 20px; + border-radius: 6px; + cursor: pointer; + font-weight: 600; + color: #65676b; + font-size: 14px; + transition: all 0.2s ease; +} +.wiki-modal-close:hover { + background: #e4e6eb; + color: #1c1e21; +} + +TELEGRAM BANNER ======================================== */ .telegram-banner { background: #e7f3ff; diff --git a/js/main.js b/js/main.js index 53331a8..4b75d00 100644 --- a/js/main.js +++ b/js/main.js @@ -650,42 +650,56 @@ function renderWikiCards(data) { return; } - // Group by topic - const topics = {}; - data.forEach(item => { - const topicKey = (item.topic_en && currentLang === 'en') ? item.topic_en : (item.topic || 'Unknown'); - if (!topics[topicKey]) topics[topicKey] = []; - topics[topicKey].push(item); - }); + // Sort by updatedAt descending (newest first) + const sorted = [...data].sort((a, b) => new Date(b.updatedAt || b.createdAt) - new Date(a.updatedAt || a.createdAt)); - const colors = ['blue', 'teal', 'green', 'orange', 'purple', 'pink', 'yellow']; - - Object.entries(topics).forEach(([topicName, subtopics], idx) => { + sorted.forEach(item => { const card = document.createElement('div'); - card.className = 'wiki-card'; - card.dataset.color = colors[idx % colors.length]; + card.className = 'wiki-card-new'; + card.setAttribute('role', 'button'); + card.setAttribute('tabindex', '0'); - // Get excerpt from first subtopic - const firstSub = subtopics[0]; - const excerpt = currentLang === 'en' && firstSub.wiki_en ? firstSub.wiki_en : (firstSub.wiki || ''); - const subtopicTitle = currentLang === 'en' && firstSub.subtopic_en ? firstSub.subtopic_en : (firstSub.subtopic || ''); + const topic = currentLang === 'en' && item.topic_en ? item.topic_en : (item.topic || 'Unknown'); + const subtopic = currentLang === 'en' && item.subtopic_en ? item.subtopic_en : (item.subtopic || ''); + const content = currentLang === 'en' && item.wiki_en ? item.wiki_en : (item.wiki || ''); + + // Get date — try updatedAt first, fall back to createdAt + const dateStr = formatDate(new Date(item.updatedAt || item.createdAt)); + + // Teaser: first 150 chars of content + const teaser = content.trim().substring(0, 180); + const teaserEnd = content.trim().length > 180 ? '...' : ''; card.innerHTML = ` -
${escapeHtml(topicName)}
-
${escapeHtml(excerpt.substring(0, 150))}${excerpt.length > 150 ? '...' : ''}
-
- ${escapeHtml(subtopicTitle)} - ${subtopics.length} ${isDE() ? 'Unterpunkte' : 'subtopics'} + ${escapeHtml(topic)} +

${escapeHtml(subtopic)}

+

${escapeHtml(teaser)}${teaserEnd}

+
+ ${dateStr}
`; // Open modal on click - card.addEventListener('click', () => openWikiModal(topicName, subtopics)); + card.addEventListener('click', () => openWikiModalSingle(item)); + card.addEventListener('keydown', (e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + openWikiModalSingle(item); + } + }); grid.appendChild(card); }); } +function formatDate(date) { + if (!(date instanceof Date) || isNaN(date)) return ''; + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, '0'); + const day = String(date.getDate()).padStart(2, '0'); + return `${year}-${month}-${day}`; +} + function openWikiModal(topicName, subtopics) { // Create modal if not exists let modalOverlay = document.getElementById('wiki-modal-overlay'); @@ -717,6 +731,33 @@ function closeWikiModal() { if (overlay) overlay.classList.remove('active'); } +function openWikiModalSingle(item) { + let modalOverlay = document.getElementById('wiki-modal-overlay'); + if (!modalOverlay) { + modalOverlay = document.createElement('div'); + modalOverlay.id = 'wiki-modal-overlay'; + modalOverlay.className = 'modal-overlay'; + document.body.appendChild(modalOverlay); + } + + const topic = currentLang === 'en' && item.topic_en ? item.topic_en : (item.topic || 'Unknown'); + const subtopic = currentLang === 'en' && item.subtopic_en ? item.subtopic_en : (item.subtopic || ''); + const content = currentLang === 'en' && item.wiki_en ? item.wiki_en : (item.wiki || ''); + + // Get date + const dateStr = formatDate(new Date(item.updatedAt || item.createdAt)); + + let html = '
'; + html += '
'; + html += `
${escapeHtml(topic)}
`; + html += `

${escapeHtml(subtopic)}

`; + if (dateStr) html += `
${dateStr}
`; + html += `
${escapeHtml(content)}
`; + html += '
'; + modalOverlay.innerHTML = html; + modalOverlay.classList.add('active'); +} + function searchWiki(term) { if (!term.trim()) { renderWikiCards(wikiData);