feat: add pill-style sort control to complement grid density slider

f60e20d95ecf22145aa0bce2ce30cf8474ca9dba · 2026-06-22 21:41:34 -0700 · Steve Abrams

- Create sort-control-pill-style.js for reusable styling
- Add 20px border-radius for pill appearance
- Style dropdown arrow with SVG chevron icon
- Hover/focus states with subtle shadow and border change
- Works with any sort select: [data-sort], [aria-label*=sort], .sort-select, .collection-sort-select
- Integrate into grid-slider-template.html for cohesive collection page design
- Deploy to all 5 sister sites for consistent UX

Files touched

A DW-Programming/shared-enhancements/sort-control-pill-style.js
M DW-Programming/templates/grid-slider-template.html

Diff

commit f60e20d95ecf22145aa0bce2ce30cf8474ca9dba
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jun 22 21:41:34 2026 -0700

    feat: add pill-style sort control to complement grid density slider
    
    - Create sort-control-pill-style.js for reusable styling
    - Add 20px border-radius for pill appearance
    - Style dropdown arrow with SVG chevron icon
    - Hover/focus states with subtle shadow and border change
    - Works with any sort select: [data-sort], [aria-label*=sort], .sort-select, .collection-sort-select
    - Integrate into grid-slider-template.html for cohesive collection page design
    - Deploy to all 5 sister sites for consistent UX
---
 .../shared-enhancements/sort-control-pill-style.js | 61 ++++++++++++++++++++++
 DW-Programming/templates/grid-slider-template.html | 24 +++++++++
 2 files changed, 85 insertions(+)

diff --git a/DW-Programming/shared-enhancements/sort-control-pill-style.js b/DW-Programming/shared-enhancements/sort-control-pill-style.js
new file mode 100644
index 00000000..5e170909
--- /dev/null
+++ b/DW-Programming/shared-enhancements/sort-control-pill-style.js
@@ -0,0 +1,61 @@
+/**
+ * Sort Control Pill Styling
+ * Adds pill-style appearance to collection sort dropdown to match grid slider
+ * Paste this AFTER the grid slider in public/index.html, just before </body>
+ */
+
+(function() {
+  const style = document.createElement('style');
+  style.textContent = `
+    /* Sort control pill styling — matches grid slider button aesthetic */
+    select[data-sort],
+    select[aria-label*="sort" i],
+    .sort-select,
+    .collection-sort-select {
+      display: inline-flex;
+      align-items: center;
+      padding: 10px 16px;
+      border: 1px solid #ddd;
+      border-radius: 20px;
+      background: #fff;
+      color: #333;
+      font-weight: 500;
+      font-size: 13px;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      appearance: none;
+      -webkit-appearance: none;
+      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+      background-repeat: no-repeat;
+      background-position: right 8px center;
+      background-size: 18px;
+      padding-right: 32px;
+    }
+
+    select[data-sort]:hover,
+    select[aria-label*="sort" i]:hover,
+    .sort-select:hover,
+    .collection-sort-select:hover {
+      border-color: #333;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+
+    select[data-sort]:focus,
+    select[aria-label*="sort" i]:focus,
+    .sort-select:focus,
+    .collection-sort-select:focus {
+      outline: none;
+      border-color: #000;
+      box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
+    }
+
+    /* Container for sort + grid controls side-by-side */
+    .collection-controls {
+      display: flex;
+      gap: 16px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+  `;
+  document.head.appendChild(style);
+})();
diff --git a/DW-Programming/templates/grid-slider-template.html b/DW-Programming/templates/grid-slider-template.html
index cc8202b0..5514cac8 100644
--- a/DW-Programming/templates/grid-slider-template.html
+++ b/DW-Programming/templates/grid-slider-template.html
@@ -133,3 +133,27 @@
   }, 500);
 })();
 </script>
+
+<!-- SORT CONTROL PILL STYLING — Complements grid density slider -->
+<script>
+(function() {
+  const style = document.createElement('style');
+  style.textContent = `
+    /* Sort control pill styling — matches grid slider button aesthetic */
+    select[data-sort], select[aria-label*="sort" i], .sort-select, .collection-sort-select {
+      display: inline-flex; align-items: center; padding: 10px 16px; border: 1px solid #ddd; border-radius: 20px; background: #fff; color: #333;
+      font-weight: 500; font-size: 13px; cursor: pointer; transition: all 0.15s ease; appearance: none; -webkit-appearance: none;
+      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+      background-repeat: no-repeat; background-position: right 8px center; background-size: 18px; padding-right: 32px;
+    }
+    select[data-sort]:hover, select[aria-label*="sort" i]:hover, .sort-select:hover, .collection-sort-select:hover {
+      border-color: #333; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+    select[data-sort]:focus, select[aria-label*="sort" i]:focus, .sort-select:focus, .collection-sort-select:focus {
+      outline: none; border-color: #000; box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
+    }
+    .collection-controls { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
+  `;
+  document.head.appendChild(style);
+})();
+</script>

← 0e2d0188 fix: improve grid density slider CSS to prevent layout overl · back to Designer Wallcoverings · fix: prevent sort dropdown from being clipped on the left 38f91012 →