Finish layout and routes

tschmidt · Apr 30, 2012 · 9ade615 · 9ade615
1 parent 2eccf77
commit 9ade615
Show file tree

Hide file tree

Showing 18 changed files with 204 additions and 291 deletions.
diff --git a/Gemfile b/Gemfile
@@ -4,6 +4,7 @@ gem 'rails', '3.2.3'
 gem 'json'
 gem 'jquery-rails', '2.0.0'
 gem 'pg', '0.12.2'
+gem 'bootstrap-sass', '2.0.0'
 
 group :development do
   gem 'sqlite3', '1.3.5'

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)
@@ -162,6 +163,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  bootstrap-sass (= 2.0.0)
   capybara (= 1.1.2)
   coffee-rails (= 3.2.2)
   growl (= 1.0.3)

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,97 @@
+@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", root_path, 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 in",  '#' %></li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</header>
diff --git a/app/views/layouts/_ie-shim.html.erb b/app/views/layouts/_ie-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
@@ -5,10 +5,15 @@
   <%= stylesheet_link_tag    "application", media: "all" %>
   <%= javascript_include_tag "application" %>
   <%= csrf_meta_tags %>
+  <%= render 'layouts/ie-shim' %>
 </head>
 <body>
+  <%= render 'layouts/header' %>
+  <div class='container'>
+    <%= yield %>
+    <%= render 'layouts/footer' %>
+  </div>
 
-<%= yield %>
-
+  <!-- Scripts after this line -->
 </body>
 </html>
diff --git a/app/views/static_pages/home.html.erb b/app/views/static_pages/home.html.erb
@@ -1,5 +1,12 @@
-<h1>Sample App</h1>
-<p>
-  This is the home page for the <a href="http://reailstutorial.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 <%= link_to "Ruby on Rails Tutorial", "http://railstutorial.org/" %>
+    sample application.
+  </h2>
+
+  <%= link_to "Sign up now!", '#', class: 'btn btn-large btn-primary' %>
+</div>
+
+<%= link_to image_tag('rails.png', alt: 'Ruby on 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>Sign up</h1>
+<p>Find me in app/views/users/new.html.erb</p>
diff --git a/config/routes.rb b/config/routes.rb
@@ -1,9 +1,14 @@
 SampleApp::Application.routes.draw do
-  get "static_pages/home"
-  get "static_pages/help"
-  get "static_pages/about"
-  get "static_pages/contact"
+  get "user/new"
+
+  root to: 'static_pages#home'
 
+  match '/help',    to: 'static_pages#help'
+  match '/about',   to: 'static_pages#about'
+  match '/contact', to: 'static_pages#contact'
+
+  match '/signup',  to: 'users#new'
+
   # The priority is based upon order of creation:
   # first created -> highest priority.