Streamlined UI for adding feeds and fixed layout

thingbomb · Aug 20, 2024 · bb66138 · bb66138
1 parent 157985d
commit bb66138
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -8,6 +8,7 @@ Feedbomb is a simple and powerful RSS reader for the web. It is free, open-sourc
 - **Self-Hostable**: Host Feedbomb on your own server.
 - **PWA Support**: Works as a Progressive Web App.
 - **Built-in article reader**: Read articles with our simple and modern reader.
+- **Modern UI**: Feedbomb has a modern UI that is easy to use.
 - **Much more coming soon**
 
 ## Usage

diff --git a/src/css/home.css b/src/css/home.css
@@ -143,6 +143,39 @@ main {
             color: rgb(158, 158, 158);
         }
     }
+
+    .content {
+        padding: 10px;
+
+        #input-box-container {
+            display: flex;
+            gap: 0px;
+
+            input {
+                background-color: #202020;
+                border-top-left-radius: 8px;
+                border-bottom-left-radius: 8px;
+                padding: 10px;
+                border: none;
+                color: white;
+                outline: none;
+            }
+
+            input::placeholder {
+                color: #333;
+                font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+            }
+
+            button {
+                background-color: #202020;
+                border-top-right-radius: 8px;
+                border-bottom-right-radius: 8px;
+                padding: 10px;
+                border: none;
+                color: white;
+            }
+        }
+    }
 }
 
 .dateMarker {
@@ -157,25 +190,31 @@ main {
     #root {
         grid-template-columns: 90px calc(100% - 90px);
     }
+
     main {
         .article {
             grid-template-columns: 100% !important;
             grid-template-rows: 100px 20px calc(100% - 120px);
         }
     }
+
     aside {
         h2 {
             display: none;
         }
+
         br {
             display: none;
         }
+
         .feed-list {
             .feed-item {
                 grid-template-columns: 30px;
+
                 span {
                     display: none;
                 }
+
                 .spacer {
                     display: none;
                 }

diff --git a/src/index.html b/src/index.html
@@ -1,31 +1,58 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Feedbomb</title>
     <link rel="stylesheet" href="css/home.css">
     <link rel="manifest" href="manifest.json">
 </head>
+
 <body>
     <div id="root">
         <aside>
             <h2>Feedbomb</h2><br>
             <div class="feed-list">
-                <button class="feed-item" onclick="filterFeeds('all+posts')"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M240-200h120v-200q0-17 11.5-28.5T400-440h160q17 0 28.5 11.5T600-400v200h120v-360L480-740 240-560v360Zm-80 0v-360q0-19 8.5-36t23.5-28l240-180q21-16 48-16t48 16l240 180q15 11 23.5 28t8.5 36v360q0 33-23.5 56.5T720-120H560q-17 0-28.5-11.5T520-160v-200h-80v200q0 17-11.5 28.5T400-120H240q-33 0-56.5-23.5T160-200Zm320-270Z"/></svg><div class="spacer"></div><span>Home</span></button>
+                <button class="feed-item" onclick="filterFeeds('all+posts')"><svg xmlns="http://www.w3.org/2000/svg"
+                        height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed">
+                        <path
+                            d="M240-200h120v-200q0-17 11.5-28.5T400-440h160q17 0 28.5 11.5T600-400v200h120v-360L480-740 240-560v360Zm-80 0v-360q0-19 8.5-36t23.5-28l240-180q21-16 48-16t48 16l240 180q15 11 23.5 28t8.5 36v360q0 33-23.5 56.5T720-120H560q-17 0-28.5-11.5T520-160v-200h-80v200q0 17-11.5 28.5T400-120H240q-33 0-56.5-23.5T160-200Zm320-270Z" />
+                    </svg>
+                    <div class="spacer"></div><span>Home</span>
+                </button>
             </div>
         </aside>
         <main>
-            <div class="header">
-            <h2 id="feedTitle">Home</h2>
-            <h5 id="category" style="display: none;"></h5>
+            <div id="articles">
+                <div class="header">
+                    <h2 id="feedTitle">Home</h2>
+                    <h5 id="category" style="display: none;"></h5>
+                </div>
+                <br>
+                <div id="feed-content">
+                    <span style="padding: 10px;">Loading feeds</span>
+                </div>
             </div>
-            <br>
-            <div id="feed-content">
-                Loading feeds
+
+            <div id="add-feed" style="display: none;">
+                <div class="header">
+                    <h2 id="feedTitle">Add Feed</h2>
+                </div>
+                <div class="content">
+                    <p>Add a feed by entering the URL of the feed.<br><br>To add a subreddit, enter the subreddit in
+                        this format: <code>/r/subreddit</code></p>
+                    <div id="feed-content">
+                        <div id="input-box-container">
+                            <input type="text" id="feed-url" placeholder="URL">
+                            <button id="add-feed-button">+</button>
+                        </div>
+                    </div>
+                </div>
             </div>
         </main>
     </div>
     <script src="js/home.js"></script>
 </body>
+
 </html>
diff --git a/src/js/home.js b/src/js/home.js
@@ -138,16 +138,7 @@ async function getSavedFeeds() {
 
         allFeeds.sort((a, b) => new Date(b.pubDate) - new Date(a.pubDate));
 
-        document.querySelector("#feed-content").innerHTML = allFeeds.map(feed =>
-            `<a class="article" href="read/index.html?url=${feed.link}">
-                <img src="${feed.image}" class="thumbnail">
-                <div class="spacer"></div>
-                <div class="content">
-                <span class="headline">${feed.title}</span>
-                <span class="text">${feed.feedTitle} / ${timeDifference(new Date(), new Date(feed.pubDate))}<br><br>${feed.description ? feed.description : ""}</span>
-                </div>
-            </a>`
-        ).join("");
+        filterFeeds("all+posts");
 
         if (!document.querySelector(".feed-item.add-feed")) {
             let addFeedButton = document.createElement("button");
@@ -157,28 +148,41 @@ async function getSavedFeeds() {
             document.querySelector(".feed-list").appendChild(addFeedButton);
         }
     } else {
-        document.querySelector("#feed-content").innerHTML = "No feeds saved";
+        document.querySelector("#feed-content").innerHTML = "<span style='padding: 10px;'>No feeds saved</span>";
         if (!document.querySelector(".feed-item.add-feed")) {
             let addFeedButton = document.createElement("button");
-            addFeedButton.innerHTML = "Add feed";
+            addFeedButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M440-440H240q-17 0-28.5-11.5T200-480q0-17 11.5-28.5T240-520h200v-200q0-17 11.5-28.5T480-760q17 0 28.5 11.5T520-720v200h200q17 0 28.5 11.5T760-480q0 17-11.5 28.5T720-440H520v200q0 17-11.5 28.5T480-200q-17 0-28.5-11.5T440-240v-200Z"/></svg><div class="spacer"></div><span>Add feed</span>`;
             addFeedButton.className = "feed-item add-feed";
             addFeedButton.addEventListener("click", addFeed);
             document.querySelector(".feed-list").appendChild(addFeedButton);
         }
     }
 }
 
-async function addFeed() {
-    const url = prompt("Enter the URL of the feed");
+async function addFeedURL() {
+    let url = document.getElementById("feed-url").value;
     if (url) {
+        if (url.startsWith("r/") || url.startsWith("/r/")) {
+            const subreddit = url.split("r/")[1];
+            url = `https://www.reddit.com/r/${subreddit}/.rss`;
+        } else if (!url.startsWith("http")) {
+            url = `https://${url}`;
+        }
         let savedFeeds = JSON.parse(localStorage.getItem("savedFeeds")) || [];
         savedFeeds.push(url);
         localStorage.setItem("savedFeeds", JSON.stringify(savedFeeds));
         window.location.reload();
     }
 }
 
+async function addFeed() {
+    document.getElementById("articles").style.display = "none";
+    document.getElementById("add-feed").style.display = "";
+}
+
 function filterFeeds(feedTitle) {
+    document.getElementById("add-feed").style.display = "none";
+    document.getElementById("articles").style.display = "";
     let copiedArray = [...allFeeds];
 
     if (feedTitle !== "all+posts") {
@@ -239,4 +243,10 @@ function filterFeeds(feedTitle) {
     });
 }
 
+document.getElementById("add-feed-button").addEventListener("click", addFeedURL);
+document.getElementById("feed-url").addEventListener("keyup", function (event) {
+    if (event.key === "Enter") {
+        addFeedURL();
+    }
+});
 getSavedFeeds();
diff --git a/src/read/index.html b/src/read/index.html
@@ -1,12 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Feedbomb</title>
-    <link rel="manifest" href="manifest.json">
+    <link rel="manifest" href="../manifest.json">
     <link rel="stylesheet" href="../css/reader.css">
 </head>
+
 <body>
     <a href="../index.html">Home</a><br><br>
     <h1 id="articletitle"></h1>
@@ -15,4 +17,5 @@ <h1 id="articletitle"></h1>
     </div>
     <script src="../js/reader.js"></script>
 </body>
+
 </html>