Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Setting up twitter bootstrap

  • Loading branch information...
commit f5e266b28e5384d7e0b5da985e040d4c118c82cf 1 parent a665206
@aubreyrhodes authored
View
1  Gemfile
@@ -18,6 +18,7 @@ group :assets do
# gem 'therubyracer', :platform => :ruby
gem 'uglifier', '>= 1.0.3'
+ gem 'less'
end
gem 'jquery-rails'
View
1  Gemfile.lock
@@ -127,6 +127,7 @@ DEPENDENCIES
coffee-rails (~> 3.2.1)
eco
jquery-rails
+ less
rails (= 3.2.3)
sass-rails (~> 3.2.3)
spine-rails
View
24 app/assets/javascripts/app/views/items/index.jst.eco
@@ -1,12 +1,16 @@
-<h1>Listing Items</h1>
+<h1>To-Done Items</h1>
-<% for item in @items: %>
- <div class="item" data-id="<%= item.id %>">
- <a data-type="show"><%= item.title %></a>
-
- <a data-type="edit">Edit</a>
- <a data-type="destroy">Destroy</a>
- </div>
-<% end %>
+<ul class="unstyled">
+ <% for item in @items: %>
+ <li class="item" data-id="<%= item.id %>">
+ <div class="form-actions">
+ <a data-type="show"><%= item.title %></a>
+
+ <a class="btn btn-primary item-actions" data-type="edit">Edit</a>
+ <a class="btn btn-danger item-actions" data-type="destroy">Destroy</a>
+ </div>
+ </li>
+ <% end %>
+</ul>
-<p><a data-type="new">New Item</a></p>
+<p><a data-type="new">New Item</a></p>
View
1  app/assets/javascripts/application.js
@@ -12,5 +12,6 @@
//
//= require jquery
//= require jquery_ujs
+//= require twitter/bootstrap
//= require app
//= require_tree .
View
4 app/assets/javascripts/bootstrap.js.coffee
@@ -0,0 +1,4 @@
+jQuery ->
+ $("a[rel=popover]").popover()
+ $(".tooltip").tooltip()
+ $("a[rel=tooltip]").tooltip()
View
3  app/assets/stylesheets/application.css
@@ -10,7 +10,8 @@
*
*= require_self
*= require_tree .
-*/
+ *= require bootstrap_and_overrides
+ */
.stack > *:not(.active) {
display: none;
}}
View
34 app/assets/stylesheets/bootstrap_and_overrides.css.less
@@ -0,0 +1,34 @@
+@import "twitter/bootstrap/bootstrap";
+body { padding-top: 60px; }
+
+@import "twitter/bootstrap/responsive";
+
+// Set the correct sprite paths
+@iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png');
+@iconWhiteSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings-white.png');
+
+// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
+@fontAwesomeEotPath: asset-path('fontawesome-webfont.eot');
+@fontAwesomeWoffPath: asset-path('fontawesome-webfont.woff');
+@fontAwesomeTtfPath: asset-path('fontawesome-webfont.ttf');
+@fontAwesomeSvgzPath: asset-path('fontawesome-webfont.svgz');
+@fontAwesomeSvgPath: asset-path('fontawesome-webfont.svg');
+
+// Font Awesome
+@import "fontawesome";
+
+// Your custom LESS stylesheets goes here
+//
+// Since bootstrap was imported above you have access to its mixins which
+// you may use and inherit here
+//
+// If you'd like to override bootstrap's own variables, you can do so here as well
+// See http://twitter.github.com/bootstrap/less.html for their names and documentation
+//
+// Example:
+// @linkColor: #ff0000;
+
+.item-actions{
+ float: right;
+ margin-right: 5px;
+ }
View
35 app/views/items/_form.html.erb
@@ -1,25 +1,20 @@
-<%= form_for(@item) do |f| %>
- <% if @item.errors.any? %>
- <div id="error_explanation">
- <h2><%= pluralize(@item.errors.count, "error") %> prohibited this item from being saved:</h2>
-
- <ul>
- <% @item.errors.full_messages.each do |msg| %>
- <li><%= msg %></li>
- <% end %>
- </ul>
+<%= form_for @item, :html => { :class => 'form-horizontal' } do |f| %>
+ <div class="control-group">
+ <%= f.label :title, :class => 'control-label' %>
+ <div class="controls">
+ <%= f.text_field :title, :class => 'text_field' %>
</div>
- <% end %>
-
- <div class="field">
- <%= f.label :title %><br />
- <%= f.text_field :title %>
</div>
- <div class="field">
- <%= f.label :completed %><br />
- <%= f.check_box :completed %>
+ <div class="control-group">
+ <%= f.label :completed, :class => 'control-label' %>
+ <div class="controls">
+ <%= f.check_box :completed, :class => 'check_box' %>
+ </div>
</div>
- <div class="actions">
- <%= f.submit %>
+
+ <div class="form-actions">
+ <%= f.submit nil, :class => 'btn btn-primary' %>
+ <%= link_to t('.cancel', :default => t("helpers.links.cancel")),
+ items_path, :class => 'btn' %>
</div>
<% end %>
View
10 app/views/items/edit.html.erb
@@ -1,6 +1,4 @@
-<h1>Editing item</h1>
-
-<%= render 'form' %>
-
-<%= link_to 'Show', @item %> |
-<%= link_to 'Back', items_path %>
+<%- model_class = @item.class -%>
+<h1><%=t '.title', :default => t('helpers.titles.edit', :model => model_class.model_name.human,
+ :default => "Edit #{model_class.model_name.human}") %></h1>
+<%= render :partial => 'form' %>
View
9 app/views/items/new.html.erb
@@ -1,5 +1,4 @@
-<h1>New item</h1>
-
-<%= render 'form' %>
-
-<%= link_to 'Back', items_path %>
+<%- model_class = @item.class -%>
+<h1><%=t '.title', :default => t('helpers.titles.new', :model => model_class.model_name.human,
+ :default => "New #{model_class.model_name.human}") %></h1>
+<%= render :partial => 'form' %>
View
22 app/views/items/show.html.erb
@@ -1,15 +1,23 @@
-<p id="notice"><%= notice %></p>
+<%- model_class = @item.class -%>
+<h1><%=t '.title', :default => model_class.model_name.human %></h1>
<p>
- <b>Title:</b>
+ <strong><%= model_class.human_attribute_name(:title) %>:</strong><br>
<%= @item.title %>
</p>
-
<p>
- <b>Completed:</b>
+ <strong><%= model_class.human_attribute_name(:completed) %>:</strong><br>
<%= @item.completed %>
</p>
-
-<%= link_to 'Edit', edit_item_path(@item) %> |
-<%= link_to 'Back', items_path %>
+<div class="form-actions">
+ <%= link_to t('.back', :default => t("helpers.links.back")),
+ items_path, :class => 'btn' %>
+ <%= link_to t('.edit', :default => t("helpers.links.edit")),
+ edit_item_path(@item), :class => 'btn' %>
+ <%= link_to t('.destroy', :default => t("helpers.links.destroy")),
+ item_path(@item),
+ :method => 'delete',
+ :confirm => t('.confirm', :default => t("helpers.links.confirm", :default => 'Are you sure?')),
+ :class => 'btn btn-danger' %>
+</div>
View
75 app/views/layouts/fluid.html.erb
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title><%= content_for?(:title) ? yield(:title) : "ToDone" %></title>
+ <%= csrf_meta_tags %>
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
+ <![endif]-->
+
+ <%= stylesheet_link_tag "application", :media => "all" %>
+
+ <link href="images/favicon.ico" rel="shortcut icon">
+ <link href="images/apple-touch-icon.png" rel="apple-touch-icon">
+ <link href="images/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72">
+ <link href="images/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114">
+ </head>
+ <body>
+
+ <div class="navbar navbar-fixed-top">
+ <div class="navbar-inner">
+ <div class="container">
+ <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </a>
+ <a class="brand" href="#">ToDone</a>
+ <div class="container nav-collapse">
+ <ul class="nav">
+ <li><%= link_to "Link1", "/path1" %></li>
+ <li><%= link_to "Link2", "/path2" %></li>
+ <li><%= link_to "Link3", "/path3" %></li>
+ </ul>
+ </div><!--/.nav-collapse -->
+ </div>
+ </div>
+ </div>
+
+ <div class="container">
+ <div class="content">
+ <div class="row">
+ <div class="span9">
+ <%= yield %>
+ </div>
+ <div class="span3">
+ <div class="well sidebar-nav">
+ <h3>Sidebar</h3>
+ <ul class="nav nav-list">
+ <li class="nav-header">Sidebar</li>
+ <li><%= link_to "Link1", "/path1" %></li>
+ <li><%= link_to "Link2", "/path2" %></li>
+ <li><%= link_to "Link3", "/path3" %></li>
+ </ul>
+ </div><!--/.well -->
+ </div><!--/span-->
+ </div><!--/row-->
+ </div><!--/content-->
+
+ <footer>
+ <p>&copy; Company 2012</p>
+ </footer>
+
+ </div> <!-- /container -->
+
+ <!-- Javascripts
+ ================================================== -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <%= javascript_include_tag "application" %>
+
+ </body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.