picky-generators 4.2.4 → 4.3.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.
Files changed (21) hide show
  1. data/prototypes/all_in_one/sinatra/app.rb +1 -7
  2. data/prototypes/all_in_one/sinatra/book.rb +10 -10
  3. data/prototypes/all_in_one/sinatra/images/picky.png +0 -0
  4. data/prototypes/all_in_one/sinatra/javascripts/picky.min.js +19 -17
  5. data/prototypes/all_in_one/sinatra/stylesheets/application.css +82 -18
  6. data/prototypes/all_in_one/sinatra/stylesheets/images/background.png +0 -0
  7. data/prototypes/all_in_one/sinatra/stylesheets/images/cancel.svg +10 -0
  8. data/prototypes/all_in_one/sinatra/stylesheets/picky.css +277 -135
  9. data/prototypes/all_in_one/sinatra/views/search.haml +232 -58
  10. data/prototypes/client/sinatra/app.rb +19 -30
  11. data/prototypes/client/sinatra/book.rb +9 -9
  12. data/prototypes/client/sinatra/images/picky.png +0 -0
  13. data/prototypes/client/sinatra/javascripts/picky.min.js +19 -17
  14. data/prototypes/client/sinatra/stylesheets/application.css +82 -18
  15. data/prototypes/client/sinatra/stylesheets/images/background.png +0 -0
  16. data/prototypes/client/sinatra/stylesheets/images/cancel.svg +10 -0
  17. data/prototypes/client/sinatra/stylesheets/picky.css +277 -135
  18. data/prototypes/client/sinatra/views/search.haml +232 -58
  19. metadata +14 -12
  20. data/prototypes/all_in_one/sinatra/views/configure.haml +0 -188
  21. data/prototypes/client/sinatra/views/configure.haml +0 -188
data/prototypes/all_in_one/sinatra/stylesheets/picky.css CHANGED
@@ -1,135 +1,277 @@
1
- #picky {
2
- overflow: hidden; }
3
- #picky > div.header {
4
- display: none; }
5
- #picky div.dashboard {
6
- position: relative;
7
- overflow: hidden;
8
- background-color: lightGrey;
9
- padding: 5px 5px 7px 5px;
10
- height: 26px;
11
- margin-bottom: 3px; }
12
- #picky div.dashboard.empty .status {
13
- background-color: #8cacda; }
14
- #picky div.dashboard.empty .feedback {
15
- background-color: #d0e2ff; }
16
- #picky div.dashboard.none .status {
17
- background-color: red; }
18
- #picky div.dashboard.none .feedback {
19
- background-color: #ffdddd; }
20
- #picky div.dashboard.support .status {
21
- background-color: #ff6600; }
22
- #picky div.dashboard.support .feedback {
23
- background-color: #faf3d0; }
24
- #picky div.dashboard.ok .status {
25
- background-color: #09be01; }
26
- #picky div.dashboard.ok .feedback {
27
- background-color: #bcf0b3; }
28
- #picky div.dashboard .feedback {
29
- width: 85%;
30
- float: left;
31
- border: 1px solid #cccccc;
32
- padding: 0;
33
- margin: 0; }
34
- #picky div.dashboard .feedback .status {
35
- float: left;
36
- width: 45px;
37
- height: 26px;
38
- line-height: 26px;
39
- text-align: center;
40
- padding: 0 0 0 2px;
41
- font-weight: bold;
42
- color: white;
43
- margin-right: 5px; }
44
- #picky div.dashboard .feedback .status.alert {
45
- background-color: lightgreen; }
46
- #picky div.dashboard .feedback input.query {
47
- float: left;
48
- width: 80%;
49
- height: 100%;
50
- font-size: 1em;
51
- font-weight: bold;
52
- border-style: solid;
53
- border-width: 0px 0px 3px 0px;
54
- border-color: transparent;
55
- margin: 0;
56
- padding: 4px 0 0 0;
57
- outline: none;
58
- background: none; }
59
- #picky div.dashboard .feedback .reset {
60
- float: right;
61
- width: 18px;
62
- height: 18px;
63
- margin: 3px 3px 0px 0px;
64
- cursor: pointer;
65
- opacity: 0; }
66
- #picky div.dashboard input.search_button {
67
- margin: 5px 0px 5px 2%; }
68
- #picky div.results {
69
- margin-top: 0px;
70
- padding: 0px; }
71
- #picky div.results div.header, #picky div.results div.addination {
72
- color: #555555;
73
- background-color: #eeeeee;
74
- padding: 6px 5px 5px 8px; }
75
- #picky div.results div.header .tothetop, #picky div.results div.addination .tothetop {
76
- float: right; }
77
- #picky div.results div.header .tothetop a, #picky div.results div.addination .tothetop a {
78
- display: block;
79
- width: 20px;
80
- height: 20px; }
81
- #picky div.results ol.results {
82
- list-style-type: none;
83
- padding: 0px;
84
- margin: 0px; }
85
- #picky div.results div.addination {
86
- position: relative;
87
- text-align: center;
88
- color: #276abb;
89
- cursor: pointer; }
90
- #picky .no_results {
91
- display: none; }
92
- #picky .allocations {
93
- clear: both;
94
- overflow: hidden;
95
- background-color: white;
96
- padding-bottom: 2px; }
97
- #picky .allocations ol.hidden {
98
- display: none; }
99
- #picky .allocations ol.more:hover {
100
- background-color: #cccccc;
101
- cursor: pointer; }
102
- #picky .allocations ol.more {
103
- background-color: #eeeeee;
104
- display: none;
105
- text-align: center;
106
- height: 32px;
107
- line-height: 32px; }
108
- #picky .allocations ol.more li {
109
- text-align: center; }
110
- #picky .allocations ol {
111
- list-style-position: outside;
112
- list-style: none;
113
- padding: 0;
114
- margin: 0px;
115
- overflow: hidden; }
116
- #picky .allocations ol li {
117
- margin: 0px;
118
- margin-bottom: 3px;
119
- padding: 10px 13px;
120
- cursor: pointer;
121
- display: block;
122
- font: menu;
123
- font-size: 1em;
124
- line-height: 16px;
125
- background-color: #f3f3f3;
126
- overflow: hidden;
127
- color: #276abb; }
128
- #picky .allocations ol li .text {
129
- max-width: 90%;
130
- float: left; }
131
- #picky .allocations ol li .count {
132
- float: right;
133
- color: #cccccc; }
134
- #picky .allocations ol li:hover {
135
- background-color: #d0e2ff; }
1
+ /* Form */
2
+ form
3
+ {
4
+ display: block;
5
+ position: relative;
6
+ height: 46px;
7
+ background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.08))), rgba(255,255,255,0.4);
8
+ background: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.08)), rgba(255,255,255,0.4);
9
+ border-radius: 99px;
10
+ box-shadow: inset 0 1px 0 rgba(0,0,0,0.08), inset 0 0 4px rgba(0,0,0,0.6), 0 0px 0 rgba(255,255,255,0.6);
11
+ -webkit-user-select: none;
12
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
13
+ }
14
+ form input[type=search],
15
+ form input[type=button],
16
+ form .status
17
+ {
18
+ height: 46px;
19
+ border: 1px solid #98989f;
20
+ -webkit-appearance: none;
21
+ border-radius: 99px;
22
+ box-shadow: inset 0 2px 4px rgba(0,0,0,0.12);
23
+ background: #fff;
24
+ line-height: 1;
25
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
26
+ -webkit-box-sizing: border-box;
27
+ -moz-box-sizing: border-box;
28
+ box-sizing: border-box;
29
+ }
30
+ form input[type=search] {
31
+ font-size: 30px;
32
+ z-index: 3;
33
+ display: block;
34
+ position: absolute;
35
+ margin: 0 0 0 2em;
36
+ padding: 0 8px 0 13px;
37
+ width: 526px;
38
+ }
39
+ form input[type=search]::-webkit-input-placeholder
40
+ {
41
+ color: #c0c0c8;
42
+ font-size: 30px;
43
+ line-height: 36px; /* Fixes placeholder vertical alignment in Chrome and Webkit Nightly (535.*) */
44
+ }
45
+ form input[type=search]:-moz-placeholder
46
+ {
47
+ color: #c0c0c8;
48
+ }
49
+ form input[type=search]:focus
50
+ {
51
+ outline: none;
52
+ border-color: #6e96c7;
53
+ box-shadow: inset 0 0 4px #6e96c7, inset 0 0 4px #6e96c7, 0 0 4px #6e96c7, 0 0 4px #6e96c7, inset 0 2px 4px rgba(0,0,0,0.16);
54
+ }
55
+ form input[type=search]::-webkit-search-cancel-button
56
+ {
57
+ z-index: 9;
58
+ position: absolute;
59
+ right: 6px;
60
+ top: 6px;
61
+ width: 32px;
62
+ height: 32px;
63
+ margin: 0;
64
+ padding: 0;
65
+ background: url(images/cancel.svg);
66
+ -webkit-appearance: none;
67
+ }
68
+ form input[type=search]::-webkit-search-cancel-button:active
69
+ {
70
+ background-position: 0 -32px;
71
+ }
72
+ form input[type=search]::-webkit-search-cancel-button
73
+ {
74
+ /* outline: 1px dashed red !important;*/
75
+ }
76
+ form input[type=button]
77
+ {
78
+ background: rgba(0,0,0,0.01);
79
+ font-size: 1.2em;
80
+ z-index: 2;
81
+ display: block;
82
+ position: absolute;
83
+ padding-right: 0.8em;
84
+ right: 0;
85
+ width: 130px;
86
+ color: #606068;
87
+ text-align: right;
88
+ text-shadow: 0 1px 0 rgba(255,255,255,0.8);
89
+ -webkit-transition: background 0.15s ease-in;
90
+ }
91
+ form input[type=button]:active
92
+ {
93
+ background: rgba(0,0,0,0.08);
94
+ -webkit-transition-duration: 0;
95
+ }
96
+ form .status {
97
+ background: rgba(0,0,0,0.0);
98
+ z-index: 2;
99
+ display: block;
100
+ position: absolute;
101
+ left: 0;
102
+ width: 100px;
103
+ line-height: 46px;
104
+ padding-right: 2em;
105
+ text-align: right;
106
+ font-size: 1.5em;
107
+ }
108
+ .picky form.empty .status {
109
+ background-color: hsl(215, 51%, 70%); }
110
+ .picky form.empty .feedback {
111
+ background-color: #d0e2ff; }
112
+ .picky form.none .status {
113
+ background-color: hsl(6, 51%, 70%); }
114
+ .picky form.none .feedback {
115
+ background-color: #ffdddd; }
116
+ .picky form.support .status {
117
+ background-color: hsl(29, 51%, 70%); }
118
+ .picky form.support .feedback {
119
+ background-color: #faf3d0; }
120
+ .picky form.ok .status {
121
+ background-color: hsl(82, 51%, 70%); }
122
+ .picky form.ok .feedback {
123
+ background-color: #bcf0b3; }
124
+ .picky form .feedback {
125
+ width: 85%;
126
+ float: left;
127
+ border: 1px solid #cccccc;
128
+ padding: 0;
129
+ margin: 0; }
130
+
131
+ /* To the top */
132
+ .picky .header .tothetop {
133
+ float: right;
134
+ }
135
+ .picky .header .tothetop a {
136
+ display: block;
137
+ width: 20px;
138
+ height: 20px;
139
+ text-align: center;
140
+ margin-left: 1em;
141
+ border-radius: 5px;
142
+ background-color: #EEE;
143
+ text-decoration: none;
144
+ font-size: 1em;
145
+ font-weight: bold;
146
+ color: #777;
147
+ }
148
+ .picky .header .tothetop a:hover {
149
+ background-color: white;
150
+ }
151
+
152
+ /* Addination */
153
+ .picky .addination {
154
+ line-height: 2em;
155
+ text-align: center;
156
+ cursor: pointer;
157
+ }
158
+ .picky .addination:hover {
159
+ background-color: #eee;
160
+ }
161
+
162
+ /* Allocations */
163
+ .picky .allocations ol {
164
+ margin-bottom: 10px;
165
+ }
166
+ .picky ol {
167
+ cursor: pointer;
168
+ list-style-type: none;
169
+ margin: 0;
170
+ padding: 0;
171
+ }
172
+ .picky li:hover {
173
+ background-color: #eee;
174
+ }
175
+ .picky ol.more,
176
+ .picky ol.hidden {
177
+ margin-top: 3px;
178
+ }
179
+ .picky .allocations ol.hidden {
180
+ display: none; }
181
+ .picky .allocations ol.more:hover {
182
+ background-color: #ccc;
183
+ cursor: pointer; }
184
+ .picky .allocations ol {
185
+ list-style-position: outside;
186
+ list-style: none;
187
+ padding: 0;}
188
+
189
+ .picky .allocations li {
190
+ font-size: 1.2em;
191
+ padding: 24px;
192
+ overflow: hidden;
193
+ border-bottom: 1px solid rgba(0,0,0,0.1);
194
+ }
195
+ .picky .allocations li:last-child {
196
+ border-bottom: 0px;
197
+ margin-bottom: 0;
198
+ }
199
+ .picky .allocations .text {
200
+ max-width: 90%;
201
+ float: left; }
202
+ .picky .allocations .count {
203
+ float: right;
204
+ color: #cccccc; }
205
+
206
+ .picky .results .header {
207
+ padding: 0.5em;
208
+ background-color: rgba(0, 0, 0, 0.04);
209
+ background: -webkit-gradient(radial, 0% 100%, 90, 0% 100%, 600, from(rgba(0, 0, 0, 0.02)), to(rgba(0, 0, 0, 0.1)));
210
+ text-align: right;
211
+ }
212
+ .picky .allocations,
213
+ .picky .no_results,
214
+ .picky .results,
215
+ .picky .more {
216
+ display: none;
217
+ margin: 0 1.5em;
218
+ padding: 0 0 0 0;
219
+ background-color: rgba(0, 0, 0, 0.02);
220
+ border-bottom-left-radius: 1em;
221
+ border-bottom-right-radius: 1em;
222
+ border-bottom: solid 1px #b8b8ba;
223
+ box-shadow: inset 0 1px 3px rgba(255,255,255,0), 0 1px 3px rgba(0,0,0,0.16);
224
+ }
225
+ .picky ol.more, .picky .no_results {
226
+ display: none;
227
+ }
228
+ .picky ol.more h3, .picky .no_results h3 {
229
+ margin: 0;
230
+ text-align: center;
231
+ }
232
+ .picky .allocations .more {
233
+ position: absolute;
234
+ font-weight: bold;
235
+ line-height: 1.1em;
236
+ padding: 0.2em 1em 0.4em;
237
+ margin: 0 16.5%;
238
+ -moz-border-radius-bottomleft: 20px;
239
+ -webkit-border-bottom-left-radius: 20px;
240
+ -o-border-bottom-left-radius: 20px;
241
+ -ms-border-bottom-left-radius: 20px;
242
+ -khtml-border-bottom-left-radius: 20px;
243
+ border-bottom-left-radius: 20px;
244
+ -moz-border-radius-bottomright: 20px;
245
+ -webkit-border-bottom-right-radius: 20px;
246
+ -o-border-bottom-right-radius: 20px;
247
+ -ms-border-bottom-right-radius: 20px;
248
+ -khtml-border-bottom-right-radius: 20px;
249
+ border-bottom-right-radius: 20px;
250
+ border-left-width: 1px;
251
+ border-right-width: 1px;
252
+ border-bottom-width: 2px;
253
+ }
254
+
255
+ /* Results */
256
+ .picky .results li {
257
+ margin: 0;
258
+ padding: 1em;
259
+ border-bottom: 1px solid #aaa;
260
+ }
261
+ .picky .results li:last-child {
262
+ border-bottom: 0px;
263
+ }
264
+ .picky .results li h3 {
265
+ margin-top: 0;
266
+ }
267
+ .picky .results li h3 a:link,
268
+ .picky .results li h3 a:visited {
269
+ color: black;
270
+ text-decoration: none;
271
+ }
272
+ .picky .results li h3 a:hover {
273
+ text-decoration: underline;
274
+ }
275
+ .picky .no_results {
276
+ padding: 1em;
277
+ }