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

Nice!

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)
      end
    end

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:

37)
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'
./spec/views/search.haml_spec.rb:57:

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
    render("/views/_search_form.haml")
    response.should have_selector("form",
                                  :action => "/recipes/search") do |form|
      form.should have_selector("input", :name => "q")
    end
  end
end

I add that partial to the recipe Haml template inside of a <div> for styling convenience:

#search
  = partial :_search_form

I can then float the search to the right:

#search {
  float:right;
}

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.