show cards in batches

_includes/view-all.html

@@ -1,30 +1,61 @@
-<div class="viewall">
-    <button class="viewallbtn">View All</button>
-    </div>
-
-    <script>
-    var cardRow = document.querySelector('.row');
-    var viewAllButton = document.querySelector('.viewallbtn');
-
-    function toggleViewAllButton() {
-          if (cardRow.offsetHeight > 1135) {
-            viewAllButton.style.display = 'block';
-          } else {
-            viewAllButton.style.display = 'none';
-          }
-        }
-
-        toggleViewAllButton();
-
-
-    viewAllButton.addEventListener('click', function () {
-      cardRow.style.maxHeight = 'none';
-      cardRow.style.overflow = 'visible';
-      viewAllButton.style.display = 'none';
+<div style="display: flex; justify-content: space-between">
+  <div class="viewall prev">
+    <button class="viewallbtn prevBtn">Prev</button>
+  </div>
+  <div class="sorting-options">
+    <select id="sort">
+      <option disabled selected value>Sort by</option>
+      <option value="asc">Alphabetically (A-Z)</option>
+      <option value="desc">Alphabetically (Z-A)</option>
+    </select>
+    <input type="text" id="search" placeholder="Search..." />
+  </div>
+  <div class="viewall next">
+    <button class="viewallbtn nextBtn">Next</button>
+  </div>
+</div>
+
+<script type="module">
+
+  const prevButton = document.querySelector(".prevBtn");
+  const nextButton = document.querySelector(".nextBtn");
+  const cards = document.querySelectorAll(".patternCard");
+  let count = 0;
+  const maxCount = cards.length;
+
+
+  document.addEventListener("DOMContentLoaded", () => {
+
+    prevButton.style.display = "none";
+  });
+
+  function showCards(coun) {
+    cards.forEach((card) => {
+      card.style.display = "none";
     });
-
-    window.addEventListener('load', function () {
-      cardRow.style.maxHeight = '1135px'; 
-      cardRow.style.overflow = 'hidden';
-    });
-    </script>
+    for (let i = coun; i < coun + 10 && coun + 10 <= maxCount; i++) {
+      cards[i].style.display = "block";
+    }
+
+  }
+
+  function updateButtonVisibility() {
+      prevButton.style.display = count <= 0 ? "none" : "block";
+      nextButton.style.display = count + 10 >= maxCount ? "none" : "block";
+    }
+  prevButton.addEventListener("click", () => {
+
+    if (count > 0) {
+      showCards((count -= 10));
+    }
+    updateButtonVisibility();
+  });
+
+  nextButton.addEventListener("click", () => {
+
+    if (count + 10 < maxCount) {
+      showCards((count += 10));
+    }
+    updateButtonVisibility();
+  });
+</script>

_layouts/catalog.html

@@ -2,8 +2,7 @@
 layout: plain
 ---
 
-
-  <!-- 
+<!-- 
   <div style="position:relative ;">
     <img class="patterns-coming-soon" src="{{site.baseurl}}/assets/images/patterns-coming-soon.png" />
     <h3>What are Service Mesh Patterns?</h3>
@@ -13,14 +12,8 @@ <h3>Pattern Management</h3>
     <p>You may bring your own patterns or find them available through your chosen provider. Each service mesh pattern carries a unique identifier for reference. The patterns in this repository serve in an educational capacity, facilitating learning, and also serve in an operational capacity, facilitating implementation and validation of your cloud native deployment’s adherence to a pattern.</p>
   </div>   -->
 
-  <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    -->
-  {% include partials/feature.html type="pattern" %}
-
-  <div class="catalog">
-  {% include patterns-filter.html %}
-  {{ content }}
-</div>
-  {% include card-modal.html %}  
+{% include partials/feature.html type="pattern" %}
+<div class="catalog">{% include patterns-filter.html %} {{ content }}</div>
 <!-- CARD-END -->
-  {% include view-all.html %}

catalog/index.html

@@ -9,7 +9,7 @@
     background-color: #222222;
   }
   .sorting-options {
-    margin: 0 20px 20px 20px;
+    margin: 0 20px 0 20px;
     display: flex;
     align-items: center;
     @media (max-width: 506px) {
@@ -28,8 +28,12 @@
     background-repeat: no-repeat;
     background-position: right 10px top 50%;
     margin-right: 10px;
+    @media (max-width: 506px) {
+     display: none;
+    }
   }
   #search {
+    width: 30%;
     flex-grow: 1;
     padding: 20px 10px;
     border: 1px solid #ddd;
@@ -47,14 +51,7 @@
 
 {% assign catalog = site.catalog | sort: 'name' %}
 <div class="section-container">
-  <div class="sorting-options">
-    <select id="sort">
-      <option disabled selected value>Sort by</option>
-      <option value="asc">Alphabetically (A-Z)</option>
-      <option value="desc">Alphabetically (Z-A)</option>
-    </select>
-    <input type="text" id="search" placeholder="Search..." />
-  </div>
+  {% include view-all.html %} {% include card-modal.html %}
 
   <div class="row">
     {% for pattern in catalog %} {% if pattern.patternInfo and pattern.Status !=
@@ -65,6 +62,7 @@
       type="{{ pattern.type }}"
       technology="{{ pattern.technology }}"
       status="{{ pattern.Status }}"
+      style="display: none"
     >
       {% include card.html %}
       <!-- modal included -->
@@ -77,6 +75,7 @@
       filter="{{ pattern.name }}"
       type="{{ pattern.filters.type }}"
       technology="{{ pattern.technology }}"
+      style="display: none"
     >
       {% include wasm-card.html %}
       <!-- modal included -->
@@ -90,6 +89,7 @@
       type="{{ pattern.type }}"
       technology="{{ pattern.technology }}"
       status="{{ pattern.Status }}"
+      style="display: none"
     >
       {% include coming-soon.html %}
     </div>
@@ -151,3 +151,16 @@
     });
   });
 </script>
+
+<script>
+  const patternCards = document.querySelectorAll(".patternCard");
+  document.addEventListener("DOMContentLoaded", () => {
+    // display none for patternCards after number 10
+    patternCards.forEach((card, index) => {
+      // Hide patternCards after number 10
+      if (index < 10) {
+        card.style.display = "block";
+      }
+    });
+  });
+</script>