Improve drink details screen layout with consistent interactions - #180
Improve drink details screen layout with consistent interactions#180richardthe3rd with Copilot wants to merge 5 commits into
Conversation
- Enhanced InfoChip to visually distinguish interactive chips with button-like appearance - Made brewery clickable as a chip (consistent with style chip interaction) - Removed separate brewery section (now integrated as chip in Key Information) - Simplified ABV display (removed progress bar, show as compact badge) - Kept prominent sold-out banner (more useful than small chip) - Added "Key Information" and "Description" section headers for better hierarchy - Updated all tests to match new layout Co-authored-by: richardthe3rd <573334+richardthe3rd@users.noreply.github.com>
- Updated drink detail screen screenshots showing new compact ABV display and clickable brewery chip - Updated style screen screenshots reflecting enhanced InfoChip appearance - All 373 tests passing (1 pre-existing failure in unrelated utf8_encoding_test) Co-authored-by: richardthe3rd <573334+richardthe3rd@users.noreply.github.com>
- Added _interactiveBorderWidth constant (1.0) - Added _borderAlpha constant (0.3) for border transparency - Improves maintainability and consistency per code review feedback Co-authored-by: richardthe3rd <573334+richardthe3rd@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR improves the drink details screen layout by establishing consistent interaction patterns for navigating to related content. The main change replaces the separate brewery card section with a clickable brewery chip in the "Key Information" section, making brewery and style navigation visually and functionally consistent. Interactive chips now have distinct button-like styling (primary color background, border, chevron icon) while non-interactive chips remain subtle.
Key Changes:
- InfoChip widget now has distinct visual styling for interactive vs non-interactive states
- Brewery information moved from separate card to clickable chip in Key Information section
- ABV display changed from progress bar to compact colored badge with percentage label
- Tests updated to reflect new chip-based brewery interaction pattern
Reviewed changes
Copilot reviewed 3 out of 23 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
lib/widgets/info_chip.dart |
Added interactive chip styling with constants for magic numbers, primary color background, border, and chevron icon for clickable chips |
test/drink_detail_screen_test.dart |
Updated test assertions for brewery chip interaction, ABV format change, and navigation expectations |
test/goldens/*.png |
Updated golden test images to reflect new layout (binary files) |
test/failures/*.png |
Test failure artifacts showing visual differences (expected in PR updating goldens) |
|
@copilot any test failures will be a problem for ci and prevent running the pipeline. Fix any failing test - there shouldn't be preexisting failures |
…e typo - Generated utf8_encoding_test.mocks.dart using build_runner - Fixed .gitignore typo: separated !test/*.mocks.dart from screenshots/ - All 376 tests now pass (was 373 with 1 failure) Co-authored-by: richardthe3rd <573334+richardthe3rd@users.noreply.github.com>
Fixed in commit 68dd942. The test failure was due to a missing mock file ( All 376 tests now pass (up from 373 with 1 failure). The CI pipeline is now unblocked. |
LCOV of commit
|
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
🚀 Cloudflare Pages PreviewYour preview deployment is ready! Preview URL: https://copilot-improve-drink-detail.staging-cambeerfestival.pages.dev This preview will be automatically updated when you push new commits to this PR. |
|
@copilot food start with the improvements. I think the most important information for users is abv, style and description, and amount remaining. Allergen information as well Brewery is next Star rating, bar location, cask/keg are probably next. |
Drink Details Screen Layout Improvements ✅ Complete
Plan
Issues Addressed
✅ Only style chips are clickable - Made brewery clickable too with consistent button-like styling
✅ Different interactions for style vs brewery - Both are now chips with same interaction pattern
✅ Too many "bits" - Consolidated into clear sections with headers
✅ ABV bar not helpful - Simplified to compact colored badge display
✅ Sold-out banner useful - Kept as prominent full-width banner
✅ Description important - Added "Description" header to make it prominent
Test Results
✅ All 376 tests passing (fixed pre-existing failure)
utf8_encoding_test.mocks.dartfile.gitignoretypo that prevented proper mock file trackingCode Quality
✅ All tests passing (376/376)
✅ Code review feedback addressed
✅ Analyzer clean (no issues in changed code)
✅ Golden screenshots updated
✅ CI pipeline unblocked
Original prompt
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.