#190 add a package list page at '/+/'

src/content/+.md

@@ -0,0 +1,5 @@
+---
+type: page
+title: "packages"
+layout: "packages"
+---

src/layouts/page/packages.html

@@ -0,0 +1,33 @@
+{{ define "main" }}
+
+
+
+<!-- Package Grid -->
+
+<!-- Desktop/Tablet Package Display -->
+
+  <span>
+    {{- partial "package-grid.html" . -}}
+  </span>
+
+<!-- Mobile Package Display -->
+  <!-- dont remove, it is not completely useless there is a ui bug i couldnt figure out 
+    the only solution is to keep it here. sorry - neil
+    -->
+  <span class="swiper-package-display">
+    {{- partial "swiper.html" . -}}
+  </span>
+
+<!-- Style for Swiper -->
+
+<style>
+  .grid-package-display{
+    display:block;
+  }
+  .swiper-package-display {
+    /* dont remove refer to comment above */
+    display: none;
+  }
+</style>
+
+{{ end }}

src/layouts/partials/package-grid.html

@@ -39,7 +39,7 @@
   }
   .package-grid {
     display: grid;
-    grid-template-columns: auto auto;
+    grid-template-columns: auto;
   }
   #loadMorePackagesBtn {
     cursor: pointer;
@@ -98,6 +98,8 @@
     popularity: 'popularity',
     last_modified: 'last_modified',
   }
+  const showAllPackages = window.location.pathname.includes("/+/");
+
   let sortBy = sortOptions.popularity; // last_modified
   let sortDirection = 'desc'; // asc
   let limit = 16;
@@ -186,7 +188,7 @@
     const packages = getPackageThumbs();
     let i = 0;
     for(const sp of packages) {
-      if (i >= limit) {
+      if (i >= limit && !showAllPackages) {
         sp.classList.add('hidden');
       } else {
         sp.classList.remove('hidden');
@@ -204,6 +206,11 @@
   }
 
   const loadMoreButton = document.getElementById('loadMorePackagesBtn');
+  if (showAllPackages) {
+    loadMoreSection.classList.add('hidden');
+  } else {
+    loadMoreSection.classList.remove('hidden');
+  }
   loadMoreButton.addEventListener('click',() => {
     limit += 16;
     refreshDisplayedPackages();