Improve mobile responsiveness of Duo Pro Discover page
What does this MR do and why?
Improve Discover Duo Pro page mobile responsiveness
- Replace flex classes in first section with responsive grid to stack Section 1 items
- Made video thumbnail responsive and stackable, moved width declaration into CSS
- Update "Code Suggestions" container widths for improved aesthetic on mobile
- Stack all sections and cards on sm and md size screens per this discussion
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
Before
duo-pro-discover-page-mobile-before
After new-after-with-buttons new-after-mobile-buttons
Screenshots are required for UI changes, and strongly recommended for all other merge requests.
After small + medium breakpoint / mobile screenshots:
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
- Start your GDK / login as root
- Create a new Group in the UI
- In rails console - bin/rails c
g = Group.last u = User.first g.owner = u g.save! Feature.enable(:duo_pro_trials) GitlabSubscriptions::AddOn.find_or_create_by(name: 'code_suggestions', description: GitlabSubscriptions::AddOn.descriptions[:code_suggestions]) GitlabSubscription.last.update(trial: true, trial_starts_on: 45.days.ago, trial_ends_on: 15.days.ago) GitlabSubscriptions::AddOnPurchase.create(subscription_add_on_id: GitlabSubscriptions::AddOn.find_by(name: 'code_suggestions').id, namespace: Group.last, started_at: 60.days.ago, expires_on: Date.today, trial: true, quantity: 1, purchase_xid: ‘1’, organization_id: 1)
- Visit Duo Pro Discover page directly or navigate there via the activated widget from a group specific page
http://localhost:3000/groups/#{YOUR_GROUP_NAME}/-/add_ons/discover_duo_pro
Related to #466736
Edited by Buck O'Leary