css tweaks

This commit is contained in:
Greg Shuflin 2025-02-05 01:32:33 -08:00
parent f95d6a5632
commit fb1449689b
2 changed files with 20 additions and 1 deletions

View File

@ -515,6 +515,20 @@ button:disabled {
border-radius: 8px; border-radius: 8px;
padding: 1.5rem; padding: 1.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
transition: opacity 0.2s ease, background-color 0.2s ease;
}
.feed-entry.read {
background-color: var(--dark-bg);
opacity: 0.8;
}
.feed-entry.read .feed-entry-title a {
color: var(--text-muted);
}
.feed-entry.read .feed-entry-summary {
color: var(--text-muted);
} }
.feed-entry-title { .feed-entry-title {

View File

@ -40,8 +40,11 @@ function renderFeedEntries(entries) {
mainContent.innerHTML = ''; mainContent.innerHTML = '';
entries.forEach(entry => { entries.forEach(entry => {
const entryDiv = document.createElement('div'); const entryDiv = document.createElement('article');
entryDiv.className = 'feed-entry'; entryDiv.className = 'feed-entry';
if (entry.marked_read) {
entryDiv.classList.add('read');
}
const title = document.createElement('h2'); const title = document.createElement('h2');
title.className = 'feed-entry-title'; title.className = 'feed-entry-title';
@ -70,6 +73,7 @@ function renderFeedEntries(entries) {
readToggle.innerHTML = entry.marked_read readToggle.innerHTML = entry.marked_read
? '<i class="fa-solid fa-square-check"></i>' ? '<i class="fa-solid fa-square-check"></i>'
: '<i class="fa-regular fa-square"></i>'; : '<i class="fa-regular fa-square"></i>';
entryDiv.classList.toggle('read', entry.marked_read);
} else { } else {
console.error('Failed to update read state:', response.status); console.error('Failed to update read state:', response.status);
} }
@ -99,6 +103,7 @@ function renderFeedEntries(entries) {
entry.marked_read = true; entry.marked_read = true;
readToggle.title = 'Mark as unread'; readToggle.title = 'Mark as unread';
readToggle.innerHTML = '<i class="fa-solid fa-square-check"></i>'; readToggle.innerHTML = '<i class="fa-solid fa-square-check"></i>';
entryDiv.classList.add('read');
} else { } else {
console.error('Failed to update read state:', response.status); console.error('Failed to update read state:', response.status);
} }