picky-generators 4.2.4 → 4.3.0

Sign up to get free protection for your applications and to get access to all the features.
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
+ }