Skip to content

Comments

Add expand/collapse toggle for card code views#36

Merged
brunoborges merged 3 commits intomainfrom
copilot/toggle-expand-collapse-cards
Feb 18, 2026
Merged

Add expand/collapse toggle for card code views#36
brunoborges merged 3 commits intomainfrom
copilot/toggle-expand-collapse-cards

Conversation

Copy link
Contributor

Copilot AI commented Feb 18, 2026 •
edited
Loading

Expand/Collapse All Cards Feature - Complete ✅

  • Add expand/collapse toggle button to index.html template
  • Add CSS styles for expanded mode showing both old and modern cards stacked vertically
  • Add JavaScript to handle expand/collapse functionality
    • Toggle button state (⊞ Expand All ↔ ⊟ Collapse All)
    • Apply/remove expanded class to cards
    • Disable hover/tap/swipe when expanded
    • Enable hover/tap/swipe when collapsed
  • Test the feature locally with web server
  • Take screenshots to show the feature working
  • Run security checks (0 vulnerabilities found)
  • Address feedback from @brunoborges:
    • Fix Modern label positioning in expanded mode (now relative, appears above Modern code)
    • Swap icons (⊞ for Expand, ⊟ for Collapse)
    • Disable button when no cards are visible
    • Improve background color contrast in dark mode (Old: #1a1412 brownish, Modern: #0f1419 bluish)

Screenshots

Collapsed State:
collapsed

Expanded State:
expanded

Button Disabled (no cards visible):
disabled

Dark Mode with Distinct Backgrounds:
dark-mode

Original prompt

This section details on the original issue you should resolve

<issue_title>Expand/Collapse all cards</issue_title>
<issue_description>In the landing page index.html, users want to be able to see Old and Modern approaches at the same time for all cards. Add a button to toggle this and show Modern card below the Old card.

When Expanded mode is on, the Tap/Swipe feature should be disabled.
When Collapsed mode is off, the Tap/Swipe feature should be enabled.</issue_description>

Comments on the Issue (you are @copilot in this section)

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Copilot AI changed the title [WIP] Add expand/collapse feature for landing page cards Add expand/collapse toggle for card code views Feb 18, 2026
Copilot AI requested a review from brunoborges February 18, 2026 15:33
@brunoborges
Copy link
Contributor

brunoborges commented Feb 18, 2026

@copilot A few issues in the index page.

  1. When expanded, the Modern label is at the same position as the Old label. Modern label should follow the modern code block.
  2. The icons for Expand vs Collapse are swapped
  3. The Expand/Collapse button should be disabled if no card is being displayed.
  4. In dark mode, the background for Old and Modern cards is very similar (if not the same). Difficult to distinguish.

Copy link
Contributor Author

Copilot AI commented Feb 18, 2026

@copilot A few issues in the index page.

  1. When expanded, the Modern label is at the same position as the Old label. Modern label should follow the modern code block.
    ...

Fixed all four issues in commit a36f164:

  1. Modern label positioning - Labels are now position: relative in expanded mode, so Modern label appears above Modern code block
  2. Icons corrected - ⊞ for Expand All, ⊟ for Collapse All
  3. Button disabled - Automatically disabled when no cards are visible (filter deselected)
  4. Background colors - Changed to more distinct colors in dark mode:
    • Old: #1a1412 (brownish)
    • Modern: #0f1419 (bluish)

Screenshots:

@brunoborges brunoborges marked this pull request as ready for review February 18, 2026 17:25
@brunoborges brunoborges merged commit 57daa74 into main Feb 18, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@brunoborges brunoborges Awaiting requested review from brunoborges

Assignees

@brunoborges brunoborges

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Expand/Collapse all cards

2 participants

@brunoborges