[playground] Examples bar wastes space
@sorvell is already working on this.
Since Nov 28, 2022.
- Dominant language
- TypeScript
- Stars
- 142
- Forks
- 230
- PR merge metrics
- No merged PRs in 30d
Description
This issue is especially annoying on mobile, but I think it makes sense to change for wider views as well.
1. When closed, the examples drawer takes up ~45px of width. This wastes too much space on narrow screens and imo provides extremely limited value for wider screens. Instead, I suggest having an `Examples` button at the left of the toolbar visually like the download/share buttons. Its toggles drawer open and hides. When the drawer closes, it should hide completely and show the `Examples` button.
2. In addition, I suggest defaulting the Examples drawer to closed when on narrow screens since the open view is really not that usable. If we want to provide a link that focuses users on "choosing and example" perhaps we can expose and link that state directly.
3. Finally, let's consider adjusting the button labels in the toolbar to ensure there's enough space and prioritize the critical info. Perhaps for the toolbar button labels:
* wide mode: icon + Examples, ...space..., icon + Download, icon + Share, icon + View
* narrow mode: icon + Examples, ...space..., icon, icon, icon
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.