Improve layout of Rails Guides index #34265
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This notably allows us to tile each category without pushing the page down vertically as much as we previously did on any viewport wider than mobile sizes. It also means we can fit more guides which will become useful in the future since we have several new guides in the work. Finally the new layout allows three clearly distinct columns to emerge: - Start Here and Rails basics: Models, Views, Controllers, Other Components - Digging Deeper, Extending Rails, Contributing, Maintenance - Release Notes Having Release Notes shoot back up to the top of the third column is great because that makes finding the latest released version and its associated release notes much easier without having to scroll down a bunch. [ci skip]
The names are only used in the Guides Index overlay and several of them are longer than they need to be. For example “Ruby on Rails” is mentioned over and over again in the Release Notes section although these are obviously all Rails versions we’re listing. There’s a Maintenance Policy category with a Maintenance Policy article which is redundant. Policies makes much more sense as a category. Similarly, Contributing to Ruby on Rails is both a category and an article. “Contributions” is a better category title. “Ruby on Rails Guides Guidelines” is a gigantic mouthful. We are *in* the Rails Guides, we don’t need to specify what guides we’re talking about here. As a final added advantage, all of these shortenings make the index much easier to parse in order to find an article. [ci skip]
The previous version wasn’t matching the Rails Guides logo source file listed at https://github.com/rails/homepage/blob/master/materials/rails_guides_logo.psd somehow. It was also a GIF when an 8-bit PNG results in a smaller file (2KB vs 4KB) which should be just as widely compatible with browsers. And that’s just for the 1x version. I added a new 2x version for “retina” or high-density displays and a CSS @media query to progressively enhance with this high density version of the logo. I’ve ensured that this query is supported across browsers by using vendor-specific versions when necessary. See: https://caniuse.com/#feat=css-media-resolution [ci skip]
|
r? @kamipo (@rails-bot has picked a reviewer for you, use r? to override) |
|
I'm considering suggesting the repeated listings of I've tried to use the full date instead but that resulted in variable width which made the layout a bit more messy and difficult to read. I think it might even make sense to remove the specific date and simply list the month of release if
|
jeremy
approved these changes
Oct 20, 2018
olivierlacan
added a commit
to olivierlacan/rails
that referenced
this pull request
Oct 22, 2018
We repeat the phrase "Release Notes" even though release note are listed under a... "Release Notes" category already. With this change, instead of repeating ourselves, we can give people a sense of the recency of each release by simply listing the month and year of each release. This is a follow-up to rails#34265 as suggested by @jeremy. [ci skip]
jeremy
pushed a commit
that referenced
this pull request
Oct 27, 2018
We repeat the phrase "Release Notes" even though release note are listed under a... "Release Notes" category already. With this change, instead of repeating ourselves, we can give people a sense of the recency of each release by simply listing the month and year of each release. This is a follow-up to #34265 as suggested by @jeremy. [ci skip]
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR includes three improvements:
Other Information
First, you can check individual commit messages for details on these three specific changes.
Now for some lovely before & after shots.
Layout Before
Layout After
Logo Before (3,770 bytes)
Logo After (1x, 2,340 bytes)
Logo After (2x, 3,107 bytes)
I exported these new versions of the logo from the source PSD in the rails/homepage repo so I have pretty high confidence this is the correct version we should be using.