wedge 0.1.17 → 0.1.18
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.
- checksums.yaml +4 -4
- data/Gemfile +8 -1
- data/Makefile +2 -0
- data/Rakefile +8 -4
- data/TODO.md +4 -0
- data/lib/roda/plugins/wedge.rb +14 -96
- data/lib/wedge.rb +9 -4
- data/lib/wedge/component.rb +70 -29
- data/lib/wedge/config.rb +36 -6
- data/lib/wedge/middleware.rb +43 -35
- data/lib/wedge/opal.rb +15 -4
- data/lib/wedge/plugins/ability_list.rb +95 -0
- data/lib/wedge/plugins/current_user.rb +48 -0
- data/lib/wedge/plugins/factory.rb +36 -0
- data/lib/wedge/plugins/form.rb +216 -343
- data/lib/wedge/plugins/{validations.rb → form/validations.rb} +64 -37
- data/lib/wedge/plugins/form_backup.rb +442 -0
- data/lib/wedge/plugins/render.rb +110 -0
- data/lib/wedge/plugins/uploader.rb +2 -2
- data/lib/wedge/utilis/duplicable.rb +104 -0
- data/lib/wedge/utilis/hash.rb +48 -0
- data/lib/wedge/version.rb +1 -1
- data/playground/app/app.rb +27 -11
- data/playground/app/components/abilities.rb +11 -0
- data/playground/app/components/current_user.rb +12 -0
- data/playground/app/components/layout.rb +5 -0
- data/playground/app/components/todo_list.rb +24 -0
- data/playground/app/config/boot.rb +3 -0
- data/playground/app/forms/todo_list_add.rb +9 -0
- data/playground/app/models/user.rb +5 -0
- data/playground/public/css/styles.css +139 -0
- data/playground/public/css/todo_list.css +138 -0
- data/playground/public/todo_list.html +23 -0
- data/playground/src/css/styles.scss +2 -1
- data/playground/src/css/todo_list.scss +165 -0
- data/playground/src/todo_list.slim +17 -0
- data/spec/playground/uploader_spec.rb +27 -29
- data/spec/spec_helper.rb +29 -0
- data/spec/stubs/models/user.rb +15 -0
- data/spec/wedge/plugins/current_user_spec.rb +29 -0
- data/spec/wedge/plugins/factory_spec.rb +16 -0
- data/spec/wedge/plugins/form_spec.rb +119 -0
- data/spec/wedge/plugins/uploader_spec.rb +1 -3
- data/spec/wedge_spec.rb +3 -3
- metadata +28 -3
|
@@ -2647,3 +2647,142 @@ button:active, input[type="button"]:active, input[type="reset"]:active, input[ty
|
|
|
2647
2647
|
.side-image .side-image-content button {
|
|
2648
2648
|
padding: 0.7em 1em;
|
|
2649
2649
|
}
|
|
2650
|
+
|
|
2651
|
+
body.todo_list {
|
|
2652
|
+
/*
|
|
2653
|
+
* Non-mobile screens
|
|
2654
|
+
*/
|
|
2655
|
+
}
|
|
2656
|
+
body.todo_list button {
|
|
2657
|
+
color: #fff;
|
|
2658
|
+
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
|
|
2659
|
+
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
2660
|
+
border-radius: 2px;
|
|
2661
|
+
box-shadow: 0 0 0 1px #fff;
|
|
2662
|
+
padding: 1px 4px 2px 4px;
|
|
2663
|
+
font-family: Tahoma, sans-serif;
|
|
2664
|
+
font-size: 11px;
|
|
2665
|
+
letter-spacing: 1px;
|
|
2666
|
+
text-transform: uppercase;
|
|
2667
|
+
cursor: pointer;
|
|
2668
|
+
}
|
|
2669
|
+
body.todo_list .container {
|
|
2670
|
+
width: 100%;
|
|
2671
|
+
margin: 0;
|
|
2672
|
+
padding: 0;
|
|
2673
|
+
background-color: #fff;
|
|
2674
|
+
border-bottom: 1px solid #ddd;
|
|
2675
|
+
}
|
|
2676
|
+
body.todo_list h1 {
|
|
2677
|
+
margin: 0;
|
|
2678
|
+
padding: 10px 15px;
|
|
2679
|
+
background-color: #8bad53;
|
|
2680
|
+
border-bottom: 1px solid #6f8b42;
|
|
2681
|
+
color: #fff;
|
|
2682
|
+
font-size: 16px;
|
|
2683
|
+
}
|
|
2684
|
+
body.todo_list .hidden {
|
|
2685
|
+
display: none;
|
|
2686
|
+
}
|
|
2687
|
+
body.todo_list #notice {
|
|
2688
|
+
padding: 10px;
|
|
2689
|
+
margin: 15px;
|
|
2690
|
+
background-color: #f8f8f8;
|
|
2691
|
+
border: 1px solid #ddd;
|
|
2692
|
+
}
|
|
2693
|
+
body.todo_list ul {
|
|
2694
|
+
list-style-type: none;
|
|
2695
|
+
margin: 0;
|
|
2696
|
+
padding: 0;
|
|
2697
|
+
counter-reset: li;
|
|
2698
|
+
}
|
|
2699
|
+
body.todo_list li {
|
|
2700
|
+
padding: 10px 15px 10px 40px;
|
|
2701
|
+
border-bottom: 1px solid #ddd;
|
|
2702
|
+
position: relative;
|
|
2703
|
+
}
|
|
2704
|
+
body.todo_list li:before {
|
|
2705
|
+
content: counter(li);
|
|
2706
|
+
/* Use the counter as content */
|
|
2707
|
+
counter-increment: li;
|
|
2708
|
+
/* Increment the counter by 1 */
|
|
2709
|
+
position: absolute;
|
|
2710
|
+
top: 0;
|
|
2711
|
+
left: 0;
|
|
2712
|
+
-webkit-box-sizing: border-box;
|
|
2713
|
+
-moz-box-sizing: border-box;
|
|
2714
|
+
box-sizing: border-box;
|
|
2715
|
+
background: #f2f2f2;
|
|
2716
|
+
border-right: 1px solid #ddd;
|
|
2717
|
+
margin: 0;
|
|
2718
|
+
padding: 10px;
|
|
2719
|
+
font-size: 11px;
|
|
2720
|
+
height: 100%;
|
|
2721
|
+
color: #999;
|
|
2722
|
+
text-align: center;
|
|
2723
|
+
}
|
|
2724
|
+
body.todo_list .delete {
|
|
2725
|
+
background-color: #d95e5e;
|
|
2726
|
+
margin: 0;
|
|
2727
|
+
position: absolute;
|
|
2728
|
+
right: 15px;
|
|
2729
|
+
top: 32%;
|
|
2730
|
+
opacity: 0;
|
|
2731
|
+
-webkit-transition: opacity linear .1s;
|
|
2732
|
+
-moz-transition: opacity linear .1s;
|
|
2733
|
+
transition: opacity linear .1s;
|
|
2734
|
+
}
|
|
2735
|
+
body.todo_list li:hover .delete {
|
|
2736
|
+
opacity: 1;
|
|
2737
|
+
}
|
|
2738
|
+
body.todo_list textarea {
|
|
2739
|
+
display: block;
|
|
2740
|
+
overflow: auto;
|
|
2741
|
+
vertical-align: top;
|
|
2742
|
+
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
2743
|
+
border-radius: 2px;
|
|
2744
|
+
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
|
|
2745
|
+
margin: 15px 15px 10px 15px;
|
|
2746
|
+
padding: 10px;
|
|
2747
|
+
font-size: 13px;
|
|
2748
|
+
}
|
|
2749
|
+
body.todo_list textarea:focus {
|
|
2750
|
+
outline: none;
|
|
2751
|
+
border-color: #52a8ec;
|
|
2752
|
+
box-shadow: 0 1px 1px rgba(82, 168, 236, 0.3);
|
|
2753
|
+
}
|
|
2754
|
+
body.todo_list #add {
|
|
2755
|
+
background: #8e8f8d;
|
|
2756
|
+
margin: 0 15px 15px 15px;
|
|
2757
|
+
}
|
|
2758
|
+
body.todo_list p[role="contentinfo"] {
|
|
2759
|
+
padding: 20px;
|
|
2760
|
+
margin: 0;
|
|
2761
|
+
text-align: center;
|
|
2762
|
+
color: #bbb;
|
|
2763
|
+
}
|
|
2764
|
+
body.todo_list span {
|
|
2765
|
+
font-family: Georgia, serif;
|
|
2766
|
+
font-style: italic;
|
|
2767
|
+
}
|
|
2768
|
+
body.todo_list a {
|
|
2769
|
+
color: #bbb;
|
|
2770
|
+
text-decoration: none;
|
|
2771
|
+
}
|
|
2772
|
+
body.todo_list a:hover {
|
|
2773
|
+
color: #555;
|
|
2774
|
+
}
|
|
2775
|
+
@media screen and (min-width: 400px) {
|
|
2776
|
+
body.todo_list .container {
|
|
2777
|
+
width: 400px;
|
|
2778
|
+
margin: 100px auto 0;
|
|
2779
|
+
border: 1px solid #ddd;
|
|
2780
|
+
}
|
|
2781
|
+
body.todo_list h1 {
|
|
2782
|
+
margin: -1px -1px 0 -1px;
|
|
2783
|
+
border: 1px solid #6f8b42;
|
|
2784
|
+
}
|
|
2785
|
+
body.todo_list textarea {
|
|
2786
|
+
width: 348px;
|
|
2787
|
+
}
|
|
2788
|
+
}
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
body.todo_list {
|
|
2
|
+
/*
|
|
3
|
+
* Non-mobile screens
|
|
4
|
+
*/
|
|
5
|
+
}
|
|
6
|
+
body.todo_list button {
|
|
7
|
+
color: #fff;
|
|
8
|
+
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
|
|
9
|
+
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
10
|
+
border-radius: 2px;
|
|
11
|
+
box-shadow: 0 0 0 1px #fff;
|
|
12
|
+
padding: 1px 4px 2px 4px;
|
|
13
|
+
font-family: Tahoma, sans-serif;
|
|
14
|
+
font-size: 11px;
|
|
15
|
+
letter-spacing: 1px;
|
|
16
|
+
text-transform: uppercase;
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
}
|
|
19
|
+
body.todo_list .container {
|
|
20
|
+
width: 100%;
|
|
21
|
+
margin: 0;
|
|
22
|
+
padding: 0;
|
|
23
|
+
background-color: #fff;
|
|
24
|
+
border-bottom: 1px solid #ddd;
|
|
25
|
+
}
|
|
26
|
+
body.todo_list h1 {
|
|
27
|
+
margin: 0;
|
|
28
|
+
padding: 10px 15px;
|
|
29
|
+
background-color: #8bad53;
|
|
30
|
+
border-bottom: 1px solid #6f8b42;
|
|
31
|
+
color: #fff;
|
|
32
|
+
font-size: 16px;
|
|
33
|
+
}
|
|
34
|
+
body.todo_list .hidden {
|
|
35
|
+
display: none;
|
|
36
|
+
}
|
|
37
|
+
body.todo_list #notice {
|
|
38
|
+
padding: 10px;
|
|
39
|
+
margin: 15px;
|
|
40
|
+
background-color: #f8f8f8;
|
|
41
|
+
border: 1px solid #ddd;
|
|
42
|
+
}
|
|
43
|
+
body.todo_list ul {
|
|
44
|
+
list-style-type: none;
|
|
45
|
+
margin: 0;
|
|
46
|
+
padding: 0;
|
|
47
|
+
counter-reset: li;
|
|
48
|
+
}
|
|
49
|
+
body.todo_list li {
|
|
50
|
+
padding: 10px 15px 10px 40px;
|
|
51
|
+
border-bottom: 1px solid #ddd;
|
|
52
|
+
position: relative;
|
|
53
|
+
}
|
|
54
|
+
body.todo_list li:before {
|
|
55
|
+
content: counter(li);
|
|
56
|
+
/* Use the counter as content */
|
|
57
|
+
counter-increment: li;
|
|
58
|
+
/* Increment the counter by 1 */
|
|
59
|
+
position: absolute;
|
|
60
|
+
top: 0;
|
|
61
|
+
left: 0;
|
|
62
|
+
-webkit-box-sizing: border-box;
|
|
63
|
+
-moz-box-sizing: border-box;
|
|
64
|
+
box-sizing: border-box;
|
|
65
|
+
background: #f2f2f2;
|
|
66
|
+
border-right: 1px solid #ddd;
|
|
67
|
+
margin: 0;
|
|
68
|
+
padding: 10px;
|
|
69
|
+
font-size: 11px;
|
|
70
|
+
height: 100%;
|
|
71
|
+
color: #999;
|
|
72
|
+
text-align: center;
|
|
73
|
+
}
|
|
74
|
+
body.todo_list .delete {
|
|
75
|
+
background-color: #d95e5e;
|
|
76
|
+
margin: 0;
|
|
77
|
+
position: absolute;
|
|
78
|
+
right: 15px;
|
|
79
|
+
top: 32%;
|
|
80
|
+
opacity: 0;
|
|
81
|
+
-webkit-transition: opacity linear .1s;
|
|
82
|
+
-moz-transition: opacity linear .1s;
|
|
83
|
+
transition: opacity linear .1s;
|
|
84
|
+
}
|
|
85
|
+
body.todo_list li:hover .delete {
|
|
86
|
+
opacity: 1;
|
|
87
|
+
}
|
|
88
|
+
body.todo_list textarea {
|
|
89
|
+
display: block;
|
|
90
|
+
overflow: auto;
|
|
91
|
+
vertical-align: top;
|
|
92
|
+
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
93
|
+
border-radius: 2px;
|
|
94
|
+
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
|
|
95
|
+
margin: 15px 15px 10px 15px;
|
|
96
|
+
padding: 10px;
|
|
97
|
+
font-size: 13px;
|
|
98
|
+
}
|
|
99
|
+
body.todo_list textarea:focus {
|
|
100
|
+
outline: none;
|
|
101
|
+
border-color: #52a8ec;
|
|
102
|
+
box-shadow: 0 1px 1px rgba(82, 168, 236, 0.3);
|
|
103
|
+
}
|
|
104
|
+
body.todo_list #add {
|
|
105
|
+
background: #8e8f8d;
|
|
106
|
+
margin: 0 15px 15px 15px;
|
|
107
|
+
}
|
|
108
|
+
body.todo_list p[role="contentinfo"] {
|
|
109
|
+
padding: 20px;
|
|
110
|
+
margin: 0;
|
|
111
|
+
text-align: center;
|
|
112
|
+
color: #bbb;
|
|
113
|
+
}
|
|
114
|
+
body.todo_list span {
|
|
115
|
+
font-family: Georgia, serif;
|
|
116
|
+
font-style: italic;
|
|
117
|
+
}
|
|
118
|
+
body.todo_list a {
|
|
119
|
+
color: #bbb;
|
|
120
|
+
text-decoration: none;
|
|
121
|
+
}
|
|
122
|
+
body.todo_list a:hover {
|
|
123
|
+
color: #555;
|
|
124
|
+
}
|
|
125
|
+
@media screen and (min-width: 400px) {
|
|
126
|
+
body.todo_list .container {
|
|
127
|
+
width: 400px;
|
|
128
|
+
margin: 100px auto 0;
|
|
129
|
+
border: 1px solid #ddd;
|
|
130
|
+
}
|
|
131
|
+
body.todo_list h1 {
|
|
132
|
+
margin: -1px -1px 0 -1px;
|
|
133
|
+
border: 1px solid #6f8b42;
|
|
134
|
+
}
|
|
135
|
+
body.todo_list textarea {
|
|
136
|
+
width: 348px;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<div class="container">
|
|
2
|
+
<h1 id="title">
|
|
3
|
+
Today’s Goals
|
|
4
|
+
</h1>
|
|
5
|
+
<p class="hidden" id="notice">
|
|
6
|
+
You have no goals for today.
|
|
7
|
+
</p>
|
|
8
|
+
<ul id="list">
|
|
9
|
+
<li>
|
|
10
|
+
Buy apples<button class="delete">Delete</button>
|
|
11
|
+
</li>
|
|
12
|
+
<li>
|
|
13
|
+
Buy bananas<button class="delete">Delete</button>
|
|
14
|
+
</li>
|
|
15
|
+
<li>
|
|
16
|
+
Eat apples and bananas<button class="delete">Delete</button>
|
|
17
|
+
</li>
|
|
18
|
+
</ul>
|
|
19
|
+
<form id="add-form">
|
|
20
|
+
<textarea id="task-input" name="todo[description]" placeholder="Enter new goal here" rows="1"></textarea><button id="add">Add to list</button>
|
|
21
|
+
</form>
|
|
22
|
+
</div>
|
|
23
|
+
<!--.container-->
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
body.todo_list {
|
|
2
|
+
button {
|
|
3
|
+
color: #fff;
|
|
4
|
+
text-shadow: 0 1px 0 rgba(0,0,0,.15);
|
|
5
|
+
|
|
6
|
+
border: 1px solid rgba(0,0,0,.1);
|
|
7
|
+
border-radius: 2px;
|
|
8
|
+
box-shadow: 0 0 0 1px #fff;
|
|
9
|
+
|
|
10
|
+
padding: 1px 4px 2px 4px;
|
|
11
|
+
|
|
12
|
+
font-family: Tahoma, sans-serif;
|
|
13
|
+
font-size: 11px;
|
|
14
|
+
letter-spacing: 1px;
|
|
15
|
+
text-transform: uppercase;
|
|
16
|
+
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.container {
|
|
21
|
+
width: 100%;
|
|
22
|
+
margin: 0;
|
|
23
|
+
padding: 0;
|
|
24
|
+
background-color: #fff;
|
|
25
|
+
border-bottom: 1px solid #ddd;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
h1 {
|
|
29
|
+
margin: 0;
|
|
30
|
+
padding: 10px 15px;
|
|
31
|
+
background-color: #8bad53;
|
|
32
|
+
border-bottom: 1px solid #6f8b42;
|
|
33
|
+
color: #fff;
|
|
34
|
+
|
|
35
|
+
font-size: 16px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.hidden {
|
|
39
|
+
display: none;
|
|
40
|
+
}
|
|
41
|
+
#notice {
|
|
42
|
+
padding: 10px;
|
|
43
|
+
margin: 15px;
|
|
44
|
+
background-color: #f8f8f8;
|
|
45
|
+
border: 1px solid #ddd;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
ul {
|
|
49
|
+
list-style-type: none;
|
|
50
|
+
margin: 0;
|
|
51
|
+
padding: 0;
|
|
52
|
+
|
|
53
|
+
counter-reset:li;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
li {
|
|
57
|
+
padding: 10px 15px 10px 40px;
|
|
58
|
+
border-bottom: 1px solid #ddd;
|
|
59
|
+
|
|
60
|
+
position: relative;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
li:before {
|
|
64
|
+
content:counter(li); /* Use the counter as content */
|
|
65
|
+
counter-increment:li; /* Increment the counter by 1 */
|
|
66
|
+
|
|
67
|
+
position:absolute;
|
|
68
|
+
top: 0;
|
|
69
|
+
left: 0;
|
|
70
|
+
-webkit-box-sizing:border-box;
|
|
71
|
+
-moz-box-sizing:border-box;
|
|
72
|
+
box-sizing:border-box;
|
|
73
|
+
|
|
74
|
+
background: #f2f2f2;
|
|
75
|
+
border-right: 1px solid #ddd;
|
|
76
|
+
|
|
77
|
+
margin: 0;
|
|
78
|
+
padding:10px;
|
|
79
|
+
|
|
80
|
+
font-size: 11px;
|
|
81
|
+
height: 100%;
|
|
82
|
+
color:#999;
|
|
83
|
+
text-align: center;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.delete {
|
|
87
|
+
background-color: #d95e5e;
|
|
88
|
+
margin: 0;
|
|
89
|
+
|
|
90
|
+
position: absolute;
|
|
91
|
+
right: 15px;
|
|
92
|
+
top:32%;
|
|
93
|
+
|
|
94
|
+
opacity: 0;
|
|
95
|
+
-webkit-transition: opacity linear .1s;
|
|
96
|
+
-moz-transition: opacity linear .1s;
|
|
97
|
+
transition: opacity linear .1s;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
li:hover .delete {
|
|
101
|
+
opacity: 1;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
textarea {
|
|
105
|
+
display: block;
|
|
106
|
+
overflow: auto;
|
|
107
|
+
vertical-align: top;
|
|
108
|
+
border: 1px solid rgba(0,0,0,.2);
|
|
109
|
+
border-radius: 2px;
|
|
110
|
+
box-shadow: 0 1px 0 rgba(0,0,0,.1);
|
|
111
|
+
margin: 15px 15px 10px 15px;
|
|
112
|
+
padding: 10px;
|
|
113
|
+
font-size: 13px;
|
|
114
|
+
}
|
|
115
|
+
textarea:focus {
|
|
116
|
+
outline: none;
|
|
117
|
+
border-color: rgba(82, 168, 236, 1);
|
|
118
|
+
box-shadow: 0 1px 1px rgba(82, 168, 236, 0.3);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
#add {
|
|
122
|
+
background: #8e8f8d;
|
|
123
|
+
margin: 0 15px 15px 15px;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
p[role="contentinfo"] {
|
|
127
|
+
padding: 20px;
|
|
128
|
+
margin: 0;
|
|
129
|
+
text-align: center;
|
|
130
|
+
color: #bbb;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
span {
|
|
134
|
+
font-family: Georgia, serif;
|
|
135
|
+
font-style: italic;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
a {
|
|
139
|
+
color: #bbb;
|
|
140
|
+
text-decoration: none;
|
|
141
|
+
}
|
|
142
|
+
a:hover {
|
|
143
|
+
color: #555;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
/*
|
|
149
|
+
* Non-mobile screens
|
|
150
|
+
*/
|
|
151
|
+
@media screen and (min-width: 400px) {
|
|
152
|
+
.container {
|
|
153
|
+
width: 400px;
|
|
154
|
+
margin: 100px auto 0;
|
|
155
|
+
border: 1px solid #ddd;
|
|
156
|
+
}
|
|
157
|
+
h1 {
|
|
158
|
+
margin: -1px -1px 0 -1px;
|
|
159
|
+
border: 1px solid #6f8b42;
|
|
160
|
+
}
|
|
161
|
+
textarea {
|
|
162
|
+
width: 348px;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
}
|