Wrapping up new styles for section and canned search pages.

app/models/entry_search.rb

@@ -81,7 +81,7 @@ def model
 
   def find_options
     {
-      :select => "id, title, publication_date, document_number, granule_class, document_file_path, abstract",
+      :select => "id, title, publication_date, document_number, granule_class, document_file_path, abstract, length, start_page, end_page",
       :include => :agencies,
     }
   end

app/stylesheets/design/_canned_search.scss

@@ -0,0 +1,205 @@
+/******************************
+
+TITLE AREA
+
+******************************/
+
+#suggested-search.title_icon {
+  background: sprite-image('icons/icon_search_blue.png', 0, 0, 50px) no-repeat;
+  height: 37px;
+  position: relative;
+  display: inline-block;
+  width: 37px;
+  top: -9px;
+  left: 49px;
+  z-index: 1000;
+  }
+
+#canned_searches a.subscription {
+  background: sprite-image('icons/icon_subscribe_white.png', 0, 0, 50px) no-repeat;
+  position: relative;
+  color: white;  
+  top: -5px;
+  left: -2px;
+  height: 17px;
+  }
+.wf-active #canned_searches a.subscription {
+  top: -11px;
+  }
+#canned_searches a.subscription:hover {
+  background: sprite-image('icons/icon_subscribe_white_hover.png', 0, 0, 50px) no-repeat;  
+  color: #FBB829;
+  }
+
+
+/******************************
+
+DESCRIPTION AREA
+
+******************************/
+
+#search_description_box {
+  background: #F1F1F1;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -o-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -khtml-border-radius: 5px;
+  border-radius: 5px;
+  padding: 10px 20px 2px;
+  }
+#search_description_box .line {
+  width: 100%; 
+  border-bottom: 1px solid #DDD; 
+  margin-bottom: 10px;
+  }
+p#search-actions {
+  padding: 0px;
+  }
+p#search-actions a {
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  font-weight: bold;
+  color: #6E6E6E;
+  font-size: 14px;
+  }
+p#search-actions a:hover {
+  color: #DFB264;
+  }
+p#search-actions a.search {
+  background: sprite-image('icons/icon_search_small.png', 0, 0, 50px) no-repeat;
+  padding-left: 24px;
+  }
+p#search-actions a.search:hover {
+  background: sprite-image('icons/icon_search_small_hover.png', 0, 0, 50px) no-repeat;
+  }
+p#search-actions a.search_subscription {
+  background: sprite-image('icons/icon_subscribe_gray.png', 0, 2px, 50px) no-repeat;
+  padding-left: 46px;
+  float: right;
+  top: 1px;
+  position: relative;  
+  }
+p#search-actions a.search_subscription:hover {
+  background: sprite-image('icons/icon_subscribe_white_hover.png', 0, 2px, 50px) no-repeat;
+  }
+
+
+
+/******************************
+
+DOCUMENT ICONS
+
+******************************/
+#suggested-search-list div.rule_type {
+  width: 32px;
+  height: 22px;
+  float: left;
+  overflow: hidden;
+  }
+#suggested-search-list div.rule_type img {
+  position:relative;
+  }
+#suggested-search-list div.rule_type.doc_presdoc img {
+  top: -6px;
+  }
+#suggested-search-list div.rule_type.doc_notice img {
+  top:-627px;
+  }
+#suggested-search-list div.rule_type.doc_rule img {
+  top: -316px;
+  }
+#suggested-search-list div.rule_type.doc_prorule img {
+  top: -936px;
+  }
+
+
+/******************************
+
+SUGGESTED SEARCH RESULTS
+
+******************************/
+#canned_searches .search_count {
+  margin: 30px 0 20px 0px;
+  padding: 0;
+}
+#suggested-search-list {
+  list-style: none;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  }
+#suggested-search-list li {
+  margin-bottom: 10px;
+  }
+.search_result_wrapper {
+  padding-left: 40px;
+  }
+#suggested-search-list h4 {
+  padding-left: 10px;
+  margin-bottom: 5px;
+  }
+#suggested-search-list span.pdf {
+  padding-left: 15px;
+  font-size: 13px;
+  top: -1px;
+  position: relative;
+  }
+p.result_info {
+  clear: both;
+  color: #000;
+  font-family: "athelas-1","athelas-2", "Georgia", serif;
+  font-size: 1.2em;
+  line-height: 1.4em;
+  padding-left: 10px;
+  }
+div.metadata {
+  float: left;
+  font-size: 1.2em;
+  padding-left: 10px;
+  margin-bottom: 3px;
+  }
+.notice p {
+  margin-left: 0px;
+  }
+#canned_searches .more_results {
+  margin-bottom: 20px;
+}
+
+/******************************
+
+FREQUENCY SPARKLINES
+
+******************************/
+#frequency-wrapper {
+  background: #FFF;
+  border: 1px solid #DDD;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -o-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -khtml-border-radius: 5px;
+  border-radius: 5px;
+  padding: 10px 15px 5px;
+  color: #000;
+  width: 760px;
+  margin: 0 auto 10px;
+  }
+#frequency-header {
+  width:132px;
+  margin: 0 auto;
+  }
+ul#frequency-spark-lines {
+  list-style: none;
+  width: 780px;
+  margin: 0 auto;
+  }
+ul#frequency-spark-lines li {
+  display:inline;
+  }
+ul#frequency-spark-lines li img {
+  top:5px;
+  position: relative;
+  }
+li#five-years, li#all-years img {
+  top:13px;
+  }
+

app/stylesheets/design/_section.scss

@@ -94,17 +94,22 @@ SECTION HEADER LOGOS
 
 #sections a.subscription {
   background: sprite-image('icons/icon_subscribe_white.png', 0, 0, 50px) no-repeat;
-  top: -8px;
+  top: -2px;
   left: -3px;
   position: relative;
   color: white;
   height: 17px;
   }
+.wf-active #sections a.subscription {
+  top: -8px;
+  left: -2px;
+  }
 #sections a.subscription:hover {
   background: sprite-image('icons/icon_subscribe_white_hover.png', 0, 0, 50px) no-repeat;  
   color: #FBB829;
   }
 
+
 /******************************
 
 SECTION SUGGESTED SEARCHES

app/stylesheets/library/_tipsy.scss

@@ -4,3 +4,4 @@ CUSTOMIZATIONS TO TIPSY
 .tipsy { 
   font-size: 12px;
   }
+

app/stylesheets/typography/_typography.scss

@@ -103,15 +103,19 @@ div.title {
   padding-left: 999px;
   text-align: right;
   }
-#sections div.title {
+#sections div.title, #canned_searches div.title {
   margin-bottom: 25px;
   }
-#sections div.title span {
+#sections div.title span, #canned_searches div.title span {
   position: relative;
   top: -13px;
   margin: 0 5px 0 0;
   padding: 0 10px 0 50px;  
   }
+#canned_searches div.title span {
+  top: -17px;
+  }
+
 
 .wf-active div.title {
   @include apertura-condensed; /* was gloriola */

app/views/canned_searches/_result.html.erb

@@ -1,17 +1,17 @@
 <li>
-  <div class="rule_type doc_<%= entry.granule_class.downcase %> tipsy"><%= image_tag 'document_types.png' %></div>
+  <div class="rule_type doc_<%= entry.granule_class.downcase %> tipsy"><%= image_tag 'icons/document_icons.png' %></div>
 
   <div class="search_result_wrapper">
     <h4><%= link_to entry.title, entry_path(entry) %></h4>
 
     <div class="metadata">
       A <%= entry.entry_type %> by <%= agency_names(entry) %> on 
       <%= link_to date_tag(entry.publication_date, :datetime => entry.publication_date.to_s(:iso)), entries_by_date_path(entry.publication_date) %>
-      <span class='pdf'><%= link_to "PDF - #{entry.human_length, 'page'}", entry.source_url('pdf'), :class => 'button format pdf small' %></span>
+      <span class='pdf'><%= link_to "PDF - #{pluralize(entry.human_length, 'page')}", entry.source_url('pdf'), :class => 'button format pdf small' %></span>
     </div>
 
     <p class="result_info">
-      <%= truncate_words(entry.abstract || entry.raw_text, :length => 500) %>
+      <%= truncate_words(entry.abstract || entry.raw_text, :length => 350) %>
     </p>
   </div>
 </li>

app/views/canned_searches/show.html.erb

@@ -1,14 +1,16 @@
 <% title @canned_search.title %>
 
-<div class="title"><span>Suggested Searches</span></div>
+<div class="title">
+  <div class='title_icon' id="suggested-search"></div>
+  <span>Suggested Search</span>
+  <%= link_to '', '#', :class => 'subscription tipsy', :title => 'Subscribe to this search by Email or RSS' %>
+</div>
 
 <div id='search_description_box'>
   <h1><%= @canned_search.title %></h1>
 
   <hr /> 
 
-  <p class='search_count'>32 results in last 30 days</p>
-
   <%= simple_format @canned_search.description %>
 
   <div id='frequency-wrapper'>
@@ -26,6 +28,8 @@
   </p>
 </div>
 
+<p class='search_count'>Showing 1-<%= @canned_search.search.results.count %> of <%= link_to "#{@canned_search.search.count} results", entries_search_path(:conditions => @canned_search.search_conditions, :order => "newest") %> since 1994</p>
 <ul id='suggested-search-list'>
   <%= render :partial => 'result', :collection => @canned_search.search.results, :as => :entry, :locals => {:search => @canned_search.search} %>
 </ul>
+<p class='more_results'> <%= link_to "See #{@canned_search.search.count - @canned_search.search.results.count} more results", entries_search_path(:conditions => @canned_search.search_conditions, :order => "newest", :page => 2) %> </p>

app/views/special/layout_head_content.html.erb

@@ -9,9 +9,9 @@
 
 <%= yield :head %>
 
+<%= stylesheet_link_tag "tipsy", :media => :screen %>
 <%= stylesheet_link_tag "screen", :media => :screen %>
 <%= stylesheet_link_tag "print", :media => :print %>
-<%= stylesheet_link_tag "tipsy", :media => :screen %>
 
 <!--[if lt IE 9]>
   <%= stylesheet_link_tag "ie", :media => :screen %>  
@@ -32,10 +32,11 @@
 <script src="/javascripts/vendor/iscroll.js" type="text/javascript"></script>
 <script src="/javascripts/vendor/jquery.tipsy.js" type="text/javascript"></script>
 
-<% if RAILS_ENV == 'development' %>
+
+<%# if RAILS_ENV == 'development' %>
   <%= javascript_include_tag :all %>
-<% else %>
-  <%= javascript_include_tag 'all.js' %>
-<% end %>
+<%# else %>
+  <%#= javascript_include_tag 'all.js' %>
+<%# end %>
 
 <%= render :partial => 'layouts/google_analytics', :custom_page_to_track => @page_to_track %>

public/javascripts/tipsy.js

@@ -1,12 +1,13 @@
 $(document).ready(function(){
 
   /* ALL PAGES */
-  $('.subscription.tipsy').tipsy({gravity: 'se', offset: 3, fade: true,}); // nw | n | ne | w | e | sw | s | se
+  $('.subscription.tipsy').tipsy({gravity: 'se', offset: 3, delayIn: 100, fade: true,}); // nw | n | ne | w | e | sw | s | se
 
 
   /* CANNED SEARCH PAGE */
-  $('.doc_notice.tipsy').tipsy({gravity: 'e', fallback: "Notice", delayIn: 200, fade: true, offset: -7, trigger: 'manual'}).bind('click', function(){ $(this).tipsy("show");});
-  $('.rule.tipsy').tipsy({gravity: 'e', fallback: "Final Rule", delayIn: 200, fade: true, offset: -7});
-  $('.prorule.tipsy').tipsy({gravity: 'e', fallback: "Proposed Rule", delayIn: 200, fade: true, offset: -7});
+  $('.doc_notice.tipsy').tipsy( {gravity: 'e', fallback: "Notice",                delayIn: 100, fade: true, offset: -4});
+  $('.doc_rule.tipsy').tipsy(   {gravity: 'e', fallback: "Final Rule",            delayIn: 100, fade: true, offset: -4});
+  $('.doc_prorule.tipsy').tipsy({gravity: 'e', fallback: "Proposed Rule",         delayIn: 100, fade: true, offset: -4});
+  $('.doc_presdoc.tipsy').tipsy({gravity: 'e', fallback: "Presidential Document", delayIn: 100, fade: true, offset: -4});
 });