Skip to content

feat: Protocol Comparison Side-by-Side View (P2 #22)#22

Merged
thefiredev-cloud merged 2 commits intomainfrom
feature/comparison-side-by-side
Feb 2, 2026
Merged

feat: Protocol Comparison Side-by-Side View (P2 #22)#22
thefiredev-cloud merged 2 commits intomainfrom
feature/comparison-side-by-side

Conversation

@thefiredev-cloud
Copy link
Copy Markdown
Owner

Summary

Implements side-by-side protocol comparison view for easy comparison across agencies.

Features

  • SideBySideView component for comparing 2-3 protocols in parallel columns
  • Difference highlighting with color-coded visual indicators:
    • 🟢 Green border: Unique to this protocol
    • 🟠 Amber border: Varies across protocols (different doses, etc.)
  • Collapsible sections for medications, key points, contraindications
  • View mode toggle (List ↔ Compare) in ProtocolComparison
  • Responsive layout:
    • Mobile: Horizontal scroll with page indicator
    • Tablet/Desktop: Side-by-side columns

EMS Field Optimization

  • Quick medication comparison across different agency protocols
  • Visual highlighting of dose variations for safety
  • Touch-friendly collapsible sections
  • Clear indication of protocol differences

Part of Batch 2

P2 UI enhancements as specified in the UI upgrade plan.

@netlify
Copy link
Copy Markdown

netlify Bot commented Feb 1, 2026

Deploy Preview for protocol-guide ready!

Name Link
🔨 Latest commit 114c29b
🔍 Latest deploy log https://app.netlify.com/projects/protocol-guide/deploys/69800b2fb0850b0008cec8a9
😎 Deploy Preview https://deploy-preview-22--protocol-guide.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Tanner added 2 commits February 1, 2026 18:24
- Add SideBySideView component for comparing 2-3 protocols in parallel
- Highlight medication differences across protocols (unique, varying)
- Collapsible sections for medications, key points, contraindications
- Responsive: horizontal scroll on mobile, columns on tablet/desktop
- Add view mode toggle (List vs Compare) in ProtocolComparison
- Auto-select protocols when switching to side-by-side mode
- Visual legend for difference highlighting (green=unique, amber=varies)

Optimized for EMS field use:
- Touch-friendly collapsible sections
- Clear visual diff highlighting
- Quick medication comparison across agencies
- Increase touch target from 28x28 to 44x44px (WCAG minimum)
- Add accessibilityRole to remove button
- Replace Dimensions.get() with useWindowDimensions() hook
- Wrap component in React.memo for performance
@thefiredev-cloud thefiredev-cloud force-pushed the feature/comparison-side-by-side branch from 3ce4e0f to 114c29b Compare February 2, 2026 02:25
@thefiredev-cloud thefiredev-cloud merged commit 9ee97ca into main Feb 2, 2026
1 of 2 checks passed
@thefiredev-cloud thefiredev-cloud deleted the feature/comparison-side-by-side branch February 2, 2026 02:26
thefiredev-cloud pushed a commit that referenced this pull request Feb 2, 2026
PRs introduced a runtime error causing React to not mount.
Will re-apply fixes after debugging.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant