added formtastic stylesheets
This commit is contained in:
scott
parent
2aedd94780
commit
e66527947b
@ -1,10 +1,10 @@
|
|||||||
<html>
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
<head>
|
<head>
|
||||||
<%= csrf_meta_tag %>
|
<%= csrf_meta_tag %>
|
||||||
<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js",
|
<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js",
|
||||||
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js",
|
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js",
|
||||||
:defaults %>
|
:defaults %>
|
||||||
<%= stylesheet_link_tag 'scaffold', 'style' %>
|
<%= stylesheet_link_tag 'scaffold', 'style', 'formtastic', 'formtastic_changes', :cache => :all %>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id='header'>
|
<div id='header'>
|
||||||
@ -21,4 +21,4 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
24
app/views/layouts/application.html.erb~
Normal file
24
app/views/layouts/application.html.erb~
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<%= csrf_meta_tag %>
|
||||||
|
<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js",
|
||||||
|
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js",
|
||||||
|
:defaults %>
|
||||||
|
<%= stylesheet_link_tag 'scaffold', 'style', 'formtastic', 'formtastic_changes', :cache => :all %>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id='header'>
|
||||||
|
Collab
|
||||||
|
</div>
|
||||||
|
<% flash.each_key do |flash_key| %>
|
||||||
|
<div id='flash_<%=h flash_key.to_s %>' class='flash'>
|
||||||
|
<%=h flash[flash_key] %>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
|
<div id='wrapper'>
|
||||||
|
<div id='content'>
|
||||||
|
<%= yield %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
51
config/initializers/formtastic.rb
Normal file
51
config/initializers/formtastic.rb
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
# Set the default text field size when input is a string. Default is 50.
|
||||||
|
# Formtastic::SemanticFormBuilder.default_text_field_size = 50
|
||||||
|
|
||||||
|
# Should all fields be considered "required" by default?
|
||||||
|
# Defaults to true, see ValidationReflection notes below.
|
||||||
|
# Formtastic::SemanticFormBuilder.all_fields_required_by_default = true
|
||||||
|
|
||||||
|
# Should select fields have a blank option/prompt by default?
|
||||||
|
# Defaults to true.
|
||||||
|
# Formtastic::SemanticFormBuilder.include_blank_for_select_by_default = true
|
||||||
|
|
||||||
|
# Set the string that will be appended to the labels/fieldsets which are required
|
||||||
|
# It accepts string or procs and the default is a localized version of
|
||||||
|
# '<abbr title="required">*</abbr>'. In other words, if you configure formtastic.required
|
||||||
|
# in your locale, it will replace the abbr title properly. But if you don't want to use
|
||||||
|
# abbr tag, you can simply give a string as below
|
||||||
|
# Formtastic::SemanticFormBuilder.required_string = "(required)"
|
||||||
|
|
||||||
|
# Set the string that will be appended to the labels/fieldsets which are optional
|
||||||
|
# Defaults to an empty string ("") and also accepts procs (see required_string above)
|
||||||
|
# Formtastic::SemanticFormBuilder.optional_string = "(optional)"
|
||||||
|
|
||||||
|
# Set the way inline errors will be displayed.
|
||||||
|
# Defaults to :sentence, valid options are :sentence, :list and :none
|
||||||
|
# Formtastic::SemanticFormBuilder.inline_errors = :sentence
|
||||||
|
|
||||||
|
# Set the method to call on label text to transform or format it for human-friendly
|
||||||
|
# reading when formtastic is user without object. Defaults to :humanize.
|
||||||
|
# Formtastic::SemanticFormBuilder.label_str_method = :humanize
|
||||||
|
|
||||||
|
# Set the array of methods to try calling on parent objects in :select and :radio inputs
|
||||||
|
# for the text inside each @<option>@ tag or alongside each radio @<input>@. The first method
|
||||||
|
# that is found on the object will be used.
|
||||||
|
# Defaults to ["to_label", "display_name", "full_name", "name", "title", "username", "login", "value", "to_s"]
|
||||||
|
# Formtastic::SemanticFormBuilder.collection_label_methods = [
|
||||||
|
# "to_label", "display_name", "full_name", "name", "title", "username", "login", "value", "to_s"]
|
||||||
|
|
||||||
|
# Formtastic by default renders inside li tags the input, hints and then
|
||||||
|
# errors messages. Sometimes you want the hints to be rendered first than
|
||||||
|
# the input, in the following order: hints, input and errors. You can
|
||||||
|
# customize it doing just as below:
|
||||||
|
# Formtastic::SemanticFormBuilder.inline_order = [:input, :hints, :errors]
|
||||||
|
|
||||||
|
# Specifies if labels/hints for input fields automatically be looked up using I18n.
|
||||||
|
# Default value: false. Overridden for specific fields by setting value to true,
|
||||||
|
# i.e. :label => true, or :hint => true (or opposite depending on initialized value)
|
||||||
|
# Formtastic::SemanticFormBuilder.i18n_lookups_by_default = false
|
||||||
|
|
||||||
|
# You can add custom inputs or override parts of Formtastic by subclassing SemanticFormBuilder and
|
||||||
|
# specifying that class here. Defaults to SemanticFormBuilder.
|
||||||
|
# Formtastic::SemanticFormHelper.builder = MyCustomBuilder
|
||||||
138
public/stylesheets/formtastic.css
Normal file
138
public/stylesheets/formtastic.css
Normal file
@ -0,0 +1,138 @@
|
|||||||
|
/* -------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
It's *strongly* suggested that you don't modify this file. Instead, load a new stylesheet after
|
||||||
|
this one in your layouts (eg formtastic_changes.css) and override the styles to suit your needs.
|
||||||
|
This will allow you to update formtastic.css with new releases without clobbering your own changes.
|
||||||
|
|
||||||
|
This stylesheet forms part of the Formtastic Rails Plugin
|
||||||
|
(c) 2008 Justin French
|
||||||
|
|
||||||
|
--------------------------------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
|
||||||
|
/* NORMALIZE AND RESET - obviously inspired by Yahoo's reset.css, but scoped to just form.formtastic
|
||||||
|
--------------------------------------------------------------------------------------------------*/
|
||||||
|
form.formtastic, form.formtastic ul, form.formtastic ol, form.formtastic li, form.formtastic fieldset, form.formtastic legend, form.formtastic input, form.formtastic textarea, form.formtastic select, form.formtastic p { margin:0; padding:0; }
|
||||||
|
form.formtastic fieldset { border:0; }
|
||||||
|
form.formtastic em, form.formtastic strong { font-style:normal; font-weight:normal; }
|
||||||
|
form.formtastic ol, form.formtastic ul { list-style:none; }
|
||||||
|
form.formtastic abbr, form.formtastic acronym { border:0; font-variant:normal; }
|
||||||
|
form.formtastic input, form.formtastic textarea, form.formtastic select { font-family:inherit; font-size:inherit; font-weight:inherit; }
|
||||||
|
form.formtastic input, form.formtastic textarea, form.formtastic select { font-size:100%; }
|
||||||
|
form.formtastic legend { color:#000; }
|
||||||
|
|
||||||
|
|
||||||
|
/* FIELDSETS & LISTS
|
||||||
|
--------------------------------------------------------------------------------------------------*/
|
||||||
|
form.formtastic fieldset { }
|
||||||
|
form.formtastic fieldset.inputs { }
|
||||||
|
form.formtastic fieldset.buttons { padding-left:25%; }
|
||||||
|
form.formtastic fieldset ol { }
|
||||||
|
form.formtastic fieldset.buttons li { float:left; padding-right:0.5em; }
|
||||||
|
|
||||||
|
/* clearfixing the fieldsets */
|
||||||
|
form.formtastic fieldset { display: inline-block; }
|
||||||
|
form.formtastic fieldset:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
|
||||||
|
html[xmlns] form.formtastic fieldset { display: block; }
|
||||||
|
* html form.formtastic fieldset { height: 1%; }
|
||||||
|
|
||||||
|
|
||||||
|
/* INPUT LIs
|
||||||
|
--------------------------------------------------------------------------------------------------*/
|
||||||
|
form.formtastic fieldset ol li { margin-bottom:1.5em; }
|
||||||
|
|
||||||
|
/* clearfixing the li's */
|
||||||
|
form.formtastic fieldset ol li { display: inline-block; }
|
||||||
|
form.formtastic fieldset ol li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
|
||||||
|
html[xmlns] form.formtastic fieldset ol li { display: block; }
|
||||||
|
* html form.formtastic fieldset ol li { height: 1%; }
|
||||||
|
|
||||||
|
form.formtastic fieldset ol li.required { }
|
||||||
|
form.formtastic fieldset ol li.optional { }
|
||||||
|
form.formtastic fieldset ol li.error { }
|
||||||
|
|
||||||
|
|
||||||
|
/* LABELS
|
||||||
|
--------------------------------------------------------------------------------------------------*/
|
||||||
|
form.formtastic fieldset ol li label { display:block; width:25%; float:left; padding-top:.2em; }
|
||||||
|
form.formtastic fieldset ol li li label { line-height:100%; padding-top:0; }
|
||||||
|
form.formtastic fieldset ol li li label input { line-height:100%; vertical-align:middle; margin-top:-0.1em;}
|
||||||
|
|
||||||
|
|
||||||
|
/* NESTED FIELDSETS AND LEGENDS (radio, check boxes and date/time inputs use nested fieldsets)
|
||||||
|
--------------------------------------------------------------------------------------------------*/
|
||||||
|
form.formtastic fieldset ol li fieldset { position:relative; }
|
||||||
|
form.formtastic fieldset ol li fieldset legend { position:absolute; width:25%; padding-top:0.1em; }
|
||||||
|
form.formtastic fieldset ol li fieldset legend span { position:absolute; }
|
||||||
|
form.formtastic fieldset ol li fieldset legend.label label { position:absolute; }
|
||||||
|
form.formtastic fieldset ol li fieldset ol { float:left; width:74%; margin:0; padding:0 0 0 25%; }
|
||||||
|
form.formtastic fieldset ol li fieldset ol li { padding:0; border:0; }
|
||||||
|
|
||||||
|
|
||||||
|
/* INLINE HINTS
|
||||||
|
--------------------------------------------------------------------------------------------------*/
|
||||||
|
form.formtastic fieldset ol li p.inline-hints { color:#666; margin:0.5em 0 0 25%; }
|
||||||
|
|
||||||
|
|
||||||
|
/* INLINE ERRORS
|
||||||
|
--------------------------------------------------------------------------------------------------*/
|
||||||
|
form.formtastic fieldset ol li p.inline-errors { color:#cc0000; margin:0.5em 0 0 25%; }
|
||||||
|
form.formtastic fieldset ol li ul.errors { color:#cc0000; margin:0.5em 0 0 25%; list-style:square; }
|
||||||
|
form.formtastic fieldset ol li ul.errors li { padding:0; border:none; display:list-item; }
|
||||||
|
|
||||||
|
|
||||||
|
/* STRING & NUMERIC OVERRIDES
|
||||||
|
--------------------------------------------------------------------------------------------------*/
|
||||||
|
form.formtastic fieldset ol li.string input { width:74%; }
|
||||||
|
form.formtastic fieldset ol li.password input { width:74%; }
|
||||||
|
form.formtastic fieldset ol li.numeric input { width:74%; }
|
||||||
|
|
||||||
|
|
||||||
|
/* TEXTAREA OVERRIDES
|
||||||
|
--------------------------------------------------------------------------------------------------*/
|
||||||
|
form.formtastic fieldset ol li.text textarea { width:74%; }
|
||||||
|
|
||||||
|
|
||||||
|
/* HIDDEN OVERRIDES
|
||||||
|
--------------------------------------------------------------------------------------------------*/
|
||||||
|
form.formtastic fieldset ol li.hidden { display:none; }
|
||||||
|
|
||||||
|
|
||||||
|
/* BOOLEAN OVERRIDES
|
||||||
|
--------------------------------------------------------------------------------------------------*/
|
||||||
|
form.formtastic fieldset ol li.boolean label { padding-left:25%; width:auto; }
|
||||||
|
form.formtastic fieldset ol li.boolean label input { margin:0 0.5em 0 0.2em; }
|
||||||
|
|
||||||
|
|
||||||
|
/* RADIO OVERRIDES
|
||||||
|
--------------------------------------------------------------------------------------------------*/
|
||||||
|
form.formtastic fieldset ol li.radio { }
|
||||||
|
form.formtastic fieldset ol li.radio fieldset ol { margin-bottom:-0.6em; }
|
||||||
|
form.formtastic fieldset ol li.radio fieldset ol li { margin:0.1em 0 0.5em 0; }
|
||||||
|
form.formtastic fieldset ol li.radio fieldset ol li label { float:none; width:100%; }
|
||||||
|
form.formtastic fieldset ol li.radio fieldset ol li label input { margin-right:0.2em; }
|
||||||
|
|
||||||
|
|
||||||
|
/* CHECK BOXES (COLLECTION) OVERRIDES
|
||||||
|
--------------------------------------------------------------------------------------------------*/
|
||||||
|
form.formtastic fieldset ol li.check_boxes { }
|
||||||
|
form.formtastic fieldset ol li.check_boxes fieldset ol { margin-bottom:-0.6em; }
|
||||||
|
form.formtastic fieldset ol li.check_boxes fieldset ol li { margin:0.1em 0 0.5em 0; }
|
||||||
|
form.formtastic fieldset ol li.check_boxes fieldset ol li label { float:none; width:100%; }
|
||||||
|
form.formtastic fieldset ol li.check_boxes fieldset ol li label input { margin-right:0.2em; }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* DATE & TIME OVERRIDES
|
||||||
|
--------------------------------------------------------------------------------------------------*/
|
||||||
|
form.formtastic fieldset ol li.date fieldset ol li,
|
||||||
|
form.formtastic fieldset ol li.time fieldset ol li,
|
||||||
|
form.formtastic fieldset ol li.datetime fieldset ol li { float:left; width:auto; margin:0 .3em 0 0; }
|
||||||
|
|
||||||
|
form.formtastic fieldset ol li.date fieldset ol li label,
|
||||||
|
form.formtastic fieldset ol li.time fieldset ol li label,
|
||||||
|
form.formtastic fieldset ol li.datetime fieldset ol li label { display:none; }
|
||||||
|
|
||||||
|
form.formtastic fieldset ol li.date fieldset ol li label input,
|
||||||
|
form.formtastic fieldset ol li.time fieldset ol li label input,
|
||||||
|
form.formtastic fieldset ol li.datetime fieldset ol li label input { display:inline; margin:0; padding:0; }
|
||||||
10
public/stylesheets/formtastic_changes.css
Normal file
10
public/stylesheets/formtastic_changes.css
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
/* -------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
Load this stylesheet after formtastic.css in your layouts to override the CSS to suit your needs.
|
||||||
|
This will allow you to update formtastic.css with new releases without clobbering your own changes.
|
||||||
|
|
||||||
|
For example, to make the inline hint paragraphs a little darker in color than the standard #666:
|
||||||
|
|
||||||
|
form.formtastic fieldset ol li p.inline-hints { color:#333; }
|
||||||
|
|
||||||
|
--------------------------------------------------------------------------------------------------*/
|
||||||
Loading…
Reference in New Issue
Block a user