[DP-180] Fixed mobile display of lesson pages #229
Conversation
This file contains 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
|
These changes are working well, Chan Mi. The repositioning of buttons at the end of the page work especially well for mobile users. |
| // A global style that styles fill in the blank sentences where a word | ||
| // appears below the input box. | ||
| globalStyle(`${lesson} .fill-blank span`, { | ||
| display: "inline-flex", |
There was a problem hiding this comment.
What does inline-flex do? Why not normal flex?
| display: "flex", | ||
| flexDirection: "column", | ||
| border: `${thickness.thin} solid ${colors.text}`, | ||
| ...(marginY(vspace.large) as Styles), |
There was a problem hiding this comment.
I'm surprised this as clause is necessary, it wasn't passing typecheck? Later on, padding seems to work fine so maybe revise the type of the marginY function.
There was a problem hiding this comment.
Do you mean revise the type that marginY returns? Since it looks like the padding functions that work return a Styles instead of StyleRules which allows them to work
There was a problem hiding this comment.
Let's try this out chanmi, and deploy changes after @GracefulLemming reviews.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Changelog
Original bug: On mobile, some elements on the WP page cause the page to overflow, so the whole page will look like this:
To fix this, I added mobile query styling to these elements. I didn't want to mess with the WP page elements like blockquote's inline styles too much, so instead of using
min-widthI usemax-widthto override inline styles on the mobile sizes. Lmk if this should be done another way, but that's how I approached this.wordpress.tsx: Checked for URL path before parsing to see if the created stylesheet needs to be included.lesson.css.ts: Added styles for elements specifically on mobile screen sizes. I also added some styles applied to all screen sizes since I thought they'd look a bit better, I elaborate those below.WP Changes
Modified WP page: https://wp.dailp.northeastern.edu/wp-admin/post.php?post=673&action=edit
fill-blankthat styles questions where the input box appears within a sentence, and also contains a word below it. I replaced the previous way it was styled into a flexbox for both mobile AND desktop, so that it would be responsive for both sizes.Before and after on mobile:
module-buttonsthat repositions the buttons at the end of the lesson. It was positioned awkwardly on mobile, so I turned it into a flexbox for responsiveness on mobile + desktop.Before and after on mobile:
