allow more than two columns in horizontal form

This commit is contained in:
wvengen 2013-12-10 23:41:45 +01:00
parent da737793e8
commit 3f497e9274
2 changed files with 17 additions and 6 deletions

View file

@ -248,17 +248,21 @@ tr.unavailable {
margin: 0;
}
// two-column layout in forms (landscape tablet and wider only)
// multiple-column layout in forms (landscape tablet and wider only)
@media (min-width: 768px) {
.form-horizontal .twocol {
.control-group:nth-child(odd) {
.form-horizontal .fold-line {
.control-group {
float: left;
}
.control-group:nth-child(even) {
.control-group + .control-group {
.control-label {
width: auto;
margin: 0 10px;
}
.controls {
float: left;
margin-left: 0;
}
// fix margin somehow off
// XXX there must be a better way
margin-bottom: 0;
@ -267,6 +271,12 @@ tr.unavailable {
margin-bottom: 20px;
}
}
.control-group:last-child {
float: none;
.controls {
float: none;
}
}
}
}
// allow to have indicator text instead of input with same markup

View file

@ -7,7 +7,7 @@
.modal-body
= f.input :availability
= f.input :name
.twocol
.fold-line
= f.input :unit_quantity, label: Article.human_attribute_name(:unit),
input_html: {class: 'input-mini', title: Article.human_attribute_name(:unit_quantity)}
= f.input :unit, label: '×'.html_safe,
@ -17,7 +17,7 @@
= f.association :article_category
/ TODO labels
.twocol
.fold-line
= f.input :price do
.input-prepend
%span.add-on= t 'number.currency.format.unit'
@ -26,6 +26,7 @@
.input-append
= f.input_field :tax, class: 'input-mini'
%span.add-on %
.fold-line
= f.input :deposit do
.input-prepend
%span.add-on= t 'number.currency.format.unit'