UI update

-- Added fuzzy search functionality

css/main.css

@@ -394,12 +394,15 @@ ul {
   -webkit-tap-highlight-color: transparent;
   background-color: rgba(var(--text-color), 0.06);
 }
+.torrent-card .torrent-type-icon {
+  padding: 0.8rem;
+}
 .torrent-card__icon {
   grid-area: icon;
 }
 .torrent-card__icon .icon {
-  height: 1.6rem;
+  height: 1.4rem;
-  width: 1.6rem;
+  width: 1.4rem;
 }
 .torrent-card__title {
   grid-area: title;
@@ -443,6 +446,12 @@ ul {
   display: grid;
 }
 
+.torrent-preview__info-section {
+  display: flex;
+  flex-direction: column;
+  align-content: flex-start;
+}
+
 .torrent-type-icon {
   display: flex;
   padding: 1rem;
@@ -490,23 +499,24 @@ ul {
 }
 
 #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;
+  width: auto;
+  border-radius: 1.5rem;
+  padding: 0.3rem 0.8rem;
+  align-self: flex-start;
+  background-color: rgba(var(--text-color), 0.1);
 }
 
 #torrent_download_button {
   color: white;
-  margin-top: 2rem;
-  background-color: var(--accent-color);
   width: 100%;
-  justify-content: center;
-  padding: 0.7rem;
   flex-shrink: 0;
+  padding: 0.7rem;
+  margin-top: 2rem;
+  justify-content: center;
+  background-color: var(--accent-color);
 }
 #torrent_download_button .icon {
   fill: white;
@@ -519,7 +529,7 @@ ul {
 
 @media only screen and (max-width: 640px) {
   .popup__header {
-    padding: 0 1.5rem;
+    padding: 0 1.5rem 0 0.5rem;
   }
 
   .torrent-card {

css/main.scss

@@ -340,11 +340,14 @@ ul{
     border-radius: 0.3rem;
     -webkit-tap-highlight-color: transparent;
     background-color: rgba(var(--text-color), 0.06);
+    .torrent-type-icon{
+        padding: 0.8rem;
+    }
     &__icon{
         grid-area: icon;
         .icon{
-            height: 1.6rem;
+            height: 1.4rem;
-            width: 1.6rem;
+            width: 1.4rem;
         }
     }
     &__title{
@@ -388,6 +391,11 @@ ul{
 .torrent-preview{
     display: grid;
 }
+.torrent-preview__info-section{
+    display: flex;
+    flex-direction: column;
+    align-content: flex-start;
+}
 .torrent-type-icon{
     display: flex;
     padding: 1rem;
@@ -430,22 +438,23 @@ 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;
+    width: auto;
+    border-radius: 1.5rem;
+    padding: 0.3rem 0.8rem;
+    align-self: flex-start;
+    background-color: rgba(var(--text-color), 0.1);
 }
 #torrent_download_button{
     color: white;
-    margin-top: 2rem;
-    background-color: var(--accent-color);
     width: 100%;
-    justify-content: center;
-    padding: 0.7rem;
     flex-shrink: 0;
+    padding: 0.7rem;
+    margin-top: 2rem;
+    justify-content: center;
+    background-color: var(--accent-color);
     .icon{
         fill: white;
     }
@@ -456,7 +465,7 @@ ul{
 }
 @media only screen and (max-width: 640px) {
     .popup__header{
-        padding: 0 1.5rem;
+        padding: 0 1.5rem 0 0.5rem;
     }
     .torrent-card{
         grid-template-columns: auto 1fr;

index.html

@@ -32,7 +32,7 @@
         </header>
         <section class="torrent-preview">
             <div id="torrent_type_icon" class="torrent-type-icon"></div>
-            <div>
+            <div class="torrent-preview__info-section">
                 <div id="torrent_tags"></div>
                 <h1 id="torrent_name"></h1>
                 <p id="torrent_description"></p>
@@ -85,6 +85,7 @@
         </li>
     </template>
     <script src="components.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6"></script>
     <script>
         const cryptocoin = "FLO";
         const mainnet = `https://flosight.duckdns.org/`;
@@ -738,10 +739,12 @@
         
         let currentTorrent
         getRef('torrent_container').addEventListener('click', async e => {
+            console.log(e.target)
             if(e.target.closest('.torrent-card__download-button')){
                 const _target = e.target.closest('.torrent-card__download-button')
                 const card = _target.closest('.torrent-card')
                 const cardId = parseInt(card.id)
+                const {id, name, description, tags, type = 'misc', size, uploader, startTx, filename, chunks} = await getDataFromIDB(cardId)
                 downloadTorrent(filename, startTx, chunks)
             }
             else if(e.target.closest('.torrent-card')){
@@ -817,6 +820,21 @@
             allTorrents = allTorrents.reverse().slice(0, 20)
             getRef('torrent_container').append(renderTorrents(allTorrents))
         }
+
+        getRef('search_torrent').addEventListener('keyup', async e => {
+            if(e.key === 'Enter'){
+                const torrents = await getDataFromIDB()
+                const searchKey = getRef('search_torrent').value
+                const options = {
+                    keys: ['name', 'filename'],
+                    threshold: 0.3,
+                }
+                const fuseSearch = new Fuse(torrents, options)
+                let result = fuseSearch.search(searchKey).map(elem => elem.item)
+                getRef('torrent_container').innerHTML = ``
+                getRef('torrent_container').append(renderTorrents(result))
+            }
+        })
     </script>
 </body>