Skip to content
This repository was archived by the owner on Nov 21, 2017. It is now read-only.

Rules for formtastic forms inside of modal windows added #8

Open
dermarkus wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Rules for formtastic forms inside of modal windows added #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# Changelog

## 1.x

* Support for modal windows.

## 1.1

* Support for responsive forms.
Expand Down
2 changes: 2 additions & 0 deletions lib/assets/stylesheets/formtastic-plus-bootstrap/_all.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,5 @@ $inputWidth: (5 * $gridColumnWidth) !default;
@import "inputs";
@import "disabled";
}

@import "modal";
51 changes: 51 additions & 0 deletions lib/assets/stylesheets/formtastic-plus-bootstrap/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,3 +148,54 @@
@include label-common($abbr-top-offset: -2px);
}
}

@mixin formtastic-responsive() {

// force labels into single rows
label {
float: none !important;
text-align: left !important;

// set abbr closer to label text
abbr {
position: relative !important;
right: 0px !important;
}
}

// legends should also be in single rows
legend {
float: none !important;
display: block !important;
}

// inline-errors and -hints should be lefties
p.inline-errors, p.inline-hints {
margin-left: 0px !important;
}

// the height of textareas should be limited
textarea {
height: 200px !important;
}

// push booleans to the left
input[type="checkbox"] {
margin-left: 0px !important;
}

// groups of choices and fragments go left too
ol.choices-group, ol.fragments-group {
margin-left: 0px !important;
}

// and finally the actions have to go left
.actions ol {
margin-left: 0px !important;
}

fieldset.inputs ol > li.input .input-xxlarge {
width: 100% !important;
}

}
11 changes: 11 additions & 0 deletions lib/assets/stylesheets/formtastic-plus-bootstrap/_modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@

// forms in modal-windows need further attention
.modal .formtastic {

@include formtastic-responsive();

fieldset.inputs, fieldset.actions {
margin: 0;
}

}
49 changes: 5 additions & 44 deletions lib/assets/stylesheets/formtastic-plus-bootstrap/responsive.css.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,54 +5,15 @@
* have to have their own rows.
*/

@import "mixins";

// Phone to Portrait Tablet
@media (max-width: 767px) {
// this should only apply to formtastic forms
.formtastic {
// force labels into single rows
label {
float: none !important;
text-align: left !important;

// set abbr closer to label text
abbr {
position: relative !important;
right: 0px !important;
}
}

// legends should also be in single rows
legend {
float: none !important;
display: block !important;
}

// inline-errors and -hints should be lefties
p.inline-errors, p.inline-hints {
margin-left: 0px !important;
}

// the height of textareas should be limited
textarea {
height: 200px !important;
}

// push booleans to the left
input[type="checkbox"] {
margin-left: 0px !important;
}

// groups of choices and fragments go left too
ol.choices-group, ol.fragments-group {
margin-left: 0px !important;
}

// and finally the actions have to go left
.actions ol {
margin-left: 0px !important;
}
} // close .formtastic
} // close @media (max-width: 767px)
@include formtastic-responsive();
}
}

// inputs have to use almost the full span on phones and smaller
// but just 90% will do because of margins and paddings
Expand Down
2 changes: 2 additions & 0 deletions testapp/Gemfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,10 @@ gem "rails", "3.2.3"
group :assets do
gem "sass-rails", "~> 3.2.3"
gem "coffee-rails", "~> 3.2.1"
gem "jquery-rails"

gem "uglifier", ">= 1.0.3"
gem "therubyracer"

gem "bootstrap-sass"
end
Expand Down
2 changes: 2 additions & 0 deletions testapp/app/assets/javascripts/application.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,5 @@
// GO AFTER THE REQUIRES BELOW.
//
//= require_tree .
//= require jquery
//= require bootstrap-modal
70 changes: 70 additions & 0 deletions testapp/app/views/dummy/_form.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<%= semantic_form_for @dummy_form, url: "/", method: :post, html: { id: "form#{rand(9999)}" } do |form| %>
<%= form.inputs title: "Main inputs" do %>
<%= form.input :field1 %>
<%= form.input :field2, label: "very " * 20 + "label" %>
<%= form.input :field3, required: false %>
<%= form.input :field4, as: :text %>
<%= form.input :field5, as: :password, required: false, hint: "password field" %>
<%= form.input :field6, as: :number, required: false, hint: "number field" %>
<%= form.input :field7, as: :email, required: false, hint: "email field" %>
<%= form.input :field8, as: :url, required: false, hint: "url field" %>
<%= form.input :field9, as: :phone, required: false, hint: "phone field" %>
<%= form.input :field10, as: :search, required: false, hint: "search field" %>
<%= form.input :field11, as: :range, required: false, hint: "range field" %>
<% end %>
<%= form.inputs title: "Resized inputs" do %>
<%= form.input :field20, hint: "small size", input_html: { class: "input-small" } %>
<%= form.input :field21, hint: "medium size", input_html: { class: "input-medium" } %>
<%= form.input :field22, required: false, hint: "large size", input_html: { class: "input-large" } %>
<%= form.input :field23, as: :text, hint: "xlarge size", input_html: { class: "input-xlarge" } %>
<%= form.input :field24, required: false, hint: "xxlarge size", input_html: { class: "input-xxlarge" } %>
<% end %>
<%= form.inputs title: "Checkboxes and radio buttons" do %>
<%= form.input :field30, as: :boolean %>
<%= form.input :field31, as: :boolean %>
<%= form.input :field32, as: :boolean, required: true %>
<%= form.input :field33, as: :check_boxes %>
<%= form.input :field34, as: :radio %>
<% end %>
<%= form.inputs title: "Select boxes" do %>
<%= form.input :field40, as: :select, hint: "default size" %>
<%= form.input :field41, as: :select, hint: "medium size", input_html: { class: "input-medium" } %>
<%= form.input :field42, as: :time_zone, hint: "time zones" %>
<%= form.input :field43, as: :country, hint: "countries" %>
<%= form.input :field44, as: :select, multiple: true, hint: "multiple select" %>
<% end %>
<%= form.inputs title: "Files" do %>
<%= form.input :field50, as: :file, hint: "file input" %>
<% end %>
<%= form.inputs title: "Time & Date (formtastic <= 2.1)" do %>
<%= form.input :field60, as: :time, hint: "time input" %>
<%= form.input :field61, as: :date, hint: "date input" %>
<%= form.input :field62, as: :datetime, hint: "datetime input" %>
<% end %>
<%= form.inputs title: "Time & Date (formtastic >= 2.2)" do %>
<%= form.input :field60, as: :time_select, hint: "time input" %>
<%= form.input :field61, as: :date_select, hint: "date input" %>
<%= form.input :field62, as: :datetime_select, hint: "datetime input" %>
<% end %>
<%= form.inputs title: "Disabled & Readonly inputs" do %>
<%= form.input :field70, as: :string, input_html: { disabled: true } %>
<%= form.input :field71, as: :string, input_html: { readonly: true } %>
<%= form.input :field72, as: :text, input_html: { disabled: true } %>
<%= form.input :field73, as: :text, input_html: { readonly: true } %>
<%= form.input :field74, as: :boolean, input_html: { disabled: true } %>
<%= form.input :field75, as: :boolean, input_html: { readonly: true } %>
<%= form.input :field76, as: :check_boxes, input_html: { disabled: true } %>
<%= form.input :field77, as: :check_boxes, input_html: { readonly: true } %>
<%= form.input :field79, as: :radio, input_html: { disabled: true } %>
<%= form.input :field80, as: :radio, input_html: { readonly: true } %>
<%= form.input :field81, as: :select, input_html: { disabled: true } %>
<%= form.input :field82, as: :select, input_html: { readonly: true } %>
<%= form.input :field83, as: :datetime, input_html: { disabled: true } %>
<%= form.input :field84, as: :datetime, input_html: { readonly: true } %>
<% end %>
<%= form.actions do %>
<%= form.action :submit %>
<%= form.action :cancel %>
<% end %>

<% end %>
94 changes: 22 additions & 72 deletions testapp/app/views/dummy/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,81 +8,31 @@
</head>
<body>
<div class="container">
<h1>Dummy form</h1>
<p>
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
</p>
<div class="row">
<h1 class="span6">Dummy form</h1>
<div class="span12">
<%= render :partial => "form" %>
</div>
</div>
<div class="row">
<%= semantic_form_for @dummy_form, url: "/", method: :post, html: { class: "span12" } do |form| %>
<%= form.inputs title: "Main inputs" do %>
<%= form.input :field1 %>
<%= form.input :field2, label: "very " * 20 + "label" %>
<%= form.input :field3, required: false %>
<%= form.input :field4, as: :text %>
<%= form.input :field5, as: :password, required: false, hint: "password field" %>
<%= form.input :field6, as: :number, required: false, hint: "number field" %>
<%= form.input :field7, as: :email, required: false, hint: "email field" %>
<%= form.input :field8, as: :url, required: false, hint: "url field" %>
<%= form.input :field9, as: :phone, required: false, hint: "phone field" %>
<%= form.input :field10, as: :search, required: false, hint: "search field" %>
<%= form.input :field11, as: :range, required: false, hint: "range field" %>
<% end %>
<%= form.inputs title: "Resized inputs" do %>
<%= form.input :field20, hint: "small size", input_html: { class: "input-small" } %>
<%= form.input :field21, hint: "medium size", input_html: { class: "input-medium" } %>
<%= form.input :field22, required: false, hint: "large size", input_html: { class: "input-large" } %>
<%= form.input :field23, as: :text, hint: "xlarge size", input_html: { class: "input-xlarge" } %>
<%= form.input :field24, required: false, hint: "xxlarge size", input_html: { class: "input-xxlarge" } %>
<% end %>
<%= form.inputs title: "Checkboxes and radio buttons" do %>
<%= form.input :field30, as: :boolean %>
<%= form.input :field31, as: :boolean %>
<%= form.input :field32, as: :boolean, required: true %>
<%= form.input :field33, as: :check_boxes %>
<%= form.input :field34, as: :radio %>
<% end %>
<%= form.inputs title: "Select boxes" do %>
<%= form.input :field40, as: :select, hint: "default size" %>
<%= form.input :field41, as: :select, hint: "medium size", input_html: { class: "input-medium" } %>
<%= form.input :field42, as: :time_zone, hint: "time zones" %>
<%= form.input :field43, as: :country, hint: "countries" %>
<%= form.input :field44, as: :select, multiple: true, hint: "multiple select" %>
<% end %>
<%= form.inputs title: "Files" do %>
<%= form.input :field50, as: :file, hint: "file input" %>
<% end %>
<%= form.inputs title: "Time & Date (formtastic <= 2.1)" do %>
<%= form.input :field60, as: :time, hint: "time input" %>
<%= form.input :field61, as: :date, hint: "date input" %>
<%= form.input :field62, as: :datetime, hint: "datetime input" %>
<% end %>
<%= form.inputs title: "Time & Date (formtastic >= 2.2)" do %>
<%= form.input :field60, as: :time_select, hint: "time input" %>
<%= form.input :field61, as: :date_select, hint: "date input" %>
<%= form.input :field62, as: :datetime_select, hint: "datetime input" %>
<% end %>
<%= form.inputs title: "Disabled & Readonly inputs" do %>
<%= form.input :field70, as: :string, input_html: { disabled: true } %>
<%= form.input :field71, as: :string, input_html: { readonly: true } %>
<%= form.input :field72, as: :text, input_html: { disabled: true } %>
<%= form.input :field73, as: :text, input_html: { readonly: true } %>
<%= form.input :field74, as: :boolean, input_html: { disabled: true } %>
<%= form.input :field75, as: :boolean, input_html: { readonly: true } %>
<%= form.input :field76, as: :check_boxes, input_html: { disabled: true } %>
<%= form.input :field77, as: :check_boxes, input_html: { readonly: true } %>
<%= form.input :field79, as: :radio, input_html: { disabled: true } %>
<%= form.input :field80, as: :radio, input_html: { readonly: true } %>
<%= form.input :field81, as: :select, input_html: { disabled: true } %>
<%= form.input :field82, as: :select, input_html: { readonly: true } %>
<%= form.input :field83, as: :datetime, input_html: { disabled: true } %>
<%= form.input :field84, as: :datetime, input_html: { readonly: true } %>
<% end %>
<%= form.actions do %>
<%= form.action :submit %>
<%= form.action :cancel %>
<% end %>
<%= form.actions :submit, :cancel %>
<% end %>
</div>



<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<%= render :partial => "form" %>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>

</body>
</html>