spina 1.2.0 → 2.0.0.alpha

Sign up to get free protection for your applications and to get access to all the features.

Potentially problematic release.

This version of spina might be problematic. Click here for more details.

Files changed (142) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/images/spina/favicon.png +0 -0
  3. data/app/assets/javascripts/spina/admin/application.js +1 -2
  4. data/app/assets/javascripts/spina/admin/controllers/attachment_picker_controller.js +15 -0
  5. data/app/assets/javascripts/spina/admin/controllers/image_form_controller.js +5 -4
  6. data/app/assets/javascripts/spina/admin/controllers/infinite_scroll_controller.js +20 -22
  7. data/app/assets/javascripts/spina/admin/controllers/media_picker_controller.js +171 -0
  8. data/app/assets/javascripts/spina/admin/controllers/modal_controller.js +18 -0
  9. data/app/assets/javascripts/spina/admin/controllers/repeater_form_controller.js +38 -0
  10. data/app/assets/javascripts/spina/admin/media_gallery.coffee +0 -3
  11. data/app/assets/javascripts/spina/admin/notifications.coffee +1 -1
  12. data/app/assets/javascripts/spina/admin/pages.coffee.erb +3 -20
  13. data/app/assets/javascripts/spina/admin/scaffold.coffee +0 -3
  14. data/app/assets/javascripts/spina/admin/trix.coffee.erb +14 -18
  15. data/app/assets/stylesheets/spina.sass +10 -8
  16. data/app/assets/stylesheets/spina/_buttons.sass +57 -31
  17. data/app/assets/stylesheets/spina/_forms.sass +59 -73
  18. data/app/assets/stylesheets/spina/_gallery.sass +18 -2
  19. data/app/assets/stylesheets/spina/_media_picker.sass +133 -0
  20. data/app/assets/stylesheets/spina/_modal.sass +35 -2
  21. data/app/assets/stylesheets/spina/_notifications.sass +20 -14
  22. data/app/assets/stylesheets/spina/_pages.sass +131 -0
  23. data/app/assets/stylesheets/spina/_sortable_lists.sass +14 -8
  24. data/app/assets/stylesheets/spina/_trix_custom.sass +1 -1
  25. data/app/controllers/concerns/spina/frontend.rb +9 -0
  26. data/app/controllers/spina/admin/accounts_controller.rb +9 -13
  27. data/app/controllers/spina/admin/attachments_controller.rb +0 -22
  28. data/app/controllers/spina/admin/images_controller.rb +1 -1
  29. data/app/controllers/spina/admin/media_picker_controller.rb +18 -19
  30. data/app/controllers/spina/admin/pages_controller.rb +1 -5
  31. data/app/controllers/spina/admin/resources_controller.rb +9 -4
  32. data/app/controllers/spina/application_controller.rb +1 -1
  33. data/app/helpers/spina/admin/pages_helper.rb +22 -20
  34. data/app/helpers/spina/{files_helper.rb → attachments_helper.rb} +1 -1
  35. data/app/helpers/spina/images_helper.rb +6 -0
  36. data/app/helpers/spina/pages_helper.rb +23 -4
  37. data/app/models/concerns/spina/partable.rb +19 -7
  38. data/app/models/concerns/spina/translated_content.rb +19 -0
  39. data/app/models/spina/account.rb +3 -10
  40. data/app/models/spina/attachment.rb +0 -4
  41. data/app/models/spina/current.rb +1 -0
  42. data/app/models/spina/image.rb +0 -4
  43. data/app/models/spina/page.rb +7 -15
  44. data/app/models/spina/parts/attachment.rb +17 -0
  45. data/app/models/spina/parts/base.rb +12 -0
  46. data/app/models/spina/parts/image.rb +30 -0
  47. data/app/models/spina/parts/image_collection.rb +23 -0
  48. data/app/models/spina/parts/line.rb +7 -0
  49. data/app/models/spina/parts/option.rb +13 -0
  50. data/app/models/spina/parts/repeater.rb +10 -0
  51. data/app/models/spina/parts/repeater_content.rb +15 -0
  52. data/app/models/spina/parts/text.rb +7 -0
  53. data/app/models/spina/resource.rb +4 -0
  54. data/app/presenters/spina/content_presenter.rb +58 -0
  55. data/app/presenters/spina/menu_presenter.rb +2 -1
  56. data/app/views/layouts/spina/admin/admin.html.haml +3 -4
  57. data/app/views/layouts/spina/admin/pages.html.haml +5 -4
  58. data/app/views/spina/admin/accounts/_form.html.haml +13 -7
  59. data/app/views/spina/admin/accounts/analytics.html.haml +5 -3
  60. data/app/views/spina/admin/accounts/style.html.haml +26 -21
  61. data/app/views/spina/admin/images/index.html.haml +7 -5
  62. data/app/views/spina/admin/media_folders/show.html.haml +2 -2
  63. data/app/views/spina/admin/media_picker/_image.html.haml +3 -0
  64. data/app/views/spina/admin/media_picker/_media_picker.html.haml +32 -0
  65. data/app/views/spina/admin/media_picker/_media_picker_grid.html.haml +25 -0
  66. data/app/views/spina/admin/media_picker/infinite_scroll.js.erb +4 -4
  67. data/app/views/spina/admin/media_picker/select.js.erb +2 -0
  68. data/app/views/spina/admin/media_picker/show.html.haml +1 -0
  69. data/app/views/spina/admin/media_picker/show.js.erb +1 -1
  70. data/app/views/spina/admin/pages/_form.html.haml +9 -7
  71. data/app/views/spina/admin/pages/_form_advanced.html.haml +5 -5
  72. data/app/views/spina/admin/pages/_form_page_content.html.haml +14 -13
  73. data/app/views/spina/admin/pages/_form_page_seo.html.haml +9 -5
  74. data/app/views/spina/admin/pages/_page.html.haml +5 -3
  75. data/app/views/spina/admin/pages/_page_nested_list.html.haml +2 -3
  76. data/app/views/spina/admin/pages/index.html.haml +5 -4
  77. data/app/views/spina/admin/parts/attachments/_form.html.haml +6 -0
  78. data/app/views/spina/admin/parts/image_collections/_fields.html.haml +7 -0
  79. data/app/views/spina/admin/parts/image_collections/_form.html.haml +12 -0
  80. data/app/views/spina/admin/parts/images/_form.html.haml +18 -0
  81. data/app/views/spina/admin/parts/lines/_form.html.haml +2 -0
  82. data/app/views/spina/admin/parts/options/_form.html.haml +3 -0
  83. data/app/views/spina/admin/parts/repeaters/_fields.html.haml +15 -0
  84. data/app/views/spina/admin/parts/repeaters/_form.html.haml +18 -0
  85. data/app/views/spina/admin/parts/texts/_form.html.haml +6 -0
  86. data/app/views/spina/admin/resources/edit.html.haml +28 -5
  87. data/app/views/spina/admin/resources/show.html.haml +5 -2
  88. data/app/views/spina/admin/shared/_notifications.html.haml +4 -4
  89. data/db/migrate/12_add_url_title_to_spina_page_translations.rb +1 -1
  90. data/db/migrate/13_add_json_attributes_to_spina_accounts.rb +5 -0
  91. data/db/migrate/14_add_json_attributes_to_spina_pages.rb +5 -0
  92. data/db/migrate/15_add_slug_to_spina_resources.rb +5 -0
  93. data/lib/generators/spina/templates/app/views/demo/pages/demo.html.haml +13 -21
  94. data/lib/generators/spina/templates/app/views/demo/pages/homepage.html.haml +1 -1
  95. data/lib/generators/spina/templates/config/initializers/themes/default.rb +4 -4
  96. data/lib/generators/spina/templates/config/initializers/themes/demo.rb +32 -44
  97. data/lib/spina.rb +2 -0
  98. data/lib/spina/attr_json_spina_parts_model.rb +29 -0
  99. data/lib/spina/engine.rb +13 -2
  100. data/lib/spina/part.rb +19 -0
  101. data/lib/spina/theme.rb +1 -1
  102. data/lib/spina/version.rb +1 -1
  103. data/vendor/assets/javascripts/spina/sortable.js +2 -2
  104. metadata +54 -42
  105. data/app/assets/javascripts/spina/admin/account.coffee +0 -16
  106. data/app/models/concerns/spina/image_collectable.rb +0 -23
  107. data/app/models/concerns/spina/optionable.rb +0 -12
  108. data/app/models/concerns/spina/part.rb +0 -38
  109. data/app/models/spina/attachment_collection.rb +0 -20
  110. data/app/models/spina/image_collection.rb +0 -23
  111. data/app/models/spina/image_collections_image.rb +0 -6
  112. data/app/models/spina/layout_part.rb +0 -22
  113. data/app/models/spina/line.rb +0 -10
  114. data/app/models/spina/option.rb +0 -17
  115. data/app/models/spina/page_part.rb +0 -22
  116. data/app/models/spina/structure.rb +0 -14
  117. data/app/models/spina/structure_item.rb +0 -22
  118. data/app/models/spina/structure_part.rb +0 -20
  119. data/app/models/spina/text.rb +0 -10
  120. data/app/views/dummy/show.html.haml +0 -1
  121. data/app/views/spina/admin/attachments/_attachment_collection.html.haml +0 -2
  122. data/app/views/spina/admin/attachments/_select.html.haml +0 -17
  123. data/app/views/spina/admin/attachments/_select_collection.html.haml +0 -18
  124. data/app/views/spina/admin/attachments/insert.js.erb +0 -5
  125. data/app/views/spina/admin/attachments/insert_collection.js.coffee +0 -7
  126. data/app/views/spina/admin/attachments/select.js.erb +0 -2
  127. data/app/views/spina/admin/attachments/select_collection.js.erb +0 -2
  128. data/app/views/spina/admin/image_collections/_image_collection.html.haml +0 -5
  129. data/app/views/spina/admin/layout_partables/lines/_form.html.haml +0 -2
  130. data/app/views/spina/admin/partables/attachment_collections/_form.html.haml +0 -14
  131. data/app/views/spina/admin/partables/attachments/_form.html.haml +0 -13
  132. data/app/views/spina/admin/partables/image_collections/_form.html.haml +0 -16
  133. data/app/views/spina/admin/partables/images/_form.html.haml +0 -21
  134. data/app/views/spina/admin/partables/lines/_form.html.haml +0 -5
  135. data/app/views/spina/admin/partables/options/_form.html.haml +0 -7
  136. data/app/views/spina/admin/partables/photo_collections/_form.html.haml +0 -4
  137. data/app/views/spina/admin/partables/photos/_form.html.haml +0 -4
  138. data/app/views/spina/admin/partables/structures/_form.html.haml +0 -21
  139. data/app/views/spina/admin/partables/texts/_form.html.haml +0 -8
  140. data/app/views/spina/admin/structure_items/_fields.html.haml +0 -15
  141. data/app/views/spina/admin/structure_partables/attachment_collections/_form.html.haml +0 -14
  142. data/app/views/spina/admin/structure_partables/attachments/_form.html.haml +0 -13
data/app/assets/stylesheets/spina/_gallery.sass CHANGED
@@ -235,8 +235,9 @@
235
235
 
236
236
  .gallery .item
237
237
  .customfile
238
+ background: white
238
239
  border: 1px solid #e5e5e5
239
- border-radius: 5px
240
+ border-radius: 6px
240
241
  cursor: pointer
241
242
  height: 100%
242
243
  overflow: hidden
@@ -309,10 +310,11 @@
309
310
  text-transform: lowercase
310
311
  transition: color .2s ease
311
312
  width: 100%
313
+ z-index: 1
312
314
 
313
315
  // Media folders
314
316
 
315
- .item.media-folder
317
+ .media-folder
316
318
  align-items: center
317
319
  background: #e5e5f0
318
320
  border: 1px solid #d5d4e6
@@ -338,6 +340,19 @@
338
340
  transition: transform .4s ease
339
341
  width: 70px
340
342
 
343
+ .media-folder-placeholder
344
+ align-items: center
345
+ background: $primary-color-light
346
+ border-radius: 5px
347
+ color: rgba(255, 255, 255, .5)
348
+ display: flex
349
+ font-size: 28px
350
+ height: 100%
351
+ justify-content: center
352
+ position: relative
353
+ width: 100%
354
+ z-index: 1
355
+
341
356
  &[data-badge]:after
342
357
  background: #6b699f
343
358
  border: 3px solid #e5e5f0
@@ -378,6 +393,7 @@
378
393
  border-radius: 5px
379
394
  position: relative
380
395
  width: 100%
396
+ z-index: 1
381
397
 
382
398
  .media-folder-name
383
399
  color: #4d4f81
data/app/assets/stylesheets/spina/_media_picker.sass ADDED
@@ -0,0 +1,133 @@
1
+ .modal section.media-picker
2
+ padding-top: 0
3
+
4
+ .media-picker-grid
5
+ display: grid
6
+ grid-auto-columns: minmax(200px, auto)
7
+ grid-template-columns: repeat(5, 1fr)
8
+ grid-row-gap: 15px
9
+ grid-column-gap: 15px
10
+
11
+ @media (min-width: 1680px)
12
+ grid-template-columns: repeat(6, 1fr)
13
+
14
+ .media-folder
15
+ border-radius: 6px
16
+
17
+ .media-picker-uploader
18
+ background: #eee
19
+ border-radius: 5px
20
+ height: 100%
21
+ position: relative
22
+
23
+ &:before
24
+ color: #999
25
+ font-size: 48px
26
+ left: 50%
27
+ position: absolute
28
+ top: 50%
29
+ transform: translateX(-50%) translateY(-50%)
30
+ @extend .icon, .icon-upload-outline
31
+
32
+ &:hover:before
33
+ color: #333
34
+
35
+ &.uploading:before
36
+ font-size: 24px
37
+ @extend .icon-dots
38
+
39
+ input[type="file"]
40
+ cursor: pointer
41
+ height: 100%
42
+ opacity: 0
43
+ width: 100%
44
+
45
+ input[type="submit"]
46
+ display: none
47
+
48
+ .media-picker-image
49
+ cursor: pointer
50
+ display: block
51
+ margin: 0
52
+ position: relative
53
+
54
+ span
55
+ background: #eee
56
+ border-radius: 6px
57
+ display: block
58
+ height: 0
59
+ overflow: hidden
60
+ padding-top: calc(150 / 200 * 100%)
61
+ position: relative
62
+
63
+ img
64
+ border-radius: 6px
65
+ display: block
66
+ height: auto
67
+ left: 0
68
+ position: absolute
69
+ top: 0
70
+ width: 100%
71
+
72
+ input[type="radio"], input[type="checkbox"]
73
+ display: none
74
+
75
+ input[type="radio"]:checked + span:before, input[type="checkbox"]:checked + span:before
76
+ background: $primary-color-light
77
+ border-radius: 6px
78
+ content: " "
79
+ height: 100%
80
+ left: 0px
81
+ opacity: .5
82
+ position: absolute
83
+ top: 0px
84
+ width: 100%
85
+ z-index: 1
86
+
87
+ input[type="radio"]:checked + span:after, input[type="checkbox"]:checked + span:after
88
+ align-items: center
89
+ background: rgba(0, 0, 0, .2)
90
+ border: 1px solid rgba(255, 255, 255, .25)
91
+ border-radius: 15px
92
+ content: "\f120"
93
+ color: white
94
+ display: flex
95
+ font-size: 13px
96
+ height: 30px
97
+ justify-content: center
98
+ left: 50%
99
+ position: absolute
100
+ transform: translateX(-50%) translateY(-50%)
101
+ top: 50%
102
+ width: 30px
103
+ z-index: 2
104
+ @extend .icon
105
+
106
+ .media-picker-footer
107
+ align-items: center
108
+ border-top: 1px solid #e9e9e9
109
+ bottom: 0px
110
+ display: flex
111
+ position: sticky
112
+ z-index: 10
113
+
114
+ .button
115
+ margin: 0
116
+ white-space: nowrap
117
+
118
+ input[type="text"]
119
+ height: 36px
120
+ line-height: 24px
121
+ margin-right: 10px
122
+ padding: 0 10px
123
+
124
+ .media-picker-selected-images
125
+ flex: 1
126
+
127
+ img
128
+ border-radius: 6px
129
+ display: block
130
+ float: left
131
+ height: 37px
132
+ margin-right: 5px
133
+ width: 50px
data/app/assets/stylesheets/spina/_modal.sass CHANGED
@@ -8,15 +8,42 @@
8
8
  width: 100%
9
9
  z-index: 999
10
10
 
11
+ .modal-container
12
+ align-items: center
13
+ background: rgba(0, 0, 0, .6)
14
+ display: flex
15
+ height: 100%
16
+ justify-content: center
17
+ left: 0px
18
+ position: fixed
19
+ top: 0px
20
+ width: 100%
21
+ z-index: 999
22
+
23
+ .modal
24
+ display: block
25
+
26
+ .modal-close-cross
27
+ color: #999
28
+ font-size: 11px
29
+ padding: 15px
30
+ position: absolute
31
+ top: 0px
32
+ right: 0px
33
+
34
+ &:hover
35
+ color: #333
36
+
11
37
  .modal
12
38
  animation-duration: .4s
13
39
  background: #fff
14
- border-radius: 3px
40
+ border-radius: 10px
15
41
  display: none
16
42
  margin: 0 auto
17
43
  max-width: 480px
44
+ max-height: 90%
18
45
  min-height: 100px
19
- overflow: hidden
46
+ overflow: scroll
20
47
  position: relative
21
48
 
22
49
  @media screen and (max-width: 480px)
@@ -35,6 +62,12 @@
35
62
  footer a
36
63
  padding: 18px 0
37
64
 
65
+ header
66
+ background: white
67
+ position: sticky
68
+ top: 0px
69
+ z-index: 10
70
+
38
71
  header h3
39
72
  border-radius: 2px 2px 0 0
40
73
  color: #232323
data/app/assets/stylesheets/spina/_notifications.sass CHANGED
@@ -1,25 +1,29 @@
1
1
  // Notifications
2
2
 
3
3
  aside#notifications
4
- bottom: 0
4
+ bottom: 50px
5
5
  padding: 16px
6
6
  position: fixed
7
- right: 0
7
+ left: 0
8
8
  z-index: 100
9
9
 
10
10
  .notification
11
11
  animation-duration: .4s
12
12
  align-items: center
13
- background: $primary-color
14
- border-radius: 3px
13
+ background: rgba(0, 0, 0, .3)
14
+ backdrop-filter: blur(3px)
15
+ -webkit-backdrop-filter: blur(3px)
16
+ border-radius: 7px
17
+ box-shadow: 3px 6px 3px rgba(0, 0, 0, .075)
15
18
  color: #fff
16
19
  display: flex
17
- font-size: 16px
18
- line-height: 24px
20
+ font-size: 14px
21
+ font-weight: 600
22
+ line-height: 18px
19
23
  margin-top: 16px
20
24
  padding: 16px 0
21
25
  position: relative
22
- width: 400px
26
+ width: 290px
23
27
 
24
28
  .notification-message
25
29
  flex: 1
@@ -27,19 +31,21 @@ aside#notifications
27
31
 
28
32
  .icon
29
33
  text-align: center
30
- min-width: 50px
31
- width: 50px
34
+ margin-left: 4px
35
+ min-width: 40px
36
+ width: 40px
32
37
 
33
38
  a
34
- color: #000
39
+ color: white
35
40
  display: block
36
41
  font-size: 11px
37
42
  opacity: .2
38
43
  text-align: center
44
+ transition: opacity .2s ease
39
45
  width: 50px
40
46
 
41
47
  &:hover
42
- color: #000
48
+ color: white
43
49
  opacity: .4
44
50
 
45
51
  strong
@@ -53,10 +59,10 @@ aside#notifications
53
59
  opacity: .6
54
60
 
55
61
  &.notification-error
56
- background: $error-color
62
+ // background: $error-color
57
63
 
58
64
  &.notification-danger
59
- background: $danger-color
65
+ // background: $danger-color
60
66
 
61
67
  &.notification-success
62
- background: $success-color
68
+ // background: $success-color
data/app/assets/stylesheets/spina/_pages.sass ADDED
@@ -0,0 +1,131 @@
1
+ .page-form
2
+ margin: 20px 0
3
+
4
+ .page-form-group
5
+ margin: 0 -15px 20px -15px
6
+
7
+ .page-form-label
8
+ color: #888
9
+ font-size: 12px
10
+ font-weight: 500
11
+ line-height: 24px
12
+ padding: 0 3px
13
+
14
+ .page-form-content
15
+ .select-dropdown
16
+ border-color: #e2e2e2
17
+ box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
18
+ font-size: 16px
19
+ font-weight: 500
20
+
21
+ select
22
+ color: #333
23
+ font-size: 15px
24
+ font-weight: 500
25
+ padding-left: 15px
26
+
27
+ label
28
+ background: none
29
+ box-shadow: none
30
+ padding-left: 15px
31
+
32
+ .page-form-control
33
+ input[type="text"]
34
+ border: 1px solid #e2e2e2
35
+ border-radius: 6px
36
+ box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
37
+ height: 42px
38
+ padding: 0 15px
39
+ width: 100%
40
+
41
+ &.input-large
42
+ font-size: 18px
43
+ font-weight: 500
44
+ height: 50px
45
+
46
+ &:disabled
47
+ box-shadow: none !important
48
+
49
+ .page-form-rich-text
50
+ background: white
51
+ border: 1px solid #e2e2e2
52
+ border-radius: 6px
53
+ box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
54
+ padding: 15px
55
+
56
+ trix-editor
57
+ border: none
58
+ box-shadow: none
59
+ font-size: 14px
60
+ line-height: 22px
61
+ padding: 0
62
+
63
+ .page-form-media-picker
64
+ align-items: flex-start
65
+ background: white
66
+ border: 1px solid #e2e2e2
67
+ border-radius: 6px
68
+ box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
69
+ display: flex
70
+ justify-content: space-between
71
+ padding: 15px
72
+ width: 100%
73
+
74
+ .button
75
+ margin: 0
76
+
77
+ .image
78
+ background: #ddd
79
+ border-radius: 6px
80
+ height: 150px
81
+ display: block
82
+ position: relative
83
+ width: 200px
84
+
85
+ .image img
86
+ border-radius: 6px
87
+ position: relative
88
+
89
+ .images
90
+ min-height: 80px
91
+ margin: -4px
92
+
93
+ img
94
+ border-radius: 6px
95
+ display: block
96
+ float: left
97
+ height: 72px
98
+ margin: 4px
99
+ position: relative
100
+ width: 96px
101
+
102
+ .page-form-media-picker-placeholder
103
+ background: #ddd
104
+ border-radius: 6px
105
+ height: 72px
106
+ margin: 4px
107
+ width: 96px
108
+
109
+ input.page-form-media-picker-alt-text
110
+ border: none
111
+ box-shadow: none
112
+ color: #777
113
+ font-style: italic
114
+ margin: 0 0 -15px -12px
115
+ max-width: 400px
116
+
117
+ &:focus, &:hover
118
+ color: #333
119
+
120
+ .page-form-media-picker-placeholder
121
+ align-items: center
122
+ color: #999
123
+ display: flex
124
+ font-size: 13px
125
+ font-style: italic
126
+ height: 100%
127
+ justify-content: center
128
+ margin-right: 10px
129
+ position: absolute
130
+ text-align: center
131
+ width: 100%