nfg_ui 0.13.1 → 0.13.2

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f0bd492e17572b1dbf2aa2b293f740edf9bee79301881c105a56258d140e4c1b
4
- data.tar.gz: 50d72c8fd06cea25747b23e5c546bd90893312082eecc3ab2bc4e0dceff38021
3
+ metadata.gz: 52eb169f5803dc4a89489c7383a04d727873f4a0d3722a9d36f555493a66a87d
4
+ data.tar.gz: 167b00bd9265fb9f0e3b16bf3e36a44166e0fc5d64cf5c604580b4efa9083278
5
5
  SHA512:
6
- metadata.gz: f01c58aeed6b1dbd6a6b135c551962f55fc5416657cffd2c395a3dd0f0d57420c96fba36e96650c5bbde0cd812b4a4ed8ade2f9d7f7965ca6d61e2d9ea683bbf
7
- data.tar.gz: 7bed6a6c4b21a190d27b089e4c103644b7291b52a92f8378f4730dac2b9cccb819917d233eb78556c69d9b74054072e03d26c8e412b2593151baa5279fb6f185
6
+ metadata.gz: be1ab2d77aa8b9a1b1cf5be109425e553320a1a21d887847f35494bd1ebc17b32d809d97aac64edca2209d8617755e96bcc2f34899c043cbc6dfb63cc13227fc
7
+ data.tar.gz: 23efe9e2f2ef15fddc6ed928682d411bcdfe6e76ab94f9eac2545311f0ce5e782ea9af57ad730cb27e137e2c1c26c3fa4b50a19509bcc3ad12fd138ff9c2d309
@@ -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
  }
@@ -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.1'
4
+ VERSION = '0.13.2'
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.1
4
+ version: 0.13.2
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: 2022-01-20 00:00:00.000000000 Z
12
+ date: 2022-03-09 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: bootstrap
@@ -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