erd 0.1.6 → 0.2.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.
@@ -1,3 +1,136 @@
1
+ // colors
2
+
3
+ $black: #444444;
4
+ $white: white;
5
+ $yellow: #fffebe;
6
+ $background-color: #3aade3;
7
+
8
+ // prefix
9
+
10
+ $set_prefix: -webkit-, -moz-, -ms-, -o-, "";
11
+
12
+ // mixins
13
+
14
+ @mixin border-radius($br_value: 3px) {
15
+ @each $prefix in $set_prefix {
16
+ #{$prefix}border-radius: $br_value;
17
+ }
18
+ }
19
+
20
+ @mixin box-shadow($shadow: default) {
21
+ @each $prefix in $set_prefix {
22
+ #{$prefix}box-shadow: $shadow;
23
+ }
24
+ }
25
+
26
+ @mixin graduent($color: $white) {
27
+ @each $prefix in $set_prefix {
28
+ background: #{$prefix}linear-gradient(top, $color 0%, $color - 30 88%);
29
+ }
30
+ }
31
+
32
+ @mixin inline-block {
33
+ display: -moz-inline-stack;
34
+ display: inline-block;
35
+ vertical-align: middle;
36
+ *vertical-align: auto;
37
+ zoom: 1;
38
+ *display: inline;
39
+ }
40
+
41
+ @mixin box {
42
+ @each $prefix in $set_prefix {
43
+ display: #{$prefix}box;
44
+ }
45
+ }
46
+
47
+ @mixin box-sizing {
48
+ @each $prefix in $set_prefix {
49
+ #{$prefix}box-sizing: content-box;
50
+ }
51
+ }
52
+
53
+ @mixin box-flex($bf_value: 1) {
54
+ @each $prefix in $set_prefix {
55
+ #{$prefix}box-flex: $bf_value;
56
+ }
57
+ }
58
+
59
+ @mixin silver-graduent {
60
+ @include graduent(#eeeeee);
61
+ }
62
+
63
+ @mixin blue-graduent {
64
+ @include graduent(#b9e0f5);
65
+ }
66
+
67
+ @mixin active-migration {
68
+ height: auto;
69
+ background: $white;
70
+ * {
71
+ font-size: small;
72
+ height: auto;
73
+ overflow: auto;
74
+ }
75
+ td {
76
+ padding: 4px 0.8em;
77
+ }
78
+ input {
79
+ @include inline-block;
80
+ }
81
+ }
82
+
83
+ @mixin table-header {
84
+ @include silver-graduent;
85
+ font: {
86
+ size: 13px;
87
+ weight: bold;
88
+ };
89
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
90
+ line-height: 2.2;
91
+ padding: 0 0.8em;
92
+ }
93
+
94
+ @mixin column_type_text_color($color: #999999) {
95
+ border-color: $color;
96
+ background: desaturate(lighten($color, 30%), 20%);
97
+ color: $black;
98
+ border-style: solid;
99
+ &:hover {
100
+ border-color: darken($color, 10%);
101
+ background: darken(desaturate(lighten($color, 30%), 20%), 10%);
102
+ }
103
+ }
104
+
105
+ @mixin unsaved {
106
+ background: $yellow;
107
+ position: relative;
108
+ &:before {
109
+ content: "!";
110
+ display: block;
111
+ position: absolute;
112
+ width: 18px;
113
+ height: 18px;
114
+ background: #ec7500;
115
+ left: -14px;
116
+ top: 6px;
117
+ text-align: center;
118
+ line-height: 18px;
119
+ color: $white;
120
+ @include border-radius(100px);
121
+ @include box-shadow(rgba(0, 0, 0, 0.4) 0px 1px 1px);
122
+ font: {
123
+ size: 12px;
124
+ family: Arial, sans-serif;
125
+ };
126
+ }
127
+ &:hover {
128
+ background: $yellow - 6;
129
+ }
130
+ }
131
+
132
+ // reset
133
+
1
134
  html, body, p, ul, ol, dl, p, li, dt, dd, tr, td, form {
2
135
  margin: 0;
3
136
  padding: 0;
@@ -7,28 +140,108 @@ li {
7
140
  list-style-type: none;
8
141
  }
9
142
 
143
+ // design
144
+
145
+ .cancel {
146
+ display: block;
147
+ margin: 0.4em auto 0;
148
+ background: rgba(0, 0, 0, 0.4);
149
+ font-size: 12px;
150
+ width: 70px;
151
+ @include border-radius(4px);
152
+ text-decoration: none;
153
+ line-height: 1.8;
154
+ text-align: center;
155
+ color: $white;
156
+ position: relative;
157
+ padding: 2px 0 0 8px;
158
+ text-shadow: none;
159
+ &:hover {
160
+ background: rgba(0, 0, 0, 0.6);
161
+ }
162
+ &:before {
163
+ content: "";
164
+ display: block;
165
+ height: 10px;
166
+ width: 10px;
167
+ position: absolute;
168
+ left: 8px;
169
+ top: 6px;
170
+ background: {
171
+ image: image_url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTExMTA1MjMzRUMxMTFFMkJDNjQ4QUM5N0I1ODJDNUMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTExMTA1MjQzRUMxMTFFMkJDNjQ4QUM5N0I1ODJDNUMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1MTExMDUyMTNFQzExMUUyQkM2NDhBQzk3QjU4MkM1QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1MTExMDUyMjNFQzExMUUyQkM2NDhBQzk3QjU4MkM1QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pjsg+BcAAADiSURBVHjavNaBDcIgEADAtnEBVnCFruAKrkBHcBZdwRFcQVfREV5QSID24Z9//eRTCuQvbcKHEQCGf8RUvFuXs1LtvJb/opAWvvF0OSfzPbmqFReOkIcEsxu1TFw0Lu8KWIlAmMt+nRRDkRKSYFVkC+rBmggGcTASUoMoGBlpQTXsxEEoEIaxECrUwiylxkTsWy+XV2T+QaogOIysQ92L3LiYpK2cOZiorXAwCcLCpAgZ00BImBbSxOKGgwJSw/bYBiu8nKS1/HjYJU1iCU/fUi7Cq9ZSjscfXiBN6IWfeAswAPwFJ+lOAhBOAAAAAElFTkSuQmCC");
172
+ size: 10px 10px;
173
+ position: center center;
174
+ };
175
+ }
176
+ }
177
+
10
178
  #erd_box {
11
- display: -webkit-box;
12
- display: -moz-box;
13
- display: box;
179
+ @include box;
14
180
  }
181
+
15
182
  #erd_container {
16
- -webkit-box-flex: 1;
17
- -moz-box-flex: 1;
18
- box-flex: 1;
183
+ @include box-flex;
19
184
  }
20
- @mixin table-header {
21
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0.88, #aaa), color-stop(0.00, #eee));
22
- background: -webkit-linear-gradient(top, #eee 0%, #aaa 88%);
23
- background: -moz-linear-gradient(top, #eee 0%, #aaa 88%);
24
- background: -o-linear-gradient(top, #eee 0%, #aaa 88%);
25
- background: -ms-linear-gradient(top, #eee 0%, #aaa 88%);
26
- background: linear-gradient(to bottom, #eee 0%, #aaa 88%);
27
- font-weight: normal;
185
+
186
+ #open_migration,
187
+ #close_migration {
188
+ position: fixed;
189
+ top: 0;
190
+ background: rgba(0, 0, 0, 0.6);
191
+ width: 80px;
192
+ text-align: center;
193
+ color: $white;
194
+ cursor: pointer;
195
+ z-index: 5;
196
+ &:hover {
197
+ background: rgba(0, 0, 0, 0.8);
198
+ }
199
+ img {
200
+ width: 16px;
201
+ height: 27px;
202
+ display: block;
203
+ margin: 16px auto;
204
+ }
28
205
  }
29
206
 
207
+ #open_migration {
208
+ right: 15px;
209
+ }
210
+ #migrate_form {
211
+ position: relative;
212
+ #open_buttons {
213
+ position: absolute;
214
+ right: 0;
215
+ top: 0;
216
+ li {
217
+ @include inline-block;
218
+ }
219
+ }
220
+ }
221
+
222
+
30
223
  #migration {
224
+ padding: 10px 10px;
225
+ min-width: 500px;
226
+ overflow-x: auto;
227
+ @include box-sizing;
228
+ position: relative;
229
+ display: none;
230
+ table,
231
+ th,
232
+ td {
233
+ border: 1px $black solid;
234
+ border-collapse: collapse;
235
+ }
31
236
  table {
237
+ width: 100%;
238
+ margin: 0 0 0.6em;
239
+ caption {
240
+ font: {
241
+ weight: bold;
242
+ };
243
+ margin: 0 0 0.5em;
244
+ }
32
245
  thead {
33
246
  td {
34
247
  text-align: center;
@@ -38,54 +251,69 @@ li {
38
251
  }
39
252
  }
40
253
  td {
41
- font-size: small;
254
+ font-size: 12px;
255
+ padding: 2px 0.8em;
256
+ line-height: 1.4;
257
+ &.migrations {
258
+ background: $black;
259
+ color: $white;
260
+ }
261
+ &.migration_file_name {
262
+ white-space: normal !important;
263
+ word-break: break-all;
264
+ -ms-word-wrap: break-word;
265
+ max-width: 200px;
266
+ }
42
267
  }
43
268
  th {
44
269
  @include table-header;
270
+ &.status {
271
+ width: 60px;
272
+ }
273
+ &.version {
274
+ width: 140px;
275
+ }
45
276
  }
46
277
  }
47
- }
48
-
49
- @mixin active-migration {
50
- height: auto;
51
- * {
52
- font-size: small;
53
- height: auto;
54
- overflow: auto;
55
- }
56
- input {
57
- display: inline-block;
278
+ #changes_form {
279
+ margin: 0 0 20px;
58
280
  }
59
281
  }
60
282
 
61
283
  #migration_status {
62
284
  width: 386px;
63
- td.migration_file_name {
64
- word-break: break-all;
65
- }
66
- td label {
67
- white-space: nowrap;
285
+ td {
286
+ &.migration_file_name {
287
+ word-break: break-all;
288
+ }
289
+ label {
290
+ white-space: nowrap;
291
+ }
68
292
  }
69
-
70
- tr.up {
71
- font-size: 0;
72
- height: 1px;
73
- overflow: hidden;
74
- * {
293
+ tr {
294
+ &.up,
295
+ &.down {
75
296
  font-size: 0;
76
- height: 1px;
297
+ height: 2px;
77
298
  overflow: hidden;
78
- }
79
- input {
80
- display: none;
81
- }
82
- &:hover,&.active {
83
- @include active-migration;
299
+ * {
300
+ font-size: 0;
301
+ overflow: hidden;
302
+ }
303
+ input {
304
+ display: none;
305
+ }
306
+ &:hover,&.active,&.open {
307
+ @include active-migration;
308
+ }
309
+ &.active {
310
+ background: $yellow;
311
+ }
84
312
  }
85
313
  }
86
-
87
314
  &.show_all_migrations {
88
- tr.up {
315
+ .up,
316
+ .down {
89
317
  @include active-migration;
90
318
  }
91
319
  }
@@ -94,99 +322,173 @@ li {
94
322
  #erd {
95
323
  overflow: auto;
96
324
  position: relative;
97
-
325
+ background-color: $background-color;
326
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTExMTA1MUYzRUMxMTFFMkJDNjQ4QUM5N0I1ODJDNUMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTExMTA1MjAzRUMxMTFFMkJDNjQ4QUM5N0I1ODJDNUMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDNEZGNDMzQTNFQUExMUUyQkM2NDhBQzk3QjU4MkM1QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1MTExMDUxRTNFQzExMUUyQkM2NDhBQzk3QjU4MkM1QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PolLCroAAAAhSURBVHjaYvj//78KEDMQwkwMRIJRhXgBC5RWIaQQIMAA1wEePzIPm4IAAAAASUVORK5CYII=);
98
327
  form {
99
- * {
100
- float: left;
101
- }
102
328
  display: none;
103
329
  }
104
-
105
- div.model {
330
+ .model {
331
+ background-color: $white;
106
332
  position: absolute;
107
- border: 1px #000 solid;
333
+ border: 1px $black solid;
108
334
  cursor: move;
109
-
110
- a.close {
111
- position:absolute;
112
- top:-6px;
113
- right:-6px;
114
- z-index:5;
115
- vertical-align:middle;
116
- line-height: 13px;
117
- font-family:Arial, sans-serif;
118
- text-decoration:none;
119
- font-weight:normal;
120
- background-color:#eee;
121
- border:1px solid #500;
122
- color:#500;
123
- display:block;
124
- width:16px;
125
- height:16px;
126
- text-align:center;
127
- border-radius: 8px;
128
- }
129
- div.add_column_box {
130
- text-align: center;
131
- margin: 0 5px 0 5px;
132
-
133
- a.add_column {
134
- font-size: small;
135
- }
335
+ z-index: 1;
336
+ &:hover {
337
+ @include box-shadow(rgba(0, 0, 0, 0.7) 0 2px 2px);
136
338
  }
137
-
138
- div.model_name {
139
- border-bottom: 1px #000 solid;
339
+ .model_name {
340
+ border-bottom: 1px $black solid;
140
341
  cursor: pointer;
141
342
  margin: 1px 5px 0 5px auto;
142
- div.model_name_text {
343
+ .model_name_text {
143
344
  text-align: center;
345
+ display: block;
144
346
  @include table-header;
347
+ &.unsaved {
348
+ background: $yellow;
349
+ position: relative;
350
+ @include unsaved;
351
+ }
352
+ }
353
+ form {
354
+ @include table-header;
355
+ padding: 8px;
356
+ }
357
+ & > div.model_name_text:hover {
358
+ @include blue-graduent;
145
359
  }
146
360
  }
147
- div.model_name > div.model_name_text:hover {
148
- text-decoration: underline;
361
+ a.close {
362
+ position: absolute;
363
+ top: -6px;
364
+ right: -6px;
365
+ z-index: 2;
366
+ background-color: $black;
367
+ border: 1px solid $black;
368
+ display: block;
369
+ width: 16px;
370
+ height: 13px;
371
+ text-align: center;
372
+ @include border-radius(9px);
373
+ padding: 3px 0 0;
374
+ &:hover {
375
+ background: $black + 50;
376
+ }
377
+ img {
378
+ width: 10px;
379
+ height: 10px;
380
+ display: block;
381
+ margin: 0 auto;
382
+ }
149
383
  }
384
+ }
385
+ }
150
386
 
151
- form.rename_model_form, form.rename_column_form, form.alter_column_form {
152
- width: 150px;
153
- input[name=to] {
154
- width: 65%;
155
- }
156
- input[type=submit] {
157
- width: 25%;
387
+ .add_column_box {
388
+ text-align: center;
389
+ a.add_column {
390
+ font-size: small;
391
+ display: block;
392
+ padding: 0 5px;
393
+ line-height: 2;
394
+ background: $black;
395
+ color: $white;
396
+ text: {
397
+ decoration: none;
398
+ };
399
+ &:hover {
400
+ background: $black - 10;
401
+ }
402
+ }
403
+ }
404
+
405
+ .add_column_form {
406
+ background: $black;
407
+ color: $white;
408
+ padding: 8px;
409
+ }
410
+
411
+ .columns {
412
+ .column {
413
+ border-bottom: dotted 1px #cccccc;
414
+ padding: 0 0.8em;
415
+ clear: both;
416
+ line-height: 28px;
417
+ font-size: 14px;
418
+ table {
419
+ width: 100%;
420
+ }
421
+ &:nth-child(even) {
422
+ background: $white - 6;
423
+ }
424
+ &:last-child {
425
+ border-bottom: none;
426
+ }
427
+ .column_name_text,
428
+ .column_type_text {
429
+ cursor: pointer;
430
+ }
431
+ .column_name_text {
432
+ margin: 0 1.4em 0 0;
433
+ &:hover {
434
+ text-decoration: underline;
158
435
  }
159
436
  }
160
- form.add_column_form {
161
- width: 150px;
162
- input[name=name] {
163
- width: 38%;
437
+ &.unsaved {
438
+ @include unsaved;
439
+ }
440
+ .rename_column_form {
441
+ padding: 8px;
442
+ }
443
+ .column_type_text {
444
+ font-size: 10px;
445
+ float: right;
446
+ display: block;
447
+ line-height: 16px;
448
+ margin: 5px 0 0;
449
+ @include border-radius(4px);
450
+ border-width: 1px;
451
+ border-style: solid;
452
+ width: 70px;
453
+ text-align: center;
454
+ @include column_type_text_color(#e98c60);
455
+ &.date,
456
+ &.time,
457
+ &.timestamp,
458
+ &.datetime {
459
+ @include column_type_text_color(#da6272);
164
460
  }
165
- input[name=type] {
166
- width: 27%;
461
+ &.boolean {
462
+ @include column_type_text_color(#45a1cf);
167
463
  }
168
- input[type=submit] {
169
- width: 25%;
464
+ &.text {
465
+ @include column_type_text_color(#dab24f);
170
466
  }
171
- }
172
- div.columns {
173
- margin: 0 5px 0 3px;
174
-
175
- ul > li.column {
176
- span.column_name_text, span.column_type_text {
177
- cursor: pointer;
178
- }
179
- span.column_type_text {
180
- font-size: small;
181
- }
182
- span.column_name_text:hover, span.column_type_text:hover {
183
- text-decoration: underline;
184
- }
467
+ &.decimal {
468
+ @include column_type_text_color(#8e8e08);
469
+ }
470
+ &.float {
471
+ @include column_type_text_color(#85616b);
472
+ }
473
+ &.integer {
474
+ @include column_type_text_color(#7c80aa);
475
+ }
476
+ &.primary_key {
477
+ @include column_type_text_color(#ea9a5d);
478
+ }
479
+ &.string {
480
+ @include column_type_text_color(#a4c520);
481
+ }
482
+ &.unsaved {
483
+ @include column_type_text_color(#a55d00);
185
484
  }
186
485
  }
187
- }
188
- div.model:hover {
189
- background-color: #cfc
486
+ .alter_column_form {
487
+ padding: 8px;
488
+ }
489
+ &:hover {
490
+ background-color: $white - 20;
491
+ }
190
492
  }
191
493
  }
192
494
 
@@ -195,7 +497,6 @@ li {
195
497
  padding-bottom: 0;
196
498
  margin-bottom: 20px;
197
499
  background-color: #f0f0f0;
198
-
199
500
  h2 {
200
501
  text-align: left;
201
502
  font-weight: bold;
@@ -203,7 +504,7 @@ li {
203
504
  font-size: 12px;
204
505
  margin: -7px;
205
506
  margin-bottom: 0px;
206
- color: #fff;
507
+ color: white;
207
508
  }
208
509
  h3 {
209
510
  font-size: 12px;
@@ -217,26 +518,20 @@ li {
217
518
  }
218
519
  }
219
520
 
220
-
221
521
  #executed {
222
- border: 2px #0f0 solid;
522
+ border: 2px lime solid;
223
523
  h2 {
224
- background-color: #0c0;
524
+ background-color: #00cc00;
225
525
  }
226
526
  }
227
527
 
228
528
  #failed {
229
- border: 2px #f00 solid;
529
+ border: 2px red solid;
230
530
  h2 {
231
- background-color: #c00;
531
+ background-color: #cc0000;
232
532
  }
233
533
  }
234
534
 
235
535
  #model_name_changes, #column_name_changes {
236
536
  display: none;
237
537
  }
238
-
239
- table, th, td {
240
- border: 1px #000 solid;
241
- border-collapse: collapse;
242
- }