Merge pull request #10 from amarshall/tabs

Tabs & more
seanmoon · Jul 27, 2011 · d8f43a0 · d8f43a0
2 parents ae966ca + 01f6696
commit d8f43a0
Show file tree

Hide file tree

Showing 13 changed files with 178 additions and 83 deletions.
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -1,4 +1,9 @@
 module ApplicationHelper
+  def link_to_with_current(name, url)
+    options = (current_page? url) ? { class: "current" } : {}
+    link_to name, url, options
+  end
+
   def location
     ENV["PIVOT_PONG_LOCATION"] || "NYC"
   end

diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
@@ -1,19 +1,24 @@
-<!DOCTYPE html>
+!!! 5
 %html
   %head
-    %title== Pivot Pong - #{location}
+    %title Pivot Pong #{location} — #{yield :title}
     = stylesheet_link_tag 'reset', 'pong', 'jquery.autocomplete'
     = javascript_include_tag :defaults
-    = javascript_include_tag 'jquery.autocomplete'
+    = javascript_include_tag 'jquery.autocomplete', 'jquery.tabs'
     = javascript_include_tag "http://use.typekit.com/rol0dzy.js"
     = javascript_tag "try{Typekit.load();}catch(e){}"
     = favicon_link_tag
     = csrf_meta_tag
 
   %body
     #page
-      #content
-        %h1== pivot pong #{location.downcase}
-        = render 'shared/flash_messages'
-        = yield
-        = link_to "source code", "https://github.com/seanmoon/pivot-pong", class: "source"
+      %header
+        %h1 pivot pong #{location.downcase}
+        %nav
+          = link_to_with_current "Rankings", root_path
+          = link_to_with_current "Matches", matches_path
+
+      = render 'shared/flash_messages'
+      = yield
+      %footer
+        = link_to "source code", "https://github.com/seanmoon/pivot-pong"
diff --git a/app/views/matches/index.html.haml b/app/views/matches/index.html.haml
@@ -1,7 +1,4 @@
-%h2 Add a match
-
-%nav
-  = link_to "Rankings", root_path
+- content_for :title, "Matches"
 
 = form_for(@match) do |f|
   = label_tag :winner_name
@@ -26,7 +23,3 @@
       %td= m.winner.display_name
       %td= m.loser.display_name
       %td.action= link_to "delete", match_path(m), method: :delete
-
-
-%nav
-  = link_to "Rankings", root_path
diff --git a/app/views/matches/rankings.html.haml b/app/views/matches/rankings.html.haml
@@ -1,22 +1,23 @@
-%h2 Rankings
+- content_for :title, "Rankings"
 
-%nav
-  = link_to "Matches", matches_path
+.tabs
+  %ul.tab-bar
+    %li= link_to "All time", "#all-time"
+    %li= link_to "Last 30 days", "#30-days"
+    %li= link_to "Last 90 days", "#90-days"
 
-%h1 All time
-%ol.rankings
-  - @rankings.each do |player|
-    %li{class: cycle("even", "odd")}= player.display_name
+  %ol#all-time.rankings
+    - @rankings.each do |player|
+      %li{class: cycle("even", "odd")}= player.display_name
 
-%h1 Last 30 days
-%ol.rankings
-  - @last_30_days_rankings.each do |player|
-    %li{class: cycle("even", "odd")}= player
+  - reset_cycle
 
-%h1 Last 90 days
-%ol.rankings
-  - @last_90_days_rankings.each do |player|
-    %li{class: cycle("even", "odd")}= player
+  %ol#30-days.rankings
+    - @last_30_days_rankings.each do |player|
+      %li{class: cycle("even", "odd")}= player
 
-%nav
-  = link_to "Matches", matches_path
+  - reset_cycle
+
+  %ol#90-days.rankings
+    - @last_90_days_rankings.each do |player|
+      %li{class: cycle("even", "odd")}= player
diff --git a/app/views/shared/_flash_messages.html.haml b/app/views/shared/_flash_messages.html.haml
@@ -1,8 +1,6 @@
 - if notice || alert
   .flash
     - if notice
-      .notice
-        = notice
+      .notice= notice
     - if alert
-      .alert
-        = alert
+      .alert= alert
diff --git a/db/seeds.rb b/db/seeds.rb
@@ -6,12 +6,17 @@
 #   cities = City.create([{ :name => 'Chicago' }, { :name => 'Copenhagen' }])
 #   Mayor.create(:name => 'Daley', :city => cities.first)
 #
-# <Match id: 1, winner: "Adam", loser: "Bob", created_at: "2011-07-08 00:21:06", updated_at: "2011-07-08 00:21:06", occured_at: "2011-07-07 20:20:59"> 
+# <Match id: 1, winner: "Adam", loser: "Bob", created_at: "2011-07-08 00:21:06", updated_at: "2011-07-08 00:21:06", occured_at: "2011-07-07 20:20:59">
 #
-Match.create(:winner => "Adam", :loser => "Bob")
-Match.create(:winner => "Bob", :loser => "Carol")
-Match.create(:winner => "Carol", :loser => "Dave")
-Match.create(:winner => "Dave", :loser => "Ed")
-Match.create(:winner => "Adam", :loser => "Carol")
-Match.create(:winner => "Adam", :loser => "Dave")
-Match.create(:winner => "Adam", :loser => "Ed")
+adam = Player.create(name: "Adam")
+bob = Player.create(name: "Bob")
+carol = Player.create(name: "Carol")
+dave = Player.create(name: "Dave")
+ed = Player.create(name: "Ed")
+Match.create(winner: adam, loser: bob)
+Match.create(winner: bob, loser: carol)
+Match.create(winner: carol, loser: dave)
+Match.create(winner: dave, loser: ed)
+Match.create(winner: adam, loser: carol)
+Match.create(winner: adam, loser: dave)
+Match.create(winner: adam, loser: ed)
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
@@ -1,3 +1,4 @@
 $(document).ready( function(){
   $('#new_match input[type=text]').autocomplete('/matches/players');
-});
+  $('.tab-bar').tabs();
+});
diff --git a/public/javascripts/jquery.tabs.js b/public/javascripts/jquery.tabs.js
@@ -0,0 +1,33 @@
+(function($) {
+  $.fn.tabs = function() {
+    var $this = $(this);
+    var tabs = [];
+    $this.data("currentTab", $("<p></p>"));
+
+    var switchToTab = function(elem) {
+      console.log(elem);
+      $elem = $(elem);
+      current = $this.data("currentTab");
+      $(current).hide();
+      $("a[href='" + current + "']").removeClass("current");
+      $elem.show();
+      $("a[href='" + elem + "']").addClass("current");
+      $this.data("currentTab", elem);
+    }
+
+    $this.children().each(function() {
+      var link = $(this).find("a").first();
+      var id = link.attr("href");
+      tabs.push(id);
+      $(id).hide();
+      link.click(function(e) {
+        e.preventDefault();
+        switchToTab(id);
+      });
+    });
+
+    switchToTab(tabs[0]);
+
+    return this;
+  }
+})(jQuery);
diff --git a/public/stylesheets/pong.css b/public/stylesheets/pong.css
@@ -2,68 +2,102 @@ body {
   font-family: "coolvetica-1", "coolvetica-2", Helvetica, Arial, sans-serif;
 }
 
-body h1 {
+body > * {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+h1, h3 {
   font-size: 36px;
   margin: 10px 0;
 }
 
-body a {
+a {
   text-decoration: none;
-  color: #cc5500;
+  color: #c50;
 }
 
-nav a {
-  display: block;
-  margin-top: 20px;
+a.current {
+  color: #eee;
+  background-color: #c50;
+  padding-left: 3px;
+  padding-right: 3px;
+}
+
+header {
+  margin-bottom: 20px;
+}
+
+header > * {
+  display: inline;
+}
+
+header nav {
+  margin-left: 10px;
+  vertical-align: 4px;
+}
+
+header nav a + a {
+  margin-left: 10px;
+}
+
+footer {
+  font-size: 12px;
+}
+
+footer a {
+  float: right;
 }
 
-body ol {
+ol {
   font-size: 48px;
-  margin: 20px auto;
-  width: 550px;
+  margin-top: 10px;
+  margin-bottom: 20px;
 }
 
-body li {
+li {
   padding: 5px 25px;
   width: 500px;
   list-style-position: inside;
 }
 
-body li, body td {
+li, td {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-body table {
+table {
   table-layout: fixed;
   margin: 10px 0px;
   width: 550px;
 }
 
-body tr {
+tr {
   height: 20px;
 }
 
-body th, body td {
+th, td {
   padding: 2px 5px;
   vertical-align: middle;
 }
 
-body th {
+th {
   background-color: #333;
   color: white;
   overflow: hidden;
 }
 
-body td {
+td {
   width: 200px;
 }
 
-body form {
+form {
   margin: 10px 0;
 }
 
-body input[type='text'] {
+input[type='text'] {
   font-size: 24px;
   display: block;
   width: 100%;
@@ -86,24 +120,28 @@ td.action, th.action {
   border-left: 1px solid #999;
   border-right: 1px solid #999;
   width: 600px;
-}
-
-#content {
   padding: 25px;
-  background-color: #DEDEDE;
+  background-color: #dedede;
 }
 
 .even {
-  background-color: #F0F0F0;
+  background-color: #f0f0f0;
 }
 
 .odd {
-  background-color: #E7E7E7;
+  background-color: #e7e7e7;
 }
 
-a.source {
-  font-size: 12px;
-  float: right;
+.tabs {
+  margin-top: 20px;
+}
+
+.tab-bar {
+  list-style-type: none;
+}
+
+.tab-bar li {
+  display: inline;
 }
 
 .flash {

diff --git a/spec/helpers/application_helper_spec.rb b/spec/helpers/application_helper_spec.rb
@@ -1,21 +1,37 @@
 require 'spec_helper'
 
 describe ApplicationHelper do
+  describe "#link_to_with_current" do
+    let(:name) { "My Link" }
+    let(:url) { "/the/url" }
+    subject { helper.link_to_with_current(name, url) }
+
+    context "when the URL is the current page" do
+      before { view.stub(:current_page?) { true } }
+
+      it { should include('class="current"') }
+    end
+
+    context "when the URL is not the current page" do
+      before { view.stub(:current_page?) { false } }
+
+      it { should_not include('class="current"') }
+    end
+  end
+
   describe "#location" do
+    subject { helper.location }
+
     context "when no location is configured" do
-      it "returns nyc" do
-        helper.location.should == "NYC"
-      end
+      it { should == "NYC" }
     end
-    
+
     context "when a location is configured" do
       before do
         ENV["PIVOT_PONG_LOCATION"] = "Starbase Alpha"
       end
-
-      it "returns that location" do
-        helper.location.should == "Starbase Alpha"
-      end
+
+      it { should == "Starbase Alpha" }
     end
   end
 end
diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb
@@ -24,4 +24,6 @@
   # examples within a transaction, remove the following line or assign false
   # instead of true.
   config.use_transactional_fixtures = true
+
+  config.color_enabled = true
 end
diff --git a/spec/views/matches/index.html.haml_spec.rb b/spec/views/matches/index.html.haml_spec.rb
@@ -11,6 +11,5 @@
   it { should include("Cl") }
   it { should include("Minzy") }
   it { should include(occured_at.strftime("%Y-%m-%d")) }
-  it { should include(link_to "Rankings", "/") }
   it { should include(link_to "delete", match_path(match), method: :delete) }
 end