UI update

css/main.css

@@ -405,7 +405,7 @@ ul {
   grid-area: title;
   font-size: 1.1rem;
 }
-.torrent-card__tags {
+.torrent-card__tags, .torrent-card__uploader {
   grid-area: tags;
   overflow: hidden;
   white-space: nowrap;
@@ -470,7 +470,8 @@ ul {
   fill: rgba(var(--text-color), 0.3);
 }
 
-#torrent_tags {
+#torrent_tags,
+#torrent_uploader {
   font-size: 0.85rem;
   margin-bottom: 0.3rem;
   color: rgba(var(--text-color), 0.8);
@@ -486,6 +487,16 @@ ul {
   color: rgba(var(--text-color), 0.8);
 }
 
+#torrent_uploader {
+  display: inline-flex;
+  background-color: rgba(var(--text-color), 0.1);
+  padding: 0.3rem 0.8rem;
+  border-radius: 1.5rem;
+  font-weight: 500;
+  line-height: 1.7;
+  margin-top: 1rem;
+}
+
 #torrent_download_button {
   color: white;
   margin-top: 2rem;
@@ -519,8 +530,8 @@ ul {
   .torrent-card__title {
     font-size: 1rem;
   }
-  .torrent-card__tags {
+  .torrent-card__tags, .torrent-card__uploader {
-    margin-bottom: 0;
+    margin-top: 0.5rem;
     font-size: 0.8rem;
   }
   .torrent-card__description {

css/main.scss

@@ -351,7 +351,8 @@ ul{
         grid-area: title;
         font-size: 1.1rem;
     }
-    &__tags{
+    &__tags,
+    &__uploader{
         grid-area: tags;
         overflow: hidden;
         white-space: nowrap;
@@ -412,7 +413,8 @@ ul{
         fill: rgba(var(--text-color), 0.3);
     }
 }
-#torrent_tags{
+#torrent_tags,
+#torrent_uploader{
     font-size: 0.85rem;
     margin-bottom: 0.3rem;
     color: rgba(var(--text-color), 0.8);
@@ -425,6 +427,15 @@ ul{
     font-size: 0.9rem;
     color: rgba(var(--text-color), 0.8);
 }
+#torrent_uploader{
+    display: inline-flex;
+    background-color: rgba(var(--text-color), 0.1);
+    padding: 0.3rem 0.8rem;
+    border-radius: 1.5rem;
+    font-weight: 500;
+    line-height: 1.7;
+    margin-top: 1rem;
+}
 #torrent_download_button{
     color: white;
     margin-top: 2rem;
@@ -454,8 +465,9 @@ ul{
         &__title{
             font-size: 1rem;
         }
-        &__tags{
+        &__tags,
-            margin-bottom: 0;
+        &__uploader{
+            margin-top: 0.5rem;
             font-size: 0.8rem;
         } 
         &__description{

index.html

@@ -36,6 +36,7 @@
                 <div id="torrent_tags"></div>
                 <h1 id="torrent_name"></h1>
                 <p id="torrent_description"></p>
+                <h5 id="torrent_uploader"></h5>
                 <button id="torrent_download_button" class="torrent-card__download-button" onclick="downloadTorrent(currentTorrent.filename, currentTorrent.startTx, currentTorrent.chunks)">
                     <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 2l5 5v14.008a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 21.008V2.992C3 2.444 3.445 2 3.993 2H16zm-3 10V8h-2v4H8l4 4 4-4h-3z"/></svg>
                     Get torrent
@@ -73,7 +74,8 @@
         <li class="torrent-card interact">
             <div class="torrent-card__icon torrent-type-icon"></div>
             <h3 class="torrent-card__title"></h3>
-            <span class="torrent-card__tags"></span>
+            <span class="torrent-card__uploader"></span>
+            <!-- <span class="torrent-card__tags"></span> -->
             <!-- <p class="torrent-card__description"></p> -->
             <!-- <h5 class="torrent-card__size">1.2GB</h5> -->
             <button class="torrent-card__download-button">
@@ -751,6 +753,7 @@
                 getRef('torrent_name').textContent = name
                 getRef('torrent_description').textContent = description
                 getRef('torrent_tags').textContent = tags.split('/').join('•')
+                getRef('torrent_uploader').textContent = `Uploaded by ${uploader}`
                 getRef('torrent_popup').show()
             }
         })
@@ -760,7 +763,8 @@
                 const card = getRef('torrent_card_template').content.cloneNode(true).firstElementChild
                 card.id = id
                 card.querySelector('.torrent-card__title').textContent = name 
-                card.querySelector('.torrent-card__tags').textContent = tags.split('/').join('•')
+                card.querySelector('.torrent-card__uploader').textContent = `by ${uploader}`
+                // card.querySelector('.torrent-card__tags').textContent = tags.split('/').join('•')
                 // card.querySelector('.torrent-card__description').textContent = description 
                 // card.querySelector('.torrent-card__size').textContent = size 
                 card.querySelector('.torrent-card__icon').innerHTML = getIcon(type)
@@ -810,7 +814,7 @@
         async function showLatestTorrents(){
             getRef('torrent_container').innerHTML = ``
             let allTorrents = await getTorrents()
-            allTorrents = allTorrents.reverse().slice(0, 800)
+            allTorrents = allTorrents.reverse().slice(0, 20)
             getRef('torrent_container').append(renderTorrents(allTorrents))
         }
     </script>