-
Notifications
You must be signed in to change notification settings - Fork 13k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
rustdoc: use flexbox to layout sidebar and main content #89385
Conversation
Some changes occurred in HTML/CSS/JS. |
r? @CraftSpider (rust-highfive has picked a reviewer for you, use r? to override) |
This comment has been minimized.
This comment has been minimized.
a7df02d
to
f5425fa
Compare
This comment has been minimized.
This comment has been minimized.
The source code pages are broken, however it seems like a good idea overall. I'll cc @jsha in here in case I missed something obvious accessibility-wise. |
@GuillaumeGomez My bad. I thought I’ve checked most the sites, but I completely missed the source code view. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm excited about this change. Thanks for working on it. One thing I noticed recently looking at source view: there's actually a regular sidebar (hidden), plus a source view sidebar at a different level of the DOM. I think it would be nice to move the source view sidebar up to the same level as the regular sidebar and use the same CSS if we can.
f5425fa
to
77c1218
Compare
The source page fix was a tricky/hacky one because now the sidebar is basically hidden but the sidebar also has the logo but on the source page we'd probably want to keep the logo, so I've workaround this by duplicating the logo node inside content and showing it only on source pages. |
I am not sure if this is a good thing because the source side bar is toggable and overlays the main content. It's basically a "separate" thing, since it is excluded from the main layout (because of |
Future work: Rework the search form. It's really hard to work with. We could use |
FYI in #88301 we concluded we should change that so the source side bar does not overlay the main content. |
We recently encountered huge issues with
Another idea would be to display the source sidebar all the time (not on mobile) and expand it when clicking on a button. You can see what I mean on docs.rs: https://docs.rs/crate/ftml/1.12.3/source/src/lib.rs (I'm quite proud of the usage of |
That simplifies things.
What kind of issues if I may ask?
I've merged the source level sidebar into the actual page sidebar. It's shown by default but can be collapsed. On mobile its hidden by default but can be shown by clicking the toggle. |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This one: #88545
Can you make it collapsed by default please? |
Oh I misread. I thought the consensus was to make it visible by default. |
Well, the source sidebar is always visible, but collapsed by default. |
This issue doesn't seem to affect layouts with a low count of rows or columns. Imho, it doesn't justify a strict hands-off of |
This comment has been minimized.
This comment has been minimized.
This is not looking great when the sidebar is collapsed: But in any case, I had something like this in mind: With the file sidebar always visible like on When scrolling on mobile, the text is moving as well: Peek.2021-10-11.11-59.mp4Another problematic thing introduced by this PR: since the logo isn't displayed by default anymore, there isn't an easy way to "go back" to documentation, or at least it's not intuitive to have to open the source sidebar to have access to it. I think it could be solved by displaying the logo at the top as usual when the sidebar is closed and put it into the sidebar when we expand it? |
Personally, it's just the same way it is now. I don't have a strong opinion on that tbf.
That looks alright too.
I agree.
I initially thought about this, but it was kinda tricky how to do that with less "hacks" iirc xD. I don't have much time right now, but I can look into fixing these things later... |
You can move a DOM element using JS (since the sidebar is only available with JS in any case...). |
Yeh sure :D, but I usually try really hard to find a CSS only solution before resorting to JS (to modify the DOM, compared to just modifying a single node's attributes/style). |
Me too but in this case I'm not sure if it's possible... Oh well, if you find a way that'd make me really happy. :) |
@GuillaumeGomez So, I've implemented the "sidebar always visible" approach, and fixed several bugs (sidebar is now sticky and main content doesn't overflow, that way firefox enables sub-pixel antialiasing). The only thing that's missing is the solution/situation about the logo. EDIT: Added some pics |
This comment has been minimized.
This comment has been minimized.
I have a few feedbacks. :) I'd prefer that the right-border to not be displayed when the sidebar is expanded. Which would look like this: I think it'd be better to remove the transitions when on mobile: Peek.2021-10-25.12-05.mp4You didn't hide the rust logo when the sidebar is expanded on desktop: When we are not at the top of the page, the hamburger button disappears on mobile: Finally: please add But other than that, it seems all good to me. This will be quite a huge improvement, thanks for working on it! Also: don't forget to rebase. ;) |
Any update on this @cynecx ? |
@GuillaumeGomez Sorry, I am still caught up in something else :/ I might be able to address your comments at the weekend. |
No problem! Waiting for the next update then. :) |
@cynecx Any news on this? If you don't have time, I'll use your commits and finish it if you don't mind. |
@GuillaumeGomez Sorry, but I don't think I'll get to this within the next 2 weeks.
I don't mind at all. That would be great :) |
Closing it in favour of #91356. Thanks again for your work, I had very little to do in the end. 😆 |
…, r=jsha Improve rustdoc layout This is an overtake of rust-lang#89385 originally written by `@cynecx.` I kept the original commit and simply added the missing fixes into a new one. You can test it online [here](https://rustdoc.crud.net/imperio/improve-rustdoc-layout/std/index.html). r? `@jsha`
The way rustdoc layouts the sidebar and main content is quite hacky because their content boxes are basically overlapping which eg. causes subpixel anti-aliasing issues on Firefox (with WebRender).
This PR utilizes flexbox and fixes most of the cosmetic issues affecting it (the layout and cosmetics are basically unchanged).