From 068413431cd2b247c084ffd567a29f1abe5c41ff Mon Sep 17 00:00:00 2001 From: Olivier Lacan Date: Fri, 19 Oct 2018 18:41:32 -0400 Subject: Use CSS flexbox for Guides index menu 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] --- guides/assets/stylesheets/main.css | 45 ++++++++++++++++++++++++++++---------- guides/source/layout.html.erb | 18 +++++++-------- 2 files changed, 43 insertions(+), 20 deletions(-) diff --git a/guides/assets/stylesheets/main.css b/guides/assets/stylesheets/main.css index 2657a84a91..d6897aae03 100644 --- a/guides/assets/stylesheets/main.css +++ b/guides/assets/stylesheets/main.css @@ -401,14 +401,10 @@ a, a:link, a:visited { } #guides { - width: 27em; + width: 37em; display: block; background: #980905; border-radius: 1em; - -webkit-border-radius: 1em; - -moz-border-radius: 1em; - -webkit-box-shadow: 0.25em 0.25em 1em rgba(0,0,0,0.25); - -moz-box-shadow: rgba(0,0,0,0.25) 0.25em 0.25em 1em; color: #f1938c; padding: 1.5em 2em; position: absolute; @@ -422,17 +418,44 @@ a, a:link, a:visited { display: block !important; } -#guides dt, #guides dd { +.guides-section dt, .guides-section dd { font-weight: normal; font-size: 0.722em; margin: 0; padding: 0; } -#guides dt {padding:0; margin: 0.5em 0 0;} -#guides a {color: #FFF; background: none !important; text-decoration: none;} -#guides a:hover {text-decoration: underline;} -#guides .L, #guides .R {float: left; width: 50%; margin: 0; padding: 0;} -#guides .R {float: right;} +.guides-section dt { + margin: 0.5em 0 0; + padding:0; +} +#guides a { + background: none !important; + color: #FFF; + text-decoration: none; +} +#guides a:hover { + text-decoration: underline; +} +.guides-section-container { + display: flex; + flex-direction: column; + flex-wrap: wrap; + width: 100%; + max-height: 35em; +} + +.guides-section { + min-width: 5em; + margin: 0 2em 0.5em 0; + flex: auto; + max-width: 12em; +} + +.guides-section dd { + line-height: 1.3; + margin-bottom: 0.5em; +} + #guides hr { display: block; border: none; diff --git a/guides/source/layout.html.erb b/guides/source/layout.html.erb index dd9175e312..1f42d72756 100644 --- a/guides/source/layout.html.erb +++ b/guides/source/layout.html.erb @@ -45,16 +45,16 @@ Guides Index
  • Contribute
    • -- cgit v1.2.3 From af6dbcf1ed61ee089bfd22a67d9888ed72061d3f Mon Sep 17 00:00:00 2001 From: Olivier Lacan Date: Fri, 19 Oct 2018 18:47:51 -0400 Subject: Shorten unnecessarily long names for Guides MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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] --- guides/source/documents.yaml | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/guides/source/documents.yaml b/guides/source/documents.yaml index 8f2312458d..551179c523 100644 --- a/guides/source/documents.yaml +++ b/guides/source/documents.yaml @@ -173,7 +173,7 @@ description: This guide describes the considerations needed and tools available when working directly with concurrency in a Rails application. work_in_progress: true - - name: Contributing to Ruby on Rails + name: Contributions documents: - name: Contributing to Ruby on Rails @@ -184,14 +184,14 @@ url: api_documentation_guidelines.html description: This guide documents the Ruby on Rails API documentation guidelines. - - name: Ruby on Rails Guides Guidelines + name: Guides Guidelines url: ruby_on_rails_guides_guidelines.html description: This guide documents the Ruby on Rails guides guidelines. - - name: Maintenance Policy + name: Policies documents: - - name: Maintenance Policy for Ruby on Rails + name: Maintenance Policy url: maintenance_policy.html description: What versions of Ruby on Rails are currently supported, and when to expect new versions. - @@ -202,51 +202,51 @@ url: upgrading_ruby_on_rails.html description: This guide helps in upgrading applications to latest Ruby on Rails versions. - - name: Ruby on Rails 6.0 Release Notes + name: 6.0 Release Notes work_in_progress: true url: 6_0_release_notes.html description: Release notes for Rails 6.0. - - name: Ruby on Rails 5.2 Release Notes + name: 5.2 Release Notes url: 5_2_release_notes.html description: Release notes for Rails 5.2. - - name: Ruby on Rails 5.1 Release Notes + name: 5.1 Release Notes url: 5_1_release_notes.html description: Release notes for Rails 5.1. - - name: Ruby on Rails 5.0 Release Notes + name: 5.0 Release Notes url: 5_0_release_notes.html description: Release notes for Rails 5.0. - - name: Ruby on Rails 4.2 Release Notes + name: 4.2 Release Notes url: 4_2_release_notes.html description: Release notes for Rails 4.2. - - name: Ruby on Rails 4.1 Release Notes + name: 4.1 Release Notes url: 4_1_release_notes.html description: Release notes for Rails 4.1. - - name: Ruby on Rails 4.0 Release Notes + name: 4.0 Release Notes url: 4_0_release_notes.html description: Release notes for Rails 4.0. - - name: Ruby on Rails 3.2 Release Notes + name: 3.2 Release Notes url: 3_2_release_notes.html description: Release notes for Rails 3.2. - - name: Ruby on Rails 3.1 Release Notes + name: 3.1 Release Notes url: 3_1_release_notes.html description: Release notes for Rails 3.1. - - name: Ruby on Rails 3.0 Release Notes + name: 3.0 Release Notes url: 3_0_release_notes.html description: Release notes for Rails 3.0. - - name: Ruby on Rails 2.3 Release Notes + name: 2.3 Release Notes url: 2_3_release_notes.html description: Release notes for Rails 2.3. - - name: Ruby on Rails 2.2 Release Notes + name: 2.2 Release Notes url: 2_2_release_notes.html description: Release notes for Rails 2.2. -- cgit v1.2.3 From 8990921ba95e82b2d9e77730cf37ebdc6772aa63 Mon Sep 17 00:00:00 2001 From: Olivier Lacan Date: Fri, 19 Oct 2018 19:08:42 -0400 Subject: Replace outdated Rails Guides logo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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] --- guides/assets/images/rails_guides_logo_1x.png | Bin 0 -> 2340 bytes guides/assets/images/rails_guides_logo_2x.png | Bin 0 -> 3107 bytes guides/assets/stylesheets/main.css | 15 ++++++++++++++- 3 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 guides/assets/images/rails_guides_logo_1x.png create mode 100644 guides/assets/images/rails_guides_logo_2x.png diff --git a/guides/assets/images/rails_guides_logo_1x.png b/guides/assets/images/rails_guides_logo_1x.png new file mode 100644 index 0000000000..8c6810c312 Binary files /dev/null and b/guides/assets/images/rails_guides_logo_1x.png differ diff --git a/guides/assets/images/rails_guides_logo_2x.png b/guides/assets/images/rails_guides_logo_2x.png new file mode 100644 index 0000000000..accc6bbfa4 Binary files /dev/null and b/guides/assets/images/rails_guides_logo_2x.png differ diff --git a/guides/assets/stylesheets/main.css b/guides/assets/stylesheets/main.css index d6897aae03..bdc3e21977 100644 --- a/guides/assets/stylesheets/main.css +++ b/guides/assets/stylesheets/main.css @@ -538,13 +538,26 @@ h6 { #header h1 { float: left; - background: url(../images/rails_guides_logo.gif) no-repeat; + background: url(../images/rails_guides_logo_1x.png) no-repeat; width: 297px; text-indent: -9999em; margin: 0; padding: 0; } +@media +only screen and (-webkit-min-device-pixel-ratio: 2), +only screen and ( min--moz-device-pixel-ratio: 2), +only screen and ( -o-min-device-pixel-ratio: 2/1), +only screen and ( min-device-pixel-ratio: 2), +only screen and ( min-resolution: 192dpi), +only screen and ( min-resolution: 2dppx) { + #header h1 { + background: url(../images/rails_guides_logo_2x.png) no-repeat; + background-size: 160%; + } +} + @media screen and (max-width: 480px) { #header h1 { float: none; -- cgit v1.2.3