Refined Search Results

‹prev | My Chain | next›

I am still slogging through CSS today, starting with the search results pages. The search results from the legacy site look like this:



The naked search results on the CouchDB / Sinatra version of the application look like this:



The only place in the application that makes use of tables is the search results page, so I am free to do this work at the table selector level. In less CSS format:

table {
  th {
    background-color: @italian_green;
    color: white;
    a {color: white;}
  }

 .row1 {
   background-color: @soft_gray;
 }
}

A little bit of less CSS goes a long way:



I realize that I am doing the white letters on green background quite a bit, so I extract it out into a .section_header mixin:

.section_header {
  background-color: @italian_green;
  color: white;
  a {color: white;}
}

This allows me to compact the table definition down to:

table {
  th   { .section_header; }
 .row1 { background-color: @soft_gray; }
}

Another win for less CSS! One line to describe a table heading style and one line to describe zebra striping.

For pagination, I stick with the standard will paginate look and feel. It is simple, but takes more than a little CSS (even less CSS).

The pagination itself needs to be floated to the right. This reinforces the most common use case of pagination—moving to higher page numbers. Natural flow in western languages is from left to right. Placing the links to the very right side encourages such a flow.

The rest of the pagination styling is more straight-forward. The page numbers need a border (I stick with the standard "Italian green" for this Italian flavored cookbook). The page links need a little separation (margins) from each other to aid in readability. The color of the pages should be the same "Italian green" as the border to suggest cohesion. There is no need to underline the links—too many lines are busy.

The current page should be highlighted by coloring in the background and using white text. Inactive links (e.g. the "previous" link on the first page) should be grayed out.

Or, in less CSS:

.pagination {
  float: right;
  margin-top: 10px;
  font-size: 0.8em;

  a, .current {
    border: 1px solid @italian_green;
    margin: 2px;
    padding: 2px 4px;
    color: @italian_green;
    text-decoration: none;
  }
  .current {
    background-color: @italian_green;
    color: white;
  }
  .inactive {
    border:1px solid #eee;
    color: #ddd;
    margin: 2px;
    padding: 2px 3px;
  }
}

That CSS yields:



The last thing needed on the search results page is to get the search refinement text field closer to the results. Currently it looks to be more a part of the categories or top-level navigation:



It should be obvious that the search field and the results are intimately coupled. There should be a margin above the form, no margin below. Any floating text should be cleared. The less CSS corresponding to this:

#refine-search {
  form { margin: 10px 0px 0px; }
  clear: both;
}

And the resulting page:



Also of note in there is that the "Prep" time column is now right aligned. Numerical columns should always be right aligned for readability.

That does it for the search results page. Before moving on a final note about the column headings. Each is clickable for sorting the results. The first three are obvious—click the "Title" heading & get the results sorted by title alphabetically, click the "Date" or "Prep" time heading & get the results sorted by date or time. But what happens when you click on the "Ingredients" column heading?



As described way back when by the Cucumber scenario, this sorts on the number of ingredients. Sorting alphabetically by the first ingredient in the list (or any ingredient) is useless to a user. It may not be immediately obvious to the use what clicking this heading might do, but I like to reward curiosity. In this case, the user gets a visually obvious representation of the simplicity of various recipes. Corkscrew bacon being the easiest to prepare in this metric.

Mmmmm. Bacon.