togo 0.4.1 → 0.6.0

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