Finish Layouts and Routes

uncletomiwa · May 4, 2012 · 9a08ddb · 9a08ddb
1 parent b4ed0e4
commit 9a08ddb
Show file tree

Hide file tree

Showing 19 changed files with 228 additions and 50 deletions.
diff --git a/Gemfile b/Gemfile
@@ -1,6 +1,7 @@
 source 'https://rubygems.org'
 
 gem 'rails', '3.2.3'
+gem 'bootstrap-sass', '2.0.0'
 
 # Bundle edge Rails instead:
 # gem 'rails', :git => 'git://github.com/rails/rails.git'

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -30,6 +30,7 @@ GEM
       multi_json (~> 1.0)
     addressable (2.2.7)
     arel (3.0.2)
+    bootstrap-sass (2.0.0)
     builder (3.0.0)
     capybara (1.1.2)
       mime-types (>= 1.16)
@@ -163,6 +164,7 @@ PLATFORMS
   x86-mingw32
 
 DEPENDENCIES
+  bootstrap-sass (= 2.0.0)
   capybara (= 1.1.2)
   coffee-rails (~> 3.2.1)
   guard-rspec (= 0.5.5)

diff --git a/app/assets/javascripts/users.js.coffee b/app/assets/javascripts/users.js.coffee
@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
diff --git a/app/assets/stylesheets/custom.css.scss b/app/assets/stylesheets/custom.css.scss
@@ -0,0 +1,102 @@
+@import "bootstrap";
+
+/* mixins, variables, etc. */
+
+$grayMediumLight: #eaeaea;
+
+/* universal */
+
+html {
+  overflow-y: scroll;
+}
+
+body {
+  padding-top: 60px;
+}
+
+section {
+  overflow: auto;
+}
+
+textarea {
+  resize: vertical;
+}
+
+.center {
+  text-align: center;
+  h1 {
+    margin-bottom: 10px;
+  }
+}
+
+/* typography */
+
+h1, h2, h3, h4, h5, h6 {
+  line-height: 1;
+}
+
+h1 {
+  font-size: 3em;
+  letter-spacing: -2px;
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+h2 {
+  font-size: 1.7em;
+  letter-spacing: -1px;
+  margin-bottom: 30px;
+  text-align: center;
+  font-weight: normal;
+  color: $grayLight;
+}
+
+p {
+  font-size: 1.1em;
+  line-height: 1.7em;
+}
+
+
+/* header */
+
+#logo {
+  float: left;
+  margin-right: 10px;
+  font-size: 1.7em;
+  color: white;
+  text-transform: uppercase;
+  letter-spacing: -1px;
+  padding-top: 9px;
+  font-weight: bold;
+  line-height: 1;
+  &:hover {
+    color: white;
+    text-decoration: none;
+  }
+}
+
+/* footer */
+
+footer {
+  margin-top: 45px;
+  padding-top: 5px;
+  border-top: 1px solid $grayMediumLight;
+  color: $grayLight;
+  a {
+    color: $gray;
+    &:hover { 
+      color: $grayDarker;
+    }
+  }  
+  small { 
+    float: left; 
+  }
+  ul {
+    float: right;
+    list-style: none;
+    li {
+      float: left;
+      margin-left: 10px;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/users.css.scss b/app/assets/stylesheets/users.css.scss
@@ -0,0 +1,3 @@
+// Place all the styles related to the Users controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
@@ -0,0 +1,4 @@
+class UsersController < ApplicationController
+  def new
+  end
+end
diff --git a/app/helpers/users_helper.rb b/app/helpers/users_helper.rb
@@ -0,0 +1,2 @@
+module UsersHelper
+end
diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb
@@ -0,0 +1,13 @@
+<footer class="footer">
+  <small>
+    <a href="http://railstutorial.org/">Rails Tutorial</a>
+    by Michael Hartl
+  </small>
+  <nav>
+    <ul>
+      <li><%= link_to "About", about_path %></li>
+      <li><%= link_to "Contact", contact_path %></li>
+      <li><a href="http://news.railstutorial.org/">News</a></li>
+    </ul>
+  </nav>
+</footer>
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
@@ -0,0 +1,14 @@
+<header class="navbar navbar-fixed-top">
+  <div class="navbar-inner">
+    <div class="container">
+      <%= link_to "sample app", '#', id: "logo" %>
+      <nav>
+        <ul class="nav pull-right">
+          <li><%= link_to "Home",    root_path %></li>
+          <li><%= link_to "Help",    help_path %></li>
+          <li><%= link_to "Sign up now!", signup_path, class: "btn btn-large btn-primary" %></li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</header>
diff --git a/app/views/layouts/_shim.html.erb b/app/views/layouts/_shim.html.erb
@@ -0,0 +1,3 @@
+<!--[if lt IE 9]>
+<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+<![endif]-->
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,12 +1,17 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<title><%= full_title(yield(:title)) %></title>
-		<%= stylesheet_link_tag    "application", :media => "all" %>
-		<%= javascript_include_tag "application" %>
-		<%= csrf_meta_tags %>
-	</head>
-	<body>
-		<%= yield %>
-	</body>
+  <head>
+    <title><%= full_title(yield(:title)) %></title>
+    <%= stylesheet_link_tag    "application", media: "all" %>
+    <%= javascript_include_tag "application" %>
+    <%= csrf_meta_tags %>
+    <%= render 'layouts/shim' %>    
+  </head>
+  <body>
+    <%= render 'layouts/header' %>
+    <div class="container">
+      <%= yield %>
+      <%= render 'layouts/footer' %>
+    </div>
+  </body>
 </html>
diff --git a/app/views/static_pages/contact.html.erb b/app/views/static_pages/contact.html.erb
@@ -0,0 +1,6 @@
+<% provide(:title, 'Contact') %>
+<h1>Contact</h1>
+<p>
+  Contact Ruby on Rails Tutorial about the sample app at the
+  <a href="http://railstutorial.org/contact">contact page</a>.
+</p>
diff --git a/app/views/static_pages/home.html.erb b/app/views/static_pages/home.html.erb
@@ -1,6 +1,13 @@
-<h1>Rad Rails</h1>
-<p>
-  This is the home page for the
-  <a href="http://railstutorial.org/">Ruby on Rails Tutorial</a>
-  sample application.
-</p>
+<div class="center hero-unit">
+  <h1>Welcome to the Sample App</h1>
+
+  <h2>
+    This is the home page for the
+    <a href="http://railstutorial.org/">Ruby on Rails Tutorial</a>
+    sample application.
+  </h2>
+
+  <%= link_to "Sign up now!", signup_path, class: "btn btn-large btn-primary" %>
+</div>
+
+<%= link_to image_tag("rails.png", alt: "Rails"), 'http://rubyonrails.org/' %>
diff --git a/app/views/users/new.html.erb b/app/views/users/new.html.erb
@@ -0,0 +1,3 @@
+<% provide(:title, 'Sign up') %>
+<h1>Users#new</h1>
+<p>Find me in app/views/users/new.html.erb</p>
diff --git a/config/routes.rb b/config/routes.rb
@@ -1,7 +1,10 @@
 Radrails2::Application.routes.draw do
-  get "static_pages/home"
-  get "static_pages/about"
-  get "static_pages/help"
+  get "users/new"
+
+  match '/signup',  to: 'users#new'
+  match '/help',    to: 'static_pages#help'
+  match '/about',   to: 'static_pages#about'
+  match '/contact', to: 'static_pages#contact'
 
   # The priority is based upon order of creation:
   # first created -> highest priority.
@@ -52,7 +55,7 @@
 
   # You can have the root of your site routed with "root"
   # just remember to delete public/index.html.
-  # root :to => 'welcome#index'
+  root :to => 'static_pages#home'
 
   # See how all your routes lay out with "rake routes"
 

diff --git a/public/index.html → public/index.html.old b/public/index.html → public/index.html.old
diff --git a/spec/requests/static_pages_spec.rb b/spec/requests/static_pages_spec.rb
@@ -2,47 +2,34 @@
 
 describe "Static pages" do
 
-  describe "Home page" do
-
-    it "should have the h1 'Rad Rails'" do
-      visit '/static_pages/home'
-      page.should have_selector('h1', :text=>'Rad Rails')
-    end
+  subject { page }
 
-    it "should have base title" do
-      visit '/static_pages/home'
-      page.should have_selector('title', :text=>'Ruby On Rails Rad Rails')
-    end
+  describe "Home page" do
+    before { visit root_path }
 
-    it "should not have a custom page title" do
-      visit '/static_pages/home'
-      pages.should_not have_selector('title', :text=>'| Home')
-    end
+    it { should have_selector('h1',    text: 'Sample App') }
+    it { should have_selector('title', text: full_title('')) }
+    it { should_not have_selector 'title', text: '| Home' }
   end
 
   describe "Help page" do
+    before { visit help_path }
 
-    it "should have the h1 'Help'" do
-      visit '/static_pages/help'
-      page.should have_selector('h1', :text=>'Help')
-    end
-
-    it "should have the title 'Help'" do
-      visit '/static_pages/help'
-      page.should have_selector('title', :text=>'| Help')
-    end
+    it { should have_selector('h1',    text: 'Help') }
+    it { should have_selector('title', text: full_title('Help')) }
   end
 
   describe "About page" do
+    before { visit about_path }
+
+    it { should have_selector('h1',    text: 'About') }
+    it { should have_selector('title', text: full_title('About Us')) }
+  end
 
-    it "should have the h1 'About us'" do
-      visit '/static_pages/about'
-      page.should have_selector('h1', :text=>'About Us')
-    end
+  describe "Contact page" do
+    before { visit contact_path }
 
-    it "should have the title 'About us'" do
-      visit '/static_pages/about'
-      page.should have_selector('title', :text=>'| About Us')
-    end
+    it { should have_selector('h1',    text: 'Contact') }
+    it { should have_selector('title', text: full_title('Contact')) }
   end
 end
diff --git a/spec/requests/user_pages_spec.rb b/spec/requests/user_pages_spec.rb
@@ -0,0 +1,12 @@
+require 'spec_helper'
+
+describe "UserPages" do
+  subject { page }
+
+  describe "signup page" do
+    before { visit signup_path }
+
+    it { should have_selector('h1', text: 'Sign up') }
+    it { should have_selector('title', full_title('Sign up')) }
+   end
+end
diff --git a/spec/support/utilities.rb b/spec/support/utilities.rb
@@ -0,0 +1,8 @@
+def full_title(page_title)
+  base_title = "Ruby on Rails Tutorial Sample App"
+  if page_title.empty?
+  base_title
+  else
+    "#{base_title} | #{page_title}"
+  end
+end