diff --git a/Gemfile b/Gemfile
index 42a2c67..c7bf2f1 100644
--- a/Gemfile
+++ b/Gemfile
@@ -5,6 +5,9 @@ gem 'rails', '3.2.3'
gem 'sqlite3'
gem 'high_voltage'
gem 'dynamic_form'
+gem 'compass-rails'
+gem 'compass-960-plugin', require: 'ninesixty'
+gem 'bourbon'
group :development do
gem 'guard-spork'
@@ -15,6 +18,7 @@ group :test, :development do
end
group :test do
+ gem 'timecop'
gem 'evergreen'
gem 'factory_girl_rails'
gem 'shoulda-matchers'
diff --git a/Gemfile.lock b/Gemfile.lock
index 9dcdd2c..ce298fa 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -30,6 +30,8 @@ GEM
multi_json (~> 1.0)
addressable (2.2.8)
arel (3.0.2)
+ bourbon (1.2.0)
+ sass (>= 3.1)
builder (3.0.0)
capybara (1.1.2)
mime-types (>= 1.16)
@@ -40,6 +42,7 @@ GEM
xpath (~> 0.1.4)
childprocess (0.3.2)
ffi (~> 1.0.6)
+ chunky_png (1.2.5)
coffee-rails (3.2.2)
coffee-script (>= 2.2.0)
railties (~> 3.2.0)
@@ -47,6 +50,14 @@ GEM
coffee-script-source
execjs
coffee-script-source (1.3.3)
+ compass (0.12.1)
+ chunky_png (~> 1.2)
+ fssm (>= 0.2.7)
+ sass (~> 3.1)
+ compass-960-plugin (0.10.4)
+ compass (>= 0.10.0)
+ compass-rails (1.0.0.rc.3)
+ compass (~> 0.12.rc.0)
cucumber (1.2.0)
builder (>= 2.1.2)
diff-lcs (>= 1.1.3)
@@ -74,6 +85,7 @@ GEM
factory_girl (~> 3.1.0)
railties (>= 3.0.0)
ffi (1.0.11)
+ fssm (0.2.9)
gherkin (2.10.0)
json (>= 1.4.6)
guard (0.10.0)
@@ -172,6 +184,7 @@ GEM
sqlite3 (1.3.6)
thor (0.14.6)
tilt (1.3.3)
+ timecop (0.3.5)
treetop (1.4.10)
polyglot
polyglot (>= 0.3.1)
@@ -186,7 +199,10 @@ PLATFORMS
ruby
DEPENDENCIES
+ bourbon
coffee-rails (~> 3.2.1)
+ compass-960-plugin
+ compass-rails
cucumber-rails
database_cleaner
dynamic_form
@@ -201,4 +217,5 @@ DEPENDENCIES
shoulda-matchers
spork-rails
sqlite3
+ timecop
uglifier (>= 1.0.3)
diff --git a/app/assets/stylesheets/_grid.scss b/app/assets/stylesheets/_grid.scss
new file mode 100644
index 0000000..9b0fd0f
--- /dev/null
+++ b/app/assets/stylesheets/_grid.scss
@@ -0,0 +1,41 @@
+@import "960/grid";
+
+$ninesixty-grid-width: 600px;
+
+@mixin clearfix {
+ zoom:1;
+ &:before, &:after {
+ content: "\0020";
+ display: block;
+ height: 0;
+ overflow: hidden;
+ }
+ &:after {
+ clear: both;
+ }
+}
+
+body {
+ .container {
+ @include grid-container;
+ @include clearfix;
+
+ & > section {
+ @include grid(12);
+ }
+ }
+
+ header {
+ @include clearfix;
+
+ h1 {
+ @include grid(4);
+ @include alpha;
+ }
+
+ p {
+ @include grid(8);
+ @include omega;
+ }
+ }
+}
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 3b5cc66..2f5f691 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -9,5 +9,5 @@
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
- *= require_tree .
+ *= require screen
*/
diff --git a/app/assets/stylesheets/screen.scss b/app/assets/stylesheets/screen.scss
new file mode 100644
index 0000000..418c7ef
--- /dev/null
+++ b/app/assets/stylesheets/screen.scss
@@ -0,0 +1,85 @@
+@import "compass";
+@import "compass/reset";
+@import "grid";
+@import "bourbon";
+
+$base-font-size: 24px;
+
+body {
+ font-size: $base-font-size;
+ line-height: $base-font-size * 1.25;
+
+ font-weight: 300;
+ font-family: 'Helvetica Neue', Helvetica, Verdana, sans-serif;
+}
+
+a {
+ color: desaturate(#FF0000, 30%);
+ text-decoration: none;
+}
+
+header {
+ border-bottom: 1px solid #eee;
+
+ h1 {
+ color: desaturate(#FF0000, 30%);
+ text-transform: uppercase;
+ }
+
+ p {
+ color: #ddd;
+ line-height: $base-font-size * 1.5 * 1.5;
+ text-align: right;
+ }
+}
+
+p.create {
+ a:before {
+ content: '+ ';
+ }
+
+ line-height: $base-font-size * 1.25 * 1.5;
+ margin-bottom: $base-font-size * 0.75;
+ text-align: right;
+}
+
+h1 { font-weight: 700; }
+h2 { font-weight: 400; }
+h3 { font-weight: 100; }
+
+h1 {
+ font-size: $base-font-size * 1.5;
+ line-height: $base-font-size * 1.5 * 1.5;
+}
+
+h2 {
+ font-size: $base-font-size * 2;
+ line-height: $base-font-size * 2 * 1.5;
+}
+
+h3 {
+ font-size: $base-font-size * 1.75;
+ line-height: $base-font-size * 1.75 * 1.5;
+}
+
+section {
+ margin-bottom: $base-font-size * 1.25;
+
+ h3 {
+ border-bottom: 1px solid #eee;
+ margin-bottom: $base-font-size * 0.5;
+ }
+
+ ul li {
+ position: relative;
+ }
+
+ ul li .meta {
+ position: absolute;
+ right: 0;
+ }
+}
+
+.complete-todos {
+ color: #ddd;
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 3913c1b..ccf6ac3 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -1,22 +1,25 @@
-
- Todos
- <%= stylesheet_link_tag "application", :media => "all" %>
- <%= javascript_include_tag "application" %>
- <%= csrf_meta_tags %>
-
-
+
+ Todos
+ <%= stylesheet_link_tag "application", :media => "all" %>
+ <%= javascript_include_tag "application" %>
+ <%= csrf_meta_tags %>
+
+
+
+
+
-
+ <% flash.keys.each do |key| %>
+ <%= content_tag :div, flash[key], class: "#{key} flash" %>
+ <% end %>
- <% flash.keys.each do |key| %>
- <%= content_tag :div, flash[key], class: "#{key} flash" %>
- <% end %>
-
- <%= yield %>
-
-
+ <%= yield %>
+
+
My Todos
-<%= link_to 'Create a new todo', new_todo_path %>
+<%= link_to 'Create a new todo', new_todo_path %>
-
- <%= @incomplete_todos.each do |todo| %>
- -
- <%= todo.name %>
- <%= link_to 'complete', todo_completions_path(todo), method: 'post', class: 'complete' %>
-
- <% end %>
-
+
+ Incomplete Todos
+
+ <% @incomplete_todos.each do |todo| %>
+ -
+ <%= todo.name %>
+ <%= link_to 'complete', todo_completions_path(todo), method: 'post', class: 'complete meta' %>
+
+ <% end %>
+
+
-
- <%= @complete_todos.each do |todo| %>
- -
- <%= todo.name %>
-
- <% end %>
-
+
+ Complete Todos
+
+ <% @complete_todos.each do |todo| %>
+ -
+ <%= todo.name %>
+ <%= todo.completed_at.to_date.to_s(:short) %>
+
+ <% end %>
+
+
diff --git a/features/complete_todo.feature b/features/complete_todo.feature
index c699ae9..2101cd6 100644
--- a/features/complete_todo.feature
+++ b/features/complete_todo.feature
@@ -4,7 +4,8 @@ Feature: Complete a todo
I should be able to complete todos
Scenario: Complete a todo
- Given I have signed in
+ Given today is "May 21, 2012"
+ And I have signed in
And I have the following todos:
| name |
| Buy milk |
@@ -16,5 +17,5 @@ Feature: Complete a todo
| Buy milk |
| Buy eggs |
And my list of complete todos should be:
- | name |
- | Buy flour |
+ | name | completed_at |
+ | Buy flour | 21 May |
diff --git a/features/step_definitions/sign_in_steps.rb b/features/step_definitions/sign_in_steps.rb
index e9424e7..703af2b 100644
--- a/features/step_definitions/sign_in_steps.rb
+++ b/features/step_definitions/sign_in_steps.rb
@@ -13,7 +13,7 @@
page.should have_css("[data-current-user='#{email_address}']")
end
- page.should have_css("h1", text: /todos/i)
+ page.should have_css('ul.incomplete-todos')
end
Then /^I should be prompted to sign in$/ do
diff --git a/features/step_definitions/time_steps.rb b/features/step_definitions/time_steps.rb
new file mode 100644
index 0000000..04773aa
--- /dev/null
+++ b/features/step_definitions/time_steps.rb
@@ -0,0 +1,8 @@
+Given /^today is "(.*?)"$/ do |date|
+ today = Date.parse(date)
+ Timecop.freeze today
+end
+
+After do
+ Timecop.return
+end
diff --git a/features/support/todo_list.rb b/features/support/todo_list.rb
index b22f384..27ad688 100644
--- a/features/support/todo_list.rb
+++ b/features/support/todo_list.rb
@@ -1,20 +1,24 @@
module TodoList
- def ensure_incomplete_todos_named(todo_names)
- ensure_todos_named 'ul.incomplete-todos', todo_names
+ def ensure_incomplete_todos_named(todos)
+ ensure_todos_named 'ul.incomplete-todos', todos
end
- def ensure_complete_todos_named(todo_names)
- ensure_todos_named 'ul.complete-todos', todo_names
+ def ensure_complete_todos_named(todos)
+ ensure_todos_named 'ul.complete-todos', todos
end
private
- def ensure_todos_named(class_name, todo_names)
+ def ensure_todos_named(class_name, todos)
within class_name do
- todo_names.each_with_index do |row, index|
+ todos.each_with_index do |row, index|
page.should have_css("li:nth-child(#{index + 1})", text: row[:name])
+
+ if row[:completed_at]
+ page.should have_css("li:nth-child(#{index + 1}) .meta", text: row[:completed_at])
+ end
end
- page.should have_css('li', count: todo_names.length)
+ page.should have_css('li', count: todos.length)
end
end
end