mini redesign

strukturart · Aug 1, 2023 · d8185eb · d8185eb
1 parent 30368df
commit d8185eb
Show file tree

Hide file tree

Showing 11 changed files with 141 additions and 37 deletions.
diff --git a/application/app.js b/application/app.js
@@ -485,9 +485,10 @@ let rss_fetcher = function (
         })
         .then((data) => {
           data.forEach(function (i) {
+            console.log(i);
             let item_image = "";
             let video_url = "";
-            let item_type = "rss";
+            let item_type = "mastodon";
             let item_media = "rss";
             let item_filesize = "";
             let item_download = "";
@@ -539,11 +540,12 @@ let rss_fetcher = function (
               video_url: video_url,
               url: item_download,
               mastodon: item_image,
+              replies_count: i.replies_count ?? 0,
+              reblogs_count: i.reblogs_count ?? 0,
+              favourites_count: i.favourites_count ?? 0,
             });
           });
-          if (feed_download_list_count == feed_download_list.length - 1) {
-            //ready_to_build();
-          }
+
           if (feed_download_list_count < feed_download_list.length - 1) {
             feed_download_list_count++;
             rss_fetcher(
@@ -785,6 +787,9 @@ let rss_fetcher = function (
             youtube_thumbnail: yt_thumbnail,
             video_url: item_video_url,
             url: item_download,
+            replies_count: "0",
+            reblogs_count: "0",
+            favourites_count: "0",
           });
         }
       }
@@ -935,6 +940,9 @@ let rss_fetcher = function (
             start_listened: startlistened,
             youtube_thumbnail: yt_thumbnail,
             video_url: item_video_url,
+            replies_count: 0,
+            reblogs_count: 0,
+            favourites_count: 0,
           });
         }
       }
@@ -1012,8 +1020,8 @@ let mastodon_load_feed = (url) => {
       data.forEach(function (i) {
         let item_image = "";
         let video_url = "";
-        let item_type = "rss";
-        let item_media = "rss";
+        let item_type = "mastodon";
+        let item_media = "mastodon";
         let item_filesize = "";
         let item_download = "";
         let startlistened = "";
@@ -1081,6 +1089,9 @@ let mastodon_load_feed = (url) => {
           video_url: video_url,
           url: item_download,
           mastodon: item_image,
+          replies_count: i.replies_count ? i.replies_count : "0",
+          reblogs_count: i.reblogs_count ? i.reblogs_count : "0",
+          favourites_count: i.favourites_count ? i.favourites_count : "0",
         });
       });
     })
@@ -1417,6 +1428,7 @@ function nav_panels(left_right) {
   set_tabindex();
 
   status.panel = panels[current_panel];
+  document.querySelector("div#news-feed div#news-feed-list").style.top = "40px";
 }
 ////////////
 //TABINDEX NAVIGATION
@@ -1462,6 +1474,11 @@ function nav(move) {
     siblings[tab_index].focus();
   }
 
+  document.querySelector("div#news-feed div#news-feed-list").style.top = "2px";
+  if (tab_index == 0)
+    document.querySelector("div#news-feed div#news-feed-list").style.top =
+      "40px";
+
   //smooth scrolling
   const rect = document.activeElement.getBoundingClientRect();
   const elY =
@@ -1545,6 +1562,7 @@ let sleep_mode = function () {
     play_podcast();
     show_article_list();
     status.sleepmode = false;
+    top_bar("", panels[current_panel], "");
   }, st);
 };
 
@@ -1627,7 +1645,7 @@ let show_article = function () {
   }
 
   document.querySelector("div#news-feed").style.background = "white";
-  document.querySelector("div#news-feed div#news-feed-list").style.top = "0px";
+  document.querySelector("div#news-feed div#news-feed-list").style.top = "2px";
   document.querySelector("div#news-feed div#news-feed-list").style.overflow =
     "scroll";
 };
@@ -1825,7 +1843,7 @@ let show_article_list = function () {
   document.querySelector("div#news-feed div#news-feed-list").style.overflow =
     "hidden";
 
-  document.querySelector("div#news-feed div#news-feed-list").style.top = "27px";
+  document.querySelector("div#news-feed div#news-feed-list").style.top = "40px";
   bottom_bar(
     "<img src='assets/icons/option.svg'>",
     "",

diff --git a/application/assets/css/main.css b/application/assets/css/main.css
@@ -389,7 +389,7 @@ div#news-feed div#news-feed-list {
   padding: 0px 0 50px 0;
   overflow: hidden;
   position: absolute;
-  top: 27px;
+  top: 40px;
 }
 
 div#news-feed div#news-feed-list article {
@@ -558,6 +558,21 @@ div#news-feed div#news-feed-list article div.startlistened-icon {
   opacity: 0;
 }
 
+div#news-feed div#news-feed-list article div.reblog-icon {
+  position: fixed;
+  opacity: 0;
+}
+
+div#news-feed div#news-feed-list article div.replies-icon {
+  position: fixed;
+  opacity: 0;
+}
+
+div#news-feed div#news-feed-list article div.favorit-icon {
+  position: fixed;
+  opacity: 0;
+}
+
 div#news-feed div#news-feed-list article div.listened-icon img {
   height: 15px;
   margin: 2px 0 0 10px;
@@ -568,6 +583,21 @@ div#news-feed div#news-feed-list article div.startlistened-icon img {
   margin: 2px 0 0 10px;
 }
 
+div#news-feed div#news-feed-list article div.reblog-icon img {
+  height: 15px;
+  margin: 2px 0 0 10px;
+}
+
+div#news-feed div#news-feed-list article div.replies-icon img {
+  height: 15px;
+  margin: 2px 0 0 10px;
+}
+
+div#news-feed div#news-feed-list article div.favorit-icon img {
+  height: 15px;
+  margin: 2px 0 0 10px;
+}
+
 div#news-feed
   div#news-feed-list
   article[data-listened="listened"]
@@ -584,6 +614,30 @@ div#news-feed
   opacity: 1;
 }
 
+div#news-feed
+  div#news-feed-list
+  article:not([data-mastodon-favourites="0"])
+  div.favorit-icon {
+  position: relative;
+  opacity: 1;
+}
+
+div#news-feed
+  div#news-feed-list
+  article:not([data-mastodon-reblog="0"])
+  div.reblog-icon {
+  position: relative;
+  opacity: 1;
+}
+
+div#news-feed
+  div#news-feed-list
+  article:not([data-mastodon-replies="0"])
+  div.replies-icon {
+  position: relative;
+  opacity: 1;
+}
+
 .loading-spinner {
   display: none;
   position: absolute;
@@ -757,11 +811,11 @@ div#bottom-bar div#button-right {
 
 div#top-bar {
   position: fixed;
-  top: 0px;
+  top: 3px;
   left: 0px;
   height: 18px;
   z-index: 4;
-  background: black;
+  background: none;
   min-width: 100vw;
   display: none;
 }
@@ -777,34 +831,46 @@ div#top-bar div#inner {
 }
 
 div#top-bar div {
-  background: black;
+  background: none;
   color: white;
   padding: 2px;
+  border-radius: 10%;
+  color: black;
 }
 
-div#top-bar div#button-center {
-  background: black;
+div#top-bar .button-center {
+  background: var(--color-four) !important;
   color: white;
-  padding: 2px;
-  width: 30%;
+  padding: 4px 6px 4px 6px;
+  max-width: 55%;
   text-align: center;
+  border-radius: 20px;
 }
 
-div#top-bar div#button-left {
-  background: black;
+div#top-bar div.button-left {
+  background: var(--color-four) !important;
+  border-radius: 20px;
+
   color: white;
-  padding: 2px;
+  padding: 4px;
   width: 20px;
-  text-align: left;
-  width: 30%;
+  text-align: center;
+  width: 20%;
 }
 
-div#top-bar div#button-right {
-  background: black;
+div#top-bar div.button-right {
+  background: var(--color-four) !important;
+  border-radius: 20px;
+
   color: white;
-  padding: 2px;
-  width: 30%;
-  text-align: right;
+  padding: 4px;
+  width: 20px;
+  text-align: center;
+  width: 20%;
+}
+
+div#top-bar div:empty {
+  background: none !important;
 }
 
 /*INTRO*/

diff --git a/application/assets/icons/2605.svg b/application/assets/icons/2605.svg
diff --git a/application/assets/icons/reblog.svg b/application/assets/icons/reblog.svg
diff --git a/application/assets/icons/replies.svg b/application/assets/icons/replies.svg
diff --git a/application/index.html b/application/index.html
@@ -300,12 +300,16 @@ <h2>Number of episodes</h2>
         <script id="template" type="x-tmpl-mustache">
 
           {{#data}}
-              <article tabIndex={{index}} class="channels item" data-media="{{media}}" data-read="{{read}}" data-listened="{{listened}}" data-startlistened="{{start_listened}}" data-order="{{dateunix}}" data-youtube-id="{{youtube_id}}" data-video-url="{{video_url}}" data-recently="{{recently_order}}" data-category="{{category}} {{recently_played}} all" data-id="{{cid}}"  data-channel="{{channel}}" data-link="{{link}}" data-youtube-id="{{id}}" data-audio-type="{{type}}" data-title="{{title}}" data-image="{{image}}">
-                  <div class="flex grid-col-10">
+              <article tabIndex={{index}} class="channels item" data-media="{{media}}" data-read="{{read}}" data-listened="{{listened}}" data-startlistened="{{start_listened}}" data-order="{{dateunix}}" data-youtube-id="{{youtube_id}}" data-video-url="{{video_url}}" data-recently="{{recently_order}}" data-mastodon-replies="{{replies_count}}" data-mastodon-reblog="{{reblogs_count}}" data-mastodon-favourites="{{favourites_count}}" data-category="{{category}} {{recently_played}} all" data-id="{{cid}}"  data-channel="{{channel}}" data-link="{{link}}" data-youtube-id="{{id}}" data-audio-type="{{type}}" data-title="{{title}}" data-image="{{image}}">
+                  <div class="flex grid-col-10 icon-bar">
                       <div class="podcast-icon"><img src="assets/icons/podcast.png"></div>
                       <div class="youtube-icon"><img src="assets/icons/youtube.png"></div>
                       <div class="listened-icon"><img src="assets/icons/diamond.svg"></div>
                       <div class="startlistened-icon"><img src="assets/icons/ghost.svg"></div>
+                      <div class="replies-icon"><img src="assets/icons/replies.svg"></div>
+                      <div class="favorit-icon"><img src="assets/icons/2605.svg"></div>
+                      <div class="reblog-icon"><img src="assets/icons/reblog.svg"></div>
+
                   </div>
                   <div class="channel">{{channel}}<span></span></div>
                   <time>{{date}}</time>

diff --git a/application/manifest.webapp b/application/manifest.webapp
@@ -1,7 +1,7 @@
 {
-  "version": "2.0.0",
+  "version": "2.0.1",
   "name": "feedolin",
-  "description": "Feedolin is an RSS / Atom reader and podcast player. It is intended for users who already use an rss reader client and want to read their feeds on a kaios device. the list of subscribed websites / podcasts is managed locally or online in an opml file.",
+  "description": "Feedolin is an RSS / Atom / Mastodon reader and podcast player. It is intended for users who already use an rss reader client and want to read their feeds on a kaios device. the list of subscribed websites / podcasts is managed locally or online in an opml file.",
   "launch_path": "/index.html",
   "type": "privileged",
   "fullscreen": "true",
@@ -24,7 +24,7 @@
     "en-US": {
       "name": "feedolin",
       "subtitle": "Feedolin is an RSS / Atom reader and podcast player. ",
-      "description": "Feedolin is an RSS / Atom reader and podcast player. It is intended for users who already use an rss reader client and want to read their feeds on a kaios device. the list of subscribed websites / podcasts is managed locally or online in an opml file."
+      "description": "Feedolin is an RSS / Atom / Mastodon reader and podcast player. It is intended for users who already use an rss reader client and want to read their feeds on a kaios device. the list of subscribed websites / podcasts is managed locally or online in an opml file."
     }
   },
   "default_locale": "en-US",

diff --git a/application/manifest.webmanifest b/application/manifest.webmanifest
@@ -21,7 +21,7 @@
   ],
 
   "b2g_features": {
-    "version": "1.6.9",
+    "version": "1.7.0",
     "id": "feedolin",
     "subtitle": "RSS Reader",
     "core": true,

diff --git a/dist/manifest.webapp b/dist/manifest.webapp
@@ -1,7 +1,7 @@
 {
-  "version": "2.0.0",
+  "version": "2.0.1",
   "name": "feedolin",
-  "description": "Feedolin is an RSS / Atom reader and podcast player. It is intended for users who already use an rss reader client and want to read their feeds on a kaios device. the list of subscribed websites / podcasts is managed locally or online in an opml file.",
+  "description": "Feedolin is an RSS / Atom / Mastodon reader and podcast player. It is intended for users who already use an rss reader client and want to read their feeds on a kaios device. the list of subscribed websites / podcasts is managed locally or online in an opml file.",
   "launch_path": "/index.html",
   "type": "privileged",
   "fullscreen": "true",
@@ -24,7 +24,7 @@
     "en-US": {
       "name": "feedolin",
       "subtitle": "Feedolin is an RSS / Atom reader and podcast player. ",
-      "description": "Feedolin is an RSS / Atom reader and podcast player. It is intended for users who already use an rss reader client and want to read their feeds on a kaios device. the list of subscribed websites / podcasts is managed locally or online in an opml file."
+      "description": "Feedolin is an RSS / Atom / Mastodon reader and podcast player. It is intended for users who already use an rss reader client and want to read their feeds on a kaios device. the list of subscribed websites / podcasts is managed locally or online in an opml file."
     }
   },
   "default_locale": "en-US",

diff --git a/dist/manifest.webmanifest b/dist/manifest.webmanifest
@@ -21,7 +21,7 @@
   ],
 
   "b2g_features": {
-    "version": "1.6.9",
+    "version": "1.7.0",
     "id": "feedolin",
     "subtitle": "RSS Reader",
     "core": true,

diff --git a/example.opml b/example.opml
@@ -36,7 +36,7 @@
         </outline>
 
           <outline text="Mastodon" title="Mastodon">
-            <outline type="mastodon" text="t-online" title="t-online" xmlUrl="https://mastodon.social/api/v1/timelines/public" htmlUrl=""/>
+            <outline type="mastodon" text="mastodon.social" title="mastodon.social" xmlUrl="https://mastodon.social/api/v1/timelines/public" htmlUrl=""/>
         </outline>