togo 0.4.1 → 0.6.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.
@@ -2,263 +2,402 @@
2
2
  outline: none;
3
3
  }
4
4
  body {
5
- font: 76% helvetica;
5
+ background: #fdfdfd;
6
+ font: 100% helvetica, arial, sans-serif;
7
+ margin: 0;
6
8
  padding: 0;
9
+ }
10
+ .error {
11
+ background: #800000 url(/img/button-bg-delete.png) repeat-x top left;
12
+ text-shadow: 0 1px 1px #710000;
13
+ border: 1px solid #a12f19;
14
+ -webkit-border-radius: 2px;
15
+ -moz-border-radius: 2px;
16
+ color: #FFF;
17
+ }
18
+ h3.error {
7
19
  margin: 0;
20
+ padding: 10px;
21
+ }
22
+ #container {
23
+ background: #f5f5f5;
8
24
  }
9
25
  #header {
10
- background: #4076c7 url(/img/bg-header.png) repeat-x top left;
11
- height: 24px;
26
+ background: #586069 url(/img/bg-header.png) repeat-x top left;
27
+ }
28
+ #header h1 {
29
+ font-size: 24px;
12
30
  color: #FFF;
13
- line-height: 24px;
14
- font-size: 18px;
15
- padding: 10px 20px;
16
- text-shadow: #1E1E1E 1px 1px 2px;
31
+ text-shadow: 1px 1px 1px #5e6a76;
32
+ font-weight: normal;
33
+ line-height: 60px;
34
+ margin: 0;
35
+ padding: 0 20px;
17
36
  }
18
- #nav {
19
- width: 200px;
37
+ #header #system-menu {
38
+ background: #353c42;
20
39
  position: absolute;
21
- left: 0;
22
- top: 44px;
23
- bottom: 0;
24
- overflow: auto;
25
- background: #FFF url(/img/bg-side.png) repeat-x bottom left;
40
+ top: 20px;
41
+ right: 20px;
42
+ width: 150px;
43
+ color: #FFF;
44
+ -webkit-border-radius: 3px;
45
+ -moz-border-radius: 3px;
46
+ padding: 5px;
47
+ font-size: 11px;
26
48
  }
27
- #nav ul {
49
+ #model-select {
50
+ font-size: 16px;
51
+ position: absolute;
52
+ left: 20px;
53
+ top: 45px;
54
+ background: #FFF;
55
+ z-index: 99;
56
+ -webkit-box-shadow: -2px 0 20px rgba(51,51,51,0.3);
57
+ -moz-box-shadow: -2px 0 20px rgba(51,51,51,0.3);
58
+ min-width: 200px;
59
+ display: none;
60
+ border: 1px solid #d4d2d2;
61
+ }
62
+ #model-select ul {
28
63
  margin: 0;
29
64
  padding: 0;
30
65
  }
31
- #nav ul li {
66
+ #model-select ul li {
67
+ list-style: none;
32
68
  margin: 0;
33
- padding: 0;
34
- list-style-type: none;
35
69
  }
36
- #nav ul li a {
37
- padding: 10px 20px;
38
- display: block;
39
- color: #000;
70
+ #model-select ul li a {
40
71
  text-decoration: none;
41
- border-bottom: 1px solid #CECECE;
42
- background: #FFF url(/img/bg-nav.png) repeat-x bottom left;
72
+ display: block;
73
+ padding: 10px;
74
+ color: #5e6a76;
75
+ font-weight: bold;
76
+ line-height: 16px;
43
77
  }
44
- #nav ul li a.selected,
45
- #nav ul li a:hover {
46
- background: #1E1E1E url(/img/bg-nav.png) repeat-x top left;
47
- color: #FFF;
48
- border-bottom: 1px solid #1E1E1E;
78
+ #model-select ul li a:hover {
79
+ background: #E8E8E8;
80
+ }
81
+ h1:hover > #model-select {
82
+ display: block;
83
+ }
84
+ #model-select:hover {
85
+ display: block;
49
86
  }
50
- #main {
87
+ #content {
88
+ background: #FFF;
51
89
  position: absolute;
52
- top: 44px;
90
+ top: 60px;
53
91
  left: 0;
54
92
  right: 0;
55
93
  bottom: 0;
56
- background: #F3F3F3;
57
- margin-left: 200px;
58
- border-left: 1px solid #323941;
59
94
  overflow: auto;
60
- }
61
- #main h1 {
62
- border-bottom: 1px solid #CECECE;
63
- background: #FFF url(/img/bg-headline.png) repeat-x bottom left;
64
- font-weight: normal;
65
- font-size: 24px;
66
- line-height: 36px;
67
- padding: 10px 20px;
95
+ border-left: 1px solid #d4d2d2;
96
+ font-size: 11px;
97
+ -webkit-box-shadow: -2px 0 20px rgba(51,51,51,0.3);
98
+ }
99
+ #content #subhead {
100
+ background: #e0e0e0 url(/img/subhead-bg.png) repeat-x top left;
101
+ border-bottom: 1px solid #d4d2d2;
102
+ padding-left: 20px;
103
+ }
104
+ #content #subhead h1 {
105
+ font-size: 17px;
106
+ padding: 0 20px;
107
+ line-height: 44px;
68
108
  margin: 0;
109
+ color: #5e6a76;
110
+ background-image: url(/img/arrow-down.png);
111
+ background-position: 91% 50%;
112
+ background-repeat: no-repeat;
113
+ border-right: 1px solid #d4d2d2;
114
+ border-left: 1px solid #d4d2d2;
115
+ display: inline-block;
116
+ line-height: 44px;
117
+ padding: 0 40px 0 10px;
118
+ }
119
+ #content #new-form #subhead h1,
120
+ #content #edit-form #subhead h1 {
121
+ background: transparent;
122
+ border: 0;
123
+ padding-left: 0;
69
124
  }
70
- #main #search-form {
71
- position: absolute;
72
- right: 0;
73
- z-index: 3;
74
- width: 220px;
75
- top: 0;
125
+ #content h1 a {
126
+ color: #61a801;
127
+ text-decoration: none;
76
128
  }
77
- #main #search-form fieldset {
78
- padding: 15px 0;
129
+ #content #subhead h1:hover {
130
+ cursor: pointer;
131
+ background-color: #FFF;
79
132
  }
80
- #main #search-form input[type=text] {
81
- width: 190px;
133
+ #content div.list-table-wrapper {
134
+ margin-top: 20px;
135
+ padding: 1px;
136
+ background: #d4d2d2;
137
+ -webkit-border-radius: 3px;
138
+ -moz-border-radius: 3px;
139
+ clear: both;
82
140
  }
83
- #main #paging {
84
- position: absolute;
85
- right: 240px;
86
- z-index: 3;
87
- top: 22px;
141
+ #content table {
142
+ width: 100%;
143
+ border: 3px solid #f1f1f1;
144
+ border-bottom: 2px solid #f1f1f1;
145
+ -webkit-border-radius: 3px;
146
+ -moz-border-radius: 3px;
147
+ }
148
+ #content table th {
149
+ text-align: left;
150
+ padding: 5px 10px;
151
+ font-size: 13px;
152
+ background: #f1f1f1;
88
153
  }
89
- #main h1 a {
154
+ #content table th a {
155
+ color: #393939;
90
156
  text-decoration: none;
91
- color: #4076c7;
157
+ padding-right: 15px;
92
158
  }
93
- #main table, #main form {
94
- width: 100%;
159
+ #content table th a.desc {
160
+ background: transparent url(/img/arrows.png) no-repeat 2px right;
95
161
  }
96
- #main table {
97
- border-collapse: collapse;
162
+ #content table th a.asc {
163
+ background: transparent url(/img/arrows.png) no-repeat right -16px;
164
+ }
165
+ #content table td {
166
+ padding: 10px;
167
+ color: #393939;
168
+ border-bottom: 1px solid #eaeaf4;
169
+ background: #FFF;
98
170
  }
99
- #main table a {
100
- color: #000;
171
+ #content table td a {
101
172
  text-decoration: none;
173
+ color: #393939;
174
+ text-decoration: none;
175
+ font-weight: bold;
102
176
  }
103
- #main table th {
104
- text-align: left;
105
- padding: 10px 20px;
106
- background: #1E1E1E url(/img/bg-nav.png) repeat-x top left;
107
- color: #FFF;
177
+ #content table a:hover {
178
+ color: #61a801;
108
179
  }
109
- #main table td {
110
- padding: 10px 20px;
111
- border-bottom: 1px solid #CECECE;
112
- background: #FFF;
180
+ #content table td span.address {
181
+ display: block;
182
+ color: #5b5b5b;
183
+ }
184
+ #content table tr.disabled td {
185
+ color: #888;
186
+ background: transparent url(/img/disabled.png);
113
187
  }
114
- #main table td.checkbox,
115
- #main table th.checkbox {
116
- width: 10px;
188
+ #content table tr.disabled td span.address,
189
+ #content table tr.disabled td a {
190
+ color: #888;
191
+ }
192
+ #content table td.checkbox {
117
193
  text-align: center;
118
- padding-right: 0;
194
+ padding: 5px 0 5px 10px;
195
+ width: 20px;
119
196
  }
120
-
121
- #main .wrapper {
197
+ #content div.actions {
198
+ background: #ccc url(/img/footer-bg.png) repeat-x top left;
122
199
  position: absolute;
123
- top: 57px;
124
- bottom: 47px;
125
- right: 0;
126
200
  left: 0;
201
+ right: 0;
202
+ bottom: 0;
203
+ height: 31px;
127
204
  overflow: auto;
205
+ border-top: 1px solid #FFF;
206
+ padding: 10px 20px;
207
+ text-align: right;
208
+ }
209
+ #content div.actions button {
210
+ border: 1px solid #549300;
211
+ background: #61a801 url(/img/button-bg-save.png) repeat-x top left;
212
+ -webkit-border-radius: 4px;
213
+ -moz-border-radius: 4px;
214
+ padding: 5px 10px;
215
+ font-size: 13px;
216
+ font-weight: bold;
217
+ text-shadow: 0 1px 1px #538A00;
218
+ color: #FFF;
128
219
  }
129
- #main form .wrapper {
130
- padding-top: 20px;
220
+ #content div.actions button:hover {
221
+ background: #69b802 url(/img/button-bg-save.png) repeat-x -30px left;
222
+ text-shadow: 0 1px 1px #538A00;
223
+ cursor: pointer;
131
224
  }
132
- #main .wrapper .errors {
133
- padding: 0 20px 10px 20px;
134
- color: #F00;
225
+ #content div.actions button#delete-button {
226
+ background: #800000 url(/img/button-bg-delete.png) repeat-x top left;
227
+ text-shadow: 0 1px 1px #710000;
228
+ border: 1px solid #a12f19;
135
229
  }
136
- #main form fieldset {
137
- border: none;
138
- padding: 0 30px 20px 20px;
139
- margin: 0;
230
+ #content div.actions button#delete-button:disabled {
231
+ color: #888;
232
+ background: #EFEFEF;
233
+ border: 1px solid #BBB;
234
+ text-shadow: none;
140
235
  }
141
- #main form fieldset label {
142
- display: block;
143
- font-weight: bold;
144
- padding: 0 0 6px 0;
236
+ #content div.actions button#delete-button:hover {
237
+ background: #910000 url(/img/button-bg-delete.png) repeat-x -30px left;
238
+ text-shadow: 0 1px 1px #A12F19;
145
239
  }
146
- #main form fieldset label.inline {
240
+ #content div.actions button#delete-button:disabled:hover {
241
+ background: #EFEFEF;
242
+ cursor: text;
243
+ text-shadow: none;
244
+ }
245
+
246
+ #content div.actions form {
147
247
  display: inline;
148
- font-weight: normal;
149
248
  }
150
- #main form fieldset textarea,
151
- #main form fieldset input[type=text] {
152
- border: 1px solid #CECECE;
153
- width: 100%;
154
- padding: 5px;
249
+ #content div.actions div.filter {
250
+ float: left;
251
+ line-height: 31px;
252
+ }
253
+
254
+ #content #main {
255
+ padding: 20px;
256
+ position: absolute;
257
+ top: 44px;
258
+ left: 0;
259
+ right: 0;
260
+ bottom: 52px;
261
+ overflow: auto;
155
262
  }
156
- #main form fieldset textarea:focus,
157
- #main form fieldset input[type=text]:focus {
158
- border: 1px solid #ABABAB;
263
+ #account #content #main {
264
+ bottom: 0;
159
265
  }
160
- #main form fieldset.many_to_many,
161
- #main form fieldset.belongs_to,
162
- #main form fieldset.has_n {
163
- padding-right: 20px;
266
+
267
+ #content #main fieldset {
268
+ border: 0;
269
+ padding: 10px 20px 10px 0;
164
270
  }
165
- #main form fieldset.many_to_many input[type=text],
166
- #main form fieldset.belongs_to input[type=text],
167
- #main form fieldset.has_n input[type=text] {
168
- width: 190px;
271
+ #content #main fieldset label {
272
+ font-size: 13px;
273
+ font-weight: bold;
274
+ color: #515151;
275
+ display: block;
276
+ padding-bottom: 10px;
169
277
  }
170
- #main form fieldset.many_to_many label,
171
- #main form fieldset.belongs_to label,
172
- #main form fieldset.has_n label {
173
- float: left;
278
+ #content #main fieldset label.inline {
279
+ display: inline;
280
+ font-weight: normal;
174
281
  }
175
- #main form fieldset.many_to_many div.search,
176
- #main form fieldset.belongs_to div.search,
177
- #main form fieldset.has_n div.search {
178
- display: none;
282
+ #content #main fieldset textarea,
283
+ #content #main fieldset input[type=password],
284
+ #content #main fieldset input[type=text] {
285
+ border: 1px solid #d4d2d2;
286
+ border-top: 2px solid #CCC;
287
+ border-left: 2px solid #CCC;
288
+ background: #f9f9f9;
289
+ padding: 7px;
179
290
  width: 100%;
180
- text-align: right;
291
+ margin-right: 20px;
292
+ font-size: 13px;
293
+ }
294
+ #content #main fieldset input[type=text].half-left {
295
+ width: 44%;
181
296
  }
182
- #main form fieldset.many_to_many div.paging,
183
- #main form fieldset.belongs_to div.paging,
184
- #main form fieldset.has_n div.paging {
297
+ #content #main fieldset input[type=text].half-right {
185
298
  float: right;
186
- margin-left: 10px;
187
- line-height: 30px;
299
+ width: 48%;
300
+ margin-right: -15px;
301
+ }
302
+ #content #main div.paging {
303
+ border: 1px solid #d4d2d2;
304
+ background: #f1f1f1;
305
+ padding: 15px;
306
+ color: #888;
307
+ font-weight: bold;
308
+ -webkit-border-radius: 3px;
309
+ -moz-border-radius: 3px;
310
+ position: relative;
311
+ text-align: right;
188
312
  }
189
- #main form fieldset.many_to_many .checkbox,
190
- #main form fieldset.belongs_to .checkbox,
191
- #main form fieldset.has_n .checkbox {
192
- display: none;
313
+ #content #main div.paging a {
314
+ color: #61a801;
193
315
  }
194
- #main form fieldset.many_to_many .active,
195
- #main form fieldset.belongs_to .active,
196
- #main form fieldset.has_n .active {
197
- display: table-cell;
316
+
317
+ #content #main div.paging form {
318
+ position: absolute;
319
+ top: 9px;
320
+ left: 12px;
321
+ text-align: right;
322
+ padding: 0;
198
323
  }
199
- #main form fieldset table th,
200
- #main form fieldset table td {
201
- padding: 5px;
324
+ #content #main div.paging form fieldset {
325
+ padding: 0;
326
+ margin: 0;
202
327
  }
203
- #main form fieldset table tfoot td {
204
- background: #DDD;
328
+ #content #main div.paging form input {
329
+ width: 200px;
330
+ padding: 3px;
331
+ font-size: 11px;
205
332
  }
206
- #main form fieldset table tfoot td button {
207
- float: right;
333
+ h2 {
334
+ font-size: 24px;
335
+ color: #5e6a76;
336
+ font-weight: bold;
208
337
  }
209
- div.actions {
210
- position: absolute;
211
- bottom: 0;
212
- right: 0;
213
- left: 0;
214
- z-index: 3;
215
- background: #888;
216
- text-align: right;
217
- height: 46px;
218
- border-top: 1px solid #323941;
219
- }
220
- div.actions button,
221
- div.actions a {
222
- width: 80px;
223
- height: 22px;
224
- color: #111;
225
- text-align: center;
226
- border: 0;
227
- cursor: pointer;
228
- background: transparent url(/img/btn-bg.png) repeat-x top left;
229
- font: 12px "Lucida Grande", verdana;
230
- position: absolute;
231
- top: 12px;
232
- line-height: 22px;
233
- right: 10px;
338
+ .account-item {
339
+ font-size: 24px;
340
+ color: #888;
341
+ background: #EFEFEF;
342
+ border: 1px solid #d4d2d2;
343
+ padding: 15px;
344
+ margin: 10px 0 20px 0;
345
+ }
346
+ #content #main fieldset.many_to_many,
347
+ #content #main fieldset.belongs_to,
348
+ #content #main fieldset.has_n {
349
+ padding-right: 2px;
350
+ }
351
+ #content #main fieldset.many_to_many input[type=text],
352
+ #content #main fieldset.belongs_to input[type=text],
353
+ #content #main fieldset.has_n input[type=text] {
354
+ width: 190px;
234
355
  }
235
- div.actions a {
236
- line-height: 23px;
237
- display: block;
238
- text-decoration: none;
239
- overflow: hidden;
356
+ #content #main fieldset.many_to_many div.search,
357
+ #content #main fieldset.belongs_to div.search,
358
+ #content #main fieldset.has_n div.search {
359
+ display: none;
240
360
  }
241
- div.actions button {
242
- font: 12px "Lucida Grande", verdana;
361
+ #content #main fieldset div.paging {
362
+ margin-bottom: 17px;
243
363
  }
244
- div.actions button:hover,
245
- div.actions a:hover {
246
- background: transparent url(/img/btn-bg.png) repeat-x left -22px;
364
+ #content #main fieldset.many_to_many div.paging input,
365
+ #content #main fieldset.belongs_to div.paging input,
366
+ #content #main fieldset.has_n div.paging input {
367
+ position: absolute;
368
+ top: 9px;
369
+ left: 12px;
370
+ padding: 0;
371
+ width: 200px;
372
+ padding: 3px;
373
+ font-size: 11px;
247
374
  }
248
- div.actions button:disabled {
249
- color: #999;
375
+ #content #main fieldset.many_to_many .checkbox,
376
+ #content #main fieldset.belongs_to .checkbox,
377
+ #content #main fieldset.has_n .checkbox {
378
+ display: none;
379
+ padding: 10px 0 10px 5px;
250
380
  }
251
- div.actions button:disabled:hover {
252
- cursor: text;
253
- background: transparent url(/img/btn-bg.png) repeat-x top left;
381
+ #content #main fieldset.many_to_many th.checkbox,
382
+ #content #main fieldset.belongs_to th.checkbox,
383
+ #content #main fieldset.has_n th.checkbox {
384
+ padding: 0;
254
385
  }
255
- div.actions button#delete-button {
256
- right: 100px;
386
+ #content #main fieldset.many_to_many .active,
387
+ #content #main fieldset.belongs_to .active,
388
+ #content #main fieldset.has_n .active {
389
+ display: table-cell;
257
390
  }
258
- div.external {
259
- right: 100px;
260
- background: transparent;
391
+ #content #main fieldset table tfoot td {
392
+ background: #f1f1f1;
393
+ border-bottom: none;
394
+ padding: 5px;
261
395
  }
262
- div.external button#delete-button {
263
- right: 0;
396
+ #content #main fieldset table tfoot td button {
397
+ float: right;
398
+ }
399
+ #content #main fieldset.many_to_many div.list-table-wrapper,
400
+ #content #main fieldset.belongs_to div.list-table-wrapper,
401
+ #content #main fieldset.has_n div.list-table-wrapper {
402
+ margin-top: 3px;
264
403
  }
@@ -1,35 +1,34 @@
1
- var hasModified = false;
1
+ var modifiedFields = {};
2
2
  function saveBeforeLeaving(e) {
3
- return 'You have made changes to this item. Are you sure you want to leave before saving?';
3
+ var str = 'You have made changes to this item. Are you sure you want to leave before saving?';
4
+ e = e || window.event;
5
+ e.returnValue = str;
6
+ return str;
4
7
  }
5
- function checkForModifiedText(e) {
6
- if ((e.target.nodeName == 'INPUT' && e.target.getAttribute('type') == 'text') ||
7
- e.target.nodeName == 'TEXTAREA') {
8
- console.log('modified');
9
- hasModified = (e.target.value != e.target.defaultValue);
10
- setBeforeLeaving();
11
- }
12
- }
13
- function checkForModifiedInputs(e) {
14
- if (e.target.nodeName == 'SELECT' ||
15
- (e.target.nodeName == 'INPUT' && e.target.getAttribute('type') == 'checkbox') ||
16
- (e.target.nodeName == 'INPUT' && e.target.getAttribute('type') == 'radio')) {
17
- console.log('modified');
18
- hasModified = true;
8
+ function checkForModified(e) {
9
+ var nodeName = e.target.nodeName, type = e.target.getAttribute('type');
10
+ if (!type) { return; }
11
+ var isText = (nodeName == 'INPUT' && type == 'text') || nodeName.match(/TEXTAREA|SELECT/);
12
+ var isToggle = type.match(/checkbox|radio/) != null;
13
+ if (isText || isToggle) {
14
+ var k = e.target.getAttribute('id') || e.target.getAttribute('name');
15
+ modifiedFields[k] = (isToggle || (e.target.value != e.target.defaultValue));
19
16
  setBeforeLeaving();
20
17
  }
21
18
  }
22
19
  function setBeforeLeaving() {
23
- if (hasModified) {
24
- listen('beforeunload', window, saveBeforeLeaving);
25
- } else {
26
- unlisten('beforeunload', window, saveBeforeLeaving);
20
+ for (k in modifiedFields) {
21
+ if (modifiedFields[k]) {
22
+ window.onbeforeunload = saveBeforeLeaving;
23
+ return;
24
+ }
27
25
  }
26
+ window.onbeforeunload = function() { };
28
27
  }
29
28
 
30
- listen('keyup', window, checkForModifiedText);
31
- listen('click', window, checkForModifiedInputs);
29
+ listen('keyup', document, checkForModified);
30
+ listen('click', document, checkForModified);
32
31
  listen('submit', el('edit-form'), function() {
33
- hasModified = false;
32
+ modifiedFields = {};
34
33
  setBeforeLeaving();
35
- });
34
+ });