Load more examples

content/body/load-more.php

@@ -20,20 +20,40 @@
 <p>The following demo makes use of placeholder assets pulled from <a href="https://dev.me/products/image-placeholder">https://dev.me/products/image-placeholder</a></p>
 
 <div id="example1" class="enable-example">
-    <div id="product-grid">
-      <a href="/" class="product-grid-tile">
-        <img src="https://via.assets.so/furniture.png?id=1&q=95&w=360&h=360&fit=fill" alt="Go to Modern Tufted Armless Lounge Chair details." />
-      </a>
-      <a href="/" class="product-grid-tile">
-        <img src="https://via.assets.so/furniture.png?id=2&q=95&w=360&h=360&fit=fill" alt="Go to Minimalist Felt Lounge Chair details." />
-      </a>
-      <a href="/" class="product-grid-tile">
-        <img src="https://via.assets.so/furniture.png?id=3&q=95&w=360&h=360&fit=fill" alt="Go to Classic Tufted Leather Wingback Chair details." />
-      </a>
-    </div>
+    <section id="product-grid">
+      <div class="product-tile">
+        <a href="/" class="product-details-link">
+          <span class="sr-only">Modern Tufted Armless Lounge Chair</span>
+        </a>
+        <img src="images/load-more/chair1.png" alt="Modern Tufted Armless Lounge Chair" />
+        <p class="product-name">Modern Tufted Armless Lounge Chair</p>
+        <p class="product-price">$399.99</p>
+        <button type="button" class="add-to-cart-btn" aria-label="Add Modern Tufted Armless Lounge Chair to cart.">Add to Cart</button>
+      </div>
+
+      <div class="product-tile">
+        <a href="/" class="product-details-link">
+          <span class="sr-only">Minimalist Felt Lounge Chair</span>
+        </a>
+        <img src="images/load-more/chair2.png" alt="Minimalist Felt Lounge Chair" />
+        <p class="product-name">Minimalist Felt Lounge Chair</p>
+        <p class="product-price">$199.99</p>
+        <button type="button" class="add-to-cart-btn" aria-label="Add Minimalist Felt Lounge Chair to cart.">Add to Cart</button>
+      </div>
+
+      <div class="product-tile">
+        <a href="/" class="product-details-link">
+          <span class="sr-only">Classic Tufted Leather Wingback Chair</span>
+        </a>
+        <img src="images/load-more/chair3.png" alt="Classic Tufted Leather Wingback Chair" />
+        <p class="product-name">Classic Tufted Leather Wingback Chair</p>
+        <p class="product-price">$799.99</p>
+        <button type="button" class="add-to-cart-btn" aria-label="Add Classic Tufted Leather Wingback Chair to cart.">Add to Cart</button>
+      </div>
+    </section>
     <p id="product-count" aria-live="polite">Showing 3 of 9 products</p>
     <button id="load-more-btn" type="button">Load More Products</button>
-    <button id="reset-btn" type="button">Reset Product Grid Demo</button>
+    <button id="product-reset-btn" class="hide-btn" type="button">Reset Product Grid Demo</button>
 </div>
 
 
@@ -93,20 +113,37 @@
 <p>When you implement this way, you are presuming the user loading this webpage is okay with the extra battery power being used to animate this image.  It is not a very nice thing to assume.  I hope your mom is proud of you.</p>
 
 <div id="example2" class="enable-example">
-  <div class="pausable-animated-gif">
-    <img src="images/running-man-anim__still.jpg" alt="A drawing of a man running" loading="lazy">
-    <details open>
-
-
+  <section id="view-grid">
+    <div class="view-tile">
+      <div class="tile-relative">
+        <img src="images/load-more/chair1.png" alt="Modern Tufted Armless Lounge Chair" />
+        <button type="button" class="view-details-link">
+          Shop Modern Chairs
+        </button>
+      </div>
+    </div>
 
-      <summary role="button" class="pausable-animated-gif__play-pause-button" aria-label="pause">
-      </summary>
+    <div class="view-tile">
+      <div class="tile-relative">
+        <img src="images/load-more/chair2.png" alt="Minimalist Felt Lounge Chair" />
+        <button type="button" class="view-details-link">
+          Shop Simple Chairs
+        </button>
+      </div>
+    </div>
 
-      <div class="pausable-animated-gif__animated-image">
-        <img src="images/running-man-anim.gif" alt="Animated: A drawing of a man running" loading="lazy">
+    <div class="view-tile">
+      <div class="tile-relative">
+        <img src="images/load-more/chair3.png" alt="Classic Tufted Leather Wingback Chair" />
+        <button type="button" class="view-details-link">
+          Shop Leather Chairs
+        </button>
       </div>
-    </details>
-  </div>
+    </div>
+  </section>
+  <p id="view-count" aria-live="polite">Showing 3 of 9 categories</p>
+  <button id="view-more-btn" type="button">View More Categories</button>
+  <button id="view-reset-btn" class="hide-btn" type="button">Reset Category Grid Demo</button>
 </div>
 
 <?php includeShowcode("example2"); ?>
@@ -126,53 +163,4 @@
     }
   ]
 }
-</script>
-
-<h2>Animation is off when OS prefers reduced motion.</h2>
-
-<p>
-  This is the only example on this page that does require JavaScript. It
-  detects whether the OS
-  has "reduced motion" turned on by default. If it is, then it keeps the
-  details widget closed.
-</p>
-
-<div id="example3" class="enable-example">
-  <div class="pausable-animated-gif pausable-animated-gif--respects-os-motion-settings">
-    <img src="images/running-man-anim__still.jpg" alt="A drawing of a man running" loading="lazy">
-    <details>
-
-
-
-      <summary role="button" class="pausable-animated-gif__play-pause-button"></summary>
-
-      <div class="pausable-animated-gif__animated-image">
-        <img src="images/running-man-anim.gif" alt="Animated: A drawing of a man running" loading="lazy">
-      </div>
-    </details>
-  </div>
-</div>
-
-<?php includeShowcode("example3"); ?>
-
-<script type="application/json" id="example3-props">
-{
-  "replaceHtmlRules": {},
-  "steps": [{
-      "label": "Put CSS class on container to configure the player",
-      "highlight": "pausable-animated-gif--respects-os-motion-settings",
-      "notes": "This class will be used in step 3."
-    },
-    {
-      "label": "Use CSS variables to store prefers motion settings",
-      "highlight": "%CSS%pausable-animated-gif-style1~ :root;@media (prefers-reduced-motion)",
-      "notes": "This sets the CSS variable <strong>--prefers-reduced-motion</strong> to 1 if the user has asked the OS to reduce animations, and 0 otherwise."
-    },
-    {
-      "label": "Use JavaScript to find out if it should show the animation or not",
-      "highlight": "%FILE% js/modules/enable-animatedGif.js ~ this.respectReduceMotionSettings",
-      "notes": "This function, if run at load time, will initially show the animation if the OS prefers-reduced-motion setting is not on."
-    }
-  ]
-}
 </script>

css/load-more.css

@@ -1,37 +1,71 @@
-#product-grid {
+#product-grid,
+#view-grid {
   width: 100%;
   box-sizing: border-box;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
 }
-.product-grid-tile {
+.product-tile,
+.view-tile {
+  position: relative;
   width: 33.3333%;
   box-sizing: border-box;
   display: inline-block;
   padding: 20px;
 }
-.product-grid-tile img {
+.product-tile img,
+.view-tile img {
   max-width: 100%;
   border: 1px solid #ccc;
   padding: 20px;
 }
-#product-count {
+.product-name {
+  font-size: 1rem;
+}
+.product-price {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin-bottom: 15px;
+}
+.product-details-link {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.view-details-link {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  font-size: 1rem;
+  font-weight: bold;
+  width: 100%;
+  background: #0c3f75;
+  color: #fff;
+  min-height: 44px;
+  border: none;
+}
+#product-count,
+#view-count {
   text-align: center;
 }
-#load-more-btn {
+#load-more-btn,
+#view-more-btn {
   font-size: 0.9375rem;
   font-weight: bold;
   min-width: 200px;
   min-height: 44px;
   display: block;
   cursor: pointer;
-  background: #450a0a;
+  background: #0c3f75;
   color: #fff;
   border: none;
   margin: 10px auto;
 }
-#reset-btn {
+#product-reset-btn,
+#view-reset-btn {
   font-size: 0.9375rem;
   font-weight: bold;
   min-width: 200px;
@@ -42,6 +76,19 @@
   border: none;
   margin: 10px auto;
 }
-.hideBtn {
+.add-to-cart-btn,
+.view-category-btn {
+  font-size: 0.9375rem;
+  font-weight: bold;
+  min-height: 44px;
+  background: #0c3f75;
+  color: #fff;
+  border: none;
+  padding: 0 15px;
+}
+.hide-btn {
   display: none !important;
 }
+.tile-relative {
+  position: relative;
+}