chr 0.4.9 → 0.4.10
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/.gitignore +2 -1
- data/app/assets/javascripts/chr/chr.coffee +5 -3
- data/app/assets/javascripts/chr/view.coffee +0 -30
- data/app/assets/stylesheets/chr.scss +3 -7
- data/app/assets/stylesheets/chr/layout.scss +198 -0
- data/app/assets/stylesheets/chr/mixins.scss +67 -50
- data/app/assets/stylesheets/chr/themes/basic.scss +120 -0
- data/chr.gemspec +6 -7
- data/lib/chr.rb +0 -1
- data/lib/chr/version.rb +1 -1
- data/test/rails_app/app/assets/javascripts/admin.coffee +2 -6
- metadata +17 -34
- data/app/assets/javascripts/chr/view_local-storage.coffee +0 -58
- data/app/assets/stylesheets/chr/icons.scss +0 -124
- data/app/assets/stylesheets/chr/main.scss +0 -117
- data/app/assets/stylesheets/chr/settings.scss +0 -15
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1e86106e360e3eafde8591329586771b81d6dcda
|
|
4
|
+
data.tar.gz: 5610fd502a4283b6d670e582c34376f253279822
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ce145ac0ed50743ec604e6407d9f8ee179e35570121eae38535d20b6365873f0ebe166a17a08701aa2f2d2bd58772e5d6e2140e1299eda4e7f5d5fb624cc2ebe
|
|
7
|
+
data.tar.gz: 111f5fc6a2bac116560aab047ee92bab01e5fe0bc004962c95cb9d5e4e111a4acc2fc46c0d59d47c7cf8726f7b45852a153e2045b597eac9cd670765d90603f4
|
data/.gitignore
CHANGED
|
@@ -87,10 +87,12 @@ class @Chr
|
|
|
87
87
|
|
|
88
88
|
|
|
89
89
|
start: (title, @config) ->
|
|
90
|
-
@$el
|
|
91
|
-
@$navBar
|
|
92
|
-
@$mainMenu
|
|
90
|
+
@$el =$ (@config.selector ? 'body')
|
|
91
|
+
@$navBar =$ "<nav class='sidebar'>"
|
|
92
|
+
@$mainMenu =$ "<div class='menu'>"
|
|
93
|
+
@$menuTitle =$ "<div class='menu-title'>#{ title }</div>"
|
|
93
94
|
|
|
95
|
+
@$navBar.append(@$menuTitle)
|
|
94
96
|
@$navBar.append(@$mainMenu)
|
|
95
97
|
@$el.append(@$navBar)
|
|
96
98
|
|
|
@@ -19,7 +19,6 @@
|
|
|
19
19
|
# onViewShow - on show callback
|
|
20
20
|
# onSaveSuccess - on document succesfully saved callback
|
|
21
21
|
# defaultNewObject - used to generate new form
|
|
22
|
-
# disableFormCache - do not cache form changes
|
|
23
22
|
#
|
|
24
23
|
# Public methods:
|
|
25
24
|
# show(objectId)
|
|
@@ -27,9 +26,6 @@
|
|
|
27
26
|
# showSpinner()
|
|
28
27
|
# hideSpinner()
|
|
29
28
|
#
|
|
30
|
-
# Dependencies:
|
|
31
|
-
#= require ./view_local-storage
|
|
32
|
-
#
|
|
33
29
|
# -----------------------------------------------------------------------------
|
|
34
30
|
class @View
|
|
35
31
|
constructor: (@module, @config, @closePath, @listName) ->
|
|
@@ -42,10 +38,6 @@ class @View
|
|
|
42
38
|
if @config.fullsizeView
|
|
43
39
|
@$el.addClass 'fullsize'
|
|
44
40
|
|
|
45
|
-
# disable local storage cache, as that has to be
|
|
46
|
-
# refactored to be more secure and obvious to user
|
|
47
|
-
@config.disableFormCache ||= true
|
|
48
|
-
|
|
49
41
|
# header
|
|
50
42
|
@$header =$ "<header class='header'></header>"
|
|
51
43
|
@$spinner =$ "<div class='spinner'></div>"
|
|
@@ -56,7 +48,6 @@ class @View
|
|
|
56
48
|
|
|
57
49
|
# close
|
|
58
50
|
@$closeBtn =$ "<a href='#{ @closePath }' class='close'>Close</a>"
|
|
59
|
-
@$closeBtn.on 'click', (e) => @_close(e)
|
|
60
51
|
@$header.append @$closeBtn
|
|
61
52
|
|
|
62
53
|
# content
|
|
@@ -95,7 +86,6 @@ class @View
|
|
|
95
86
|
@_set_title()
|
|
96
87
|
@form.hideValidationErrors()
|
|
97
88
|
@form.updateValues(@object)
|
|
98
|
-
@_clear_local_storage_cache()
|
|
99
89
|
|
|
100
90
|
@config.onSaveSuccess?(@)
|
|
101
91
|
|
|
@@ -108,14 +98,6 @@ class @View
|
|
|
108
98
|
|
|
109
99
|
# EVENTS ================================================
|
|
110
100
|
|
|
111
|
-
_close: (e) ->
|
|
112
|
-
if @_changes_not_saved()
|
|
113
|
-
if confirm('Your changes are not saved, still want to close?')
|
|
114
|
-
@_clear_local_storage_cache()
|
|
115
|
-
else
|
|
116
|
-
e.preventDefault()
|
|
117
|
-
|
|
118
|
-
|
|
119
101
|
_save: (e) ->
|
|
120
102
|
e.preventDefault()
|
|
121
103
|
@$el.addClass('view-saving')
|
|
@@ -143,7 +125,6 @@ class @View
|
|
|
143
125
|
if confirm("Are you sure?")
|
|
144
126
|
@store.remove @object._id,
|
|
145
127
|
onSuccess: =>
|
|
146
|
-
@_clear_local_storage_cache()
|
|
147
128
|
chr.updateHash("#{ @closePath }", true)
|
|
148
129
|
@destroy()
|
|
149
130
|
chr.mobileListLock(false)
|
|
@@ -161,10 +142,6 @@ class @View
|
|
|
161
142
|
@$saveBtn.on 'click', (e) => @_save(e)
|
|
162
143
|
@$header.append @$saveBtn
|
|
163
144
|
|
|
164
|
-
# sync with local storage cache
|
|
165
|
-
if ! @config.disableFormCache
|
|
166
|
-
@_update_object_from_local_storage()
|
|
167
|
-
|
|
168
145
|
# form
|
|
169
146
|
object = @object || @config.defaultNewObject || null
|
|
170
147
|
@form = new (@config.formClass ? Form)(object, @config)
|
|
@@ -174,10 +151,6 @@ class @View
|
|
|
174
151
|
@_add_delete_button()
|
|
175
152
|
@config.onViewShow?(@)
|
|
176
153
|
|
|
177
|
-
# enable local storage caching
|
|
178
|
-
if ! @config.disableFormCache
|
|
179
|
-
@_bind_form_change()
|
|
180
|
-
|
|
181
154
|
|
|
182
155
|
_show_error: ->
|
|
183
156
|
@hideSpinner()
|
|
@@ -222,8 +195,5 @@ class @View
|
|
|
222
195
|
@store.loadObject(objectId, callbacks)
|
|
223
196
|
|
|
224
197
|
|
|
225
|
-
include(View, viewLocalStorage)
|
|
226
|
-
|
|
227
|
-
|
|
228
198
|
|
|
229
199
|
|
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
/* Layouts ----------------------------------------------------------------- */
|
|
2
|
+
$tablet: "screen and (min-width:768px)";
|
|
3
|
+
$desktop: "screen and (min-width:1024px)";
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
/* Global ------------------------------------------------------------------ */
|
|
7
|
+
*,
|
|
8
|
+
*:before,
|
|
9
|
+
*:after { box-sizing: border-box; }
|
|
10
|
+
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
|
|
11
|
+
a { text-decoration: none; }
|
|
12
|
+
.spinner { @include spinner; }
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
/* Menu -------------------------------------------------------------------- */
|
|
16
|
+
.menu-title { padding : 1em; }
|
|
17
|
+
.menu a {
|
|
18
|
+
display : block;
|
|
19
|
+
position : relative;
|
|
20
|
+
padding : 1em;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
/* Header ------------------------------------------------------------------ */
|
|
25
|
+
.header {
|
|
26
|
+
height : 40px;
|
|
27
|
+
text-align : center;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.header {
|
|
31
|
+
.title { @include ellipsis(70%); }
|
|
32
|
+
.title, a { line-height: 2.5; }
|
|
33
|
+
.new { @include position(absolute, 0 0 null null); }
|
|
34
|
+
.new + .search { @include position(absolute, 0 40px inherit inherit); } // @todo: refactor to em
|
|
35
|
+
.save { @include position(absolute, 0 1em null null); }
|
|
36
|
+
.back, .close { @include position(absolute, 0 null null 0);
|
|
37
|
+
overflow : hidden;
|
|
38
|
+
}
|
|
39
|
+
.spinner { @include position(absolute, .4em null null null);
|
|
40
|
+
margin-left : -2.25em;
|
|
41
|
+
visibility : hidden;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.show-spinner .spinner { visibility: visible; }
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
/* Item -------------------------------------------------------------------- */
|
|
49
|
+
.item {
|
|
50
|
+
display : block;
|
|
51
|
+
position : relative;
|
|
52
|
+
padding : 1em;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.item {
|
|
56
|
+
.icon-reorder {
|
|
57
|
+
@include position(absolute, 50% 0 null null);
|
|
58
|
+
margin-top : -20px; // @todo: refactor to em
|
|
59
|
+
}
|
|
60
|
+
.icon-folder {
|
|
61
|
+
@include position(absolute, 50% 0 null null);
|
|
62
|
+
margin-top : -20px; // @todo: refactor to em
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.item.has-subtitle { padding : .6em 1em; }
|
|
67
|
+
.item.has-thumbnail { padding-left : 4.1em; }
|
|
68
|
+
.item.has-thumbnail .item-title { line-height : 2.15; }
|
|
69
|
+
.item.has-thumbnail.has-subtitle { padding : 1em 1em .75em 4.1em; }
|
|
70
|
+
.item.has-thumbnail.has-subtitle .item-title { line-height : 1.2; }
|
|
71
|
+
.item.reorderable { padding-right : 2.5em; }
|
|
72
|
+
|
|
73
|
+
.item-title { @include ellipsis; display: block; }
|
|
74
|
+
.item-subtitle { @include ellipsis; font-size: .8em; line-height: 1.5; }
|
|
75
|
+
.item-thumbnail { @include position(absolute, .5em 0 0 .5em); width: 3.1em; height: 3.1em; }
|
|
76
|
+
.item-thumbnail img { width: 100%; border-radius: 1.55em; }
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
/* Search ------------------------------------------------------------------ */
|
|
80
|
+
.search {
|
|
81
|
+
@include position(absolute, 0 0 null null);
|
|
82
|
+
width : 40px; // @todo: refactor to em
|
|
83
|
+
height : 40px; // @todo: refactor to em
|
|
84
|
+
overflow : hidden;
|
|
85
|
+
|
|
86
|
+
.icon { @include position(absolute, 0 null null 0); }
|
|
87
|
+
.cancel { @include position(absolute, 0 1em null null); }
|
|
88
|
+
|
|
89
|
+
input {
|
|
90
|
+
@include no-outline;
|
|
91
|
+
width : 100%;
|
|
92
|
+
height : 40px; // @todo: refactor to em
|
|
93
|
+
padding : 0 5em 0 2.5em;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
input, .cancel { display: none; }
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.list-search {
|
|
100
|
+
.item.is-folder, .item.is-nested_object { display: none; }
|
|
101
|
+
.new + .search { @include position(absolute, 0 0 null 0); }
|
|
102
|
+
|
|
103
|
+
.search {
|
|
104
|
+
@include position(absolute, 0 null null null);
|
|
105
|
+
width : 100%;
|
|
106
|
+
background : white;
|
|
107
|
+
|
|
108
|
+
input { display: block; }
|
|
109
|
+
.cancel { display: inline-block; }
|
|
110
|
+
.icon:hover { opacity: 1; }
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
/* View -------------------------------------------------------------------- */
|
|
116
|
+
.view-saving .save { visibility : hidden; }
|
|
117
|
+
.view-saving .spinner { visibility : visible; }
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
/* Mobile ------------------------------------------------------------------ */
|
|
121
|
+
.header {
|
|
122
|
+
@include position(fixed, 0 null null null);
|
|
123
|
+
width : 100%;
|
|
124
|
+
z-index : 10;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.view, .list {
|
|
128
|
+
@include position(absolute, 0 0 null 0);
|
|
129
|
+
padding-top : 41px; // @todo: refactor to em
|
|
130
|
+
min-height : 100%;
|
|
131
|
+
background-color : white;
|
|
132
|
+
z-index : 1;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.list.scroll-lock {
|
|
136
|
+
overflow : hidden;
|
|
137
|
+
bottom : 0;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.content, .items {
|
|
141
|
+
position : relative;
|
|
142
|
+
padding-bottom : 5em;
|
|
143
|
+
z-index : 0;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
/* Tablet ------------------------------------------------------------------ */
|
|
148
|
+
@media #{$tablet} {
|
|
149
|
+
body { overflow: hidden; }
|
|
150
|
+
|
|
151
|
+
.menu { font-size : .8em; }
|
|
152
|
+
.menu-title { padding : .75em; }
|
|
153
|
+
|
|
154
|
+
.sidebar {
|
|
155
|
+
@include position(absolute, 0 null 0 0);
|
|
156
|
+
width : 9em;
|
|
157
|
+
border-right : 1px solid;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.module {
|
|
161
|
+
@include position(absolute, 0 0 0 9em);
|
|
162
|
+
z-index : 1;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.view, .list {
|
|
166
|
+
bottom : 0;
|
|
167
|
+
padding-top : 0px;
|
|
168
|
+
overflow : hidden;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.header { @include position(relative); }
|
|
172
|
+
|
|
173
|
+
.items, .content { @include position(absolute, 41px 0 0 0); @include scrollable(); }
|
|
174
|
+
|
|
175
|
+
.view .header .close { @include header-back-label; }
|
|
176
|
+
|
|
177
|
+
.module .list:first-child .back { display: none; }
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
/* Desktop ----------------------------------------------------------------- */
|
|
182
|
+
@media #{$desktop} {
|
|
183
|
+
.sidebar { width : 10em; }
|
|
184
|
+
.module { left : 10em; }
|
|
185
|
+
|
|
186
|
+
.view { left : 22em; }
|
|
187
|
+
.view.fullsize { left : 0em; }
|
|
188
|
+
|
|
189
|
+
.list { width : 22em; }
|
|
190
|
+
.list.list-aside { left: 22em; right: 0; width: auto; }
|
|
191
|
+
.list .header { border-right: 1px solid; }
|
|
192
|
+
|
|
193
|
+
.list.list-aside .back { @include header-back-label; }
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
|
|
197
|
+
|
|
198
|
+
|
|
@@ -1,77 +1,94 @@
|
|
|
1
1
|
/* Mixins ------------------------------------------------------------------ */
|
|
2
2
|
|
|
3
|
-
@mixin
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
@mixin no-focus-outline { &:focus { outline: none; } }
|
|
12
|
-
|
|
13
|
-
@mixin no-outline { @include no-focus-outline; outline: none; border: none; }
|
|
14
|
-
|
|
15
|
-
@mixin border-shadow { box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); }
|
|
16
|
-
|
|
17
|
-
@mixin no-border-shadow { box-shadow: none; }
|
|
3
|
+
@mixin spinner {
|
|
4
|
+
display : inline-block;
|
|
5
|
+
border : .25em solid rgba(black, 0.2);
|
|
6
|
+
border-left : .25em solid black;
|
|
7
|
+
-webkit-animation: spinning 1.1s infinite linear; animation: spinning 1.1s infinite linear;
|
|
8
|
+
&, &:after { border-radius: 50%; width: 1.75em; height: 1.75em; }
|
|
9
|
+
}
|
|
18
10
|
|
|
19
|
-
|
|
11
|
+
@-webkit-keyframes spinning {
|
|
12
|
+
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
|
|
13
|
+
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
|
14
|
+
}
|
|
20
15
|
|
|
21
|
-
@
|
|
16
|
+
@keyframes spinning {
|
|
17
|
+
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
|
|
18
|
+
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
|
19
|
+
}
|
|
22
20
|
|
|
23
|
-
@mixin
|
|
24
|
-
|
|
25
|
-
|
|
21
|
+
@mixin scrollable {
|
|
22
|
+
-webkit-overflow-scrolling : touch;
|
|
23
|
+
overflow : hidden;
|
|
24
|
+
overflow-y : scroll;
|
|
26
25
|
}
|
|
27
26
|
|
|
28
|
-
@mixin
|
|
29
|
-
|
|
30
|
-
|
|
27
|
+
@mixin header-back-label {
|
|
28
|
+
@include position(absolute, 0 null null 1em);
|
|
29
|
+
width : auto;
|
|
30
|
+
&:before { display: none; }
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
+
/* Icons ------------------------------------------------------------------- */
|
|
34
|
+
|
|
35
|
+
@mixin header-icon-base {
|
|
36
|
+
display : block;
|
|
37
|
+
width : 40px;
|
|
38
|
+
height : 40px;
|
|
33
39
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
40
|
+
&:before {
|
|
41
|
+
content : '';
|
|
42
|
+
display : block;
|
|
43
|
+
width : 40px;
|
|
44
|
+
height : 40px;
|
|
45
|
+
background-repeat : no-repeat;
|
|
46
|
+
}
|
|
38
47
|
}
|
|
39
48
|
|
|
49
|
+
@mixin icon-search($color) {
|
|
50
|
+
@include header-icon-base;
|
|
40
51
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
52
|
+
&:before {
|
|
53
|
+
background-image : url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><circle cx='15' cy='15' r='10' stroke='#{ $color }' stroke-width='2' fill='transparent'></circle><line x1='22' y1='22' x2='30' y2='30' stroke-width='3' stroke='#{ $color }' /></svg>");
|
|
54
|
+
background-size : 22px 22px;
|
|
55
|
+
background-position : 8px 8px;
|
|
56
|
+
}
|
|
45
57
|
}
|
|
46
58
|
|
|
47
|
-
@mixin
|
|
59
|
+
@mixin icon-plus($color) {
|
|
60
|
+
@include header-icon-base;
|
|
48
61
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
62
|
+
&:before {
|
|
63
|
+
background-image : url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><line x1='10' y1='0' x2='10' y2='20' stroke-width='2' stroke='#{ $color }' /><line x1='0' y1='10' x2='20' y2='10' stroke-width='2' stroke='#{ $color }' /></svg>");
|
|
64
|
+
background-size : 20px 20px;
|
|
65
|
+
background-position : 10px 10px;
|
|
66
|
+
}
|
|
54
67
|
}
|
|
55
68
|
|
|
69
|
+
@mixin icon-folder($color) {
|
|
70
|
+
@include header-icon-base;
|
|
56
71
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
&, &:after { border-radius: 50%; width: 1.75em; height: 1.75em; }
|
|
63
|
-
}
|
|
72
|
+
&:before {
|
|
73
|
+
background-image : url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='#{ $color }'/></svg>");
|
|
74
|
+
background-size : 10px 16px;
|
|
75
|
+
background-position : 9px 12px;
|
|
76
|
+
}
|
|
64
77
|
|
|
65
|
-
|
|
66
|
-
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
|
|
67
|
-
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
|
78
|
+
@include transform(rotate(180deg));
|
|
68
79
|
}
|
|
69
80
|
|
|
70
|
-
@
|
|
71
|
-
|
|
72
|
-
|
|
81
|
+
@mixin icon-arrow($color) {
|
|
82
|
+
@include header-icon-base;
|
|
83
|
+
|
|
84
|
+
&:before {
|
|
85
|
+
background-image : url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='#{ $color }'/></svg>");
|
|
86
|
+
background-size : 12px 20px;
|
|
87
|
+
background-position : 12px 9px;
|
|
88
|
+
}
|
|
73
89
|
}
|
|
74
90
|
|
|
75
91
|
|
|
76
92
|
|
|
77
93
|
|
|
94
|
+
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
/* Settings ---------------------------------------------------------------- */
|
|
2
|
+
|
|
3
|
+
$base-font-family : 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif !default;
|
|
4
|
+
|
|
5
|
+
$light : 300 !default;
|
|
6
|
+
$regular : 400 !default;
|
|
7
|
+
$medium : 500 !default;
|
|
8
|
+
$bold : 600 !default;
|
|
9
|
+
$black : 800 !default;
|
|
10
|
+
|
|
11
|
+
$base-font-color : rgb( 89, 89, 89) !default;
|
|
12
|
+
$positive-color : rgb( 74,135,238) !default;
|
|
13
|
+
$assertive-color : rgb(239, 78, 58) !default;
|
|
14
|
+
$border-color : rgb(246,246,246) !default;
|
|
15
|
+
|
|
16
|
+
$formagic-base-color : $base-font-color;
|
|
17
|
+
$formagic-positive-color : $positive-color;
|
|
18
|
+
$formagic-assertive-color : $assertive-color;
|
|
19
|
+
$formagic-border-color : $border-color;
|
|
20
|
+
|
|
21
|
+
/* Theme ------------------------------------------------------------------- */
|
|
22
|
+
|
|
23
|
+
html {
|
|
24
|
+
font-family : $base-font-family;
|
|
25
|
+
color : $base-font-color;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
a {
|
|
29
|
+
color : $positive-color;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.menu a {
|
|
33
|
+
color : $base-font-color;
|
|
34
|
+
padding : .75em 1em;
|
|
35
|
+
&.active { background-color: $border-color; }
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.header a {
|
|
39
|
+
&:hover {
|
|
40
|
+
opacity : .5;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.menu-title,
|
|
45
|
+
.header .title,
|
|
46
|
+
.header .save {
|
|
47
|
+
font-weight : $medium;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.header {
|
|
51
|
+
background-color : rgba(255,255,255,.9);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.spinner {
|
|
55
|
+
border-color : rgba($positive-color, 0.2);
|
|
56
|
+
border-left-color : $positive-color;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.item {
|
|
60
|
+
color : $base-font-color;
|
|
61
|
+
margin-top : -1px;
|
|
62
|
+
&.active {
|
|
63
|
+
background-color : $border-color;
|
|
64
|
+
z-index : 1;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@include bottom-border($border-color);
|
|
68
|
+
&:last-child { @include no-bottom-border; }
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.item-subtitle {
|
|
72
|
+
color : rgba($base-font-color, .4);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.view-delete {
|
|
76
|
+
display : block;
|
|
77
|
+
text-align : center;
|
|
78
|
+
margin : 5em 0;
|
|
79
|
+
line-height : 2.5em;
|
|
80
|
+
color : $assertive-color;
|
|
81
|
+
border : 1px solid $assertive-color;
|
|
82
|
+
border-left : none;
|
|
83
|
+
border-right : none;
|
|
84
|
+
|
|
85
|
+
&:hover,
|
|
86
|
+
&:active {
|
|
87
|
+
background-color : $assertive-color;
|
|
88
|
+
color : white;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/* Icons ------------------------------------------------------------------- */
|
|
93
|
+
|
|
94
|
+
.search .icon { @include icon-search($positive-color); }
|
|
95
|
+
.list-search .search .icon { @include icon-search(lighten($base-font-color, 40%)); }
|
|
96
|
+
|
|
97
|
+
.header .new { @include icon-plus($positive-color); }
|
|
98
|
+
|
|
99
|
+
.item .icon-reorder { @include icon-reorder(lighten($base-font-color, 50%)); }
|
|
100
|
+
.item .icon-folder { @include icon-folder(lighten($base-font-color, 50%)); }
|
|
101
|
+
|
|
102
|
+
.slip-reordering > .icon-reorder:before,
|
|
103
|
+
.slip-reordering > .icon-reorder:after { background-color: $positive-color; }
|
|
104
|
+
|
|
105
|
+
.header .back, .header .close { @include icon-arrow($positive-color); }
|
|
106
|
+
|
|
107
|
+
/* Layouts ----------------------------------------------------------------- */
|
|
108
|
+
|
|
109
|
+
@media #{$tablet} {
|
|
110
|
+
.sidebar { border-color: $border-color; }
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
@media #{$desktop} {
|
|
114
|
+
.list .header { border-color: $border-color; }
|
|
115
|
+
.input-text textarea, .content, .items { @include custom-scrollbar(rgba($base-font-color, .5), $border-color, 3px); }
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
|
data/chr.gemspec
CHANGED
|
@@ -26,18 +26,17 @@ email client etc. It's responsive by default and designed to be data source inde
|
|
|
26
26
|
s.version = Chr::VERSION
|
|
27
27
|
s.platform = Gem::Platform::RUBY
|
|
28
28
|
|
|
29
|
-
s.add_dependency 'rails',
|
|
30
|
-
s.add_dependency 'coffee-rails',
|
|
29
|
+
s.add_dependency 'rails', Chr::RAILS_VERSION
|
|
30
|
+
s.add_dependency 'coffee-rails', '>= 4.0'
|
|
31
|
+
s.add_dependency 'formagic', '>= 0.2.8'
|
|
31
32
|
s.add_dependency 'jquery-rails'
|
|
32
33
|
s.add_dependency 'sass-rails'
|
|
33
|
-
s.add_dependency '
|
|
34
|
-
s.add_dependency 'bourbon', '>= 3.2'
|
|
35
|
-
s.add_dependency 'formagic', '>= 0.2.6'
|
|
34
|
+
s.add_dependency 'bourbon'
|
|
36
35
|
|
|
37
36
|
# tests
|
|
38
37
|
s.add_development_dependency 'mongosteen', '~> 0.1.8'
|
|
39
|
-
s.add_development_dependency 'ants', '~> 0.2.
|
|
40
|
-
s.add_development_dependency 'loft', '~> 0.2.
|
|
38
|
+
s.add_development_dependency 'ants', '~> 0.2.2'
|
|
39
|
+
s.add_development_dependency 'loft', '~> 0.2.4'
|
|
41
40
|
|
|
42
41
|
s.add_development_dependency 'faker'
|
|
43
42
|
s.add_development_dependency 'coveralls'
|
data/lib/chr.rb
CHANGED
data/lib/chr/version.rb
CHANGED
|
@@ -12,7 +12,6 @@
|
|
|
12
12
|
## List
|
|
13
13
|
# disableNewItems: true tested
|
|
14
14
|
# showWithParent: true tested
|
|
15
|
-
# disableFormCache: true tested
|
|
16
15
|
|
|
17
16
|
## View
|
|
18
17
|
# disableDelete - do not add delete button below the form tested
|
|
@@ -70,7 +69,6 @@ $ ->
|
|
|
70
69
|
|
|
71
70
|
articles:
|
|
72
71
|
|
|
73
|
-
disableFormCache: true
|
|
74
72
|
arrayStore: new RailsArrayStore({
|
|
75
73
|
resource: 'article'
|
|
76
74
|
path: '/admin/articles'
|
|
@@ -92,8 +90,7 @@ $ ->
|
|
|
92
90
|
items:
|
|
93
91
|
pages:
|
|
94
92
|
title: 'Pages'
|
|
95
|
-
showWithParent:
|
|
96
|
-
disableFormCache: true
|
|
93
|
+
showWithParent: true
|
|
97
94
|
items:
|
|
98
95
|
articles:
|
|
99
96
|
|
|
@@ -114,7 +111,6 @@ $ ->
|
|
|
114
111
|
|
|
115
112
|
sport_articles:
|
|
116
113
|
|
|
117
|
-
disableFormCache: true
|
|
118
114
|
arrayStore: new RailsArrayStore({
|
|
119
115
|
resource: 'article'
|
|
120
116
|
path: '/admin/articles'
|
|
@@ -130,7 +126,7 @@ $ ->
|
|
|
130
126
|
_position: { type: 'float' }
|
|
131
127
|
body_html: { type: 'text' }
|
|
132
128
|
|
|
133
|
-
chr.start(config)
|
|
129
|
+
chr.start('Test', config)
|
|
134
130
|
|
|
135
131
|
|
|
136
132
|
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: chr
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.4.
|
|
4
|
+
version: 0.4.10
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Alexander Kravets
|
|
@@ -10,7 +10,7 @@ authors:
|
|
|
10
10
|
autorequire:
|
|
11
11
|
bindir: bin
|
|
12
12
|
cert_chain: []
|
|
13
|
-
date: 2015-09-
|
|
13
|
+
date: 2015-09-09 00:00:00.000000000 Z
|
|
14
14
|
dependencies:
|
|
15
15
|
- !ruby/object:Gem::Dependency
|
|
16
16
|
name: rails
|
|
@@ -41,21 +41,21 @@ dependencies:
|
|
|
41
41
|
- !ruby/object:Gem::Version
|
|
42
42
|
version: '4.0'
|
|
43
43
|
- !ruby/object:Gem::Dependency
|
|
44
|
-
name:
|
|
44
|
+
name: formagic
|
|
45
45
|
requirement: !ruby/object:Gem::Requirement
|
|
46
46
|
requirements:
|
|
47
47
|
- - ">="
|
|
48
48
|
- !ruby/object:Gem::Version
|
|
49
|
-
version:
|
|
49
|
+
version: 0.2.8
|
|
50
50
|
type: :runtime
|
|
51
51
|
prerelease: false
|
|
52
52
|
version_requirements: !ruby/object:Gem::Requirement
|
|
53
53
|
requirements:
|
|
54
54
|
- - ">="
|
|
55
55
|
- !ruby/object:Gem::Version
|
|
56
|
-
version:
|
|
56
|
+
version: 0.2.8
|
|
57
57
|
- !ruby/object:Gem::Dependency
|
|
58
|
-
name:
|
|
58
|
+
name: jquery-rails
|
|
59
59
|
requirement: !ruby/object:Gem::Requirement
|
|
60
60
|
requirements:
|
|
61
61
|
- - ">="
|
|
@@ -69,47 +69,33 @@ dependencies:
|
|
|
69
69
|
- !ruby/object:Gem::Version
|
|
70
70
|
version: '0'
|
|
71
71
|
- !ruby/object:Gem::Dependency
|
|
72
|
-
name:
|
|
72
|
+
name: sass-rails
|
|
73
73
|
requirement: !ruby/object:Gem::Requirement
|
|
74
74
|
requirements:
|
|
75
75
|
- - ">="
|
|
76
76
|
- !ruby/object:Gem::Version
|
|
77
|
-
version: '
|
|
77
|
+
version: '0'
|
|
78
78
|
type: :runtime
|
|
79
79
|
prerelease: false
|
|
80
80
|
version_requirements: !ruby/object:Gem::Requirement
|
|
81
81
|
requirements:
|
|
82
82
|
- - ">="
|
|
83
83
|
- !ruby/object:Gem::Version
|
|
84
|
-
version: '
|
|
84
|
+
version: '0'
|
|
85
85
|
- !ruby/object:Gem::Dependency
|
|
86
86
|
name: bourbon
|
|
87
87
|
requirement: !ruby/object:Gem::Requirement
|
|
88
88
|
requirements:
|
|
89
89
|
- - ">="
|
|
90
90
|
- !ruby/object:Gem::Version
|
|
91
|
-
version: '
|
|
92
|
-
type: :runtime
|
|
93
|
-
prerelease: false
|
|
94
|
-
version_requirements: !ruby/object:Gem::Requirement
|
|
95
|
-
requirements:
|
|
96
|
-
- - ">="
|
|
97
|
-
- !ruby/object:Gem::Version
|
|
98
|
-
version: '3.2'
|
|
99
|
-
- !ruby/object:Gem::Dependency
|
|
100
|
-
name: formagic
|
|
101
|
-
requirement: !ruby/object:Gem::Requirement
|
|
102
|
-
requirements:
|
|
103
|
-
- - ">="
|
|
104
|
-
- !ruby/object:Gem::Version
|
|
105
|
-
version: 0.2.6
|
|
91
|
+
version: '0'
|
|
106
92
|
type: :runtime
|
|
107
93
|
prerelease: false
|
|
108
94
|
version_requirements: !ruby/object:Gem::Requirement
|
|
109
95
|
requirements:
|
|
110
96
|
- - ">="
|
|
111
97
|
- !ruby/object:Gem::Version
|
|
112
|
-
version: 0
|
|
98
|
+
version: '0'
|
|
113
99
|
- !ruby/object:Gem::Dependency
|
|
114
100
|
name: mongosteen
|
|
115
101
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -130,28 +116,28 @@ dependencies:
|
|
|
130
116
|
requirements:
|
|
131
117
|
- - "~>"
|
|
132
118
|
- !ruby/object:Gem::Version
|
|
133
|
-
version: 0.2.
|
|
119
|
+
version: 0.2.2
|
|
134
120
|
type: :development
|
|
135
121
|
prerelease: false
|
|
136
122
|
version_requirements: !ruby/object:Gem::Requirement
|
|
137
123
|
requirements:
|
|
138
124
|
- - "~>"
|
|
139
125
|
- !ruby/object:Gem::Version
|
|
140
|
-
version: 0.2.
|
|
126
|
+
version: 0.2.2
|
|
141
127
|
- !ruby/object:Gem::Dependency
|
|
142
128
|
name: loft
|
|
143
129
|
requirement: !ruby/object:Gem::Requirement
|
|
144
130
|
requirements:
|
|
145
131
|
- - "~>"
|
|
146
132
|
- !ruby/object:Gem::Version
|
|
147
|
-
version: 0.2.
|
|
133
|
+
version: 0.2.4
|
|
148
134
|
type: :development
|
|
149
135
|
prerelease: false
|
|
150
136
|
version_requirements: !ruby/object:Gem::Requirement
|
|
151
137
|
requirements:
|
|
152
138
|
- - "~>"
|
|
153
139
|
- !ruby/object:Gem::Version
|
|
154
|
-
version: 0.2.
|
|
140
|
+
version: 0.2.4
|
|
155
141
|
- !ruby/object:Gem::Dependency
|
|
156
142
|
name: faker
|
|
157
143
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -309,7 +295,6 @@ files:
|
|
|
309
295
|
- app/assets/javascripts/chr/module.coffee
|
|
310
296
|
- app/assets/javascripts/chr/utils.coffee
|
|
311
297
|
- app/assets/javascripts/chr/view.coffee
|
|
312
|
-
- app/assets/javascripts/chr/view_local-storage.coffee
|
|
313
298
|
- app/assets/javascripts/stores/array.coffee
|
|
314
299
|
- app/assets/javascripts/stores/object.coffee
|
|
315
300
|
- app/assets/javascripts/stores/rails-array.coffee
|
|
@@ -319,10 +304,9 @@ files:
|
|
|
319
304
|
- app/assets/javascripts/stores/rest-object.coffee
|
|
320
305
|
- app/assets/javascripts/vendor/slip.js
|
|
321
306
|
- app/assets/stylesheets/chr.scss
|
|
322
|
-
- app/assets/stylesheets/chr/
|
|
323
|
-
- app/assets/stylesheets/chr/main.scss
|
|
307
|
+
- app/assets/stylesheets/chr/layout.scss
|
|
324
308
|
- app/assets/stylesheets/chr/mixins.scss
|
|
325
|
-
- app/assets/stylesheets/chr/
|
|
309
|
+
- app/assets/stylesheets/chr/themes/basic.scss
|
|
326
310
|
- bin/chr
|
|
327
311
|
- bin/rake
|
|
328
312
|
- bin/setup
|
|
@@ -428,7 +412,6 @@ files:
|
|
|
428
412
|
- test/rails_app/config/secrets.yml
|
|
429
413
|
- test/rails_app/db/seeds.rb
|
|
430
414
|
- test/rails_app/log/development.log
|
|
431
|
-
- test/rails_app/log/test.log
|
|
432
415
|
- test/rails_app/public/404.html
|
|
433
416
|
- test/rails_app/public/422.html
|
|
434
417
|
- test/rails_app/public/500.html
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
# -----------------------------------------------------------------------------
|
|
2
|
-
# Author: Alexander Kravets <alex@slatestudio.com>,
|
|
3
|
-
# Slate Studio (http://www.slatestudio.com)
|
|
4
|
-
#
|
|
5
|
-
# Coding Guide:
|
|
6
|
-
# https://github.com/thoughtbot/guides/tree/master/style/coffeescript
|
|
7
|
-
# -----------------------------------------------------------------------------
|
|
8
|
-
|
|
9
|
-
# -----------------------------------------------------------------------------
|
|
10
|
-
# VIEW LOCAL STORAGE
|
|
11
|
-
# -----------------------------------------------------------------------------
|
|
12
|
-
# @TODO: test how this works with nested forms
|
|
13
|
-
# -----------------------------------------------------------------------------
|
|
14
|
-
|
|
15
|
-
@viewLocalStorage =
|
|
16
|
-
|
|
17
|
-
# PRIVATE ===============================================
|
|
18
|
-
|
|
19
|
-
_bind_form_change: ->
|
|
20
|
-
if typeof(Storage)
|
|
21
|
-
@form.$el.on 'change', (e) => @_cache_form_state()
|
|
22
|
-
else
|
|
23
|
-
console.log ':: local storage is not supported ::'
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
_cache_form_state: ->
|
|
27
|
-
hash = @form.hash()
|
|
28
|
-
json = JSON.stringify(hash)
|
|
29
|
-
localStorage.setItem(@path, json)
|
|
30
|
-
|
|
31
|
-
@$el.addClass 'has-unsaved-changes'
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
_update_object_from_local_storage: ->
|
|
35
|
-
if typeof(Storage)
|
|
36
|
-
json = localStorage.getItem(@path)
|
|
37
|
-
if json
|
|
38
|
-
hash = JSON.parse(json)
|
|
39
|
-
$.extend(@object, hash)
|
|
40
|
-
|
|
41
|
-
@$el.addClass 'has-unsaved-changes'
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
_changes_not_saved: ->
|
|
45
|
-
if typeof(Storage)
|
|
46
|
-
# if object is missing localStorage.getItem returns null
|
|
47
|
-
if localStorage.getItem(@path) then true else false
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
_clear_local_storage_cache: ->
|
|
51
|
-
if typeof(Storage)
|
|
52
|
-
localStorage.removeItem(@path)
|
|
53
|
-
|
|
54
|
-
@$el.removeClass 'has-unsaved-changes'
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
@mixin rotate($deg) {
|
|
2
|
-
-webkit-transform:rotate($deg * 1deg);
|
|
3
|
-
-moz-transform:rotate($deg * 1deg);
|
|
4
|
-
-ms-transform:rotate($deg * 1deg);
|
|
5
|
-
-o-transform:rotate($deg * 1deg);
|
|
6
|
-
transform:rotate($deg * 1deg);
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.icon-base {
|
|
10
|
-
display: block;
|
|
11
|
-
width: 40px;
|
|
12
|
-
height: 40px;
|
|
13
|
-
&:after, &:before {
|
|
14
|
-
content:"";
|
|
15
|
-
position:absolute;
|
|
16
|
-
top:50%;
|
|
17
|
-
left:0;
|
|
18
|
-
background: $positiveColor;
|
|
19
|
-
}
|
|
20
|
-
&:hover { &:after, &:before { opacity: .5; } }
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.icon-plus { @extend .icon-base;
|
|
24
|
-
&:before {
|
|
25
|
-
left:19px;
|
|
26
|
-
width:2px;
|
|
27
|
-
height:20px;
|
|
28
|
-
margin-top:-10px;
|
|
29
|
-
|
|
30
|
-
}
|
|
31
|
-
&:after {
|
|
32
|
-
left:10px;
|
|
33
|
-
width:20px;
|
|
34
|
-
height:2px;
|
|
35
|
-
margin-top:-1px;
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.icon-arrow-left { @extend .icon-base;
|
|
40
|
-
&:after,
|
|
41
|
-
&:before { left:8px; width:14px; height:2px; }
|
|
42
|
-
|
|
43
|
-
&:before { margin-top: 4px; @include rotate(45); }
|
|
44
|
-
&:after { margin-top: -5px; @include rotate(-45); }
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.icon-back {
|
|
48
|
-
display: block;
|
|
49
|
-
width: 40px;
|
|
50
|
-
line-height: 42px;
|
|
51
|
-
|
|
52
|
-
&:before {
|
|
53
|
-
content: '';
|
|
54
|
-
display: inline-block;
|
|
55
|
-
vertical-align: middle;
|
|
56
|
-
background-size: 100% auto;
|
|
57
|
-
background-position: center;
|
|
58
|
-
background-repeat: no-repeat;
|
|
59
|
-
font-style: normal;
|
|
60
|
-
position: relative;
|
|
61
|
-
width: 12px;
|
|
62
|
-
height: 20px;
|
|
63
|
-
margin-top: -5px;
|
|
64
|
-
background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23007aff'/></svg>");
|
|
65
|
-
}
|
|
66
|
-
&:hover { opacity: .5; }
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.icon-folder { @extend .icon-base;
|
|
70
|
-
position: absolute;
|
|
71
|
-
top: 50%;
|
|
72
|
-
margin-top: -20px;
|
|
73
|
-
right: 0;
|
|
74
|
-
&:after,
|
|
75
|
-
&:before { left:20px; width:10px; height:2px; background: $contrastColor; }
|
|
76
|
-
|
|
77
|
-
&:before { margin-top: 2px; @include rotate(-45); }
|
|
78
|
-
&:after { margin-top: -4px; @include rotate(45); }
|
|
79
|
-
&:hover { &:after, &:before { opacity: 1; } }
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.icon-search {
|
|
83
|
-
display: block;
|
|
84
|
-
width: 40px;
|
|
85
|
-
height: 40px;
|
|
86
|
-
|
|
87
|
-
&:before {
|
|
88
|
-
content:"";
|
|
89
|
-
position:absolute;
|
|
90
|
-
top: 11px;
|
|
91
|
-
left: 10px;
|
|
92
|
-
border: 1px solid $positiveColor;
|
|
93
|
-
width: 14px;
|
|
94
|
-
height: 14px;
|
|
95
|
-
border-radius: 7px;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
&:after {
|
|
99
|
-
content:"";
|
|
100
|
-
position:absolute;
|
|
101
|
-
@include rotate(-43);
|
|
102
|
-
width: 2px;
|
|
103
|
-
height: 8px;
|
|
104
|
-
left: 23px;
|
|
105
|
-
top: 21px;
|
|
106
|
-
background-color: $positiveColor;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
&:hover { opacity: .5; }
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.icon-reorder {
|
|
113
|
-
position: absolute; width: 40px; height: 40px;
|
|
114
|
-
cursor: pointer;
|
|
115
|
-
&:before,
|
|
116
|
-
&:after { content: ''; width: 20px; height: 2px; left: 10px; display: block; position: absolute; background-color: $contrastColor; }
|
|
117
|
-
&:before { top: 16px; }
|
|
118
|
-
&:after { top: 21px; }
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
.slip-reordering > .icon-reorder:before,
|
|
122
|
-
.slip-reordering > .icon-reorder:after { background-color: $positiveColor; }
|
|
123
|
-
|
|
124
|
-
|
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
/* Global ------------------------------------------------------------------ */
|
|
2
|
-
*, *:before, *:after { box-sizing: border-box; }
|
|
3
|
-
html { @include antialiased; font-family: $fontFamily; color: $black; }
|
|
4
|
-
html a { text-decoration: none; }
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
/* Menu -------------------------------------------------------------------- */
|
|
8
|
-
.menu { font-size: .8em; }
|
|
9
|
-
.menu:before { @include menu-title($contrastColor); content: 'CHARACTER'; }
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
/* Header ------------------------------------------------------------------ */
|
|
13
|
-
.header { height: 40px; background-color: rgba(255,255,255,.9); text-align: center;
|
|
14
|
-
.title { @include truncate; display: inline-block; max-width: 70%; font-weight: 500; line-height: 2.5; }
|
|
15
|
-
.back, .close { @include header-back-arrow; }
|
|
16
|
-
.new { @include position(absolute, 0 0 null null); @extend .icon-plus; }
|
|
17
|
-
.new + .search { @include position(absolute, 0 40px inherit inherit); }
|
|
18
|
-
.spinner { @include spinner; @include hide; position: absolute; margin: 6px 0 0 -36px; }
|
|
19
|
-
|
|
20
|
-
// this is disabled until local storage is back
|
|
21
|
-
//.save { @include position(absolute, 0 1em null null); @include header-button($stableColor); font-weight: 500; }
|
|
22
|
-
.save { @include position(absolute, 0 1em null null); @include header-button($positiveColor); font-weight: 500; }
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
// these are ignored until local storage is back
|
|
26
|
-
.view.has-unsaved-changes .save { color: $positiveColor; }
|
|
27
|
-
.view.has-unsaved-changes .title:after { content: ' (not saved)'; font-weight: 300; font-size: .8em; }
|
|
28
|
-
// ------------------------------------------------------
|
|
29
|
-
|
|
30
|
-
.show-spinner .spinner { display: inline-block; }
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
/* Item -------------------------------------------------------------------- */
|
|
34
|
-
.menu a, .item { @include list-item($black, $neutralColor, $neutralColor); }
|
|
35
|
-
|
|
36
|
-
.item .icon-reorder { top: 50%; margin-top: -20px; right: 0; }
|
|
37
|
-
|
|
38
|
-
.item.is-folder { font-weight: 400; }
|
|
39
|
-
.item.has-subtitle { padding: .6em 1em; }
|
|
40
|
-
.item.has-thumbnail { padding-left: 4.1em; }
|
|
41
|
-
.item.has-thumbnail .item-title { line-height: 2.15; }
|
|
42
|
-
.item.has-thumbnail.has-subtitle { padding: 1em 1em .75em 4.1em; }
|
|
43
|
-
.item.has-thumbnail.has-subtitle .item-title { line-height: 1.2; }
|
|
44
|
-
.item.reorderable { padding-right: 2.5em; }
|
|
45
|
-
|
|
46
|
-
.item-title { @include truncate; }
|
|
47
|
-
.item-subtitle { @include truncate; color: $stableColor; font-size: .8em; line-height: 1.5; }
|
|
48
|
-
.item-thumbnail { @include position(absolute, .5em 0 0 .5em); width: 3.1em; height: 3.1em; }
|
|
49
|
-
.item-thumbnail img { width: 100%; border-radius: 25px; }
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
/* Search ------------------------------------------------------------------ */
|
|
53
|
-
.search { @include position(absolute, 0 0 null null); width: 40px; height: 40px; overflow: hidden;
|
|
54
|
-
.icon { @include position(absolute, 0 null null 0); @extend .icon-search; }
|
|
55
|
-
input, .cancel { @include hide; }
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.list-search {
|
|
59
|
-
.item.is-folder, .item.is-nested_object { @include hide; }
|
|
60
|
-
.new + .search { @include position(absolute, 0 0 null 0); }
|
|
61
|
-
.search { @include position(absolute, 0 null null null); width: 100%; background-color: $white;
|
|
62
|
-
.cancel { display: inline; @include header-button; @include position(absolute, 0 1em null null); }
|
|
63
|
-
input { display: block; width: 100%; height: 40px; padding: 0 5em 0 2.5em; @include no-outline; }
|
|
64
|
-
.icon { &:hover { opacity: 1; } &:before { border-color: $stableColor; } &:after { background-color: $stableColor; } }
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
/* View -------------------------------------------------------------------- */
|
|
70
|
-
.view-delete { display: block; text-align: center; margin: 5em 0; line-height: 2.5em;
|
|
71
|
-
color: $assertiveColor; border: 1px solid $assertiveColor; border-left: none; border-right: none;
|
|
72
|
-
&:hover, &:active { background-color: $assertiveColor; color: #fff; } }
|
|
73
|
-
|
|
74
|
-
.view-saving .save { @include hide(); }
|
|
75
|
-
.view-saving .spinner { display: inline-block; }
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
/* Mobile ------------------------------------------------------------------ */
|
|
79
|
-
.header { @include position(fixed, 0 null null null); z-index: 10; width: 100%; }
|
|
80
|
-
.view, .list { @include position(absolute, 0 0 null 0); background-color: $white; z-index: 1; padding-top: 41px; min-height: 100%; }
|
|
81
|
-
.list.scroll-lock { overflow: hidden; bottom: 0; }
|
|
82
|
-
.content, .items { padding-bottom: 5em; position: relative; z-index: 0; }
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
/* Tablet ------------------------------------------------------------------ */
|
|
86
|
-
@media #{$tablet} {
|
|
87
|
-
body { overflow: hidden; }
|
|
88
|
-
.sidebar { @include position(absolute, 0 null 0 0); width: 9em; }
|
|
89
|
-
.module { @include position(absolute, 0 0 0 9em); z-index: 1; @include border-shadow; }
|
|
90
|
-
.view,
|
|
91
|
-
.list { @include position(absolute, 0 0 0 0); overflow: hidden; background-color: #fff; padding-top: 0px; }
|
|
92
|
-
.header { @include position(relative); }
|
|
93
|
-
.items,
|
|
94
|
-
.content { @include position(absolute, 41px 0 0 0); @include scrollable(); }
|
|
95
|
-
|
|
96
|
-
.view .close { @include header-back-label; }
|
|
97
|
-
.module .list:first-child .back { @include hide; }
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
/* Desktop ----------------------------------------------------------------- */
|
|
102
|
-
@media #{$desktop} {
|
|
103
|
-
.sidebar { width: 10em; }
|
|
104
|
-
.module { left: 10em; }
|
|
105
|
-
.list { width: 22em; }
|
|
106
|
-
.list.list-aside { left: 22em; right: 0; width: auto; }
|
|
107
|
-
.list .header { border-right: 1px solid $neutralColor; }
|
|
108
|
-
.view { left: 22em; @include border-shadow; }
|
|
109
|
-
.view.fullsize { left: 0em; @include no-border-shadow; }
|
|
110
|
-
|
|
111
|
-
.list.list-aside .back { @include header-back-label; }
|
|
112
|
-
.input-text textarea, .content, .items { @include custom-scrollbar; }
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/* Settings ---------------------------------------------------------------- */
|
|
2
|
-
$positiveColor: rgb( 74,135,238) !default;
|
|
3
|
-
$stableColor: rgb(178,178,178) !default;
|
|
4
|
-
$lightColor: rgb(210,210,210) !default;
|
|
5
|
-
$assertiveColor: rgb(239, 78, 58) !default;
|
|
6
|
-
$neutralColor: rgb(246,246,246) !default;
|
|
7
|
-
$contrastColor: rgb(230,230,230) !default;
|
|
8
|
-
$white: rgb(255,255,255) !default;
|
|
9
|
-
$black: #333 !default;
|
|
10
|
-
|
|
11
|
-
$fontFamily: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif !default;
|
|
12
|
-
|
|
13
|
-
/* Layouts ----------------------------------------------------------------- */
|
|
14
|
-
$tablet: "screen and (min-width:768px)";
|
|
15
|
-
$desktop: "screen and (min-width:1024px)";
|