From 11d947206f17722f3ce50b883bf5256ba5954358 Mon Sep 17 00:00:00 2001 From: Hugo Leeney Date: Fri, 1 Feb 2013 17:32:13 +0000 Subject: [PATCH] Finish layout and routes --- Gemfile | 1 + Gemfile.lock | 2 + app/assets/javascripts/users.js.coffee | 3 + app/assets/stylesheets/custom.css.scss | 108 +++++++++ app/assets/stylesheets/users.css.scss | 3 + app/controllers/static_pages_controller.rb | 3 + app/controllers/users_controller.rb | 4 + app/helpers/application_helper.rb | 9 + app/helpers/users_helper.rb | 2 + app/views/layouts/_footer.html.erb | 13 ++ app/views/layouts/_header.html.erb | 15 ++ app/views/layouts/_shim.html.erb | 3 + app/views/layouts/application.html.erb | 25 ++- app/views/static_pages/contact.html.erb | 3 + app/views/static_pages/home.html.erb | 14 +- app/views/users/new.html.erb | 3 + config/routes.rb | 10 +- public/index.html | 241 --------------------- spec/requests/static_pages_spec.rb | 45 ++-- spec/requests/user_pages_spec.rb | 10 + spec/support/utilities.rb | 9 + 21 files changed, 240 insertions(+), 286 deletions(-) create mode 100644 app/assets/javascripts/users.js.coffee create mode 100644 app/assets/stylesheets/custom.css.scss create mode 100644 app/assets/stylesheets/users.css.scss create mode 100644 app/controllers/users_controller.rb create mode 100644 app/helpers/users_helper.rb create mode 100644 app/views/layouts/_footer.html.erb create mode 100644 app/views/layouts/_header.html.erb create mode 100644 app/views/layouts/_shim.html.erb create mode 100644 app/views/static_pages/contact.html.erb create mode 100644 app/views/users/new.html.erb delete mode 100644 public/index.html create mode 100644 spec/requests/user_pages_spec.rb create mode 100644 spec/support/utilities.rb diff --git a/Gemfile b/Gemfile index 6be90ac..e157094 100644 --- a/Gemfile +++ b/Gemfile @@ -1,6 +1,7 @@ source 'https://rubygems.org' gem 'rails', '3.2.11' +gem 'bootstrap-sass', '2.1' # Bundle edge Rails instead: # gem 'rails', :git => 'git://github.com/rails/rails.git' diff --git a/Gemfile.lock b/Gemfile.lock index 7deb826..11a4c22 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -29,6 +29,7 @@ GEM i18n (~> 0.6) multi_json (~> 1.0) arel (3.0.2) + bootstrap-sass (2.1.0.0) builder (3.0.4) capybara (1.1.2) mime-types (>= 1.16) @@ -139,6 +140,7 @@ PLATFORMS ruby DEPENDENCIES + bootstrap-sass (= 2.1) capybara (= 1.1.2) coffee-rails (= 3.2.2) jquery-rails (= 2.0.2) diff --git a/app/assets/javascripts/users.js.coffee b/app/assets/javascripts/users.js.coffee new file mode 100644 index 0000000..7615679 --- /dev/null +++ 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 new file mode 100644 index 0000000..f0cfa33 --- /dev/null +++ b/app/assets/stylesheets/custom.css.scss @@ -0,0 +1,108 @@ +@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; +} + +.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; +} + +#logo: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 new file mode 100644 index 0000000..31a2eac --- /dev/null +++ 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/static_pages_controller.rb b/app/controllers/static_pages_controller.rb index 19f79a9..0ef8363 100644 --- a/app/controllers/static_pages_controller.rb +++ b/app/controllers/static_pages_controller.rb @@ -7,4 +7,7 @@ def help def about end + + def contact + end end diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb new file mode 100644 index 0000000..2ec9ecc --- /dev/null +++ b/app/controllers/users_controller.rb @@ -0,0 +1,4 @@ +class UsersController < ApplicationController + def new + end +end diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index de6be79..f72336c 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -1,2 +1,11 @@ module ApplicationHelper + 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 end + diff --git a/app/helpers/users_helper.rb b/app/helpers/users_helper.rb new file mode 100644 index 0000000..2310a24 --- /dev/null +++ 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 new file mode 100644 index 0000000..5c286bf --- /dev/null +++ b/app/views/layouts/_footer.html.erb @@ -0,0 +1,13 @@ + diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb new file mode 100644 index 0000000..f91a7c1 --- /dev/null +++ b/app/views/layouts/_header.html.erb @@ -0,0 +1,15 @@ +
+
+
+ <%= link_to "sample app", root_path, id: "logo" %> + +
+
+ + diff --git a/app/views/layouts/_shim.html.erb b/app/views/layouts/_shim.html.erb new file mode 100644 index 0000000..ecedf56 --- /dev/null +++ b/app/views/layouts/_shim.html.erb @@ -0,0 +1,3 @@ + diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index e29abd4..836f774 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,14 +1,17 @@ - - Ruby on Rails Tutorial Sample App | <%= yield(:title) %> - <%= stylesheet_link_tag "application", :media => "all" %> - <%= javascript_include_tag "application" %> - <%= csrf_meta_tags %> - - - -<%= yield %> - - + + <%= full_title(yield(:title)) %> + <%= stylesheet_link_tag "application", :media => "all" %> + <%= javascript_include_tag "application" %> + <%= csrf_meta_tags %> + <%= render 'layouts/shim' %> + + + <%= render 'layouts/header' %> +
+ <%= yield %> + <%= render 'layouts/footer' %> +
+ diff --git a/app/views/static_pages/contact.html.erb b/app/views/static_pages/contact.html.erb new file mode 100644 index 0000000..31f59d8 --- /dev/null +++ b/app/views/static_pages/contact.html.erb @@ -0,0 +1,3 @@ +<% provide(:title, 'Contact') %> +

Contact

+

blay blah blah

diff --git a/app/views/static_pages/home.html.erb b/app/views/static_pages/home.html.erb index 0499f61..5148c76 100644 --- a/app/views/static_pages/home.html.erb +++ b/app/views/static_pages/home.html.erb @@ -1,7 +1,9 @@ -<% provide(:title, 'Home') %> -

Sample App

-

- This is the home page for the - Ruby on Rails Tutorial -

+
+

Welcome to the Sample App

+

+ This is the home page for the Ruby on Rails Tutorial sample application. +

+ <%= link_to "Sign up now!", signup_path, class: "btn btn-large btn-primary" %> +
+<%= 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 new file mode 100644 index 0000000..e4c88e1 --- /dev/null +++ b/app/views/users/new.html.erb @@ -0,0 +1,3 @@ +<% provide(:title, 'Sign up') %> +

Sign up

+

Find me in app/views/users/new.html.erb

diff --git a/config/routes.rb b/config/routes.rb index fa7b30d..3e9e12a 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -1,9 +1,11 @@ SampleApp::Application.routes.draw do - get "static_pages/home" + get "users/new" - get "static_pages/help" - - get "static_pages/about" + root to: 'static_pages#home' + match '/about', to: 'static_pages#about' + match '/help', to: 'static_pages#help' + match '/contact', to: 'static_pages#contact' + match '/signup', to: 'users#new' # The priority is based upon order of creation: # first created -> highest priority. diff --git a/public/index.html b/public/index.html deleted file mode 100644 index a1d5099..0000000 --- a/public/index.html +++ /dev/null @@ -1,241 +0,0 @@ - - - - Ruby on Rails: Welcome aboard - - - - -
- - -
- - - - -
-

Getting started

-

Here’s how to get rolling:

- -
    -
  1. -

    Use rails generate to create your models and controllers

    -

    To see all available options, run it without parameters.

    -
    2. - -
  2. -

    Set up a default route and remove public/index.html

    -

    Routes are set up in config/routes.rb.

    -
    3. - -
  3. -

    Create your database

    -

    Run rake db:create to create your database. If you're not using SQLite (the default), edit config/database.yml with your username and password.

    -
    4. -
-
-
- - -
- - diff --git a/spec/requests/static_pages_spec.rb b/spec/requests/static_pages_spec.rb index cd3cd82..3aefa35 100644 --- a/spec/requests/static_pages_spec.rb +++ b/spec/requests/static_pages_spec.rb @@ -2,37 +2,34 @@ describe "StaticPages" do + let(:base_title) { "Ruby on Rails Tutorial Sample App" } + subject { page } + describe "Home page" do - it "should have the h1 'Sample App'" do - visit '/static_pages/home' - page.should have_selector('h1', :text => 'Sample App') - end - it "should have the title 'Home'" do - visit '/static_pages/home' - page.should have_selector('title', :text => "Ruby on Rails Tutorial Sample App | Home") - end + before { visit root_path } + it { should have_selector('h1', text: 'Sample App') } + it { should have_selector('title', text: full_title('')) } end + describe "Help page" do - 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 => "Ruby on Rails Tutorial Sample App | Help") - end + before { visit help_path } + it { should have_selector('h1', text: 'Help') } + it { should have_selector('title', text: full_title('Help')) } end + describe "About page" do - it "should have the h1 'About Us'" do - visit '/static_pages/about' - page.should have_selector('h1', :text => 'About Us') - end - it "should have the title 'About Us'" do - visit '/static_pages/about' - page.should have_selector('title', :text => "Ruby on Rails Tutorial Sample App | About Us") - end + before { visit about_path } + it { should have_selector('h1', text: 'About Us') } + it { should have_selector('title', text: full_title('About Us')) } + end + + + describe "Contact page" do + before { visit contact_path } + 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 new file mode 100644 index 0000000..2e18ebb --- /dev/null +++ b/spec/requests/user_pages_spec.rb @@ -0,0 +1,10 @@ +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', text: full_title('Sign up')) } + end +end diff --git a/spec/support/utilities.rb b/spec/support/utilities.rb new file mode 100644 index 0000000..18bdbdd --- /dev/null +++ b/spec/support/utilities.rb @@ -0,0 +1,9 @@ +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 +