Overhaul layout so that the RSS Reader Edge App will support multiple

screen resolutions.
Screenly · Jul 27, 2023 · 404a939 · 404a939
1 parent a9478a3
commit 404a939
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 37 deletions.
diff --git a/edge-apps/rss-reader/index.html b/edge-apps/rss-reader/index.html
@@ -10,17 +10,25 @@
   </head>
   <body>
     <template id="feed-template">
-      <div class="feed-container">
-        <h2 class="feed-title mb-2"></h2>
-        <p class="feed-date mb-3"></p>
-        <p class="feed-description text-white mt-4">
-        </p>
+      <!-- <div class="feed-container d-flex flex-column"> -->
+      <div class="feed-container col-sm-12 col-lg-12 col-xl-4 px-xl-3">
+        <h2 class="feed-title mt-4 fw-bolder"></h2>
+        <p class="feed-date mb-0"></p>
+        <div class="feed-description xtext-white mt-3">
+          <p></p>
+        </div>
       </div>
     </template>
 
+    <div id="feeds-container" class="container d-flex flex-column justify-content-center h-100">
+      <header>
+        <div class="header container">
+          <img class="logo" src="static/images/playground-logo.svg" alt="Screenly logo">
+          <h1 id="rss-title" class="fw-bolder">RSS Feed</h1>
+        </div>
+      </header>
 
-    <div id="feeds-container" class="container d-flex flex-column justify-content-center">
-      <h1 id="rss-title" class="fw-bolder header">RSS Reader</h1>
+      <div class="row mt-4"></div>
     </div>
 
     <script src="screenly.js?version=1"></script>

diff --git a/edge-apps/rss-reader/static/images/playground-logo.svg b/edge-apps/rss-reader/static/images/playground-logo.svg
diff --git 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
@@ -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;
+  }
 }