Make entire post card clickable to open post

Clicking anywhere on a card opens the post modal. Like button and
like count have stopPropagation so they work independently. Added
cursor:pointer to card for visual affordance.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-08 09:39:23 +02:00
parent af55297452
commit da6654638a
2 changed files with 4 additions and 3 deletions

View File

@@ -177,7 +177,7 @@ function renderCards() {
? `<div class="card-img card-has-photo"><img src="${imgSrc}" alt="${p.title}" /></div>`
: `<div class="card-img">${p.emoji}</div>`;
return `
<article class="recipe-card" data-category="${p.category}" data-subcategory="${Array.isArray(p.subcategory) ? p.subcategory.join(',') : (p.subcategory || '')}">
<article class="recipe-card" data-category="${p.category}" data-subcategory="${Array.isArray(p.subcategory) ? p.subcategory.join(',') : (p.subcategory || '')}" onclick="openPost('${p.id}')">
${cardImgHTML}
<div class="card-body">
<span class="category-tag">${getCategoryLabel(p.category)}</span>
@@ -186,8 +186,8 @@ function renderCards() {
<p>${p.desc || ''}</p>
${metaRow}
<div class="card-actions">
<button class="btn-outline" onclick="openPost('${p.id}')">${t('view_btn')}</button>
<div class="like-row">
<button class="btn-outline" onclick="event.stopPropagation(); openPost('${p.id}')">${t('view_btn')}</button>
<div class="like-row" onclick="event.stopPropagation()">
<button class="like-btn ${liked ? 'liked' : ''}" data-like-id="${p.id}" onclick="toggleLike('${p.id}')">${liked ? t('liked_btn') : t('like_btn')}</button>
<span class="like-count" data-like-count="${p.id}">${likeCount}</span>
</div>

View File

@@ -195,6 +195,7 @@ nav a:hover { color: #fff; }
overflow: hidden;
box-shadow: 0 4px 16px var(--shadow);
transition: transform 0.2s, box-shadow 0.2s;
cursor: pointer;
}
.recipe-card:hover {