Redesign wiki — individual cards with topic badge, subtopic headline, teaser, date (yyyy-mm-dd)
This commit is contained in:
Kato
+138
-2
@@ -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,6 +1037,57 @@ body[data-lang="en"] .hide-de { display: none !important; }
|
||||
.user-detail-company { color: #65676b; text-align: center; }
|
||||
|
||||
/* ========================================
|
||||
|
||||
/* ========================================
|
||||
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 {
|
||||
|
||||
+63
-22
@@ -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 = `
|
||||
<div class="wiki-card-title">${escapeHtml(topicName)}</div>
|
||||
<div class="wiki-card-excerpt">${escapeHtml(excerpt.substring(0, 150))}${excerpt.length > 150 ? '...' : ''}</div>
|
||||
<div class="wiki-card-footer">
|
||||
<span class="wiki-card-subtopic">${escapeHtml(subtopicTitle)}</span>
|
||||
<span>${subtopics.length} ${isDE() ? 'Unterpunkte' : 'subtopics'}</span>
|
||||
<span class="wiki-topic-badge">${escapeHtml(topic)}</span>
|
||||
<h3 class="wiki-subtopic-headline">${escapeHtml(subtopic)}</h3>
|
||||
<p class="wiki-teaser">${escapeHtml(teaser)}${teaserEnd}</p>
|
||||
<div class="wiki-card-meta">
|
||||
<span class="wiki-date">${dateStr}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 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 = '<div class="modal wiki-modal"><button class="modal-close" onclick="closeWikiModal()">×</button>';
|
||||
html += '<div class="wiki-modal-content">';
|
||||
html += `<div class="wiki-modal-topic">${escapeHtml(topic)}</div>`;
|
||||
html += `<h2 class="wiki-modal-title">${escapeHtml(subtopic)}</h2>`;
|
||||
if (dateStr) html += `<div class="wiki-modal-date">${dateStr}</div>`;
|
||||
html += `<div class="wiki-modal-text">${escapeHtml(content)}</div>`;
|
||||
html += '</div></div>';
|
||||
modalOverlay.innerHTML = html;
|
||||
modalOverlay.classList.add('active');
|
||||
}
|
||||
|
||||
function searchWiki(term) {
|
||||
if (!term.trim()) {
|
||||
renderWikiCards(wikiData);
|
||||
|
||||
Reference in New Issue
Block a user