Please use a little more width for crate pages on screens #970
Comments
carols10cents
added
C-enhancement ✨
|
Hey all! Just found this after reading through the roadmap for the rest of the year. Happy to help out and submit my first PR to the project, but first wanted to just discuss what I found. If the docs div is increased to 640px, the overflow goes away in this example without any major side effects: This change would make it so code shouldn't hit the overflow up to about 65 characters of line-length. Making it as wide as GitHub's README would mean having to move the authorship div somewhere else or making everything wider, which is something that may require a bit more discussion beyond the scope of this Issue. I'd be willing to open a PR with some suggestions on the latter if needed. |
|
@tcbyrd I think the right solution would be to widen the containing div as well (the beige area) and leave the authorship sidebar the same size. Some other pages already have a wider content area. |
|
I agree. 960px is a pretty decent width for the whole thing. I pulled down the source and noticed this doesn't change the docs because they are hosted on GitHub Pages. To make it consistent we'd also need to change this line in Since I already setup the dev environment, I'll open a PR tomorrow unless I hear otherwise. |
1064: Make the page wider to give more room for README on desktop r=carols10cents Fixes #970 **Summary** This is my first PR to this repo, but I saw the Issue above and thought I'd try and tackle it since it's fairly minimal, but is a nice change to help with readability. This is a suggestion to widen the width of the main div to 960px so that the `.crate-info .docs` div can be increased a bit without having to decrease the size of the `.crate-info .authorship` div. **Reasoning** I mainly chose 960px since it's a fairly widely accepted standard for content of this type. This allows the documentation to be 640px, which increases the line-length of the `pre` elements to 65 to help minimize horizontal scrolling. **Before/After**  **Other Changes** I also changed the responsive screen width option to match the 960px width. The only major side effect here is the authorship div gets a little narrow until it switches to 100% at 900px, but that was already happening at 1040px and it's still readable. The other option is to leave it at 960px and just let the whole page horizontally scroll from 900-960px. _Example of the narrow authorship div @ 915px_  **Docs Updates** If the team wants to accept this change, for the docs to be consistent, [this line](https://github.com/rust-lang/cargo/blob/73eb8c424dc3732cea23769982d0e4e261d5399e/stylesheets/all.css#L6) in the [GitHub pages branch](https://github.com/rust-lang/cargo/tree/gh-pages) of the Cargo repo will also need to be updated. I saw there were some discussions about a much bigger redesign, but I thought this may help in the interim since it's a fairly minimal change. I'm open to any feedback! 😄
|
Increase width please. why would someone want content width so narrow and wasting most of real estate on most devices? It is really a pain to read any crate content currently. |
When rendering on a full-size screen (rather than mobile), the crates page still renders content in a very narrow column. The width used on almost every other page seems fine, but crate pages have a sidebar, which narrows the region available for the README content.
Take a look at https://crates.io/crates/colorparse, and compare it to https://github.com/joshtriplett/colorparse/. Notice how the code in the latter doesn't wrap, while it does in the former.
I think it would be reasonable for the main (non-sidebar) crate content on crate pages to have the same width that the overall (non-columnar) content has on other pages. That would make the README much more readable, without sacrificing the critical property of avoiding excessively wide lines.
Does that seem reasonable?
Implementation instructions added by @carols10cents:
max-widthset on.crate-info .docs(I think) so that it's about as wide as readmes appear on GitHubnpm run start:livewill come in handy for this :)The text was updated successfully, but these errors were encountered: