Merge pull request #36 from javaevolved/copilot/toggle-expand-collapse-cards

Add expand/collapse toggle for card code views

Author: brunoborges

site/app.js

@@ -174,8 +174,19 @@
             card.classList.add('filter-hidden');
           }
         });
+
+        // Update view toggle button state
+        if (window.updateViewToggleState) {
+          window.updateViewToggleState();
+        }
       });
     });
+
+    // Auto-click "All" button on page load to show all cards
+    const allButton = document.querySelector('.filter-pill[data-filter="all"]');
+    if (allButton) {
+      allButton.click();
+    }
   };
 
   /* ==========================================================
@@ -211,6 +222,12 @@
         // Only handle touches on the card-code area
         if (!e.target.closest('.card-code')) return;
 
+        // Don't handle touch events when in expanded mode
+        const tipsGrid = document.getElementById('tipsGrid');
+        if (tipsGrid && tipsGrid.classList.contains('expanded')) {
+          return;
+        }
+
         touchEndX = e.changedTouches[0].clientX;
         touchEndY = e.changedTouches[0].clientY;
 
@@ -245,6 +262,11 @@
       // This is a safety net in case touch events trigger click as fallback
       card.addEventListener('click', (e) => {
         if (e.target.closest('.card-code')) {
+          // Don't prevent navigation when in expanded mode
+          const tipsGrid = document.getElementById('tipsGrid');
+          if (tipsGrid && tipsGrid.classList.contains('expanded')) {
+            return;
+          }
           e.preventDefault();
           e.stopPropagation();
         }
@@ -470,6 +492,56 @@
     });
   };
 
+  /* ==========================================================
+     6. View Toggle (Expand/Collapse All Cards)
+     ========================================================== */
+  const initViewToggle = () => {
+    const toggleBtn = document.getElementById('viewToggle');
+    const tipsGrid = document.getElementById('tipsGrid');
+    if (!toggleBtn || !tipsGrid) return;
+
+    let isExpanded = false;
+
+    const updateButtonState = () => {
+      const visibleCards = document.querySelectorAll('.tip-card:not(.filter-hidden)');
+      const hasVisibleCards = visibleCards.length > 0;
+      
+      toggleBtn.disabled = !hasVisibleCards;
+      if (!hasVisibleCards) {
+        toggleBtn.style.opacity = '0.5';
+        toggleBtn.style.cursor = 'not-allowed';
+      } else {
+        toggleBtn.style.opacity = '1';
+        toggleBtn.style.cursor = 'pointer';
+      }
+    };
+
+    toggleBtn.addEventListener('click', () => {
+      isExpanded = !isExpanded;
+      
+      if (isExpanded) {
+        tipsGrid.classList.add('expanded');
+        toggleBtn.querySelector('.view-toggle-icon').textContent = '⊟';
+        toggleBtn.querySelector('.view-toggle-text').textContent = 'Collapse All';
+        
+        // Remove toggled class from all cards when expanding
+        document.querySelectorAll('.tip-card').forEach(card => {
+          card.classList.remove('toggled');
+        });
+      } else {
+        tipsGrid.classList.remove('expanded');
+        toggleBtn.querySelector('.view-toggle-icon').textContent = '⊞';
+        toggleBtn.querySelector('.view-toggle-text').textContent = 'Expand All';
+      }
+    });
+
+    // Check initial state
+    updateButtonState();
+
+    // Make updateButtonState available for filter to call
+    window.updateViewToggleState = updateButtonState;
+  };
+
   /* ==========================================================
      Utilities
      ========================================================== */
@@ -488,6 +560,7 @@
     });
     initFilters();
     initCardToggle();
+    initViewToggle();
     initCopyButtons();
     initSyntaxHighlighting();
     initNewsletter();

site/styles.css

@@ -63,8 +63,8 @@ code, pre { font-family: 'JetBrains Mono', monospace; }
   --yellow: #fbbf24;
   --cyan: #22d3ee;
   --red-muted: #ef4444;
-  --old-bg: #11100f;
-  --modern-bg: #0f1117;
+  --old-bg: #1a1412;
+  --modern-bg: #0f1419;
   --radius: 16px;
   --radius-sm: 10px;
   --nav-bg: rgba(11, 11, 15, .8);
@@ -597,6 +597,88 @@ nav {
   gap: 8px;
 }
 
+/* ---------- View Toggle Button ---------- */
+.view-toggle-wrap {
+  display: flex;
+  justify-content: center;
+  margin: 16px 0;
+}
+
+.view-toggle-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  font-size: 0.88rem;
+  font-weight: 500;
+  color: var(--text);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.25s;
+}
+
+.view-toggle-btn:hover {
+  background: var(--surface-2);
+  border-color: var(--border-light);
+  transform: translateY(-2px);
+}
+
+.view-toggle-icon {
+  font-size: 1.1rem;
+  line-height: 1;
+}
+
+/* ---------- Expanded Mode ---------- */
+.tips-grid.expanded .tip-card {
+  pointer-events: auto;
+}
+
+.tips-grid.expanded .tip-card:hover {
+  transform: none;
+  box-shadow: none;
+}
+
+.tips-grid.expanded .tip-card .card-code {
+  display: flex;
+  flex-direction: column;
+}
+
+.tips-grid.expanded .tip-card .old-layer,
+.tips-grid.expanded .tip-card .modern-layer {
+  position: static;
+  opacity: 1;
+  min-height: auto;
+  border-top: 1px solid var(--border);
+}
+
+.tips-grid.expanded .tip-card .old-layer {
+  border-top: none;
+}
+
+.tips-grid.expanded .tip-card .mini-label {
+  position: relative;
+  top: 0;
+  right: 0;
+  margin-bottom: 8px;
+}
+
+.tips-grid.expanded .tip-card .hover-hint {
+  display: none;
+}
+
+/* Disable hover effects in expanded mode */
+.tips-grid.expanded .tip-card:hover .old-layer,
+.tips-grid.expanded .tip-card.toggled .old-layer {
+  opacity: 1;
+}
+
+.tips-grid.expanded .tip-card:hover .modern-layer,
+.tips-grid.expanded .tip-card.toggled .modern-layer {
+  opacity: 1;
+}
+
 /* ---------- Stats Bar ---------- */
 .stats-bar {
   display: flex;

templates/index.html

@@ -240,6 +240,12 @@ <h2 class="section-title">All comparisons</h2>
       <button class="filter-pill" data-filter="security">Security</button>
       <button class="filter-pill" data-filter="tooling">Tooling</button>
     </div>
+    <div class="view-toggle-wrap">
+      <button class="view-toggle-btn" id="viewToggle" aria-label="Toggle view mode">
+        <span class="view-toggle-icon">⊞</span>
+        <span class="view-toggle-text">Expand All</span>
+      </button>
+    </div>
     <div class="tips-grid" id="tipsGrid">
 {{tipCards}}
     </div>