Thursday, September 3, 2009

A Stylin' Mini-Calendar

‹prev | My Chain | next›

With the functionality for the mini-calendar complete, I am ready to integrate it into the rest of the application. It ought to look like this:



Firing up my browser this is what the mini-calendar looks like (non-mini-ized):



Hmm... There are several problems here:
  • the header is displaying—the header goes on the main page, not the mini-calendar
  • there do not appear to be any meal links
  • the month and day header colors are not quite right
Suppressing the header is a simple matter of not using the default layout:
get %r{/mini/(.*)} do |date_str|
...
  haml :mini_calendar, :layout => false
end
Without a layout, I need to define the entire HTML document structure, including the link to the stylesheet, directly in the mini-calendar Haml template:
%html
  %link{:rel => "stylesheet", :type => "text/css", :href => "/stylesheets/style.css"}
%body
  - day1 = Date.parse("#{@month}-01")
  %h1
...
(commit)

One down two to go. So, what's up with the non-links? Checking out the HTML source, I find:
      <td id='2008-07-09'>

        9
      </td>
      <td id='2008-07-10'>
        <a href='/meals/2008/07/10' title='You Each Take a Side'>        </a>
        10
      </td>
Aw, dang it. That is just a Haml indentation problem:
...
                %a{:href => date.strftime("/meals/%Y/%m/%d"),
                   :title => @meals_by_date[date.to_s]}
                = date.mday
...
I want the month date to be a child of the <a> tag. Two spaces resolve the issue:
...
                %a{:href => date.strftime("/meals/%Y/%m/%d"),
                   :title => @meals_by_date[date.to_s]}
                  = date.mday
...
(commit)

This leaves me with the mini-calendar working, but in need of a little style:



Before defining the style, I provide a scope for the CSS style changes by adding an id attribute to the <body> tag in the mini-calendar Haml:
...
%body{:id => 'mini-calendar'}
...
To actually style that, I am using less CSS. In the mini-calendar context, the <h1> content should be white, with a green background, and any links should also be white. The less CSS corresponding to that description:
#mini-calendar {
  h1 {
    background-color: @italian_green;
    color: white;
    font-size: 1.2em;
    text-align: center;
    a {
      color: white;
    }
  }
}
I fired up less css in watch mode, make this changes and:
cstrom@jaynestown:~/repos/eee-code$ lessc public/stylesheets/style.less --watch
* Watching for changes in public/stylesheets/style.less... Ctrl-C to abort.
: Change detected... * [Updated] style.css
Now I have a nice green header:



I make similar changes to get the week day headings and the dates with meals colored correctly. To embed this on the homepage, I need an <iframe > along the lines of:
...
      .home-section
        %iframe{:src => '/mini/'}
...
This produces:



Clearly the <iframe > is in need of a little love, but the mini-calendar itself is looking well styled. I will pick up with the <iframe > tomorrow and deploy.
at

No comments:

Post a Comment