kotovalexarian-likes-github/rails--rails
1
0
Fork 0
mirror of https://github.com/rails/rails.git synced 2022-11-09 12:12:34 -05:00
Code Releases Activity

Use CSS flexbox for Guides index menu

Browse source 
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]
This commit is contained in:
Olivier Lacan 2018-10-19 18:41:32 -04:00
parent e3111c129a
commit 068413431c
2 changed files with 43 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
guides/assets/stylesheets/main.css
View file

@ -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;

18
guides/source/layout.html.erb
View file

@ -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>