greg/rss-reader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mark as read/unread icon

Browse Source
This commit is contained in:
Greg Shuflin 2025-02-05 01:20:40 -08:00
parent 3509d889d5
commit 22a12430e3
2 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
static/css/style.css
View File

@ -520,7 +520,7 @@ button:disabled {
.feed-entry-title { .feed-entry-title {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 0.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@ -646,10 +646,11 @@ button:disabled {
border: none; border: none;
color: var(--text-color); color: var(--text-color);
cursor: pointer; cursor: pointer;
padding: 0.5rem; padding: 0.25rem;
opacity: 0.7; opacity: 0.7;
transition: opacity 0.2s; transition: opacity 0.2s;
font-size: 1.2rem; font-size: 1.2rem;
margin-left: -0.25rem;
} }
.read-toggle:hover { .read-toggle:hover {

20
static/js/app.js
View File

@ -46,18 +46,12 @@ function renderFeedEntries(entries) {
const title = document.createElement('h2'); const title = document.createElement('h2');
title.className = 'feed-entry-title'; title.className = 'feed-entry-title';
const titleLink = document.createElement('a');
titleLink.href = entry.link || '#';
titleLink.target = '_blank';
titleLink.textContent = entry.title;
title.appendChild(titleLink);
const readToggle = document.createElement('button'); const readToggle = document.createElement('button');
readToggle.className = 'read-toggle'; readToggle.className = 'read-toggle';
readToggle.title = entry.marked_read ? 'Mark as unread' : 'Mark as read'; readToggle.title = entry.marked_read ? 'Mark as unread' : 'Mark as read';
readToggle.innerHTML = entry.marked_read readToggle.innerHTML = entry.marked_read
? '<i class="fa-solid fa-circle-check"></i>' ? '<i class="fa-solid fa-square-check"></i>'
: '<i class="fa-regular fa-circle"></i>'; : '<i class="fa-regular fa-square"></i>';
readToggle.onclick = async () => { readToggle.onclick = async () => {
try { try {
const response = await fetch(`/entries/${entry.id}/state`, { const response = await fetch(`/entries/${entry.id}/state`, {
@ -74,8 +68,8 @@ function renderFeedEntries(entries) {
entry.marked_read = !entry.marked_read; entry.marked_read = !entry.marked_read;
readToggle.title = entry.marked_read ? 'Mark as unread' : 'Mark as read'; readToggle.title = entry.marked_read ? 'Mark as unread' : 'Mark as read';
readToggle.innerHTML = entry.marked_read readToggle.innerHTML = entry.marked_read
? '<i class="fa-solid fa-circle-check"></i>' ? '<i class="fa-solid fa-square-check"></i>'
: '<i class="fa-regular fa-circle"></i>'; : '<i class="fa-regular fa-square"></i>';
} else { } else {
console.error('Failed to update read state:', response.status); console.error('Failed to update read state:', response.status);
} }
@ -85,6 +79,12 @@ function renderFeedEntries(entries) {
}; };
title.appendChild(readToggle); title.appendChild(readToggle);
const titleLink = document.createElement('a');
titleLink.href = entry.link || '#';
titleLink.target = '_blank';
titleLink.textContent = entry.title;
title.appendChild(titleLink);
const meta = document.createElement('div'); const meta = document.createElement('div');
meta.className = 'feed-entry-meta'; meta.className = 'feed-entry-meta';
if (entry.published) { if (entry.published) {