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.

No comments:

Post a Comment