Merge pull request #34265 from olivierlacan/flexbox-guides-index

Improve layout of Rails Guides index

5 files changed, 73 insertions, 37 deletions

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
--- /dev/null
+++ b/guides/assets/images/rails_guides_logo_1x.png
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
--- /dev/null
+++ b/guides/assets/images/rails_guides_logo_2x.png
diff --git a/guides/assets/stylesheets/main.css b/guides/assets/stylesheets/main.css
index 2657a84a91..bdc3e21977 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;
@@ -515,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;
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.
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>