Optimize documentation layout on mobile #20850
Comments
|
Even on desktop, the content is rendered at a size slightly larger than the viewport (I hope this is the correct term, I'm not a web developer). Therefore, on all platforms, you have to scroll horizontally just a bit in order to see the right margin of the content. Is this related? |
|
@telotortium Are there any specific pages that this occurs on? Also, what browser are you using? |
|
Any page in the Rust book, in both Chrome and Firefox mobile. It's still a problem on desktop unless the window's at least 1000px wide, which is wider than almost all phones. It seems like neither the table of contents nor the body reflows if the window is narrowed, but the viewport of the table of contents remains a fixed width, so less space is allotted for the body. |
|
Ah, I see what you're talking about now. The CSS for the book looks pretty minimalistic at the moment, so it's not too surprising that it's not particularly responsive. I think it will be significantly easier to fix the layout of the latter 2 items in the checklist, as the Book will be a pretty large undertaking. |
|
Yes, it's very much just the basics. I'd love a patch. |
Helps with mobile friendliness of The Rust Book rust-lang#20850
Just a couple of tweaks to improve the appearance of pages like [The Rust Reference](http://doc.rust-lang.org/reference.html) on mobile to advance the progress of rust-lang#20850. Changing the viewport wasn't quite good enough to make it mobile-friendly, as large tables forced the page to become wider than the screen width. Using `overflow-x`, tables that are too large become horizontally scrollable instead of forcing the *entire page* to become horizontally scrollable. Also, there was at least one case where an extremely long piece of inline code was wider than the actual width of the screen (`std::ptr::copy_nonoverlapping_memory`), so I changed `word-wrap` to allow inline code to break in the middle of words instead of only text within `pre` tags. This isn't a change included in this PR, but rather something up for discussion. Currently, code blocks that contain long lines simply wrap onto the next line. What if rather than wrapping, they were horizontally scrollable instead? I'm not sure what the general preference is regarding this. r? @steveklabnik
|
Related issue: #16174 |
|
Google's Mobile-Friendly Test now rates all pages as mobile-friendly, so it looks like issue can be closed. |
|
\o/ Thanks everyone who helped make this happen! |
Considering the fact that Rust has moved into alpha and The Rust Programming Language has replaced the Guide, I think it would be useful to work towards creating a mobile-friendly layout for Rust's documentation. #17926 discusses the Guide, but now that the Book has replaced the Guide and brought a whole new layout that includes a sidebar, more than just a viewport fix will be needed to make it mobile-friendly. From what I can tell, there are a few "page families" that would need some tweaking (complete with fancy GitHub-powered checklist):
For the Rust Reference and Rust Documentation, a viewport meta tag might be all we need to make it mobile-friendly. The API Docs actually look pretty good on mobile already (the sidebar is pushed to the bottom of the page), but the page appears to load slightly zoomed-in (another viewport fix, likely).
The Book is rendered on mobile pretty much equivalently to the way it is displayed on larger displays, but it would be ideal for the content take up the full width of the screen. This leaves the sidebar to either be placed at the bottom of the page or converted into a dropdown menu of some sort. Thoughts?
The text was updated successfully, but these errors were encountered: