mikhael28/paretOS

Enhancement: Experience module mobile view needs improvement

Open

#154 opened on Mar 28, 2022

View on GitHubContributor guide
 (1 comment) (0 reactions) (0 assignees)JavaScript (45 forks)auto 404
Reactdesigngood first issueresponsive

Repository metrics

Stars
 (35 stars)
PR merge metrics
 (PR metrics pending)

Description

Description

The mobile view of the experience module has a 'squashed' appearance.

Maybe the experience cards could be scrollable horizontally in the upper quarter of the view, and then the experience content could show below them based on which is card is selected?

Steps to Reproduce

  1. After setting up the project on your local machine, unlock the experience module (on the pay screen, click on the "no donation" link in the lower left)
  2. Click on one of the three experience categories
  3. Switch to mobile view in developer tools

Additional Information

  • Submit button should be fully contained within the experience content screen
  • Experience cards should display full titles (currently they're extending past the boundary of the card
  • Checkbox icons should be fully contained within the card
  • Long urls should wrap rather than extending past the boundary of the content screen
  • "Experience Module" and the info icon should be on the same line and the info icon should be smaller/less distracting

Contributor guide

Research direction
Inspect the experience module mobile view. Implement horizontal scrolling for experience cards in the upper quarter, display experience content below based on selected card. Ensure submit button is fully contained, cards show full titles, checkbox icons contained, long URLs wrap, and module title and info icon on same line with smaller icon.
Tech stack
javascript
Domain
frontend
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
Git
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75