Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
twitter bootstrap rails 3.1 notes
<% unless flash[:notice].blank? %>
<div class="alert-message info">
<%= content_tag :div, flash[:notice] %>
</div>
<% end %>
<% unless flash[:error].blank? %>
<div class="alert-message error">
<%= content_tag :div, flash[:error] %>
</div>
<% end %>
<% unless flash[:alert].blank? %>
<div class="alert-message warning">
<%= content_tag :div, flash[:alert] %>
</div>
<% end %>
<%%= simple_form_for(@<%= singular_table_name %>, :wrapper => :inline) do |f| %>
<%%= f.error_notification %>
<div class="inputs">
<%- attributes.each do |attribute| -%>
<%%= f.<%= attribute.reference? ? :association : :input %> :<%= attribute.name %> %>
<%- end -%>
</div>
<div class="actions">
<%%= f.button :submit %>
</div>
<%% end %>
<h1>Header</h1>
<ul class="nav">
<li><%= link_to "Home", root_path %></li>
</ul>
/*
*= require_self
*/
html, body {
background-color: #eee;
}
body {
padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
}
.container > footer p {
text-align: center; /* center align it with the container */
}
.container {
width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */
}
/* The white background content wrapper */
.content {
background-color: #fff;
padding: 20px;
margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
/* Page header tweaks */
.page-header {
background-color: #f5f5f5;
padding: 20px 20px 10px;
margin: -20px -20px 20px;
}
/* Styles you shouldn't keep as they are for displaying this base example only */
.content .span10,
.content .span4 {
min-height: 500px;
}
/* Give a quick and non-cross-browser friendly divider */
.content .span4 {
margin-left: 0;
padding-left: 19px;
border-left: 1px solid #eee;
}
.topbar .btn {
border: 0;
}
.actions {
padding: 17px 20px 18px 20px;
}
.row {
margin-top: 10px;
margin-bottom: 10px;
}
.field_with_errors {
padding: 2px;
background-color: #FDDFDE;
border-color: #FBC7C6;
display: table;
}
<!DOCTYPE html>
<html>
<head>
<title><%= content_for?(:title) ? yield(:title) : "Twitter Bootstrap" %></title>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tag %>
<%= yield(:head) %>
</head>
<body>
<div class="topbar">
<div class="fill">
<div class="container">
<%= render :partial => 'common/menu' %>
</div>
</div>
</div>
<div class="container">
<div class="content">
<div class="page-header">
<%= render :partial => 'common/header' %>
</div>
<div class="row">
<div class="span12">
<%= render :partial => 'common/flashes' %>
<%= yield %>
</div>
</div>
<footer>
<%= render :partial => 'common/footer' %>
</footer>
</div>
</div>
</body>
</html>
module ErrorMessagesHelper
def error_messages_for(*objects)
options = objects.extract_options!
options[:header_message] ||= I18n.t(:"activerecord.errors.header", :default => "Invalid Fields")
options[:message] ||= I18n.t(:"activerecord.errors.message", :default => "Please correct the following problems and try again")
messages = objects.compact.map { |o| o.errors.full_messages }.flatten
unless messages.empty?
content_tag(:div, :class => "alert-message block-message error") do
list_items = messages.map { |msg| content_tag(:li, msg) }
content_tag(:h2, options[:header_message], :class=>"bold") + content_tag(:p, options[:message]) + content_tag(:ul, list_items.join.html_safe)
end
end
end
module FormBuilderAdditions
def error_messages(options = {})
@template.error_messages_for(@object, options)
end
end
end
ActionView::Helpers::FormBuilder.send(:include, ErrorMessagesHelper::FormBuilderAdditions)
<h1>Listing <%= plural_table_name %></h1>
<table>
<thead>
<tr>
<% attributes.each do |attribute| -%>
<th><%= attribute.human_name %></th>
<% end -%>
<th>Actions</th>
</tr>
</thead>
<tbody>
<%% @<%= plural_table_name %>.each do |<%= singular_table_name %>| %>
<tr>
<% attributes.each do |attribute| -%>
<td><%%= <%= singular_table_name %>.<%= attribute.name %> %></td>
<% end -%>
<td>
<%%= link_to 'Show', <%= singular_table_name %>, :class=>"btn" %>
<%%= link_to 'Edit', edit_<%= singular_table_name %>_path(<%= singular_table_name %>), :class=>"btn" %>
<%%= link_to 'Destroy', <%= singular_table_name %>, <%= key_value :confirm, "'Are you sure?'" %>, <%= key_value :method, ":delete" %>, :class=>"btn" %>
</td>
</tr>
<%% end %>
</tbody>
</table>
<div class="actions">
<%%= link_to 'New <%= human_name %>', new_<%= singular_table_name %>_path, :class=>"btn" %>
</div>
<%%= show_for @<%= singular_name %> do |s| %>
<% attributes.each do |attribute| -%>
<%%= s.<%= attribute.reference? ? :association : :attribute %> :<%= attribute.name %> %>
<% end -%>
<%% end %>
<div class="actions">
<%%= link_to 'Edit', edit_<%= singular_name %>_path(@<%= singular_name %>), :class=>"btn" %>
<%%= link_to 'Back', <%= plural_name %>_path, :class=>"btn" %>
</div>
SimpleForm.setup do |config|
config.wrappers :inline, :class => 'clearfix', :error_class => :error do |b|
b.use :placeholder
b.use :label
b.use :tag => 'div', :class => 'input' do |ba|
ba.use :input
ba.use :error, :tag => :span, :class => :'help-inline'
ba.use :hint, :tag => :span, :class => :'help-block'
end
end
config.wrappers :stacked, :class => "clearfix", :error_class => :error do |b|
b.use :placeholder
b.use :label
b.use :hint, :tag => :span, :class => :'help-block'
b.use :tag => 'div', :class => 'input' do |input|
input.use :input
input.use :error, :tag => :span, :class => :'help-inline'
end
end
# Method used to tidy up errors.
# config.error_method = :first
# Default tag used for error notification helper.
config.error_notification_tag = :div
# CSS class to add for error notification helper.
config.error_notification_class = :"alert-message block-message error"
# ID to add for error notification helper.
# config.error_notification_id = nil
# You can wrap a collection of radio/check boxes in a pre-defined tag, defaulting to none.
# config.collection_wrapper_tag = nil
# You can wrap each item in a collection of radio/check boxes with a tag, defaulting to span.
# config.item_wrapper_tag = :span
# Series of attempts to detect a default label method for collection.
# config.collection_label_methods = [ :to_label, :name, :title, :to_s ]
# Series of attempts to detect a default value method for collection.
# config.collection_value_methods = [ :id, :to_s ]
# How the label text should be generated altogether with the required text.
config.label_text = lambda { |label, required| "#{label} #{required}" }
# You can define the class to use on all labels. Default is nil.
# config.label_class = nil
# You can define the class to use on all forms. Default is simple_form.
# config.form_class = :simple_form
# Whether attributes are required by default (or not). Default is true.
# config.required_by_default = true
# Tell browsers whether to use default HTML5 validations (novalidate option).
# Default is enabled.
config.browser_validations = false
# Determines whether HTML5 types (:email, :url, :search, :tel) and attributes
# (e.g. required) are used or not. True by default.
# Having this on in non-HTML5 compliant sites can cause odd behavior in
# HTML5-aware browsers such as Chrome.
# config.html5 = true
# Custom mappings for input types. This should be a hash containing a regexp
# to match as key, and the input type that will be used when the field name
# matches the regexp as value.
# config.input_mappings = { /count/ => :integer }
# Collection of methods to detect if a file type was given.
# config.file_methods = [ :mounted_as, :file?, :public_filename ]
# Default priority for time_zone inputs.
# config.time_zone_priority = nil
# Default priority for country inputs.
# config.country_priority = nil
# Default size for text inputs.
# config.default_input_size = 50
# When false, do not use translations for labels, hints or placeholders.
# config.translate = true
# Default class for buttons
config.button_class = 'btn'
end
@jurre

This comment has been minimized.

Copy link

commented Dec 30, 2011

Very nice! may a propose adding a close button to all the flashes? so we can change the flashes partial like:

  <div class="alert-message info">
    <a class="close" href="#">×</a>
    <%= content_tag :div, flash[:notice] %>
  </div>
<% end %>

and add 3 lines of coffeescript:

$(document).ready ->
    $(".close").click ->
        $(".alert-message").fadeOut 1000, ->
@lucapette

This comment has been minimized.

Copy link
Owner Author

commented Jan 4, 2012

@jurre I'm glad you liked it! By the way, altought your suggestion it really nice, there's a "twitter bootstrap way" of doing it. Here there is a good explanation of how to achieve it. And it's ridiculously simple :)

@felixrabe

This comment has been minimized.

Copy link

commented Feb 3, 2012

Updated link for the bootstrap alerts: http://twitter.github.com/bootstrap/javascript.html#alerts

@lucapette

This comment has been minimized.

Copy link
Owner Author

commented Feb 4, 2012

@felixrabe thank you! I've updated the link.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.