Add some media queries to improve UI on mobile#3991
Conversation
|
Thanks @daleharvey! Is it possible to link this up to an issue in riot-web and get sign off? |
|
@turt2live Hey cheers, I opened a PR @ element-hq/element-web#12142 and linked this issue, anything else I should do? |
|
That works too. Our contributing guidelines want sign off so we're able to accept the contribution. Just need a comment on each PR with this template filled in: |
|
Ah yeh sorry forgot about that, cheers Signed-off-by: Dale Harvey dale@arandomurl.com |
|
Thanks for the contribution! 😄 As mentioned in few places, we're currently in crunch mode for FOSDEM prep, but we'll take a look at this next week. |
|
To clarify for reviewers, these are ready for anyone to review. element-hq/element-web#9814 is not on the workflow board itself since this set is only an initial step. |
jryans
left a comment
jryans
left a comment
There was a problem hiding this comment.
Thanks for your patience with this!
Overall, I think this looks reasonable. Let's actually try going with the current approach for the moment, with small screen customisation in each component, as it seems easier to reason about.
A few small things to tweak before merging.
| } | ||
| } | ||
|
|
||
| @media only screen and (max-width : 480px) { |
There was a problem hiding this comment.
Please remove the space before the colon here and elsewhere. That should resolve the linting errors.
|
|
||
| .mx_AuthBody { | ||
| width: 500px; | ||
| max-width: 500px; |
There was a problem hiding this comment.
Hmm, for large screens at least, we don't want the width to change based on content. Could we leave this as it, and then reset width to auto and use max-width for small screens?
| } | ||
|
|
||
| @media only screen and (max-width : 480px) { | ||
| .mx_AuthHeader { |
There was a problem hiding this comment.
Please use 4 space indentation everywhere as well.
|
@turt2live @jryans I fixed this in #4656 |
Add some media queries to improve UI on mobile (#3991)
4 participants
So there is a lot of work to do here, I wanted to put up the minimal patch that gets the UI usable on mobile and touches the least amount of things as possible so we can discuss the overall approach without too big a patch.
It looks like:
https://i.imgur.com/Z8TU0VE.png
https://i.imgur.com/gvVVlJu.png
https://i.imgur.com/jSMuqAN.png
I feel like we probably dont want to be repeating this media query so often so not sure if we want to put this all in a dedicated mobile-overrides.scss ?