add sort dropdown button beside packages header. FIX: duplicate package thumbnail elements

src/layouts/partials/package-grid.html

@@ -5,7 +5,10 @@
   <!-- Package Grid Header -->
   <hr>
     <div class="container package-grid-header">
-      <h3>packages</h3>
+      <section class="flex">
+        <h3>packages</h3>
+        {{- partial "sort-dropdown.html" -}}
+      </section>
       <p>There are already plenty of packages available through tea. As the communi’tea builds the library, contributions will live here.</p>
     </div>
   <hr>
@@ -90,17 +93,26 @@
 </style>
 
 <script language="javascript" type="text/javascript">
+  const sortOptions = {
+    popularity: 'popularity',
+    last_modified: 'last_modified',
+  }
   let sortBy = 'popularity'; // last_modified
   let sortDirection = 'desc'; // asc
   let limit = 16;
-  const packages = document.querySelectorAll('.card-thumbnail');
+
-  const packagesCount = packages.length;
+  function getPackageThumbs() {
+    const grid = document.getElementById('packageGrid');
+    return Array.from(grid.childNodes).filter((e) => e.dataset && e.dataset.name);
+  }
+
+  const packagesCount = getPackageThumbs().length;
 
   function sortPackages() {
-    const packages = document.querySelectorAll('.card-thumbnail');
+    const packages = getPackageThumbs();
-    const packagesArray = Array.from(packages);
+
-    const sortedPackages = packagesArray.sort((a, b) => {
+    const sortedPackages = packages.sort((a, b) => {
-      if (sortBy === 'popularity') {
+      if (sortBy === sortOptions.popularity) {
         const aPop = +a.dataset.popularity;
         const bPop = +b.dataset.popularity;
         return sortDirection === 'asc' ? aPop-bPop : bPop - aPop;
@@ -110,10 +122,10 @@
         return sortDirection === 'asc' ? aDate-bDate : bDate - aDate;
       }
     });
+
     const grid = document.getElementById('packageGrid');
-    for(const op of packages) {
+    grid.textContent = '';
-      op.remove();
+
-    }
     for(const sp of sortedPackages) {
       grid.appendChild(sp);
     }
@@ -121,7 +133,7 @@
   }
 
   function refreshDisplayedPackages() {
-    const packages = document.querySelectorAll('.card-thumbnail');
+    const packages = getPackageThumbs();
     let i = 0;
     for(const sp of packages) {
       if (i >= limit) {
@@ -141,6 +153,23 @@
       const loadMoreSection = document.getElementById('loadMoreSection');
       loadMoreSection.classList.add('hidden');
     }
-  },false);
+  }, false);
+
+  const dropdownPopularityBtn = document.getElementById('dropdownPopularityBtn');
+  dropdownPopularityBtn.addEventListener('click',() => {
+    if (sortBy != sortOptions.popularity) {
+      sortBy = sortOptions.popularity;
+      sortPackages();
+    }
+  }, false);
+
+  const dropdownRecentBtn = document.getElementById('dropdownRecentBtn');
+  dropdownRecentBtn.addEventListener('click',() => {
+    if (sortBy != sortOptions.last_modified) {
+      sortBy = sortOptions.last_modified;
+      sortPackages();
+    }
+  }, false);
+
   sortPackages();
 </script>

src/layouts/partials/package-thumbnail.html

@@ -1,4 +1,4 @@
-<div class="card card-thumbnail" style="width: 100%" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}">
+<div class="card card-thumbnail" style="width: 100%" data-name="{{- .name -}}" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}">
   <figure class="card-img-top" >
     <img class="package-image" src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
     <article class="card-thumb-label">

src/layouts/partials/sort-dropdown.html

@@ -0,0 +1,71 @@
+<style>
+    .sorting-container{
+      display:inline-block;
+      font-family: "pp-neue-machina", sans-serif;
+      background-color: #1a1a1a;
+      border: .5px solid #ffffff;
+      color: #fff;
+      padding-top: 0.279vw;
+      text-decoration: none;
+      text-transform: uppercase;
+      max-width: 240px;
+      width: 100%;
+      height: 60px;
+      min-height: 34px;
+      transition: 0.1s linear;
+    }
+
+    .dropdown {
+        width: 100%;
+        height: auto;
+        position: relative;
+        display: inline-block;
+        cursor: pointer;
+    }
+
+    .dropdown-content {
+        display: none;
+        position: absolute;
+        background-color: #1a1a1a;
+        width: 100%;
+        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+        z-index: 1;
+        color: white;
+        list-style: none;
+        padding: 0px;
+    }
+
+
+    .dropdown-content li {
+        padding: 0px 10px;
+        height: 40px;
+        line-height: 40px;;
+    }
+
+    .dropdown-content li:hover {
+        background: #00ffd0;
+        color: black;
+
+    }
+    .dropdown:hover .dropdown-content {
+        display: block;
+    }
+
+    .dropdown-title {
+        height: 60px;
+        line-height: 60px;
+        padding-left: 10px;
+    }
+
+</style>
+    
+<section class="sorting-container">
+    <div class="dropdown">
+        <div class="dropdown-title">SORT ORDER</div>
+        <ul class="dropdown-content flex column">
+            <li id="dropdownPopularityBtn">POPULARITY</li>
+            <li id="dropdownRecentBtn">MOST RECENT</li>
+        </ul>
+    </div>
+</section>
+    

src/static/css/homepage.css

@@ -474,3 +474,13 @@ mark{
     display:none;
   }
 }
+
+
+.flex {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.flex.column {
+  flex-direction: column;
+}