diff --git a/static/css/style.css b/static/css/style.css index 9cb83ad..7aeb788 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -187,6 +187,11 @@ main { background: #fff; } +.comic-image a { + display: block; + cursor: pointer; +} + .comic-image img { max-width: 100%; height: auto; diff --git a/static/js/comic-nav.js b/static/js/comic-nav.js index 3350c32..c412a00 100644 --- a/static/js/comic-nav.js +++ b/static/js/comic-nav.js @@ -34,12 +34,16 @@ // Update date document.querySelector('.comic-date').textContent = comic.date; - // Update image - const img = document.querySelector('.comic-image img'); + // Update image and its link + const comicImageDiv = document.querySelector('.comic-image'); + const img = comicImageDiv.querySelector('img'); img.src = `/static/images/comics/${comic.filename}`; img.alt = title; img.title = comic.alt_text; + // Update or create/remove the link wrapper + updateComicImageLink(comic.number); + // Update author note const transcriptDiv = document.querySelector('.comic-transcript'); if (comic.author_note) { @@ -66,6 +70,30 @@ history.pushState({ comicId: comic.number }, '', `/comic/${comic.number}`); } + // Update comic image link for click navigation + function updateComicImageLink(currentNumber) { + const comicImageDiv = document.querySelector('.comic-image'); + const img = comicImageDiv.querySelector('img'); + + // Remove existing link if present + const existingLink = comicImageDiv.querySelector('a'); + if (existingLink) { + existingLink.replaceWith(img); + } + + // Add link if there's a next comic + if (currentNumber < totalComics) { + const link = document.createElement('a'); + link.href = `/comic/${currentNumber + 1}`; + link.onclick = (e) => { + e.preventDefault(); + loadComic(currentNumber + 1); + }; + img.parentNode.insertBefore(link, img); + link.appendChild(img); + } + } + // Update navigation button states function updateNavButtons(currentNumber) { const navButtons = document.querySelector('.nav-buttons'); @@ -129,6 +157,7 @@ if (currentNumber && totalComics) { updateNavButtons(currentNumber); + updateComicImageLink(currentNumber); } // Handle browser back/forward diff --git a/templates/comic.html b/templates/comic.html index 1c1f819..efd92f4 100644 --- a/templates/comic.html +++ b/templates/comic.html @@ -12,9 +12,17 @@
+ {% if comic.number < total_comics %} + + {{ comic.title if comic.title else '#' ~ comic.number }} + + {% else %} {{ comic.title if comic.title else '#' ~ comic.number }} + {% endif %}