beyond_canvas 0.14.0.pre → 0.15.0.pre

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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 413213c4a08e89d845c81df70145ba9199b3a7fcd0852b91a964062443be9a6f
4
- data.tar.gz: '0495d437686458f797a597da6716ea0cd9cc717ab54a412866cad47d297ea8e8'
3
+ metadata.gz: d367f6132c52453a85ad880605b90ba30811ef32da9bc28dd1f685e8554c2e41
4
+ data.tar.gz: 91a7c9f2f15564fe0752aeed2b682f938d595b82e48df9b1148e72dbe3429b98
5
5
  SHA512:
6
- metadata.gz: 9613c59e575b54a73863f15c0c1ba3465a8eb66fd70285fb9f2d5a05c932e903168323352024578843ab4b4250f38fecce589e1b731a9f323d1b5c9e58a87a3f
7
- data.tar.gz: a77e782a6c1876b45dda3d5baa0b2c992f57e6f299ec7994b5a9e1530cfba8730342646038cf3aa4876e1bfe568bf9fa68fd75d877035317bb23f31c693a0112
6
+ metadata.gz: de56ea97d47081b565a4ba795ab8ee105ba9faf0ff6cbb6e42f852ef160b68804885714583c5d7c3090bdf720a80d53d6cc028664368a81abd1f5a8839d8df13
7
+ data.tar.gz: 12cd7fb3261b4fce0f620cc8179ff160ed17f62f82eae55a67e6316986b90c842dcb4ed15c8c68a54108bd4e45ff5614da3d08918c994f204e6c8a98dd9078f8
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" style="background: #ffffff;" width="16" height="16" viewBox="0 0 24 24"><path fill="#97C344" d="M0 0v24h24V0H0zm9.6 18.4l-5.8-5.6 2-2.1 3.7 3.6L18 5.6l2.1 2.1L9.6 18.4z"></path></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" style="background: #ffff;" width="16" height="16" viewBox="0 0 24 24"><path fill="#c2bf9d" d="M0 0v24h24V0H0zm21.5 21.5h-19v-19h19v19z"></path></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" style="background: #ffffff;" width="18" height="18" viewBox="0 0 24 24"><path fill="#97C344" d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6zm0-15.9c-3.4 0-6.3 2.8-6.3 6.3s2.8 6.2 6.3 6.2 6.2-2.8 6.2-6.2-2.8-6.3-6.2-6.3z"></path></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" style="background: #ffffff;" width="18" height="18" viewBox="0 0 24 24"><path fill="#c2bf9d" d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"></path></svg>
@@ -1,15 +1,18 @@
1
1
  @import "bourbon";
2
2
 
3
+ @import "settings/breakpoints";
3
4
  @import "settings/variables";
4
5
  @import "settings/reset_css";
5
6
  @import "settings/typography";
6
7
 
8
+ @import "utilities/functions";
7
9
  @import "utilities/mixins";
8
10
 
9
11
  @import "components/actions";
10
12
  @import "components/buttons";
11
13
  @import "components/cards";
12
14
  @import "components/comments";
15
+ @import "components/containers";
13
16
  @import "components/flash";
14
17
  @import "components/forms";
15
18
  @import "components/inputs";
@@ -0,0 +1,37 @@
1
+ $columns: 2, 3, 4;
2
+
3
+ .container {
4
+ width: 100%;
5
+ display: flex;
6
+ flex-wrap: wrap;
7
+
8
+ &--center {
9
+ justify-content: center;
10
+ }
11
+
12
+ &__column {
13
+
14
+ @each $column in $columns {
15
+
16
+ &--#{$column} {
17
+ width: 100%;
18
+
19
+ @media (min-width: $laptop) {
20
+ width: calc((100% - (#{$column} - 1) * #{$container-spacing}) / #{$column});
21
+
22
+ &:not(:last-child) {
23
+ margin-right: $container-spacing;
24
+ }
25
+ }
26
+
27
+ &:not(:last-child) {
28
+ margin-bottom: $container-spacing;
29
+
30
+ @media (min-width: $laptop) {
31
+ margin-bottom: 0;
32
+ }
33
+ }
34
+ }
35
+ }
36
+ }
37
+ }
@@ -1,3 +1,5 @@
1
+ $controls: checkbox, radio;
2
+
1
3
  #{$all-text-inputs},
2
4
  select {
3
5
  background-color: $white;
@@ -52,11 +54,55 @@ select {
52
54
  margin-top: 1px;
53
55
  }
54
56
 
57
+ @each $control in $controls {
58
+
59
+ &__#{$control} {
60
+ display: flex;
61
+ align-items: center;
62
+
63
+ .input__#{$control}__control {
64
+ @if $control == checkbox {
65
+ @include size(16px);
66
+ } @else if $control == radio {
67
+ @include size(18px);
68
+ }
69
+
70
+ cursor: pointer;
71
+ margin-right: 7px;
72
+ }
73
+
74
+ input[type=#{$control}] + .input__#{$control}__control {
75
+ @if $control == checkbox {
76
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='background: #{str-replace('' + $checkbox-unchecked-background, '#', '%23')};' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='#{str-replace('' + $checkbox-unchecked-color, '#', '%23')}' d='M0 0v24h24V0H0zm21.5 21.5h-19v-19h19v19z'%3E%3C/path%3E%3C/svg%3E%0A");
77
+ } @else if $control == radio {
78
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='background: #{str-replace('' + $radio-unchecked-background, '#', '%23')};' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='#{str-replace('' + $radio-unchecked-color, '#', '%23')}' d='M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z'%3E%3C/path%3E%3C/svg%3E");
79
+ }
80
+ }
81
+
82
+ input[type=#{$control}]:checked + .input__#{$control}__control {
83
+ @if $control == checkbox {
84
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='background: #{str-replace('' + $checkbox-checked-background, '#', '%23')};' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='#{str-replace('' + $checkbox-checked-color, '#', '%23')}' d='M0 0v24h24V0H0zm9.6 18.4l-5.8-5.6 2-2.1 3.7 3.6L18 5.6l2.1 2.1L9.6 18.4z'%3E%3C/path%3E%3C/svg%3E%0A");
85
+ } @else if $control == radio {
86
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='background: #{str-replace('' + $radio-checked-background, '#', '%23')};' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='#{str-replace('' + $radio-checked-color, '#', '%23')}' d='M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6zm0-15.9c-3.4 0-6.3 2.8-6.3 6.3s2.8 6.2 6.3 6.2 6.2-2.8 6.2-6.2-2.8-6.3-6.2-6.3z'%3E%3C/path%3E%3C/svg%3E");
87
+ }
88
+ }
89
+
90
+ + div .input__label {
91
+ line-height: 1;
92
+ }
93
+
94
+ + div .input__hint {
95
+ line-height: 1;
96
+ margin-top: 4px;
97
+ }
98
+ }
99
+ }
100
+
55
101
  &__file {
56
102
  display: flex;
57
103
  align-items: center;
58
104
 
59
- &__label {
105
+ &__control {
60
106
  display: inline-block;
61
107
  }
62
108
 
@@ -0,0 +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;
@@ -70,6 +70,12 @@ $card-separator-color: rgb(222, 222, 222) !default;
70
70
  $card-separator-spacing: 50px !global;
71
71
  $card-title-color: rgb(247, 133, 96) !default;
72
72
 
73
+ // ************************************************************
74
+ // Containers
75
+ // ************************************************************
76
+
77
+ $container-spacing: 30px !global;
78
+
73
79
  // ************************************************************
74
80
  // Labels
75
81
  // ************************************************************
@@ -84,6 +90,24 @@ $input-border-color: rgb(217, 216, 195) !default;
84
90
  $input-border-color-focus: $palette-primary !default;
85
91
  $input-errors-color: $palette-danger !default;
86
92
 
93
+ // ************************************************************
94
+ // Checkboxes
95
+ // ************************************************************
96
+
97
+ $checkbox-checked-color: #97C344 !default;
98
+ $checkbox-checked-background: #ffffff !default;
99
+ $checkbox-unchecked-color: #C2BF9D !default;
100
+ $checkbox-unchecked-background: #ffffff !default;
101
+
102
+ // ************************************************************
103
+ // Radiobuttons
104
+ // ************************************************************
105
+
106
+ $radio-checked-color: #97C344 !default;
107
+ $radio-checked-background: #ffffff !default;
108
+ $radio-unchecked-color: #C2BF9D !default;
109
+ $radio-unchecked-background: #ffffff !default;
110
+
87
111
  // ************************************************************
88
112
  // Hints
89
113
  // ************************************************************
@@ -0,0 +1,15 @@
1
+ /// Replace `$search` with `$replace` in `$string`
2
+ /// @author Hugo Giraudel
3
+ /// @param {String} $string - Initial string
4
+ /// @param {String} $search - Substring to replace
5
+ /// @param {String} $replace ('') - New value
6
+ /// @return {String} - Updated string
7
+ @function str-replace($string, $search, $replace: '') {
8
+ $index: str-index($string, $search);
9
+
10
+ @if $index {
11
+ @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
12
+ }
13
+
14
+ @return $string;
15
+ }
@@ -2,18 +2,39 @@
2
2
 
3
3
  module BeyondCanvas
4
4
  class FormBuilder < ActionView::Helpers::FormBuilder # :nodoc:
5
+ ############################################################################
6
+ # Wrappers
7
+ ############################################################################
8
+
5
9
  def field_wrapper(attribute, args, &block)
6
- label = args[:label].presence || attribute.to_s.humanize
10
+ label = args[:label] == false ? nil : args[:label].presence || attribute.to_s.humanize
7
11
 
8
12
  errors = object.errors[attribute].join(', ') if object.respond_to?(:errors) && object.errors.include?(attribute)
9
13
 
10
14
  @template.content_tag(:div, class: 'form__row') do
11
15
  @template.content_tag(:label, label, class: 'input__label') +
12
- @template.content_tag(:div, class: 'relative') do
13
- block.call +
14
- (@template.content_tag(:label, errors, class: 'input__error') if errors.present?)
15
- end +
16
- (@template.content_tag(:div, args[:hint].html_safe, class: 'input__hint') if args[:hint].present?)
16
+ @template.content_tag(:div, class: 'relative') do
17
+ block.call +
18
+ (@template.content_tag(:label, errors, class: 'input__error') if errors.present?)
19
+ end +
20
+ (@template.content_tag(:div, args[:hint].html_safe, class: 'input__hint') if args[:hint].present?)
21
+ end
22
+ end
23
+
24
+ def inline_wrapper(attribute, args, &block)
25
+ label = args[:label] == false ? nil : args[:label].presence || attribute.to_s.humanize
26
+
27
+ errors = object.errors[attribute].join(', ') if object.respond_to?(:errors) && object.errors.include?(attribute)
28
+
29
+ @template.content_tag(:div, class: 'form__row') do
30
+ @template.content_tag(:div, class: 'relative', style: 'display: flex; align-items: center;') do
31
+ block.call +
32
+ @template.content_tag(:div) do
33
+ @template.content_tag(:label, label, class: 'input__label') +
34
+ (@template.content_tag(:div, args[:hint].html_safe, class: 'input__hint') if args[:hint].present?)
35
+ end +
36
+ (@template.content_tag(:label, errors, class: 'input__error') if errors.present?)
37
+ end
17
38
  end
18
39
  end
19
40
 
@@ -25,9 +46,39 @@ module BeyondCanvas
25
46
  end
26
47
  end
27
48
 
49
+ def check_box(attribute, args = {})
50
+ inline_wrapper(attribute, args) do
51
+ filed_identifyer = filed_identifyer(attribute)
52
+
53
+ args.merge!(id: filed_identifyer)
54
+ .merge!(hidden: true)
55
+
56
+ @template.content_tag(:div, class: 'input__checkbox') do
57
+ super(attribute, args) +
58
+ @template.content_tag(:label, nil, class: 'input__checkbox__control', for: filed_identifyer)
59
+ end
60
+ end
61
+ end
62
+
63
+ def radio_button(attribute, value, args = {})
64
+ args.merge!(label: value) unless args[:label]
65
+
66
+ inline_wrapper(attribute, args) do
67
+ filed_identifyer = filed_identifyer(attribute)
68
+
69
+ args.merge!(id: filed_identifyer)
70
+ .merge!(hidden: true)
71
+
72
+ @template.content_tag(:div, class: 'input__radio') do
73
+ super(attribute, value, args) +
74
+ @template.content_tag(:label, nil, class: 'input__radio__control', for: filed_identifyer)
75
+ end
76
+ end
77
+ end
78
+
28
79
  def file_field(attribute, args = {})
29
80
  field_wrapper(attribute, args) do
30
- filed_identifyer = "#{attribute}_#{(Time.now.to_f * 1000).to_i}"
81
+ filed_identifyer = filed_identifyer(attribute)
31
82
 
32
83
  args.merge!(id: filed_identifyer)
33
84
  .merge!(hidden: true)
@@ -39,7 +90,7 @@ module BeyondCanvas
39
90
  super(attribute, args) +
40
91
  @template.content_tag(:label,
41
92
  for: filed_identifyer,
42
- class: 'input__file__label button__transparent--primary') do
93
+ class: 'input__file__control button__transparent--primary') do
43
94
  args[:data][:button_text] || 'Choose file'
44
95
  end +
45
96
  @template.content_tag(:span,
@@ -48,5 +99,11 @@ module BeyondCanvas
48
99
  end
49
100
  end
50
101
  end
102
+
103
+ private
104
+
105
+ def filed_identifyer(attribute)
106
+ "#{attribute}_#{DateTime.now.strftime('%Q') + rand(10_000).to_s}"
107
+ end
51
108
  end
52
109
  end
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module BeyondCanvas
4
- VERSION = '0.14.0.pre'
4
+ VERSION = '0.15.0.pre'
5
5
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: beyond_canvas
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.14.0.pre
4
+ version: 0.15.0.pre
5
5
  platform: ruby
6
6
  authors:
7
7
  - Unai Abrisketa
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-05-19 00:00:00.000000000 Z
11
+ date: 2020-05-25 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: beyond_api
@@ -169,18 +169,23 @@ files:
169
169
  - README.md
170
170
  - Rakefile
171
171
  - app/assets/config/beyond_canvas_manifest.js
172
+ - app/assets/images/icons/checkbox_checked.svg
173
+ - app/assets/images/icons/checkbox_unchecked.svg
172
174
  - app/assets/images/icons/file.svg
173
175
  - app/assets/images/icons/flash_checkbox.svg
174
176
  - app/assets/images/icons/flash_close.svg
175
177
  - app/assets/images/icons/flash_error.svg
176
178
  - app/assets/images/icons/flash_info.svg
177
179
  - app/assets/images/icons/flash_warning.svg
180
+ - app/assets/images/icons/radiobutton_checked.svg
181
+ - app/assets/images/icons/radiobutton_unchecked.svg
178
182
  - app/assets/javascripts/beyond_canvas/base.js
179
183
  - app/assets/stylesheets/beyond_canvas/base.scss
180
184
  - app/assets/stylesheets/beyond_canvas/components/_actions.scss
181
185
  - app/assets/stylesheets/beyond_canvas/components/_buttons.scss
182
186
  - app/assets/stylesheets/beyond_canvas/components/_cards.scss
183
187
  - app/assets/stylesheets/beyond_canvas/components/_comments.scss
188
+ - app/assets/stylesheets/beyond_canvas/components/_containers.scss
184
189
  - app/assets/stylesheets/beyond_canvas/components/_flash.scss
185
190
  - app/assets/stylesheets/beyond_canvas/components/_forms.scss
186
191
  - app/assets/stylesheets/beyond_canvas/components/_inputs.scss
@@ -195,9 +200,11 @@ files:
195
200
  - app/assets/stylesheets/beyond_canvas/components/_tables.scss
196
201
  - app/assets/stylesheets/beyond_canvas/components/_texts.scss
197
202
  - app/assets/stylesheets/beyond_canvas/mailer.scss
203
+ - app/assets/stylesheets/beyond_canvas/settings/_breakpoints.scss
198
204
  - app/assets/stylesheets/beyond_canvas/settings/_reset_css.scss
199
205
  - app/assets/stylesheets/beyond_canvas/settings/_typography.scss
200
206
  - app/assets/stylesheets/beyond_canvas/settings/_variables.scss
207
+ - app/assets/stylesheets/beyond_canvas/utilities/_functions.scss
201
208
  - app/assets/stylesheets/beyond_canvas/utilities/_mixins.scss
202
209
  - app/controllers/beyond_canvas/application_controller.rb
203
210
  - app/controllers/beyond_canvas/system_controller.rb