Add Bootstrap card wrapper to Diff module comparison UI #647
Description
Proposal
Add Bootstrap 5 card wrapper around the Diff module's revision comparison header and controls to improve the visual presentation and consistency with the DXPR theme design system.
Implementation details:
- Wrap diff-header and diff-controls in a Bootstrap card component using JavaScript
- Use libraries-extend to attach custom library to diff/diff.general
- Restructure navigation to appear between comparing section and controls
- Add visual indicators using diff module color scheme (green for current revision, red for previous revision)
- Hide navigation label and display prev/next links horizontally with arrow indicators
Files to be modified:
- dxpr_theme.libraries.yml - Define drupal-diff library
- dxpr_theme.info.yml - Extend diff/diff.general library
- js/dist/drupal-diff.js - JavaScript to create card wrapper structure
- js/minified/drupal-diff.min.js - Compiled JavaScript
- scss/vendor-extensions/drupal-diff.scss - Styling for navigation and revision indicators
- css/vendor-extensions/drupal-diff.css - Compiled CSS
Benefits:
- Improved visual consistency with DXPR theme
- Better content hierarchy and spacing
- Clear visual distinction between current and previous revisions
- Improved navigation UX with horizontal layout and arrow indicators