formtastic-plus-bootstrap 1.0.3 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
data/README.md
CHANGED
@@ -23,6 +23,12 @@ Add following lines in `app/assets/stylesheets/application.css`:
|
|
23
23
|
...
|
24
24
|
*/
|
25
25
|
|
26
|
+
If you use bootstrap-responsive, also add the following additional line:
|
27
|
+
|
28
|
+
/*
|
29
|
+
*= require formtastic-plus-bootstrap/responsive
|
30
|
+
*/
|
31
|
+
|
26
32
|
All done. Enjoy nice looking forms!
|
27
33
|
|
28
34
|
### Why should I use `formtastic-plus-bootstrap` instead of `formtastic-bootstrap`?
|
@@ -0,0 +1,126 @@
|
|
1
|
+
/*
|
2
|
+
* This file holds all relevant extensions to use the bootstrap-responsive-formats in formtastic.
|
3
|
+
*
|
4
|
+
* In portrait- and phone-mode all input fields should fit the whole width, while labels and inline-hints
|
5
|
+
* have to have their own rows.
|
6
|
+
*/
|
7
|
+
|
8
|
+
// Phone to Portrait Tablet
|
9
|
+
@media (max-width: 767px) {
|
10
|
+
// this should only apply to formtastic forms
|
11
|
+
.formtastic {
|
12
|
+
// force labels into single rows
|
13
|
+
label {
|
14
|
+
float: none !important;
|
15
|
+
text-align: left !important;
|
16
|
+
|
17
|
+
// set abbr closer to label text
|
18
|
+
abbr {
|
19
|
+
position: relative !important;
|
20
|
+
right: 0px !important;
|
21
|
+
}
|
22
|
+
}
|
23
|
+
|
24
|
+
// legends should also be in single rows
|
25
|
+
legend {
|
26
|
+
float: none !important;
|
27
|
+
display: block !important;
|
28
|
+
}
|
29
|
+
|
30
|
+
// inline-errors and -hints should be lefties
|
31
|
+
p.inline-errors, p.inline-hints {
|
32
|
+
margin-left: 0px !important;
|
33
|
+
}
|
34
|
+
|
35
|
+
// the height of textareas should be limited
|
36
|
+
textarea {
|
37
|
+
height: 200px !important;
|
38
|
+
}
|
39
|
+
|
40
|
+
// push booleans to the left
|
41
|
+
input[type="checkbox"] {
|
42
|
+
margin-left: 0px !important;
|
43
|
+
}
|
44
|
+
|
45
|
+
// groups of choices and fragments go left too
|
46
|
+
ol.choices-group, ol.fragments-group {
|
47
|
+
margin-left: 0px !important;
|
48
|
+
}
|
49
|
+
|
50
|
+
// and finally the actions have to go left
|
51
|
+
.actions ol {
|
52
|
+
margin-left: 0px !important;
|
53
|
+
}
|
54
|
+
} // close .formtastic
|
55
|
+
} // close @media (max-width: 767px)
|
56
|
+
|
57
|
+
// inputs have to use almost the full span on phones and smaller
|
58
|
+
// but just 90% will do because of margins and paddings
|
59
|
+
@media (max-width: 480px) {
|
60
|
+
.formtastic {
|
61
|
+
fieldset.inputs {
|
62
|
+
margin: 0 2px !important;
|
63
|
+
padding: 0 !important;
|
64
|
+
}
|
65
|
+
|
66
|
+
fieldset.actions {
|
67
|
+
margin-left: 0 !important;
|
68
|
+
margin-right: 0 !important;
|
69
|
+
}
|
70
|
+
|
71
|
+
fieldset.inputs ol > li {
|
72
|
+
&.input {
|
73
|
+
width: 100% !important;
|
74
|
+
|
75
|
+
input, textarea, select, .input-xlarge, .input-xxlarge {
|
76
|
+
width: 100% !important;
|
77
|
+
padding-left: 0 !important;
|
78
|
+
padding-right: 0 !important;
|
79
|
+
}
|
80
|
+
|
81
|
+
input[type='checkbox'], input[type='radio'] {
|
82
|
+
width: auto !important;
|
83
|
+
}
|
84
|
+
}
|
85
|
+
|
86
|
+
&.stringish {
|
87
|
+
input, .input-xxlarge {
|
88
|
+
// changing box-sizing we have to correct height
|
89
|
+
-moz-box-sizing: border-box;
|
90
|
+
box-sizing: border-box;
|
91
|
+
height: 28px !important;
|
92
|
+
}
|
93
|
+
|
94
|
+
}
|
95
|
+
|
96
|
+
&.text {
|
97
|
+
textarea {
|
98
|
+
-moz-box-sizing: border-box;
|
99
|
+
box-sizing: border-box;
|
100
|
+
}
|
101
|
+
}
|
102
|
+
}
|
103
|
+
}
|
104
|
+
}
|
105
|
+
|
106
|
+
|
107
|
+
@media (min-width: 481px) and (max-width: 640px) {
|
108
|
+
.formtastic {
|
109
|
+
fieldset.inputs ol > li.input {
|
110
|
+
.input-xxlarge {
|
111
|
+
width: 300px !important;
|
112
|
+
}
|
113
|
+
}
|
114
|
+
}
|
115
|
+
}
|
116
|
+
|
117
|
+
// the xxlarge-input-field is too big for small desktops
|
118
|
+
@media (min-width: 768px) and (max-width: 979px) {
|
119
|
+
.formtastic {
|
120
|
+
fieldset.inputs ol > li.input {
|
121
|
+
.input-xxlarge {
|
122
|
+
width: 415px !important;
|
123
|
+
}
|
124
|
+
}
|
125
|
+
}
|
126
|
+
}
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: formtastic-plus-bootstrap
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.0
|
4
|
+
version: 1.1.0
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,11 +9,11 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2012-
|
12
|
+
date: 2012-07-17 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: railties
|
16
|
-
requirement: &
|
16
|
+
requirement: &15226480 !ruby/object:Gem::Requirement
|
17
17
|
none: false
|
18
18
|
requirements:
|
19
19
|
- - ! '>='
|
@@ -21,10 +21,10 @@ dependencies:
|
|
21
21
|
version: 3.1.0
|
22
22
|
type: :runtime
|
23
23
|
prerelease: false
|
24
|
-
version_requirements: *
|
24
|
+
version_requirements: *15226480
|
25
25
|
- !ruby/object:Gem::Dependency
|
26
26
|
name: sass-rails
|
27
|
-
requirement: &
|
27
|
+
requirement: &15225580 !ruby/object:Gem::Requirement
|
28
28
|
none: false
|
29
29
|
requirements:
|
30
30
|
- - ! '>='
|
@@ -32,10 +32,10 @@ dependencies:
|
|
32
32
|
version: '0'
|
33
33
|
type: :runtime
|
34
34
|
prerelease: false
|
35
|
-
version_requirements: *
|
35
|
+
version_requirements: *15225580
|
36
36
|
- !ruby/object:Gem::Dependency
|
37
37
|
name: bootstrap-sass
|
38
|
-
requirement: &
|
38
|
+
requirement: &15224440 !ruby/object:Gem::Requirement
|
39
39
|
none: false
|
40
40
|
requirements:
|
41
41
|
- - ~>
|
@@ -43,10 +43,10 @@ dependencies:
|
|
43
43
|
version: 2.0.3
|
44
44
|
type: :runtime
|
45
45
|
prerelease: false
|
46
|
-
version_requirements: *
|
46
|
+
version_requirements: *15224440
|
47
47
|
- !ruby/object:Gem::Dependency
|
48
48
|
name: formtastic
|
49
|
-
requirement: &
|
49
|
+
requirement: &15222960 !ruby/object:Gem::Requirement
|
50
50
|
none: false
|
51
51
|
requirements:
|
52
52
|
- - ~>
|
@@ -54,7 +54,7 @@ dependencies:
|
|
54
54
|
version: '2.2'
|
55
55
|
type: :runtime
|
56
56
|
prerelease: false
|
57
|
-
version_requirements: *
|
57
|
+
version_requirements: *15222960
|
58
58
|
description: formtastic-plus-bootstrap makes a formtastic form to look like a bootstrap
|
59
59
|
form.
|
60
60
|
email: antage@gmail.com
|
@@ -83,6 +83,7 @@ files:
|
|
83
83
|
- lib/assets/stylesheets/formtastic-plus-bootstrap/inputs/_select.scss
|
84
84
|
- lib/assets/stylesheets/formtastic-plus-bootstrap/inputs/_stringish.scss
|
85
85
|
- lib/assets/stylesheets/formtastic-plus-bootstrap/inputs/_text.scss
|
86
|
+
- lib/assets/stylesheets/formtastic-plus-bootstrap/responsive.css.scss
|
86
87
|
- lib/assets/stylesheets/bootstrap-without-forms.css.scss
|
87
88
|
- lib/formtastic-plus-bootstrap.rb
|
88
89
|
- README.md
|