jukka/tykkaa.fi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make entire post card clickable to open post

Browse Source 
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:
Jukka Lampikoski
2026-03-08 09:39:23 +02:00
parent af55297452
commit da6654638a
2 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
script.js
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 card-has-photo"><img src="${imgSrc}" alt="${p.title}" /></div>`
: `<div class="card-img">${p.emoji}</div>`; : `<div class="card-img">${p.emoji}</div>`;
return ` 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} ${cardImgHTML}
<div class="card-body"> <div class="card-body">
<span class="category-tag">${getCategoryLabel(p.category)}</span> <span class="category-tag">${getCategoryLabel(p.category)}</span>
@@ -186,8 +186,8 @@ function renderCards() {
<p>${p.desc || ''}</p> <p>${p.desc || ''}</p>
${metaRow} ${metaRow}
<div class="card-actions"> <div class="card-actions">
<button class="btn-outline" onclick="openPost('${p.id}')">${t('view_btn')}</button> <button class="btn-outline" onclick="event.stopPropagation(); openPost('${p.id}')">${t('view_btn')}</button>
<div class="like-row"> <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> <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> <span class="like-count" data-like-count="${p.id}">${likeCount}</span>
</div> </div>

1
style.css
View File

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