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`?
@@ -50,3 +50,5 @@
50
50
 
51
51
  // Utility classes
52
52
  @import "bootstrap/utilities"; // Has to be last to override when necessary
53
+
54
+ @import "bootstrap-responsive";
@@ -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.3
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-06-06 00:00:00.000000000 Z
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: &5377580 !ruby/object:Gem::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: *5377580
24
+ version_requirements: *15226480
25
25
  - !ruby/object:Gem::Dependency
26
26
  name: sass-rails
27
- requirement: &5376840 !ruby/object:Gem::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: *5376840
35
+ version_requirements: *15225580
36
36
  - !ruby/object:Gem::Dependency
37
37
  name: bootstrap-sass
38
- requirement: &5375600 !ruby/object:Gem::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: *5375600
46
+ version_requirements: *15224440
47
47
  - !ruby/object:Gem::Dependency
48
48
  name: formtastic
49
- requirement: &5374120 !ruby/object:Gem::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: *5374120
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