Styles

joshuaclayton · May 22, 2012 · aaaba8d · aaaba8d
1 parent c428182
commit aaaba8d
Show file tree

Hide file tree

Showing 11 changed files with 215 additions and 46 deletions.
diff --git 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
@@ -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,13 +42,22 @@ 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)
     coffee-script (2.2.0)
       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
@@ -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
@@ -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
@@ -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
@@ -1,22 +1,25 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <title>Todos</title>
-  <%= stylesheet_link_tag    "application", :media => "all" %>
-  <%= javascript_include_tag "application" %>
-  <%= csrf_meta_tags %>
-</head>
-<body>
+  <head>
+    <title>Todos</title>
+    <%= stylesheet_link_tag    "application", :media => "all" %>
+    <%= javascript_include_tag "application" %>
+    <%= csrf_meta_tags %>
+  </head>
+  <body>
+    <div class='container'>
+      <section>
+        <header>
+          <h1>Todos</h1>
+          <p data-current-user="<%= current_user.email %>"><%= current_user.email %></p>
+        </header>
 
-  <header>
-    <p data-current-user="<%= current_user.email %>"><%= current_user.email %></p>
-  </header>
+        <% 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 %>
-
-</body>
+        <%= yield %>
+      </section>
+    </div>
+  </body>
 </html>
diff --git a/app/views/todos/index.html.erb b/app/views/todos/index.html.erb
@@ -1,19 +1,25 @@
-<h1>My Todos</h1>
-<%= link_to 'Create a new todo', new_todo_path %>
+<p class='create'><%= link_to 'Create a new todo', new_todo_path %></p>
 
-<ul class='incomplete-todos'>
-  <%= @incomplete_todos.each do |todo| %>
-    <li id="<%= dom_id(todo) %>">
-      <%= todo.name %>
-      <%= link_to 'complete', todo_completions_path(todo), method: 'post', class: 'complete' %>
-    </li>
-  <% end %>
-</ul>
+<section>
+  <h3>Incomplete Todos</h3>
+  <ul class='incomplete-todos'>
+    <% @incomplete_todos.each do |todo| %>
+      <li id="<%= dom_id(todo) %>">
+        <%= todo.name %>
+        <%= link_to 'complete', todo_completions_path(todo), method: 'post', class: 'complete meta' %>
+      </li>
+    <% end %>
+  </ul>
+</section>
 
-<ul class='complete-todos'>
-  <%= @complete_todos.each do |todo| %>
-    <li id="<%= dom_id(todo) %>">
-      <%= todo.name %>
-    </li>
-  <% end %>
-</ul>
+<section>
+  <h3>Complete Todos</h3>
+  <ul class='complete-todos'>
+    <% @complete_todos.each do |todo| %>
+      <li id="<%= dom_id(todo) %>">
+        <%= todo.name %>
+        <span class='meta'><%= todo.completed_at.to_date.to_s(:short) %></span>
+      </li>
+    <% end %>
+  </ul>
+</section>
diff --git 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
@@ -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
@@ -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
@@ -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