Choices list

A basic CRUD list page tends to have various ways of manipulating the content - sorting, filtering etc. Most of these apply to a single column of data, so the UI will generally end up with a button, link or other input in the column-head. I found that I often needed a list of choices where some referred to a single column and others didn't (eg "Sort by: date, popularity, controversy") or choices that have no bearing on the data at all (eg "View as: User, Moderator, Admin").

It was annoying to have to type out the HTML for these lists of choices each time, with appropriate styling to highlight the "current item" etc so I wrote up a helper. My example uses RESTful paths - but could be quickly modified for legacy paths too.

    def make_choicelist(title,fieldname,choices,path_hash)
    # creates a horizontal list displaying a set of choices the user can
    # pick from including urls for each choice.
       cur_val = params[fieldname]
       str = "<div class=\"hlist\"><span class=\"head\">#{title}</span>"
       choices.each do |label,value| 
         path = url_for path_hash.merge(fieldname => value)
         str << "<span class=\"#{(cur_val && cur_val == value.to_s) ? "current" : "item"}"
         str << "\">#{link_to_unless_current(label, path)}</span>"
       end 
       str << "</div>"
       str
    end

You can then pass it:

• The title of the choice list
• The name and current value of the field that saves the state of this item
• The set of choices (label+value) that this field can take
• The basic URL of the page apart from this field - as a hash (so we can merge in the new value)

    
   <%  choices = [["Admin", :admin],
                ["Moderator", :mod]
                ["User", :user]] -%>
  <%= make_choicelist "View as:", :user_type, choices, 
                 hash_for_widgets_path -%>

The code will generate the list with the given title, and will add each option after it - highlighting whichever is the current choice. You can pair this with your stylesheet to restyle the choice-list appropriately. A really basic style example is below:

/* used for horizontal lists - generally for depicting choices */
.hlist {
  padding: 0px;
  background-color: #EEE;
  color: #333;
  border: 1px solid #333;
}
/* short, descriptive heading for the list */
.hlist .head {
  padding-left: 10px;
  padding-right: 10px;
  font-weight: normal;
}
/* list items */
.hlist .current, .hlist .item {
  font-weight: bold;
  margin-right:3px;
}
/* the currently-selected item */
.hlist .current {
  padding: 3px;
  border: 2px inset black;
  background-color: #333;
  color: #CCC;
}
/* an unselected item */
.hlist .item {
  background-color: silver;
  font-weight: bold;
}
/* the link for an unselected item */
.hlist .item a {
  border: 2px outset black;
  color: #333;
  background-color: silver;
  text-decoration: none;
}
.hlist .item a:hover {
  border: 2px inset black;
  background-color: #444;
  color: #CCC;
}

Which will give you something that looks like this:

Sliding Doors tabbing in Rails

So I wanted to find a way of doing tabbed navigation in Rails for my own website. Naturally I asked Aunty google for help, who came up with many links to this article on tabnav. It looks pretty neat and I had a play with it. It is pretty easy to set up and works quite nicely *however*, it automatically puts, not only the tabs, but the page-content div into the page as well. This means you have to jigger with the css and can't just use the tabs (without the content div) if you don't wish to.

I also really like the classic Sliding Doors CSS look. So I decided to carve my own path in the bush, so to speak. I plan to clean it up a bit and turn it into a generator/plugin of my very own. For now, here are the lumps o' code I used to get it working together.

Sliding Doors styles

This is the standard set of sliding doors styles taken almost directly from the tutorial (and tweaked a little for the images I'm using). Clearly you also need the proper images - have a look at the tutorial for what's needed here.

/* these are used for dHTML positioning and style of tab menu. Much of this
 * was taken from "A list apart"s article on the "Sliding Doors technique".
 * http://www.alistapart.com/articles/slidingdoors/
 * This is an amazing article and well worth the read.*/
#header {
  /* the tab div needs to match the page background */
  background: #38cbff url(http://example.com/page_bg.png) top left repeat-x;
  
  float:left;
  width:100%;
  font-size:85%;
  line-height:normal;
  margin: 0px 0px 0px 110px;
  padding-right: 30px;
  border-bottom: 2px solid;
}
#header ul {
  margin:0;
  padding:5px 0 0 0;
  list-style:none;
}
#header li {
  float:left;
  background:url("/images/ButOffRight.png") no-repeat right top;
  margin:0;
  padding:0 15px 0 0;
}
#header a {
  float: left; /* one half of IE5 hack */
  display: block;
  background: url("/images/ButOffLeft.png") no-repeat left top;
  padding: 10px 0px 5px 15px;
  text-decoration: none;
  font-weight: bold;
  color:#fed;
}
#header a:hover {
  color:#fff;
}
#header #current {
  background-image:url("/images/ButOnRight.png");
}
#header #current a {
  background-image:url("/images/ButOnLeft.png");
  color:#222;
  padding-bottom:5px;
}

/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */

/* IE6 hack for padding around tabs */
* html #header a {padding: 0px 0px 5px 15px;}

Layout item

I kept the tabs in a partial template so they could be shared by multiple layouts (if necessary). Standard Rails practice puts shared partials into /app/views/shared Thus, to pull the tabs into the layout requires:

<%= render :partial => 'shared/tabs' -%>

Tab helper function

Each tab is generated using this helper. It creates the list item given the name and preferred link options, hilighting the tab if the user is on the actual page already. I'm tossing up whether to allow highlighting even when your on the main page of a group of pages - it's a GUI question that has pros and cons.

    def make_tab(t)
    # creates a navigation tab out of the given information.    
      tab = "<li"
      tab << ' id="current"' if current_page?(t[:options])
      tab << '>'
      tab << link_to(t[:name], t[:options])
      tab << '</li>'
      tab
    end

Tabs partial template

This bit is probably the messiest part. I'm just using a temporary variable to hold the tabs here - it should be passed into the partial, so the partial can be re-used with different tab-sets (right now I only use one, so it doesn't matter). Later I plan to make a Tab class and have a standard set of tabs loaded from a config file. This standard set can then be added-to or overridden just like columns in the AJAX scaffold.

<div id="header">
  <% tabs = [{:name => 'home', 
                :options => {:controller => :home, :action => :index}},
             #{:name => 'portfolio', 
             #   :options => {:controller => :portfolio}},
             {:name => 'resume', :options => 'resume.pdf'},
             {:name => 'blog', 
                :options => 'http://rubyglasses.blogspot.com/'},
                ] -%>
      
  <!-- tabbed browsing of main site areas --> 
  <ul>
    <% tabs.each do |t| -%>
      <%= make_tab t -%>
    <% end -%>
  </ul>
</div>