+
@@ -119,6 +118,9 @@
} else {
return this.items.filter(item => item.FeedID === this.selectedFeed);
}
+ },
+ unread() {
+ return this.items.filter(item => !item.Read).length;
}
},
methods: {
@@ -143,8 +145,8 @@
this.selectedItem = undefined;
} else {
this.selectedItem = item.ID;
- let feedItem = document.querySelector('feed-item[item-id="'+item.ID+'"]');
- feedItem.load().then(() => feedItem.parentElement.querySelector('.loading').remove());
+
+ // document.querySelector(`feed-item[data-id='${item.ID}']`).content = item.Content || item.Description;
document.getElementById(this.selectedItem).scrollIntoView();
item.Read = true;
fetch(`/api/read/${item.ID}`, {method: "POST"})
diff --git a/views/static/feed-item.js b/views/static/feed-item.js
index ab1bbbe..3d81434 100644
--- a/views/static/feed-item.js
+++ b/views/static/feed-item.js
@@ -5,10 +5,18 @@ class FeedItem extends HTMLElement {
this.attachShadow({mode: 'open'});
}
- load() {
+ connectedCallback() {
const template = document.createElement('template');
template.innerHTML = `
`;
- if (!this.loaded) {
- return fetch(`/api/item/${this.getAttribute('item-id')}`)
- .then(res => res.json())
- .then(item => {
- template.innerHTML += item.Content || item.Description;
- this.shadowRoot.appendChild(template.content.cloneNode(true));
- })
- .then(() => this.loaded = true);
- }
+ fetch(`/api/item/${this.getAttribute('item-id')}`)
+ .then(res => res.json())
+ .then(item => {
+ template.innerHTML += item.Content || item.Description;
+ this.shadowRoot.appendChild(template.content.cloneNode(true));
+ })
+
}
}
customElements.define('feed-item', FeedItem);
diff --git a/views/static/style.css b/views/static/style.css
index 233f9fb..982d9ba 100644
--- a/views/static/style.css
+++ b/views/static/style.css
@@ -118,3 +118,41 @@
.dark {
background: #333;
}
+
+
+
+.item-content .card-content {
+ all: unset;
+ width: 100% !important;
+ overflow: scroll !important;
+ overflow-x: auto !important;
+}
+
+.item-content .card-content * {
+ max-width: 100% !important;
+ height: auto !important;
+}
+
+.item-content .card-content table {
+ width: 100% !important;
+}
+
+.item-content .card-content img {
+ margin: auto auto !important;
+}
+
+.item-content .card-content p {
+ font-family: 'Roboto', sans-serif;
+ font-size: 14px;
+ line-height: 20px;
+ letter-spacing: 0em;
+ font-weight: 500;
+}
+
+.item-content .card-content a {
+ color: #333;
+ font-weight: bold;
+}
+.dark .item-content .card-content a {
+ color: #ccc;
+}