From da6654638a1a922861b8b7d940560a1bcaa99dd6 Mon Sep 17 00:00:00 2001
From: Jukka Lampikoski <jukka@lampikoski.com>
Date: Sun, 8 Mar 2026 09:39:23 +0200
Subject: [PATCH] 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>
---
 script.js | 6 +++---
 style.css | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/script.js b/script.js
index e90f365..3311726 100644
--- a/script.js
+++ b/script.js
@@ -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>
diff --git a/style.css b/style.css
index e913ada..d87761c 100644
--- a/style.css
+++ b/style.css
@@ -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 {