Enable Contribute page to respond to screen size changes#232
Merged
Conversation
* Ensure we have the latest prismjs and prism-react-renderer * Shorten example description to make it easier to read and reduce screen sizes where overflow is required * Fix JSON5 syntax highlighting * Specify markdown sytnax highlighting for front matter samples. Markdown front matter highlighting will come to PrismJS in the next version (PrismJS/prism#2634) * Trim whitespace and newlines from the end of code samples
Enables the Contribute page to shrink according to screen size
andrewiggins
requested review from
gregwhitworth,
levithomason and
una
as code owners
November 30, 2020 18:43
andrewiggins
commented
Nov 30, 2020
|
@andrewiggins - can you join the wicg to appease the IPR bots? |
Contributor
Author
|
Yup - I've created my W3C account and linked my GitHub account. I've submitted requests to join the WICG and OpenUI Community Groups and am just awaiting approval from my Advisory Committee Rep |
Contributor
Author
|
Rep just approved and the |
|
@andrewiggins - welcome! :) |
Collaborator
|
Nice, thanks for this PR |
una
approved these changes
Dec 2, 2020
gregwhitworth
approved these changes
Dec 3, 2020
gregwhitworth
left a comment
gregwhitworth
left a comment
Member
There was a problem hiding this comment.
Thank you so much for this PR - and a mobile menu PR would be epic!!!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This change enables overflow on the code examples in the contribute page so the content can respond to screen width changes. First step to enabling a responsive mobile experience for the OpenUI website. In a future PR I'll look at adding a very basic accessible mobile menu.
Also fixed JSON5 syntax highlighting.
I based this on some of the suggestions by @aardrian in #170
Before:
Note horizontal scrollbar on page, no syntax highlighting
After:
Note horizontal scrollbar on code example and not entire page, proper syntax highlighting
Related #170