Created mobile friendly navigation bar!

Moved fonts to assets folder since I could not figure out how to get rails to include them in the assets pipeline.  We might want to just serve these fonts over a CDN instead as they are commonly used across the internet and could reduce load time.

app/assets/stylesheets/custom.css

@@ -1,9 +1,65 @@
-/*bootstrap overrides*/
+/*
+ * Style tweaks
+ * --------------------------------------------------
+ */
 html, body{
     font-family: verdana,arial,helvetica,sans-serif;
     font-size: 13px;
 }
 
+/*
+ * Off Canvas
+ * --------------------------------------------------
+ */
+
+.hidden-overflow-x {
+    overflow-x:hidden !important;
+}
+@media screen and (max-width: 767px) {
+    .row-offcanvas {
+        position: relative;
+        -webkit-transition: all .25s ease-out;
+        -o-transition: all .25s ease-out;
+        transition: all .25s ease-out;
+    }
+
+    .row-offcanvas-right {
+        right: 0;
+    }
+
+    .row-offcanvas-left {
+        left: 0;
+    }
+
+    .row-offcanvas-right
+    .sidebar-offcanvas {
+        right: -50%; /* 6 columns */
+    }
+
+    .row-offcanvas-left
+    .sidebar-offcanvas {
+        left: -50%; /* 6 columns */
+    }
+
+    .row-offcanvas-right.active {
+        right: 50%; /* 6 columns */
+    }
+
+    .row-offcanvas-left.active {
+        left: 50%; /* 6 columns */
+    }
+
+    .sidebar-offcanvas {
+        position: absolute;
+        top: 0;
+        width: 50%; /* 6 columns */
+    }
+}
+
+
+/*bootstrap overrides*/
+
+
 .pagination {
     margin-top: 5px;
     margin-bottom: 5px;

app/helpers/pagination_helper.rb

@@ -86,7 +86,7 @@ def pagination_numbers(pages, args={})
       nstr = "#{:NEXT.t} »"
       result << pagination_link(pstr, this-1, arg, args) if this > 1
       result << pagination_link(1, 1, arg, args) if from > 1
-      result << result << content_tag(:li, content_tag(:span, "..."), class: "disabled") if from > 2
+      result << content_tag(:li, content_tag(:span, "..."), class: "disabled") if from > 2
       for n in from..to
         if n == this
           result << content_tag(:li, content_tag(:span, n), class: "active")

app/views/glossary/show_glossary_term.html.erb

@@ -1,39 +1,40 @@
 <%
-  @title = :show_glossary_term_title.t(:name => @glossary_term.name)
-  new_tab_set do
-    add_tab(:glossary_term_index.t, :action => 'index')
-    add_tab(:create_glossary_term.t, :action => 'create_glossary_term')
-    add_tab(:edit_glossary_term.t, :action => 'edit_glossary_term', :id => @glossary_term.id)
-  end
+   @title = :show_glossary_term_title.t(:name => @glossary_term.name)
+   new_tab_set do
+     add_tab(:glossary_term_index.t, :action => 'index')
+     add_tab(:create_glossary_term.t, :action => 'create_glossary_term')
+     add_tab(:edit_glossary_term.t, :action => 'edit_glossary_term', :id => @glossary_term.id)
+   end
 %>
-
-<table width="100%">
-  <tr>
-    <td width="50%">
-      <%= @glossary_term.description.tpl %>
-    </td>
-    <td align="center" width="50%">
-      <%= if @glossary_term.thumb_image
-        thumbnail(@glossary_term.thumb_image, :votes => true, :size => :medium)
-      end %>
-    </td>
-  </tr>
-</table>
-
-<p>
+<div class="row">
+  <div class="col-sm-6">
+          <%= @glossary_term.description.tpl %>
+    </div>
+    <div class="col-sm-6">
+          <%= if @glossary_term.thumb_image
+                thumbnail(@glossary_term.thumb_image, :votes => true, :size => :medium)
+              end %>
+    </div>
+  <div class="col-xs-12">
   <%= link_with_query(:show_glossary_term_reuse_image.t, :controller => 'image',
-      :action => 'reuse_image_for_glossary_term', :id => @glossary_term.id) %><br/>
+                      :action => 'reuse_image_for_glossary_term', :id => @glossary_term.id) %><br/>
   <%= link_with_query(:show_glossary_term_remove_image.t, :controller => 'image',
-      :action => 'remove_images_for_glossary_term', :id => @glossary_term.id) %><br/>
-</p>
-
-<%= make_matrix(@objects, :width => '100%') do |image| %>
-  <%= thumbnail(image, :votes => true) %>
-<% end %>
-
-<%= show_previous_version(@glossary_term) %>
-
-<p class="Date">
-  <%= :footer_created_at.t(:date => @glossary_term.created_at.web_time) %><br/>
-  <%= :footer_last_updated_at.t(:date => @glossary_term.updated_at.web_time) %>
-</p>
+                      :action => 'remove_images_for_glossary_term', :id => @glossary_term.id) %><br/>
+  </div>
+  <% if @objects.length > 0 %>
+      <div class="col-xs-12 color-block">
+        <% @objects.each do |image|  %>
+            <div class="col-sm-4 color-block-item">
+              <%= thumbnail(image, :votes => true) %>
+            </div>
+        <% end %>
+      </div>
+  <% end %>
+  <div class="col-xs-12">
+    <%= show_previous_version(@glossary_term) %>
+    <p class="Date">
+      <%= :footer_created_at.t(:date => @glossary_term.created_at.web_time) %><br/>
+      <%= :footer_last_updated_at.t(:date => @glossary_term.updated_at.web_time) %>
+    </p>
+  </div>
+</div>

app/views/layouts/application.html.erb

@@ -33,28 +33,9 @@
 </head>
 <body>
 <div class="container">
-
-  <!--BANNER-->
-  <div class="row">
-    <div class="col-xs-12">
-      <% if is_in_admin_mode? %>
-        <div class="text-danger">DANGER: You are in administrator mode. Proceed with caution.</div>
-      <% end %>
-      <% banner = :app_banner_box.t
-      if banner.to_s.length > 1 %>
-        <div id="message_banner" class="center-text">
-          <%= banner %>
-        </div>
-      <% end %>
-    </div>
-  </div>
-  <!--END BANNER-->
-
-  <div class="row">
-
+  <div class="row row-offcanvas row-offcanvas-left">
     <!--NAVIGATION-->
-    <div id="navigation" class="col-sm-2 color1">
-
+    <div class="col-xs-6 col-sm-2 sidebar-offcanvas color1" id="navigation">
       <div id="banner">
         <%= link_to(:app_banner.t, browser.bot? ? "/sitemap/index.html" : "/") %>
       </div>
@@ -199,7 +180,32 @@
     </div>
     <!--END NAVIGATION-->
 
-    <div class="col-sm-10">
+    <!--Toggle navigation button for mobile-->
+    <div class="col-xs-12 col-sm-10">
+      <div class="row visible-xs">
+        <div class="col-xs-12 kill-padding">
+          <p class="pull-left ">
+            <button type="button" class="btn btn-lg" data-toggle="offcanvas">
+              <span class="sr-only">Toggle navigation</span>
+              <span class="glyphicon glyphicon-align-justify"></span>
+            </button>
+          </p>
+        </div>
+      </div>
+      <!--BANNER-->
+      <div class="row">
+        <div class="col-xs-12">
+          <% if is_in_admin_mode? %>
+              <div class="text-danger">DANGER: You are in administrator mode. Proceed with caution.</div>
+          <% end %>
+          <% banner = :app_banner_box.t
+             if banner.to_s.length > 1 %>
+              <div id="message_banner" class="center-text">
+                <%= banner %>
+              </div>
+          <% end %>
+        </div>
+      </div>
 
       <!--SEARCH BAR-->
       <div id="search_bar_row" class="row">
@@ -314,6 +320,15 @@
 <%= javascript_includes.map {|f| javascript_include_tag(f)}.safe_join %>
 <%= javascript_tag('try { document.cookie = "tz=" + jstz.determine().name() } catch(err) {}') %>
 <%= javascript_tag(injected_javascripts.join(";")) %>
+<!--Navigation slide out for mobile-->
+<script>
+    jQuery(document).ready(function () {
+        jQuery('[data-toggle="offcanvas"]').click(function () {
+            jQuery('.row-offcanvas').toggleClass('active');
+            jQuery('body').toggleClass('hidden-overflow-x');
+        });
+    });
+</script>
 <% if Rails.env == "production" %>
   <script>
     (function (i, s, o, g, r, a, m) {
@@ -330,6 +345,7 @@
     ga('create', 'UA-1916187-1', 'auto');
     ga('send', 'pageview');
   </script>
+
 <% end %>
 <!--END JAVASCRIPT-->