From 068413431cd2b247c084ffd567a29f1abe5c41ff Mon Sep 17 00:00:00 2001
From: Olivier Lacan <hi@olivierlacan.com>
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 @@
<a href="index.html" id="guidesMenu" class="guides-index-item nav-item">Guides Index</a>
<div id="guides" class="clearfix" style="display: none;">
<hr />
- <% ['L', 'R'].each do |position| %>
- <dl class="<%= position %>">
- <% docs_for_menu(position).each do |section| %>
- <dt><%= section['name'] %></dt>
- <% finished_documents(section['documents']).each do |document| %>
- <dd><a href="<%= document['url'] %>"><%= document['name'] %></a></dd>
- <% end %>
+ <div class="guides-section-container">
+ <% documents_by_section.each do |section| %>
+ <div class="guides-section">
+ <dt><%= section['name'] %></dt>
+ <% finished_documents(section['documents']).each do |document| %>
+ <dd><a href="<%= document['url'] %>"><%= document['name'] %></a></dd>
+ <% end %>
+ </div>
<% end %>
- </dl>
- <% end %>
+ </div>
</div>
</li>
<li><a class="nav-item" href="contributing_to_ruby_on_rails.html">Contribute</a></li>
--
cgit v1.2.3
From af6dbcf1ed61ee089bfd22a67d9888ed72061d3f Mon Sep 17 00:00:00 2001
From: Olivier Lacan <hi@olivierlacan.com>
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 <hi@olivierlacan.com>
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