Monday, July 27, 2009

20% Less CSS

‹prev | My Chain | next›

I am almost done with my less CSS work on the recipe and meal pages. Hopefully I am well past the last 20% stage in the 80/20 rule. But first..

I added a layer to the DOM in recipe.haml yesterday. I did not check to ensure that my specs still pass. They ought to, if I was not too specific in the examples, but you never know...
cstrom@jaynestown:~/repos/eee-code$ rake view_specs
(in /home/cstrom/repos/eee-code)

View specs

Finished in 0.721824 seconds

85 examples, 0 failures

After tweaking a thing here and there, I am done with everything—save for the ability to search for other recipes. On the legacy site, the search box is located at the top-right corner of the page, just under the recipe category links:

A simple search form is pretty easy to add. In fact I have already done it. Twice. Once on the search page and once on the no results search page. I am somewhat disappointed that I violated DRY once, I am not going to do it again. I extract the search form Haml into a separate _search_form.haml template:
%form{:method => "get", :action => "/recipes/search"}
%input{:type => "text",
:value => @query,
:name => "q",
:size => 31,
:maxlength => 2048}
%input{:type => "submit",
:value => "Search",
:name => "s"}
I adopt the Rails convention for partial filenames (prefixing it with and underscore).

To work with partials in Sinatra / Haml, the Sinatra Book recommends this helper code:
    # Swiped from the Sinatra Book
# Usage: partial :foo
helpers do
def partial(page, options={})
haml page, options.merge!(:layout => false)
I then replace the search form Haml in the search results templates with:
= partial :_search_form
Before doing anything else, I run all of my tests. I get 37 failures, all of the form:
NoMethodError in 'search.haml should link to sort by date'
undefined method `haml' for #
./helpers.rb:236:in `partial'
(haml):10:in `render'
/home/cstrom/.gem/ruby/1.8/gems/haml-2.2.0/lib/haml/engine.rb:167:in `render'
/home/cstrom/.gem/ruby/1.8/gems/haml-2.2.0/lib/haml/engine.rb:167:in `instance_eval'
/home/cstrom/.gem/ruby/1.8/gems/haml-2.2.0/lib/haml/engine.rb:167:in `render'
/home/cstrom/repos/eee-code/spec/spec_helper.rb:27:in `render'
Ugh. The haml method is part of Sinatra. Since I am unit testing my views, I do not have access to Sinatra's haml method. To resolve, I stub out calls to the partial method and add an RSpec example for the _search_form.haml partial:
describe "_search_form.haml" do
it "should display a form to refine your search" do
response.should have_selector("form",
:action => "/recipes/search") do |form|
form.should have_selector("input", :name => "q")
I add that partial to the recipe Haml template inside of a <div> for styling convenience:
= partial :_search_form
I can then float the search to the right:
#search {
And I am done:

I add similar code to the meal template so that users can search from meals as well. With that, I call it a day. There are still some other pages in need of styling. I will likely pick up with them tomorrow.

No comments:

Post a Comment