beyond_canvas 0.15.3.pre → 0.18.0.pre

Sign up to get free protection for your applications and to get access to all the features.
Files changed (75) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +0 -6
  3. data/Rakefile +3 -3
  4. data/app/assets/config/beyond_canvas_manifest.js +1 -0
  5. data/app/assets/images/icons/arrow_right.svg +1 -0
  6. data/app/assets/images/icons/close.svg +1 -0
  7. data/app/assets/images/icons/home.svg +1 -0
  8. data/app/assets/javascripts/beyond_canvas/base.js +120 -246
  9. data/app/assets/stylesheets/beyond_canvas/base.scss +10 -1
  10. data/app/assets/stylesheets/beyond_canvas/components/_action_bar.scss +28 -0
  11. data/app/assets/stylesheets/beyond_canvas/components/_breadcrumbs.scss +29 -0
  12. data/app/assets/stylesheets/beyond_canvas/components/_buttons.scss +1 -1
  13. data/app/assets/stylesheets/beyond_canvas/components/_debug.scss +10 -0
  14. data/app/assets/stylesheets/beyond_canvas/components/_forms.scss +11 -14
  15. data/app/assets/stylesheets/beyond_canvas/components/_grids.scss +12 -0
  16. data/app/assets/stylesheets/beyond_canvas/components/_main.scss +12 -13
  17. data/app/assets/stylesheets/beyond_canvas/components/_margins.scss +8 -0
  18. data/app/assets/stylesheets/beyond_canvas/components/_menu.scss +40 -0
  19. data/app/assets/stylesheets/beyond_canvas/components/_modals.scss +35 -0
  20. data/app/assets/stylesheets/beyond_canvas/components/_scrollbox.scss +35 -0
  21. data/app/assets/stylesheets/beyond_canvas/components/_sidebar.scss +53 -0
  22. data/app/assets/stylesheets/beyond_canvas/components/_titles.scss +7 -0
  23. data/app/assets/stylesheets/beyond_canvas/settings/_breakpoints.scss +6 -6
  24. data/app/assets/stylesheets/beyond_canvas/settings/_variables.scss +77 -22
  25. data/app/controllers/beyond_canvas/application_controller.rb +2 -0
  26. data/app/controllers/beyond_canvas/authentications_controller.rb +69 -0
  27. data/app/controllers/concerns/beyond_canvas/authentication.rb +13 -0
  28. data/app/controllers/concerns/beyond_canvas/locale_management.rb +5 -4
  29. data/app/helpers/beyond_canvas/authentications_helper.rb +28 -0
  30. data/app/helpers/beyond_canvas/cockpit_app_helper.rb +17 -0
  31. data/app/helpers/beyond_canvas/debug_helper.rb +9 -0
  32. data/app/helpers/beyond_canvas/locale_switch_helper.rb +5 -1
  33. data/app/javascript/beyond_canvas/base.js +3 -0
  34. data/app/javascript/beyond_canvas/initializers/buttons.js +65 -19
  35. data/app/javascript/beyond_canvas/initializers/flash.js +9 -2
  36. data/app/javascript/beyond_canvas/initializers/inputs.js +4 -1
  37. data/app/javascript/beyond_canvas/initializers/modals.js +14 -0
  38. data/app/views/beyond_canvas/authentications/new.html.erb +27 -0
  39. data/app/views/beyond_canvas/shared/_action_bar.html.erb +15 -0
  40. data/app/views/beyond_canvas/shared/_breadcrumbs.html.erb +14 -0
  41. data/app/views/beyond_canvas/shared/_flash.html.erb +22 -12
  42. data/app/views/beyond_canvas/shared/_locales.html.erb +8 -0
  43. data/app/views/beyond_canvas/shared/_menu.html.erb +31 -0
  44. data/app/views/beyond_canvas/shared/_modal.html.erb +6 -0
  45. data/app/views/beyond_canvas/shared/_sidebar.html.erb +16 -0
  46. data/app/views/layouts/beyond_canvas/application.html.erb +31 -0
  47. data/app/views/layouts/beyond_canvas/public.html.erb +10 -1
  48. data/config/locales/en.yml +9 -0
  49. data/config/routes.rb +8 -1
  50. data/lib/beyond_canvas.rb +18 -2
  51. data/lib/beyond_canvas/configuration.rb +11 -3
  52. data/lib/beyond_canvas/engine.rb +6 -0
  53. data/lib/beyond_canvas/menu_item_registration.rb +19 -0
  54. data/lib/beyond_canvas/parameter_sanitizer.rb +43 -0
  55. data/lib/beyond_canvas/rails/routes.rb +22 -0
  56. data/lib/beyond_canvas/version.rb +1 -1
  57. data/lib/generators/beyond_canvas/controller/controller_generator.rb +19 -0
  58. data/lib/generators/beyond_canvas/controller/templates/controller.erb +20 -0
  59. data/lib/generators/beyond_canvas/custom_menu/custom_menu_generator.rb +13 -0
  60. data/lib/generators/beyond_canvas/custom_menu/templates/beyond_canvas_custom_menu.html.erb +32 -0
  61. data/lib/generators/beyond_canvas/custom_styles/custom_styles_generator.rb +1 -1
  62. data/lib/generators/beyond_canvas/custom_styles/templates/beyond_canvas_custom_styles.scss +199 -0
  63. data/lib/generators/beyond_canvas/install/install_generator.rb +13 -5
  64. data/lib/generators/beyond_canvas/install/templates/beyond_canvas.rb.erb +55 -6
  65. data/lib/generators/beyond_canvas/model/model_generator.rb +49 -0
  66. data/lib/generators/beyond_canvas/model/templates/migration.erb +18 -0
  67. data/lib/generators/beyond_canvas/model/templates/model.erb +5 -0
  68. data/lib/generators/beyond_canvas/views/views_generator.rb +17 -0
  69. data/lib/models/concerns/authentication.rb +57 -0
  70. data/lib/models/concerns/utils.rb +79 -0
  71. data/lib/models/shop.rb +12 -0
  72. metadata +97 -12
  73. data/app/javascript/beyond_canvas/initializers/functions.js +0 -41
  74. data/app/views/beyond_canvas/locales/_edit.html.erb +0 -8
  75. data/lib/generators/beyond_canvas/custom_styles/templates/beyond_canvas_custom_styles.sass +0 -123
@@ -0,0 +1,28 @@
1
+ .action_bar {
2
+ width: 100%;
3
+ height: $action-bar-height;
4
+ background-color: $action-bar-background;
5
+ border-bottom: $action-bar-shadow;
6
+ padding: 0 25px;
7
+ box-sizing: border-box;
8
+ display: flex;
9
+ align-items: center;
10
+ justify-content: space-between;
11
+ position: sticky;
12
+ top: 0;
13
+ z-index: 999;
14
+
15
+ &--menu {
16
+ top: $menu-height;
17
+ }
18
+
19
+ &--left {
20
+ display: flex;
21
+ justify-content: flex-start;
22
+ }
23
+
24
+ &--right {
25
+ display: flex;
26
+ justify-content: flex-end;
27
+ }
28
+ }
@@ -0,0 +1,29 @@
1
+ .breadcrumbs {
2
+ font-size: 90%;
3
+ margin-bottom: 30px;
4
+
5
+ .home-icon {
6
+ width: 12px;
7
+ height: 12px;
8
+ fill: $breadcrum-color-current;
9
+ }
10
+
11
+ .arrow-right {
12
+ width: 8px;
13
+ height: 8px;
14
+ margin-left: 7px;
15
+ margin-right: 7px;
16
+ fill: $breadcrum-color;
17
+ }
18
+ }
19
+
20
+ .breadcrumb {
21
+ &__item {
22
+ color: $breadcrum-color-current;
23
+
24
+ &--current {
25
+ color: $breadcrum-color;
26
+ pointer-events: none;
27
+ }
28
+ }
29
+ }
@@ -10,7 +10,7 @@
10
10
  border-width: 1px;
11
11
  border-style: solid;
12
12
  cursor: pointer;
13
- display: flex;
13
+ display: inline-flex;
14
14
  font-weight: $button-font-weight;
15
15
  justify-content: flex-end;
16
16
  line-height: 1;
@@ -0,0 +1,10 @@
1
+ .debug_dump {
2
+ margin: 50px auto 0;
3
+ background-color: #dedede;
4
+ max-width: 50%;
5
+ width: 100%;
6
+ border: 1px solid #666666;
7
+ border-radius: 4px;
8
+ padding: 20px;
9
+ box-sizing: border-box;
10
+ }
@@ -1,6 +1,5 @@
1
1
  %form__actions {
2
- align-items: center;
3
- display: flex;
2
+ overflow: auto;
4
3
  }
5
4
 
6
5
  .form {
@@ -14,29 +13,27 @@
14
13
  }
15
14
 
16
15
  &__actions {
17
- &--spaced {
18
- @extend %form__actions;
19
-
20
- justify-content: space-between;
21
- }
22
-
23
16
  &--left {
24
17
  @extend %form__actions;
25
18
 
26
- justify-content: flex-start;
19
+ > * {
20
+ float: left;
27
21
 
28
- *:not(:last-child) {
29
- margin-right: 30px;
22
+ &:not(:first-child) {
23
+ margin-left: 30px;
24
+ }
30
25
  }
31
26
  }
32
27
 
33
28
  &--right {
34
29
  @extend %form__actions;
35
30
 
36
- justify-content: flex-end;
31
+ > * {
32
+ float: right;
37
33
 
38
- *:not(:first-child) {
39
- margin-left: 30px;
34
+ &:not(:first-child) {
35
+ margin-right: 30px;
36
+ }
40
37
  }
41
38
  }
42
39
  }
@@ -0,0 +1,12 @@
1
+ .grid {
2
+ &__container {
3
+ display: grid;
4
+ gap: 40px;
5
+ grid-template-columns: repeat(auto-fill, 385px);
6
+ }
7
+
8
+ &__item {
9
+ border: 1px solid #dfdecc;
10
+ padding: 20px;
11
+ }
12
+ }
@@ -1,9 +1,12 @@
1
- %body {
2
- background-color: $main-background;
1
+ .main {
2
+ position: relative;
3
+ width: 100%;
4
+ height: 100vh;
5
+ overflow-y: scroll;
3
6
  }
4
7
 
5
8
  .body--public {
6
- @extend %body;
9
+ background-color: $main-background-public;
7
10
 
8
11
  .main-wrapper {
9
12
  @include margin(32px auto);
@@ -20,20 +23,16 @@
20
23
  }
21
24
  }
22
25
 
23
- .body--single-page {
24
- @extend %body;
26
+ .body--application {
27
+ background-color: $main-background-application;
25
28
 
26
29
  .main-wrapper {
27
- @include margin(32px auto);
30
+ @include margin(25px auto 100px auto);
28
31
 
29
- max-width: 876px;
30
- width: 94%;
32
+ width: calc(100% - 50px);
31
33
 
32
- .logo {
33
- @include margin($logo-margin-top-public auto $logo-margin-bottom-public);
34
-
35
- display: block;
36
- width: 238px;
34
+ &--action_bar {
35
+ margin-top: 12px;
37
36
  }
38
37
  }
39
38
  }
@@ -6,4 +6,12 @@
6
6
  &--bottom {
7
7
  margin-bottom: 30px;
8
8
  }
9
+
10
+ &--left {
11
+ margin-left: 30px;
12
+ }
13
+
14
+ &--right {
15
+ margin-right: 30px;
16
+ }
9
17
  }
@@ -0,0 +1,40 @@
1
+ .menu {
2
+ @include padding(0 15px);
3
+
4
+ height: $menu-height;
5
+ background-color: $menu-background;
6
+ align-items: center;
7
+ display: flex;
8
+ box-sizing: border-box;
9
+ justify-content: space-between;
10
+ position: sticky;
11
+ top: 0;
12
+ z-index: 999;
13
+
14
+ .logo {
15
+ height: $menu-logo-height;
16
+ }
17
+
18
+ &--center {
19
+ left: 50%;
20
+ position: absolute;
21
+ transform: translateX(-50%);
22
+ }
23
+
24
+ &__item {
25
+ @include margin(0 15px);
26
+ color: $menu-item-color;
27
+
28
+ &:hover {
29
+ color: $menu-item-hover-color;
30
+ }
31
+
32
+ &--active {
33
+ color: $menu-item-selected-color;
34
+
35
+ &:hover {
36
+ color: $menu-item-selected-hover-color;
37
+ }
38
+ }
39
+ }
40
+ }
@@ -0,0 +1,35 @@
1
+ .modal {
2
+
3
+ &__background {
4
+ width: 100%;
5
+ height: 100%;
6
+ background-color: $modal-background-color;
7
+ position: absolute;
8
+ z-index: 99999;
9
+ justify-content: center;
10
+ align-items: center;
11
+ display: none;
12
+
13
+ .card {
14
+ width: 100%;
15
+ max-width: $modal-width;
16
+ margin: 25px;
17
+ }
18
+ }
19
+
20
+ &__headline {
21
+ margin-bottom: 30px;
22
+ font-size: 24px;
23
+ font-weight: normal;
24
+ line-height: 1.2;
25
+ color: rgb(62, 62, 62);
26
+ }
27
+
28
+ &__close {
29
+ @include position(absolute, $modal-padding $modal-padding null null);
30
+ @include size(14px);
31
+
32
+ cursor: pointer;
33
+ fill: $modal-close-icon-color;
34
+ }
35
+ }
@@ -0,0 +1,35 @@
1
+ .scrollbox {
2
+ max-height: 65vh;
3
+ overflow: auto;
4
+ width: 100%;
5
+
6
+ -ms-overflow-style: none;
7
+ scrollbar-width: none;
8
+
9
+ background:
10
+ /* Shadow covers */
11
+ linear-gradient(white 30%, rgba(255,255,255,0)),
12
+ linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
13
+
14
+ /* Shadows */
15
+ radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
16
+ radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
17
+ background:
18
+ /* Shadow covers */
19
+ linear-gradient(white 30%, rgba(255,255,255,0)),
20
+ linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
21
+
22
+ /* Shadows */
23
+ radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
24
+ radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
25
+ background-repeat: no-repeat;
26
+ background-color: white;
27
+ background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
28
+
29
+ /* Opera doesn’t support this in the shorthand */
30
+ background-attachment: local, local, scroll, scroll;
31
+
32
+ &::-webkit-scrollbar {
33
+ display: none;
34
+ }
35
+ }
@@ -0,0 +1,53 @@
1
+ .sidebar {
2
+ height: 100vh;
3
+ width: $sidebar-width;
4
+ min-width: $sidebar-width;
5
+ background-color: $sidebar-background;
6
+ position: relative;
7
+
8
+ &__header, &__footer {
9
+ width: 100%;
10
+ }
11
+
12
+ &__header {
13
+ background-color: $sidebar-header-background;
14
+ height: 73px;
15
+ padding-left: 15px;
16
+ box-sizing: border-box;
17
+ display: flex;
18
+ align-items: center;
19
+ }
20
+
21
+ &__logo {
22
+ width: 128px;
23
+ height: 30px;
24
+ background-color: white;
25
+ }
26
+
27
+ &__item {
28
+ width: 120px;
29
+ height: 14px;
30
+ background-color: $sidebar-item-background;
31
+ margin: 16px 0 24px 35px;
32
+
33
+ &--selected {
34
+ background-color: $sidebar-item-selected-background;
35
+ }
36
+ }
37
+
38
+ &__footer {
39
+ background-color: $sidebar-footer-background;
40
+ height: 40px;
41
+ position: absolute;
42
+ bottom: 0;
43
+ display: flex;
44
+ justify-content: space-around;
45
+ align-items: center;
46
+ }
47
+
48
+ &__icon {
49
+ width: 16px;
50
+ height: 16px;
51
+ background-color: $sidebar-footer-icon-background;
52
+ }
53
+ }
@@ -0,0 +1,7 @@
1
+ .title {
2
+ margin-bottom: 25px;
3
+ line-height: 1;
4
+ font-weight: normal;
5
+ font-size: 190%;
6
+ color: $title-color;
7
+ }
@@ -1,6 +1,6 @@
1
- $mobile-s: 321px !global;
2
- $mobile-m: 376px !global;
3
- $mobile-l: 426px !global;
4
- $tablet: 769px !global;
5
- $laptop: 1025px !global;
6
- $laptop-l: 1441px !global;
1
+ $mobile-s: 321px;
2
+ $mobile-m: 376px;
3
+ $mobile-l: 426px;
4
+ $tablet: 769px;
5
+ $laptop: 1025px;
6
+ $laptop-l: 1441px;
@@ -2,8 +2,8 @@
2
2
  // Colors
3
3
  // ************************************************************
4
4
 
5
- $white: rgb(255, 255, 255) !global;
6
- $black: rgb(0, 0, 0) !global;
5
+ $white: rgb(255, 255, 255);
6
+ $black: rgb(0, 0, 0);
7
7
  $palette-primary: rgb(78, 183, 168) !default;
8
8
  $palette-secondary: rgb(28, 53, 69) !default;
9
9
  $palette-cancel: rgb(153, 153, 153) !default;
@@ -13,24 +13,25 @@ $palette-danger: rgb(218, 60, 60) !default;
13
13
  // General styles
14
14
  // ************************************************************
15
15
 
16
- $main-background: rgb(233, 232, 220) !default;
17
- $main-transition: 0.125s ease-in !global;
16
+ $main-background-public: rgb(233, 232, 220) !default;
17
+ $main-background-application: rgb(233, 232, 220) !default;
18
+ $main-transition: 0.125s ease-in;
18
19
 
19
20
  // ************************************************************
20
21
  // Typography
21
22
  // ************************************************************
22
23
 
23
- $main-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif' !global;
24
+ $main-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif';
24
25
  $main-color: rgb(62, 62, 62) !default;
25
- $main-line-height: 1.5 !global;
26
- $main-font-size: 14px !global;
26
+ $main-line-height: 1.5;
27
+ $main-font-size: 14px;
27
28
 
28
29
  // ************************************************************
29
30
  // Headlines
30
31
  // ************************************************************
31
32
 
32
33
  $headline-color: rgb(122, 118, 76) !default;
33
- $headline-line-height: 1 !global;
34
+ $headline-line-height: 1;
34
35
 
35
36
  // ************************************************************
36
37
  // Links
@@ -55,8 +56,8 @@ $button-danger-color: $white !default;
55
56
 
56
57
  $button-border-radius: 3px !default;
57
58
  $button-box-shadow: true !default;
58
- $button-font-weight: 700 !global;
59
- $button-padding: 6px 12px 7px !global;
59
+ $button-font-weight: 700;
60
+ $button-padding: 6px 12px 7px;
60
61
 
61
62
  // ************************************************************
62
63
  // Cards
@@ -64,17 +65,17 @@ $button-padding: 6px 12px 7px !global;
64
65
 
65
66
  $card-border-radius: 3px !default;
66
67
  $card-box-shadow: 0 2px 7px rgba($black, 0.2) !default;
67
- $card-padding: 40px !global;
68
- $card-margin: 30px !global;
68
+ $card-padding: 40px;
69
+ $card-margin: 30px;
69
70
  $card-separator-color: rgb(222, 222, 222) !default;
70
- $card-separator-spacing: 50px !global;
71
+ $card-separator-spacing: 50px;
71
72
  $card-title-color: rgb(247, 133, 96) !default;
72
73
 
73
74
  // ************************************************************
74
75
  // Containers
75
76
  // ************************************************************
76
77
 
77
- $container-spacing: 30px !global;
78
+ $container-spacing: 30px;
78
79
 
79
80
  // ************************************************************
80
81
  // Labels
@@ -94,19 +95,19 @@ $input-errors-color: $palette-danger !default;
94
95
  // Checkboxes
95
96
  // ************************************************************
96
97
 
97
- $checkbox-checked-color: #97C344 !default;
98
- $checkbox-checked-background: #ffffff !default;
99
- $checkbox-unchecked-color: #C2BF9D !default;
100
- $checkbox-unchecked-background: #ffffff !default;
98
+ $checkbox-checked-color: #97C344 !default; // This value MUST be HEX
99
+ $checkbox-checked-background: #ffffff !default; // This value MUST be HEX
100
+ $checkbox-unchecked-color: #C2BF9D !default; // This value MUST be HEX
101
+ $checkbox-unchecked-background: #ffffff !default; // This value MUST be HEX
101
102
 
102
103
  // ************************************************************
103
104
  // Radiobuttons
104
105
  // ************************************************************
105
106
 
106
- $radio-checked-color: #97C344 !default;
107
- $radio-checked-background: #ffffff !default;
108
- $radio-unchecked-color: #C2BF9D !default;
109
- $radio-unchecked-background: #ffffff !default;
107
+ $radio-checked-color: #97C344 !default; // This value MUST be HEX
108
+ $radio-checked-background: #ffffff !default; // This value MUST be HEX
109
+ $radio-unchecked-color: #C2BF9D !default; // This value MUST be HEX
110
+ $radio-unchecked-background: #ffffff !default; // This value MUST be HEX
110
111
 
111
112
  // ************************************************************
112
113
  // Hints
@@ -160,6 +161,39 @@ $notice-error-background: rgb(218, 60, 60) !default;
160
161
  $notice-border-radius: 4px !default;
161
162
  $notice-color: rgb(153, 153, 153) !default;
162
163
 
164
+ // ************************************************************
165
+ // Breadcrums
166
+ // ************************************************************
167
+
168
+ $breadcrum-color: rgb(122, 118, 76) !default;
169
+ $breadcrum-color-current: rgb(61, 149, 137) !default;
170
+
171
+ // ************************************************************
172
+ // Titles
173
+ // ************************************************************
174
+
175
+ $title-color: rgb(122, 118, 76) !default;
176
+
177
+ // ************************************************************
178
+ // Menu
179
+ // ************************************************************
180
+
181
+ $menu-background: #1c3445 !default;
182
+ $menu-height: 60px !default;
183
+ $menu-logo-height: 30px !default;
184
+ $menu-item-color: #9ab5c6 !default;
185
+ $menu-item-hover-color: lighten($menu-item-color, 13%) !default;
186
+ $menu-item-selected-color: #4eb7a8 !default;
187
+ $menu-item-selected-hover-color: lighten($menu-item-selected-color, 13%) !default;
188
+
189
+ // ************************************************************
190
+ // Action bar
191
+ // ************************************************************
192
+
193
+ $action-bar-background: rgb(255, 255, 255) !default;
194
+ $action-bar-shadow: 1px solid rgba(0, 0, 0, 0.2) !default;
195
+ $action-bar-height: 73px !default;
196
+
163
197
  // ************************************************************
164
198
  // Markdown
165
199
  // ************************************************************
@@ -169,3 +203,24 @@ $markdown-table-border-color: #dfe2e5;
169
203
  $markdown-blockquote-font-color: #6a737d;
170
204
  $markdown-blockquote-border-color: #dfe2e5;
171
205
  $markdown-hr-background: #e1e4e8;
206
+
207
+ // ************************************************************
208
+ // Sidebar
209
+ // ************************************************************
210
+
211
+ $sidebar-width: 250px;
212
+ $sidebar-background: #1d3544;
213
+ $sidebar-header-background: #12222c;
214
+ $sidebar-footer-background: #12222c;
215
+ $sidebar-footer-icon-background: #9ab5c5;
216
+ $sidebar-item-background: #9ab5c6;
217
+ $sidebar-item-selected-background: #4eb7a8;
218
+
219
+ // ************************************************************
220
+ // Modals
221
+ // ************************************************************
222
+
223
+ $modal-padding: 10px;
224
+ $modal-width: 650px;
225
+ $modal-close-icon-color: #8b8b8b !default;
226
+ $modal-background-color: rgba(0, 0, 0, 0.5) !default;