From 03bcd416b04c411973456e33a95756edab4244cd Mon Sep 17 00:00:00 2001
From: Joe Fiorini <joe@joefiorini.com>
Date: Sat, 26 May 2012 00:28:24 -0400
Subject: [Guides] Navigation styling for small devices

---
 guides/source/layout.html.erb | 51 ++++++++++++++++++++++++++++++-------------
 1 file changed, 36 insertions(+), 15 deletions(-)

(limited to 'guides/source')
diff --git a/guides/source/layout.html.erb b/guides/source/layout.html.erb
index 0a8daf7ae5..0c368c658d 100644
--- a/guides/source/layout.html.erb
+++ b/guides/source/layout.html.erb
@@ -4,9 +4,9 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1">
 
 <title><%= yield(:page_title) || 'Ruby on Rails Guides' %></title>
-
 <link rel="stylesheet" type="text/css" href="stylesheets/style.css" />
 <link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print" />
 
@@ -25,24 +25,30 @@
   <% end %>
   <div id="topNav">
     <div class="wrapper">
-      <strong>More at <a href="http://rubyonrails.org/">rubyonrails.org:</a> </strong>
-      <a href="http://rubyonrails.org/">Overview</a> |
-      <a href="http://rubyonrails.org/download">Download</a> |
-      <a href="http://rubyonrails.org/deploy">Deploy</a> |
-      <a href="https://github.com/rails/rails">Code</a> |
-      <a href="http://rubyonrails.org/screencasts">Screencasts</a> |
-      <a href="http://rubyonrails.org/documentation">Documentation</a> |
-      <a href="http://rubyonrails.org/ecosystem">Ecosystem</a> |
-      <a href="http://rubyonrails.org/community">Community</a> |
-      <a href="http://weblog.rubyonrails.org/">Blog</a>
+      <strong class="more-info-label">More at <a href="http://rubyonrails.org/">rubyonrails.org:</a> </strong>
+      <span class="red-button more-info-button">
+        More Ruby on Rails
+      </span>
+      <ul class="more-info-links s-hidden">
+        <li class="more-info"><a href="http://rubyonrails.org/">Overview</a></li>
+        <li class="more-info"><a href="http://rubyonrails.org/download">Download</a></li>
+        <li class="more-info"><a href="http://rubyonrails.org/deploy">Deploy</a></li>
+        <li class="more-info"><a href="https://github.com/rails/rails">Code</a></li>
+        <li class="more-info"><a href="http://rubyonrails.org/screencasts">Screencasts</a></li>
+        <li class="more-info"><a href="http://rubyonrails.org/documentation">Documentation</a></li>
+        <li class="more-info"><a href="http://rubyonrails.org/ecosystem">Ecosystem</a></li>
+        <li class="more-info"><a href="http://rubyonrails.org/community">Community</a></li>
+        <li class="more-info"><a href="http://weblog.rubyonrails.org/">Blog</a></li>
+      </ul>
     </div>
   </div>
   <div id="header">
     <div class="wrapper clearfix">
       <h1><a href="index.html" title="Return to home page">Guides.rubyonrails.org</a></h1>
       <ul class="nav">
-        <li><a href="index.html">Home</a></li>
-        <li class="index"><a href="index.html" onclick="guideMenu(); return false;" id="guidesMenu">Guides Index</a>
+        <li><a class="nav-item" href="index.html">Home</a></li>
+        <li class="guides-index guides-index-large">
+          <a href="index.html" onclick="guideMenu(); return false;" 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| %>
@@ -57,9 +63,22 @@
             <% end %>
           </div>
         </li>
-        <li><a href="contributing_to_ruby_on_rails.html">Contribute</a></li>
-        <li><a href="credits.html">Credits</a></li>
+        <li><a class="nav-item" href="contributing_to_ruby_on_rails.html">Contribute</a></li>
+        <li><a class="nav-item" href="credits.html">Credits</a></li>
+        <li class="guides-index guides-index-small">
+          <select class="guides-index-item nav-item">
+            <option value="index.html">Guides Index</option>
+            <% docs_for_menu.each do |section| %>
+              <optgroup label="<%= section['name'] %>">
+                <% finished_documents(section['documents']).each do |document| %>
+                  <option value="<%= document['url'] %>"><%= document['name'] %></option>
+                <% end %>
+              </optgroup>
+            <% end %>
+          </select>
+        </li>
       </ul>
+      </div>
     </div>
   </div>
   <hr class="hide" />
@@ -113,6 +132,7 @@
     </div>
   </div>
 
+  <script type="text/javascript" src="javascripts/jquery.min.js"></script>
   <script type="text/javascript" src="javascripts/guides.js"></script>
   <script type="text/javascript" src="javascripts/syntaxhighlighter/shCore.js"></script>
   <script type="text/javascript" src="javascripts/syntaxhighlighter/shBrushRuby.js"></script>
@@ -121,6 +141,7 @@
   <script type="text/javascript" src="javascripts/syntaxhighlighter/shBrushPlain.js"></script>
   <script type="text/javascript">
     SyntaxHighlighter.all()
+    $(guidesIndex.bind);
   </script>
 </body>
 </html>
-- 
cgit v1.2.3

