feat: Add collapsible sections with summary navigation to HTML reports (Issue #34) #42
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Implements Issue #34 to make HTML reports easier to use by adding: - Clickable summary cards that navigate to corresponding sections - Collapsible sections with toggle buttons and smooth animations - Session storage to persist section states across page reloads - Sections start in collapsed state by default - Proper icon rotation (▶ when collapsed, ▼ when expanded) - Smooth scrolling navigation with highlight effects Technical changes: - main-layout.scriban: Added clickable summary cards and collapsible section structure - styles.css: Added collapsible section styles, hover effects, and responsive design - scripts.js: Added toggleSection, navigateToSection, and initializeSections functions with session storage All tests pass and HTML report generation works correctly.
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR implements collapsible sections with summary navigation to enhance the usability of HTML reports, addressing Issue #34. The changes make large reports more manageable by providing a cleaner overview and interactive navigation.
- Adds clickable summary cards that navigate directly to corresponding sections
- Implements collapsible sections with toggle buttons and smooth animations
- Includes session storage persistence to remember user preferences across page reloads
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| styles.css | Adds CSS for collapsible sections, toggle buttons, and enhanced summary card interactions |
| scripts.js | Implements JavaScript functionality for section toggling, navigation, and session storage |
| main-layout.scriban | Updates HTML template to include collapsible structure and clickable summary cards |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Implements Issue #34 to make HTML reports easier to use by adding interactive collapsible sections with summary navigation.
Features Added
✅ Clickable Summary Cards
✅ Collapsible Sections
✅ Session Storage Persistence
✅ Default Collapsed State
✅ Enhanced Navigation
Technical Implementation
Files Modified
main-layout.scribanonclickhandlers to summary cardsstyles.cssscripts.jstoggleSection()- Handles collapse/expand functionalitynavigateToSection()- Smooth scrolling with auto-expandinitializeSections()- Sets default collapsed state with session storageTesting
User Experience
The HTML reports are now much more user-friendly:
Closes #34