-
+ +
+
+
+
+
+
+
+
+
-
+ 
+
+
+ RSS Feed
+
-
diff --git a/edge-apps/rss-reader/static/images/playground-logo.svg b/edge-apps/rss-reader/static/images/playground-logo.svg
new file mode 100644
index 00000000..33c2b888
--- /dev/null
+++ b/edge-apps/rss-reader/static/images/playground-logo.svg
@@ -0,0 +1,37 @@
+
diff --git a/edge-apps/rss-reader/static/js/main.js b/edge-apps/rss-reader/static/js/main.js
index 06b9533b..b7930d23 100644
--- a/edge-apps/rss-reader/static/js/main.js
+++ b/edge-apps/rss-reader/static/js/main.js
@@ -1,11 +1,22 @@
+// @TODO: Process feed content to handle images and text accordingly.
+// Add conditional statements to handle different types of content.
+const processFeedContent = ({ content, contentSnippet }) => {
+ const parser = new DOMParser()
+ const doc = parser.parseFromString(content, 'text/html')
+
+ return contentSnippet
+}
+
const initApp = () => {
- const feedsContainer = document.querySelector('#feeds-container')
+ const feedsContainer = document
+ .querySelector('#feeds-container')
+ .querySelector('.row')
const { rss_url, rss_title, limit } = screenly.settings
const parser = new RSSParser()
const titleHeader = document.querySelector('#rss-title')
- document.title = rss_title
titleHeader.innerHTML = rss_title
+ document.title = rss_title
parser.parseURL(rss_url, (err, feed) => {
if (err) {
@@ -18,17 +29,16 @@ const initApp = () => {
const title = entry.title
const date = moment(new Date(entry.pubDate))
.format('MMMM DD, YYYY, h:mm A')
- // @TODO: Handle content dynamically. Some have images, some have just text,
- // some have both.
- const description = entry.content
const feedTemplate = document.querySelector('#feed-template')
const feedContainer = feedTemplate.content.cloneNode(true)
feedContainer.querySelector('.feed-title').innerHTML = title
feedContainer.querySelector('.feed-date').innerHTML = date
- feedDescription = feedContainer.querySelector('.feed-description')
- feedDescription.innerHTML = description
+ feedDescription = feedContainer
+ .querySelector('.feed-description')
+ .querySelector('p')
+ feedDescription.innerHTML = processFeedContent(entry)
feedsContainer.appendChild(feedContainer)
})
diff --git a/edge-apps/rss-reader/static/styles/main.css b/edge-apps/rss-reader/static/styles/main.css
index 9c352d28..2c075991 100644
--- a/edge-apps/rss-reader/static/styles/main.css
+++ b/edge-apps/rss-reader/static/styles/main.css
@@ -13,36 +13,64 @@ a {
color: #FFFFFF;
}
-p {
- font-size: 1rem;
+header {
+ border-bottom: 5px solid #FFFFFF;
+ flex: 0 1 auto;
+ padding: 1rem;
}
-#feeds-container {
- height: 100vh;
+@media (min-width: 1280px) {
+ h1 {
+ font-size: 2.5rem;
+ }
+
+ h2 {
+ font-size: 2rem;
+ }
+
+ p {
+ font-size: 1.10rem;
+ }
}
-/* Media query for laptops and smaller screens */
-@media (max-width: 1200px) {
- h1, h2, h3, h4, h5, h6 {
- font-size: 1.6rem;
- }
+@media (min-width: 1920px) {
+ h1 {
+ font-size: 3rem;
+ }
+
+ h2 {
+ font-size: 2.5rem;
+ }
+
+ p {
+ font-size: 1.25rem;
+ }
+}
+
+@media (min-width: 3840px) {
+ h1 {
+ font-size: 4rem;
+ }
+
+ h2 {
+ font-size: 3.5rem;
+ }
- p {
- font-size: 0.9rem;
- }
+ p {
+ font-size: 2rem;
+ }
}
-/* Media query for 4K TVs and larger screens */
-@media (min-width: 2000px) {
- h1, h2, h3, h4, h5, h6 {
- font-size: 6rem;
- }
+@media (min-width: 4096px) {
+ h1 {
+ font-size: 4.5rem;
+ }
- p {
- font-size: 3rem;
- }
+ h2 {
+ font-size: 4rem;
+ }
- .feed-description {
- margin-top: 5rem !important;
- }
+ p {
+ font-size: 2.25rem;
+ }
}