diff --git a/CHANGELOG.md b/CHANGELOG.md index 7657ab6..156311b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +### 0.0.3: 2023-10-27 + +* Fix regression with updating the status #5 +* Add status to container +* Add version information to footer +* Fix regression, JS error with updating the status #5 +* Fix regression with edited status #5 + ### 0.0.2: 2023-10-27 * Remove items, if post is deleted #5 (thanks @raikasdev @ThisIsMissEm!) diff --git a/index.php b/index.php index 6d46d60..6fa36de 100644 --- a/index.php +++ b/index.php @@ -101,17 +101,21 @@ } #statuses { - grid-auto-rows: max-content; - grid-auto-flow: row; - grid-template-columns: 20rem 2rem 1fr; - display: grid; + height: calc(100vh - (calc(70px * 2))); min-height: calc(100vh - (calc(70px * 2))); max-height: calc(100vh - (calc(70px * 2))); - height: calc(100vh - (calc(70px * 2))); max-width: 100vw; overflow-y: scroll; overflow-x: hidden; + } + + .status { gap: 10px; + grid-auto-rows: max-content; + grid-auto-flow: row; + grid-template-columns: 20rem 2rem 1fr; + display: grid; + margin-top: 10px; } @media (max-width: 600px) { @@ -119,6 +123,7 @@ grid-template-columns: 7rem 3rem 1fr; } + .version, .bottom-bar p, .top-bar p { font-size: 11px; @@ -167,6 +172,7 @@ align-items: center; } + .version, .bottom-bar p { margin: 0; color: var(--color-dim); @@ -184,6 +190,8 @@ } .live-indicator-block { + align-items: center; + gap: 10px; display: inline-flex; min-width: 50.73px; } @@ -728,38 +736,52 @@ @@ -866,24 +888,34 @@ function beginStreaming(filter, lang) { } }); + // Remove status if it's deleted + evtSource.addEventListener("delete", (event) => { + document.querySelectorAll(`[data-id="${event.data}"]`).forEach((el) => el.remove()); + + // Log + console.log('Status deleted: ' + event.data); + }); + // Update status if it gets updated evtSource.addEventListener("status.update", (event) => { var status = JSON.parse(event.data); - if (!document.querySelector(`[data-id="${status.id}"]`)) return; // Status isn't rendered (filtered out or just too old) - console.log(status.id); - // Remove divs - document.querySelectorAll(`div[data-id="${status.id}"]`).forEach((el) => el.remove()); + const updatedStatus = document.querySelector(`[data-id="${status.id}"]`); - // Replace anchor tag with new HTML - const anchor = document.querySelector(`a[data-id="${status.id}"]`); + // If updatedStatus does not exist, return + if (!updatedStatus) { + return; + } - anchor.outerHTML = statusToHtml(status); - }); + // Update content + document.querySelector(`[data-id="${status.id}"] .target .whitespace-pre-line`).innerHTML = status.content; + + // Add orange border to updated status + document.querySelector(`[data-id="${status.id}"] .target .whitespace-pre-line`).outerHTML = '[updated] ' + status.content; + + // Log + console.log('Status updated: ' + status.id); - // Remove status if it's deleted - evtSource.addEventListener("delete", (event) => { - document.querySelectorAll(`[data-id="${event.data}"]`).forEach((el) => el.remove()); }); }