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 +4 -4
- data/app/assets/stylesheets/nfg_ui/network_for_good/admin/application.scss +0 -2
- data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_custom.scss +0 -1
- data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_builder_layout.scss +4 -99
- data/app/assets/stylesheets/nfg_ui/network_for_good/core/application.scss +2 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_custom.scss +2 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_builder_layout.scss +102 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/{admin/nfg_theme/custom/_campaign_preview.scss → core/nfg_theme/custom/_iframe_preview.scss} +0 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_custom.scss +1 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_builder_layout.scss +12 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_page_header.scss +12 -6
- data/lib/nfg_ui/version.rb +1 -1
- metadata +14 -12
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: ef6cda41e1d54ad8bf9b53f8e749dafb7390fe4cf43bf7dd89788a3aac9853fc
|
4
|
+
data.tar.gz: d4b57ad76eac91f1e462caadd863e9f1aede5ced58385d2b3dc191d5ff368156
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
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/*';
|
data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_builder_layout.scss
CHANGED
@@ -1,106 +1,11 @@
|
|
1
|
-
//
|
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-
|
20
|
-
|
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
|
}
|
data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_builder_layout.scss
ADDED
@@ -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
|
+
}
|
File without changes
|
data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_builder_layout.scss
ADDED
@@ -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
|
+
}
|
data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_page_header.scss
CHANGED
@@ -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
|
-
|
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
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
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
|
}
|
data/lib/nfg_ui/version.rb
CHANGED
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.
|
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:
|
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.
|
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.
|
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.
|
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
|