nfg_ui 0.11.13 → 0.11.18

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: daf4547573e4c837fb956ba4ef8e19ec0bba1f6ec098a24037b02e60e22f3a39
4
- data.tar.gz: ffa880a10c15f196391590c836aa315523e10341443e071f05d0b8b9cef3efe2
3
+ metadata.gz: 6053e7ce382a6a56938868c918b2f1330e1ea2aa0663ab45c817d663991e2e3e
4
+ data.tar.gz: 89fd65aa48a96901523009489bc83b26b91c7204fcfd8005364802632af63d99
5
5
  SHA512:
6
- metadata.gz: 59f0fa7a08b5eca8fe301d28ea71b35c2b50d4b1eb00b68f217230ef526c42358d0370113622e3535d9a85f6b547927bfbda77936a1c7f9ac86212adccf9b07c
7
- data.tar.gz: 2316439d9ebbb6ad27254179ac28ecb300aac14eeab1624c356ceeb3599c5773385dc63ddd39e9a6a522f5e00c787043288c01496bfab97ef4a1ee135a622355
6
+ metadata.gz: 80a4075a1a0ae9932e546467704a0214636dc95366453e7fd8437ce6b3876b89716e665fb4eb7104c2cbf5e681ceab0ba3bdbfa4250fb5e1047d160189b90a0c
7
+ data.tar.gz: 2fcd9b6d7669e68dd979650e3faa1d2dbb2d7687af1a277b3a3cff50fa3226f82a6caf82644844632bb59f5749c38450b3b116f7c52b2da8d9c902bb50c7e5f3
@@ -12,9 +12,9 @@
12
12
  @import 'custom/gallery';
13
13
  @import 'custom/icomoon';
14
14
  @import 'custom/interaction';
15
- @import 'custom/overlay_blocker';
16
15
  @import 'custom/page_header';
17
16
  @import 'custom/readmore';
17
+ @import 'custom/redacted_text';
18
18
  @import 'custom/share_dropdown';
19
19
  @import 'custom/sortable';
20
20
  @import 'custom/status_indicator';
@@ -30,20 +30,3 @@ $redacted-font-family: "BLOKK";
30
30
  word-spacing: -3px;
31
31
  .card-img-overlay { background: none; }
32
32
  }
33
- .overlay-white {
34
- position: absolute;
35
- top: 0;
36
- right: 0;
37
- bottom: 0;
38
- left: 0;
39
- z-index: 30;
40
- font-family: $font-family-base;
41
- letter-spacing: 0;
42
- word-spacing: 0;
43
- background-color: transparentize($white, 0.2);
44
- }
45
- .overlay-blur {
46
- transition: $transition-base;
47
- filter: blur(0);
48
- &.in { filter: blur(4px); }
49
- }
@@ -1,5 +1,7 @@
1
1
  // Our custom styles
2
2
  @import 'custom/avatar';
3
+ @import 'custom/chat';
4
+ @import 'custom/event_livestream';
3
5
  @import 'custom/everyday_giving';
4
6
  @import 'custom/icon';
5
7
  @import 'custom/nav_step';
@@ -0,0 +1,10 @@
1
+ // Chat functionality within FP admin and public (livestream event template)
2
+ .chat-container {
3
+ display: -ms-flexbox;
4
+ -ms-flex-align: end;
5
+ }
6
+ .chat-messages {
7
+ display: -ms-flexbox;
8
+ -ms-flex-direction: column;
9
+ -ms-flex-align: end;
10
+ }
@@ -0,0 +1,24 @@
1
+ // Styles specific to the event livestream
2
+ .event-sidebar {
3
+ @include media-breakpoint-up(lg) {
4
+ display: -ms-flexbox;
5
+ -ms-flex-direction: column;
6
+ }
7
+ .event-sidebar-section {
8
+ &.event-sidebar-section-scroll {
9
+ -ms-flex-positive: 1;
10
+ }
11
+ &.event-sidebar-section-container {
12
+ display: -ms-flexbox;
13
+ -ms-flex-direction: column;
14
+ -ms-flex-positive: 1;
15
+ }
16
+ }
17
+ }
18
+
19
+ // chat container and message specific styles
20
+ .event-sidebar-section-chat {
21
+ display: -ms-flexbox;
22
+ -ms-flex-align: end;
23
+ -ms-flex-positive: 1;
24
+ }
@@ -16,3 +16,12 @@
16
16
  .alert-light, .alert-dark {
17
17
  a:not(.btn) { color: inherit; }
18
18
  }
19
+
20
+ // Absolute Positioning Alerts
21
+ .alert[data-position-absolute='true'] {
22
+ position: absolute;
23
+ left: 50%;
24
+ transform: translateX(-50%);
25
+ z-index: $zindex-modal + 1;
26
+ box-shadow: $box-shadow-sm;
27
+ }
@@ -1,11 +1,13 @@
1
1
  // Our custom styles
2
2
  @import 'custom/avatar';
3
+ @import 'custom/chat';
3
4
  @import 'custom/device_preview';
4
5
  @import 'custom/drawer';
5
6
  @import 'custom/icon';
6
7
  @import 'custom/illustration';
7
8
  @import 'custom/mobile';
8
9
  @import 'custom/nav_step';
10
+ @import 'custom/overlay_blocker';
9
11
  @import 'custom/redactor';
10
12
  @import 'custom/social_share';
11
13
  @import 'custom/skeleton';
@@ -6,7 +6,7 @@
6
6
  vertical-align: middle;
7
7
  width: ($spacer * 2);
8
8
  height: ($spacer * 2);
9
- color: transparent;
9
+ color: $body-color;
10
10
  background-color: $border-color;
11
11
  border-radius: 50%;
12
12
 
@@ -22,7 +22,7 @@
22
22
  font-weight: $font-weight-bold;
23
23
  font-size: $font-size-base;
24
24
  line-height: 1.2;
25
- color: $body-color;
25
+ color: inherit;
26
26
  text-align: center;
27
27
  white-space: nowrap;
28
28
  overflow: hidden;
@@ -0,0 +1,39 @@
1
+ // Chat functionality within FP admin and public (livestream event template)
2
+
3
+ .chat-container {
4
+ display: flex;
5
+ align-items: flex-end;
6
+ width: 100%;
7
+ max-height: 100%;
8
+ height: 100%;
9
+ z-index: 0;
10
+ &:after {
11
+ position: absolute;
12
+ top: 0;
13
+ left: 0;
14
+ width: 100%;
15
+ height: $spacer;
16
+ @include gradient-y(transparentize($white, 0), transparentize($white, 1));
17
+ content: '';
18
+ z-index: 10;
19
+ }
20
+ }
21
+ .chat-messages {
22
+ display: flex;
23
+ flex-direction: column;
24
+ align-items: flex-end;
25
+ padding-top: $spacer;
26
+ width: 100%;
27
+ max-height: 100%;
28
+ overflow-y: auto;
29
+ z-index: 0;
30
+ }
31
+ .chat-message {
32
+ // donation icon in chat message renders top left of avatar
33
+ .icon-circle {
34
+ position: absolute;
35
+ top: -($spacer * .5);
36
+ left: -($spacer * .5);
37
+ z-index: 20;
38
+ }
39
+ }
@@ -0,0 +1,17 @@
1
+ .overlay-white {
2
+ position: absolute;
3
+ top: 0;
4
+ right: 0;
5
+ bottom: 0;
6
+ left: 0;
7
+ z-index: 30;
8
+ font-family: $font-family-base;
9
+ letter-spacing: 0;
10
+ word-spacing: 0;
11
+ background-color: transparentize($white, 0.1);
12
+ }
13
+ .overlay-blur {
14
+ transition: $transition-base;
15
+ filter: blur(0);
16
+ &.in { filter: blur(4px); }
17
+ }
@@ -1,4 +1,4 @@
1
- // Styles specific to the event livestream styles
1
+ // Styles specific to the event livestream
2
2
  .event {
3
3
  @include media-breakpoint-up(lg) { height: 100%; }
4
4
  .page-content {
@@ -36,14 +36,22 @@
36
36
  > :last-child { margin-bottom: $spacer; }
37
37
  }
38
38
  &.event-sidebar-scroll {
39
- @include media-breakpoint-up(lg) { overflow-y: scroll; }
39
+ @include media-breakpoint-up(lg) { overflow-y: auto; }
40
40
  }
41
41
  .event-sidebar-section {
42
42
  padding: $spacer;
43
43
  + .event-sidebar-section { border-top: $border-width solid $border-color; }
44
44
  &.event-sidebar-section-scroll {
45
+ flex-grow: 1;
46
+ height: 100%;
45
47
  min-height: ($spacer * 10); // sets min-height to ensure the scrollable area has room to be seen on restricted height devices (not mobile)
46
- overflow-y: scroll;
48
+ overflow-y: auto;
49
+ }
50
+ &.event-sidebar-section-container { // container for chat and donor scroll
51
+ display: flex;
52
+ flex-direction: column;
53
+ flex-grow: 1;
54
+ height: 100%;
47
55
  }
48
56
  }
49
57
  }
@@ -55,3 +63,32 @@
55
63
  .card-body { padding: 0; }
56
64
  }
57
65
  }
66
+
67
+ // chat container and message specific styles
68
+ .event-sidebar-section-chat {
69
+ display: flex;
70
+ align-items: flex-end;
71
+ flex-grow: 1;
72
+ @include media-breakpoint-down(md) { // puts a border and height on mobile
73
+ height: ($spacer * 10);
74
+ border: $border-width solid $border-color;
75
+ border-radius: $border-radius;
76
+ }
77
+ @include media-breakpoint-up(lg) {
78
+ height: 100%;
79
+ min-height: ($spacer * 10);
80
+ }
81
+ // hides elements in public page chat only meant for admin view
82
+ // need this because .chat-message delete button doesn't know user type in partial
83
+ .hide-admin { display: none; }
84
+ }
85
+
86
+ // Allows for the login form to show in desktop and mobile.
87
+ .event-sidebar-section-no-access {
88
+ overflow: hidden;
89
+ @include media-breakpoint-down(md) { height: 720px; }
90
+ .log-in-form { overflow-y: auto; }
91
+ .event-sidebar-section-chat {
92
+ @include media-breakpoint-down(md) { height: 100%; }
93
+ }
94
+ }
@@ -43,12 +43,14 @@ module NfgUi
43
43
  end
44
44
 
45
45
  def render
46
+ @body = yield if block_given?
47
+
46
48
  if tooltip && disabled
47
49
  content_tag(:span, disabled_component_tooltip_wrapper_html_options) do
48
50
  content_tag(as, html_options) do
49
51
  capture do
50
52
  concat(left_icon_component) if left_icon
51
- concat(block_given? ? yield : body)
53
+ concat(body)
52
54
  concat(right_icon_component) if icon
53
55
  end
54
56
  end
@@ -58,7 +60,7 @@ module NfgUi
58
60
  content_tag(as, html_options) do
59
61
  capture do
60
62
  concat(left_icon_component) if left_icon
61
- concat(block_given? ? yield : body)
63
+ concat(body)
62
64
  concat(right_icon_component) if icon
63
65
  end
64
66
  end
@@ -76,10 +78,14 @@ module NfgUi
76
78
 
77
79
  def right_icon_component
78
80
  NfgUi::Components::Foundations::Icon.new({ traits: [icon, :right],
79
- class: NfgUi::Components::Foundations::Icon::RIGHT_ICON_SPACER_CSS_CLASS },
81
+ class: right_icon_class },
80
82
  view_context).render
81
83
  end
82
84
 
85
+ def right_icon_class
86
+ NfgUi::Components::Foundations::Icon::RIGHT_ICON_SPACER_CSS_CLASS if body.present?
87
+ end
88
+
83
89
  def base_element
84
90
  as
85
91
  end
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module NfgUi
4
- VERSION = '0.11.13'
4
+ VERSION = '0.11.18'
5
5
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: nfg_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.11.13
4
+ version: 0.11.18
5
5
  platform: ruby
6
6
  authors:
7
7
  - Jonathan Roehm
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2021-03-02 00:00:00.000000000 Z
12
+ date: 2021-05-21 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: bootstrap
@@ -233,14 +233,14 @@ dependencies:
233
233
  requirements:
234
234
  - - "~>"
235
235
  - !ruby/object:Gem::Version
236
- version: '4.3'
236
+ version: '5.3'
237
237
  type: :development
238
238
  prerelease: false
239
239
  version_requirements: !ruby/object:Gem::Requirement
240
240
  requirements:
241
241
  - - "~>"
242
242
  - !ruby/object:Gem::Version
243
- version: '4.3'
243
+ version: '5.3'
244
244
  - !ruby/object:Gem::Dependency
245
245
  name: rails-controller-testing
246
246
  requirement: !ruby/object:Gem::Requirement
@@ -433,9 +433,9 @@ files:
433
433
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_gallery.scss
434
434
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_icomoon.scss
435
435
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_interaction.scss
436
- - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_overlay_blocker.scss
437
436
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_page_header.scss
438
437
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_readmore.scss
438
+ - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_redacted_text.scss
439
439
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_share_dropdown.scss
440
440
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_sortable.scss
441
441
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_status_indicator.scss
@@ -481,6 +481,8 @@ files:
481
481
  - app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_progress.scss
482
482
  - app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_utilities.scss
483
483
  - app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/custom/_avatar.scss
484
+ - app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/custom/_chat.scss
485
+ - app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/custom/_event_livestream.scss
484
486
  - app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/custom/_everyday_giving.scss
485
487
  - app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/custom/_icon.scss
486
488
  - app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/custom/_nav_step.scss
@@ -509,12 +511,14 @@ files:
509
511
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_tooltip.scss
510
512
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_type.scss
511
513
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_avatar.scss
514
+ - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_chat.scss
512
515
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_device_preview.scss
513
516
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_drawer.scss
514
517
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_icon.scss
515
518
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_illustration.scss
516
519
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_mobile.scss
517
520
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_nav_step.scss
521
+ - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_overlay_blocker.scss
518
522
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_redactor.scss
519
523
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_skeleton.scss
520
524
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_slat.scss