Adjust shop styling

jgthms · Jun 11, 2024 · c4f6a18 · c4f6a18
1 parent b84d168
commit c4f6a18
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 23 deletions.
diff --git a/docs/_includes/global/nav-item.html b/docs/_includes/global/nav-item.html
@@ -37,7 +37,7 @@
         {{ link.name }}
       {% endif %}
       {% if include.link_id == "shop" %}
-        <span class="tag is-success">New!</span>
+        <span class="tag is-success ml-1">New!</span>
       {% endif %}
     </span>
   {% endunless %}

diff --git a/docs/_sass/global/nav.scss b/docs/_sass/global/nav.scss
@@ -54,7 +54,6 @@
   }
 
   &.is-system,
-  &.is-docs,
   &.is-shop {
     --h: #{cv.getVar("success-h")};
     --s: #{cv.getVar("success-s")};

diff --git a/docs/assets/css/website.css b/docs/assets/css/website.css
@@ -34259,7 +34259,7 @@ has-background-moon.is-hoverable:active {
   --s: var(--bulma-info-s);
   --l: var(--bulma-info-l);
 }
-.bd-nav-item.is-system, .bd-nav-item.is-docs, .bd-nav-item.is-shop {
+.bd-nav-item.is-system, .bd-nav-item.is-shop {
   --h: var(--bulma-success-h);
   --s: var(--bulma-success-s);
   --l: var(--bulma-success-l);
@@ -38839,9 +38839,9 @@ has-background-moon.is-hoverable:active {
 }
 
 .bd-theme-docs {
-  --theme-h: var(--bulma-success-h);
-  --theme-s: var(--bulma-success-s);
-  --theme-l: var(--bulma-success-l);
+  --theme-h: var(--bulma-primary-h);
+  --theme-s: var(--bulma-primary-s);
+  --theme-l: var(--bulma-primary-l);
   --theme-color: hsl(var(--theme-h), var(--theme-s), var(--theme-l));
 }
 

diff --git a/docs/assets/css/website.min.css b/docs/assets/css/website.min.css
diff --git a/docs/assets/javascript/shop.js b/docs/assets/javascript/shop.js
@@ -347,14 +347,15 @@ document.addEventListener("DOMContentLoaded", () => {
   const $emptyCart = document.getElementById("empty-cart");
   const $fullCart = document.getElementById("full-cart");
   const $cartItems = document.getElementById("cart-items");
+  const $cartCheckout = document.getElementById("cart-checkout");
   const $products = document.getElementById("products");
   const $modal = document.getElementById("shop-modal");
   const $modalClose = document.querySelectorAll(".shop-modal-close");
 
   $cartClose.forEach((el) => {
     el.addEventListener("click", (event) => {
       event.preventDefault();
-      $cart.classList.remove("is-active");
+      closeCart();
     });
   });
 
@@ -372,11 +373,15 @@ document.addEventListener("DOMContentLoaded", () => {
 
   document.addEventListener("keydown", (event) => {
     if (event.key === "Escape") {
-      $cart.classList.remove("is-active");
+      closeCart();
       closeModal();
     }
   });
 
+  const closeCart = () => {
+    $cart.classList.remove("is-active");
+  }
+
   const closeModal = () => {
     $modal.classList.remove("is-active");
   };
@@ -616,8 +621,11 @@ document.addEventListener("DOMContentLoaded", () => {
 
       $blocs.forEach(($bloc) => {
         const $carousel = $bloc.querySelector(`.shop-product-carousel`);
-        const offset = product.selectedImage * 100;
-        $carousel.style.transform = `translateX(-${offset}%`;
+
+        if ($carousel) {
+          const offset = product.selectedImage * 100;
+          $carousel.style.transform = `translateX(-${offset}%`;
+        }
       });
     });
   }
@@ -632,6 +640,7 @@ document.addEventListener("DOMContentLoaded", () => {
     if (lines.length > 0) {
       $openCart.classList.add(`is-${THEME_COLOR}`);
       $cartItems.replaceChildren();
+      $cartCheckout.replaceChildren();
 
       $emptyCart.style.display = "none";
       $fullCart.style.display = "block";
@@ -764,12 +773,21 @@ document.addEventListener("DOMContentLoaded", () => {
       $totalLeft.appendChild($disclaimer);
       $total.appendChild($totalLeft);
       $total.appendChild($totalRight);
-      $cartItems.appendChild($total);
+      $cartCheckout.appendChild($total);
+
+      const $close = El(`shop-cart-close button is-fullwidth`, "button");
+      $close.innerText = "Close";
+      $cartCheckout.appendChild($close);
+
+      $close.addEventListener("click", event => {
+        event.preventDefault();
+        closeCart();
+      });
 
       const $checkout = El(`button is-${THEME_COLOR} is-fullwidth`, "a");
       $checkout.innerText = "Checkout";
       $checkout.href = checkoutUrl;
-      $cartItems.appendChild($checkout);
+      $cartCheckout.appendChild($checkout);
 
       $cartCount.innerText = totalCount;
     } else {
@@ -883,7 +901,7 @@ document.addEventListener("DOMContentLoaded", () => {
                 width
               }
               handle
-              images(first: 6) {
+              images(first: 24) {
                 edges {
                   node {
                     height
@@ -903,7 +921,7 @@ document.addEventListener("DOMContentLoaded", () => {
                 }
               }
               title
-              variants(first: 12) {
+              variants(first: 24) {
                 edges {
                   node {
                     availableForSale

diff --git a/docs/shop.html b/docs/shop.html
@@ -56,7 +56,7 @@
   }
 
   .shop-cart-count {
-    background-color: var(--bulma-primary-50);
+    background-color: var(--bulma-success-50);
   }
 
   .shop-cart,
@@ -88,7 +88,6 @@
     width: 100%;
     background: var(--bulma-background);
     max-width: 22rem;
-    padding: 2rem;
     position: absolute;
     z-index: 50;
     transform: translateX(100%);
@@ -97,6 +96,17 @@
     overflow-y: auto;
   }
 
+  .shop-cart-title {
+    margin-left: 2rem;
+    margin-right: 2rem;
+    margin-top: 2rem;
+  }
+
+  .shop-empty-cart {
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+
   .shop-empty-cart .notification {
     padding: 1.25em 1.5em;
   }
@@ -119,6 +129,11 @@
     transform: none;
   }
 
+  .shop-cart-items {
+    padding: 2rem;
+    padding-top: 0;
+  }
+
   .shop-item-image {
     border-radius: 0.5rem;
     overflow: hidden;
@@ -156,15 +171,32 @@
     color: var(--bulma-text-strong) !important;
   }
 
-  .shop-total {
+  .shop-cart-checkout {
+    background: var(--bulma-background);
     border-top: 1px solid
       hsla(
         var(--bulma-scheme-h),
         var(--bulma-scheme-s),
         var(--bulma-border-l),
         0.5
       );
-    padding: 1em 0;
+    padding: 2rem;
+    position: sticky;
+    bottom: 0;
+  }
+
+  .shop-cart-checkout .shop-cart-close {
+    margin: -0.5em 0 0.5em;
+  }
+
+  @media screen and (min-width: 600px) {
+    .shop-cart-checkout .shop-cart-close {
+      display: none;
+    }
+  }
+
+  .shop-total {
+    margin-bottom: 1em;
     display: flex;
     gap: 1em;
     align-items: start;
@@ -176,6 +208,35 @@
     opacity: 0.5;
   }
 
+  .shop-discount {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    margin: 0 1.5rem;
+  }
+
+  .shop-discount .notification {
+    padding: 1em 2em;
+  }
+
+  .shop-discount code {
+    color: var(--bulma-success);
+    font-family: var(--bulma-family-primary);
+    padding: 0.25em 0.5em;
+  }
+
+  .shop-discount p {
+    opacity: 0.5;
+    font-size: 0.875em;
+  }
+
+  @media screen and (min-width: 800px) {
+    .shop-discount {
+      margin: 0 3rem;
+    }
+  }
+
   .shop-products {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
@@ -304,6 +365,10 @@
     transform: scale(1.04);
   }
 
+  .shop-product-image:active img {
+    transform: scale(1);
+  }
+
   .shop-product-heading {
     font-size: 1.5em;
   }
@@ -451,24 +516,32 @@ <h2 class="bd-hero-subtitle algolia-lvl1">
     </div>
   </section>
 
+  <div class="shop-discount">
+    <div class="notification is-success">
+      Get <strong>20% off</strong> with code <code>FLEXBOX</code>
+      <p>Enter at checkout. Only available until the end of the month!</p>
+    </div>
+  </div>
+
   <div id="shop" class="section">
     <div id="cart" class="shop-cart">
       <div id="cart-overlay" class="shop-cart-overlay shop-cart-close"></div>
 
       <div class="shop-cart-menu">
-        <p class="title is-4">Cart</p>
+        <p class="shop-cart-title title is-4">Cart</p>
 
         <div id="empty-cart" class="shop-empty-cart">
           <div class="notification is-dark">
             <p>Your cart is empty!</p>
-            <button class="button is-primary shop-cart-close">
+            <button class="button is-success shop-cart-close">
               Get Shopping
             </button>
           </div>
         </div>
 
         <div id="full-cart">
-          <div id="cart-items"></div>
+          <div id="cart-items" class="shop-cart-items"></div>
+          <div id="cart-checkout" class="shop-cart-checkout"></div>
         </div>
       </div>
     </div>

diff --git a/docs/website.scss b/docs/website.scss
@@ -229,7 +229,7 @@ $themes: (
   "code": "link",
   "css": "css",
   "customize": "info",
-  "docs": "success",
+  "docs": "primary",
   "expo": "warning",
   "shop": "success",
   "features": "danger",