nfg_ui 0.13.0 → 0.14.0

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: 8235aa4af7843ba006e8caae070d20f87561c6d39db6dda7acc0f86c5bb2a54f
4
- data.tar.gz: b2cda42305a691eba3bfc4351851b1dd21d753b8b6e162f1bb7229036d5c1eb7
3
+ metadata.gz: ef6cda41e1d54ad8bf9b53f8e749dafb7390fe4cf43bf7dd89788a3aac9853fc
4
+ data.tar.gz: d4b57ad76eac91f1e462caadd863e9f1aede5ced58385d2b3dc191d5ff368156
5
5
  SHA512:
6
- metadata.gz: 0e9a5cc6430ecdef3e4090ff685d8455fd5ac6d6291052bca66e8715d7817484db14a014a635ff6b52f0350cb1a1cfdfb42b5a725d4e7cc8c030ea878fc0d81f
7
- data.tar.gz: b94dd4c453cec22475b90ca00faf7cb6d19646c8e3e2386b037f38925fe78073eb73a73ce8e3642620feb69d3992690b554b6564d1ee5c2a2f0bab01872d1d8d
6
+ metadata.gz: 9d99cd7b5e0b0fe138abf30df16ae78180256d6a5b1ecad0a1ff91df87ae12e6597553ec15899752b4e888e47c5e5098b4148687500a041acad71b63c8fdc86e
7
+ data.tar.gz: 5a2a805e60e389e6df45b39ace031f76523db49aba24969be3f63bbfe1d720fd94c02200a3239107825a5cf22fe03256f58007fcecba2263446e411f0929111a
@@ -9,8 +9,6 @@
9
9
  // Plugins
10
10
  @import 'nfg_ui/network_for_good/core/plugins/intercom';
11
11
  @import 'nfg_ui/network_for_good/core/plugins/multi';
12
- @import 'nfg_ui/network_for_good/core/plugins/turbolinks';
13
- @import 'nfg_ui/network_for_good/core/plugins/twitter_typeahead';
14
12
 
15
13
  // Color Variations - has to be inside admin directory for variables to work properly
16
14
  @import 'color_variations/nfg_theme/*';
@@ -3,7 +3,6 @@
3
3
  @import 'custom/bee';
4
4
  @import 'custom/builder_layout';
5
5
  @import 'custom/campaign_card';
6
- @import 'custom/campaign_preview';
7
6
  @import 'custom/content_section';
8
7
  @import 'custom/custom_questions_questionnaire';
9
8
  @import 'custom/custom_receipt_language';
@@ -1,106 +1,11 @@
1
- // Setting a common height for the builder header and nav
2
- $builder-header-height: ($spacer * 2.25);
3
- $builder-header-padding: ($spacer * .25) ($spacer * .5);
4
- $builder-nav-height: ($spacer * 3.25);
5
- $builder-nav-padding: ($spacer * .75) ($spacer * .5);
6
- $builder-options-padding: $spacer;
7
- $builder-preview-padding: ($spacer * 1.5);
8
-
9
- // Put on the <body> to help with correct scrolling within builder-wrap and builder-options
10
- .builder-layout {
11
- background-color: $white;
12
- @include media-breakpoint-up(lg) {
13
- height: 100%;
14
- > form { height: 100%; } // targets form directly inside <body> and needed for correct scrolling
15
- }
16
- }
1
+ // Specific styles needed for admin onboarding pages
17
2
 
18
3
  // Header and nav styles for builder layout
19
- .builder-header, .builder-header-fixed-bottom {
20
- padding: $builder-header-padding;
21
- width: 100%;
22
- min-height: $builder-header-height;
23
- background-color: $blue-700;
24
- z-index: $zindex-fixed + 1;
25
- @include media-breakpoint-up(lg) {
26
- position: fixed;
27
- top: 0;
28
- left: 0;
29
- right: 0;
30
- }
31
- .text-muted { color: $blue-200 !important; }
32
- }
33
- .builder-header-fixed-bottom {
34
- position: fixed;
35
- @include media-breakpoint-down(md) { bottom: 0; }
36
- }
37
- .builder-nav, .builder-nav-sm {
38
- width: 100%;
39
- z-index: $zindex-fixed;
40
- }
41
- .builder-nav {
42
- padding: $builder-nav-padding;
43
- background-color: $white;
44
- border-bottom: $border-width solid $border-color;
45
- @include media-breakpoint-up(lg) {
46
- position: fixed;
47
- top: $builder-header-height;
48
- left: 0;
49
- right: 0;
50
- min-height: $builder-nav-height;
51
- }
52
- }
53
- .builder-nav-sm {
54
- position: fixed;
55
- bottom: 0;
56
- padding: $builder-header-padding;
57
- min-height: $builder-header-height;
58
- background-color: $blue-700;
59
- @include media-breakpoint-up(lg) { display: none; }
60
- }
61
-
62
- // Container that provides padding to the top of the page to move content below header and nav
63
- .builder-container {
64
- @include media-breakpoint-down(md) { padding-bottom: $builder-header-height; }
65
- @include media-breakpoint-up(lg) { height: 100%; }
66
- }
67
-
68
- // Adjusts padding on the top of builder-container depending on how many elements come before it
69
- .builder-header ~ .builder-container {
70
- @include media-breakpoint-up(lg) { padding-top: $builder-header-height; }
71
- }
72
- .builder-header ~ .builder-nav ~ .builder-container {
73
- @include media-breakpoint-up(lg) { padding-top: $builder-header-height + $builder-nav-height; }
74
- }
4
+ .builder-nav { border-bottom: $border-width solid $border-color; }
5
+ .builder-nav-sm { background-color: $blue-700; }
75
6
 
76
7
  // Block containers for side by side view
77
- .builder-body {
78
- @include media-breakpoint-up(lg) {
79
- width: 100%;
80
- height: 100%;
81
- overflow: hidden;
82
- }
83
- }
84
- .builder-preview {
85
- padding: $builder-preview-padding ($builder-preview-padding / 2);
86
- @include media-breakpoint-up(lg) {
87
- float: left;
88
- width: 67%;
89
- height: 100%;
90
- overflow-y: auto;
91
- > :last-child { margin-bottom: $builder-preview-padding; }
92
- }
93
- }
94
8
  .builder-options {
95
- padding: $builder-options-padding;
96
- background-color: $white;
97
9
  @include media-breakpoint-down(md) { border-bottom: $border-width solid $border-color; }
98
- @include media-breakpoint-up(lg) {
99
- float: right;
100
- width: 33%;
101
- height: 100%;
102
- border-left: $border-width solid $border-color;
103
- overflow-y: auto;
104
- > :last-child { margin-bottom: $builder-options-padding; }
105
- }
10
+ @include media-breakpoint-up(lg) { border-left: $border-width solid $border-color; }
106
11
  }
@@ -19,6 +19,8 @@
19
19
  @import 'plugins/datetimepicker';
20
20
  @import 'plugins/select2';
21
21
  @import 'plugins/sticky_div';
22
+ @import 'plugins/turbolinks';
23
+ @import 'plugins/twitter_typeahead';
22
24
 
23
25
  // Legacy Browser Support
24
26
  @import 'legacy_browser_support/application';
@@ -1,5 +1,7 @@
1
1
  // Our custom styles
2
2
  @import 'custom/avatar';
3
+ @import 'custom/builder_layout';
4
+ @import 'custom/iframe_preview';
3
5
  @import 'custom/chat';
4
6
  @import 'custom/device_preview';
5
7
  @import 'custom/drawer';
@@ -0,0 +1,102 @@
1
+ // Setting a common height for the builder header and nav
2
+ $builder-header-height: ($spacer * 2.25);
3
+ $builder-header-padding: ($spacer * .25) ($spacer * .5);
4
+ $builder-nav-height: ($spacer * 3.25);
5
+ $builder-nav-padding: ($spacer * .75) ($spacer * .5);
6
+ $builder-options-padding: $spacer;
7
+ $builder-preview-padding: ($spacer * 1.5);
8
+
9
+ // Put on the <body> to help with correct scrolling within builder-wrap and builder-options
10
+ .builder-layout {
11
+ background-color: $white;
12
+ @include media-breakpoint-up(lg) {
13
+ height: 100%;
14
+ > form { height: 100%; } // targets form directly inside <body> and needed for correct scrolling
15
+ }
16
+ }
17
+
18
+ // Header and nav styles for builder layout
19
+ .builder-header, .builder-header-fixed-bottom {
20
+ padding: $builder-header-padding;
21
+ width: 100%;
22
+ min-height: $builder-header-height;
23
+ background-color: $blue-700;
24
+ z-index: $zindex-fixed + 1;
25
+ @include media-breakpoint-up(lg) {
26
+ position: fixed;
27
+ top: 0;
28
+ left: 0;
29
+ right: 0;
30
+ }
31
+ .text-muted { color: $blue-200 !important; }
32
+ }
33
+ .builder-header-fixed-bottom {
34
+ position: fixed;
35
+ @include media-breakpoint-down(md) { bottom: 0; }
36
+ }
37
+ .builder-nav, .builder-nav-sm {
38
+ width: 100%;
39
+ z-index: $zindex-fixed;
40
+ }
41
+ .builder-nav {
42
+ padding: $builder-nav-padding;
43
+ background-color: $white;
44
+ @include media-breakpoint-up(lg) {
45
+ position: fixed;
46
+ top: $builder-header-height;
47
+ left: 0;
48
+ right: 0;
49
+ min-height: $builder-nav-height;
50
+ }
51
+ }
52
+ .builder-nav-sm {
53
+ position: fixed;
54
+ bottom: 0;
55
+ padding: $builder-header-padding;
56
+ min-height: $builder-header-height;
57
+ @include media-breakpoint-up(lg) { display: none; }
58
+ }
59
+
60
+ // Container that provides padding to the top of the page to move content below header and nav
61
+ .builder-container {
62
+ @include media-breakpoint-down(md) { padding-bottom: $builder-header-height; }
63
+ @include media-breakpoint-up(lg) { height: 100%; }
64
+ }
65
+
66
+ // Adjusts padding on the top of builder-container depending on how many elements come before it
67
+ .builder-header ~ .builder-container {
68
+ @include media-breakpoint-up(lg) { padding-top: $builder-header-height; }
69
+ }
70
+ .builder-header ~ .builder-nav ~ .builder-container {
71
+ @include media-breakpoint-up(lg) { padding-top: $builder-header-height + $builder-nav-height; }
72
+ }
73
+
74
+ // Block containers for side by side view
75
+ .builder-body {
76
+ @include media-breakpoint-up(lg) {
77
+ width: 100%;
78
+ height: 100%;
79
+ overflow: hidden;
80
+ }
81
+ }
82
+ .builder-preview {
83
+ padding: $builder-preview-padding ($builder-preview-padding / 2);
84
+ @include media-breakpoint-up(lg) {
85
+ float: left;
86
+ width: 67%;
87
+ height: 100%;
88
+ overflow-y: auto;
89
+ > :last-child { margin-bottom: $builder-preview-padding; }
90
+ }
91
+ }
92
+ .builder-options {
93
+ padding: $builder-options-padding;
94
+ background-color: $white;
95
+ @include media-breakpoint-up(lg) {
96
+ float: right;
97
+ width: 33%;
98
+ height: 100%;
99
+ overflow-y: auto;
100
+ > :last-child { margin-bottom: $builder-options-padding; }
101
+ }
102
+ }
@@ -1,5 +1,6 @@
1
1
  // Our custom styles
2
2
  @import 'custom/background_variations';
3
+ @import 'custom/builder_layout';
3
4
  @import 'custom/donor_account';
4
5
  @import 'custom/donor_scroll';
5
6
  @import 'custom/event';
@@ -0,0 +1,12 @@
1
+ // Specific styles needed for public onboarding pages
2
+
3
+ // Header and nav styles for builder layout
4
+ .builder-nav {
5
+ @include media-breakpoint-up(lg) { top: 113px; }
6
+ .btn { border-radius: 50px; }
7
+ }
8
+ .builder-nav-sm {
9
+ background-color: $white;
10
+ border-top: $border-width solid $border-color;
11
+ .btn { border-radius: 50px; }
12
+ }
@@ -1,5 +1,6 @@
1
1
  $page-header-height: ($spacer * 3.5); // 11.2rem
2
2
  $page-header-height-admin: ($spacer * 5); // 16rem
3
+ $page-header-height-public: (($spacer * 6.75) + 1); // 21.7rem (adds 1px for width of bottom border)
3
4
 
4
5
  // Page header specific styles
5
6
  .page-header {
@@ -14,17 +15,22 @@ $page-header-height-admin: ($spacer * 5); // 16rem
14
15
  right: 0;
15
16
  min-height: $page-header-height;
16
17
  }
17
- body.admin & { // this renders as body.admin .page-header specifying when the view is in admin status
18
+
19
+ // this renders as body.admin .page-header specifying when the view there is an admin logged in (includes top admin black bar)
20
+ body.admin & {
18
21
  @include media-breakpoint-up(lg) { min-height: $page-header-height-admin; }
19
22
  }
20
23
  }
21
24
 
22
25
  // Moving .page-content container down with padding when page-header exists but ONLY on larger screens
23
26
  .page-header {
24
- + .page-content {
25
- @include media-breakpoint-up(lg) { padding-top: $page-header-height; }
26
- }
27
- body.admin & + .page-content { // this renders as body.admin .page-header + .page-content specifying when the view is in admin status
28
- @include media-breakpoint-up(lg) { padding-top: $page-header-height-admin; }
27
+ @include media-breakpoint-up(lg) {
28
+ + .page-content { padding-top: $page-header-height; }
29
+
30
+ // this renders as body.admin .page-header + .page-content specifying when the view there is an admin logged in (includes top admin black bar)
31
+ body.admin & + .page-content { padding-top: $page-header-height-admin; }
32
+
33
+ // this renders as body.nfg_ui_onboarder .page-header + .page-content specifying when the view is in a public onboarding status i.e. fundraiser onboarder in Fundraising Pages
34
+ body.nfg_ui_onboarder & + .page-content { padding-top: $page-header-height-public; }
29
35
  }
30
36
  }
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module NfgUi
4
- VERSION = '0.13.0'
4
+ VERSION = '0.14.0'
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.13.0
4
+ version: 0.14.0
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-10-20 00:00:00.000000000 Z
12
+ date: 2022-03-31 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: bootstrap
@@ -149,14 +149,14 @@ dependencies:
149
149
  requirements:
150
150
  - - ">="
151
151
  - !ruby/object:Gem::Version
152
- version: 1.12.5
152
+ version: 1.13.3
153
153
  type: :runtime
154
154
  prerelease: false
155
155
  version_requirements: !ruby/object:Gem::Requirement
156
156
  requirements:
157
157
  - - ">="
158
158
  - !ruby/object:Gem::Version
159
- version: 1.12.5
159
+ version: 1.13.3
160
160
  - !ruby/object:Gem::Dependency
161
161
  name: browser
162
162
  requirement: !ruby/object:Gem::Requirement
@@ -315,22 +315,22 @@ dependencies:
315
315
  name: sprockets
316
316
  requirement: !ruby/object:Gem::Requirement
317
317
  requirements:
318
- - - ">="
319
- - !ruby/object:Gem::Version
320
- version: '0'
321
318
  - - "~>"
322
319
  - !ruby/object:Gem::Version
323
320
  version: '3.7'
321
+ - - ">="
322
+ - !ruby/object:Gem::Version
323
+ version: '0'
324
324
  type: :development
325
325
  prerelease: false
326
326
  version_requirements: !ruby/object:Gem::Requirement
327
327
  requirements:
328
- - - ">="
329
- - !ruby/object:Gem::Version
330
- version: '0'
331
328
  - - "~>"
332
329
  - !ruby/object:Gem::Version
333
330
  version: '3.7'
331
+ - - ">="
332
+ - !ruby/object:Gem::Version
333
+ version: '0'
334
334
  - !ruby/object:Gem::Dependency
335
335
  name: sqlite3
336
336
  requirement: !ruby/object:Gem::Requirement
@@ -433,7 +433,6 @@ files:
433
433
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_bee.scss
434
434
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_builder_layout.scss
435
435
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_campaign_card.scss
436
- - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_campaign_preview.scss
437
436
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_content_section.scss
438
437
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_custom_questions_questionnaire.scss
439
438
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_custom_receipt_language.scss
@@ -524,10 +523,12 @@ files:
524
523
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_tooltip.scss
525
524
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_type.scss
526
525
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_avatar.scss
526
+ - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_builder_layout.scss
527
527
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_chat.scss
528
528
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_device_preview.scss
529
529
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_drawer.scss
530
530
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_icon.scss
531
+ - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_iframe_preview.scss
531
532
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_illustration.scss
532
533
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_mobile.scss
533
534
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_nav_step.scss
@@ -568,6 +569,7 @@ files:
568
569
  - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_navbar.scss
569
570
  - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_reboot.scss
570
571
  - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_background_variations.scss
572
+ - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_builder_layout.scss
571
573
  - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_donor_account.scss
572
574
  - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_donor_scroll.scss
573
575
  - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_event.scss
@@ -840,7 +842,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
840
842
  - !ruby/object:Gem::Version
841
843
  version: '0'
842
844
  requirements: []
843
- rubygems_version: 3.0.8
845
+ rubygems_version: 3.1.6
844
846
  signing_key:
845
847
  specification_version: 4
846
848
  summary: NFG UI front-end design system code for rapid product building