Add media queries and mobile viewport #12142
Conversation
|
Copying the comment over since guessing we want to keep most discussion here? 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 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 ? |
|
Signed-off-by: Dale Harvey [email protected] |
|
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. |
|
Before moving forward here, I'd like to discuss with the Riot core team on our support level for mobile web. I'll keep you updated, and sorry for the delays. |
|
(removing this from the github review queue while that happens) |
|
Some progress to report here! #12377 intends to update our supported environments for Riot. Assuming that moves forward and merges, we'll be ready to pick this up for review. |
|
The supported environments set has been updated, and so this can now proceed to review. |
|
To clarify for reviewers, these are ready for anyone to review. #9814 is not on the workflow board itself since this set is only an initial step. |
| @@ -158,6 +158,16 @@ | |||
| display: none; | |||
| } | |||
|
|
|||
| @media only screen and (max-width : 480px) { | |||
| .mx_ButtonRow { | |||
There was a problem hiding this comment.
Please use 4 space indent.
| @@ -158,6 +158,16 @@ | |||
| display: none; | |||
| } | |||
|
|
|||
| @media only screen and (max-width : 480px) { | |||
There was a problem hiding this comment.
Please remove the space before the colon.
|
Hello @daleharvey, thank you for your contribution a while back, Any chance you could just do the final small tweaks to get it over the line? If not then one of the core team may do so as this would be a nice thing to land. Thanks |
| @@ -158,6 +158,16 @@ | |||
| display: none; | |||
| } | |||
|
|
|||
| @media only screen and (max-width : 480px) { | |||
There was a problem hiding this comment.
| @media only screen and (max-width : 480px) { | |
| @media only screen and (max-width: 480px) { |
| .mx_ButtonRow { | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .mx_ButtonRow > * { | ||
| margin: 0 0 10px 0; | ||
| } | ||
| } |
There was a problem hiding this comment.
| .mx_ButtonRow { | |
| flex-direction: column; | |
| } | |
| .mx_ButtonRow > * { | |
| margin: 0 0 10px 0; | |
| } | |
| } | |
| .mx_ButtonRow { | |
| flex-direction: column; | |
| } | |
| .mx_ButtonRow > * { | |
| margin: 0 0 10px 0; | |
| } | |
| } |
Add media queries and mobile viewport (#12142)
* Enable redirected media by default See matrix-org/matrix-js-sdk#4007 * Update the tests * Update tests * Update end-to-end tests too * Update linkifier to use Media customisation endpoint * Fix tests for new js-sdk behaviour * Fix unchanged file * Fix linkifier * Fix lint
As discussed in #9814
I made an additional PR to matrix-react-sdk @ matrix-org/matrix-react-sdk#3991