chr 0.4.9 → 0.4.10
Sign up to get free protection for your applications and to get access to all the features.
- 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)";
|