nfg_ui 0.12.7 → 0.12.11
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/README.md +3 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_custom.scss +2 -1
- data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_type.scss +35 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_bee.scss +1 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_builder_layout.scss +1 -1
- data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_content_section.scss +88 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_mailings.scss +57 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_buttons.scss +6 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_print.scss +20 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_redactor.scss +47 -1
- data/app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_datetimepicker.scss +7 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_select2.scss +0 -1
- data/lib/nfg_ui/components/elements/nav_link.rb +1 -0
- data/lib/nfg_ui/version.rb +1 -1
- metadata +6 -3
- data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_content_section_buttons.scss +0 -11
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: d1b470649dc13da4589ebf542a26a8945906254c9b26362125b93bf1cd146a36
|
4
|
+
data.tar.gz: b8578d38c9ebc6299e112f87909d3764a0990373276904e8cc39c5cf14675686
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 5dbcc04fa8b4c8275faeb61791d975788b1e1757d9990afe01ff1194d78ba6b7bbc2b43bda281ae862445f309784c01e4913313013a02816ba06f034e4dff394
|
7
|
+
data.tar.gz: 9843c75e01cb86f33759295241a20d701f826301ba89da3672944c3f1de0a0cd1826053ccc2678ffe6a661a2dc05e3b3f7d85fa2bbd206d1fa594f62c238f86f
|
data/README.md
CHANGED
@@ -18,6 +18,9 @@ This gem is an organic, evolving and ongoing work that is the loving result of 4
|
|
18
18
|
With this gem, you can stand up a brand new rails app and it will seamlessly, from day 1, look, feel and be a Network for Good product. *Huzzah*
|
19
19
|
|
20
20
|
## Accessing Component Code Examples & Documentation:
|
21
|
+
|
22
|
+
Visit [NFG UI Display App](https://nfg-ui-display-app.herokuapp.com/) for examples.
|
23
|
+
|
21
24
|
To review the documentation for the components, get code samples and browse the library, follow the instructions at the bottom for getting the gem setup locally. It has its own `test_app` so the documentation is hosted there and the gem doesn't need to be added to a seperate parent app (unless you want to). We intend to get this online in its own dedicated space... until then, that's your best bet for browsing docs.
|
22
25
|
|
23
26
|
## Configuration
|
@@ -4,7 +4,7 @@
|
|
4
4
|
@import 'custom/builder_layout';
|
5
5
|
@import 'custom/campaign_card';
|
6
6
|
@import 'custom/campaign_preview';
|
7
|
-
@import 'custom/
|
7
|
+
@import 'custom/content_section';
|
8
8
|
@import 'custom/custom_questions_questionnaire';
|
9
9
|
@import 'custom/custom_receipt_language';
|
10
10
|
@import 'custom/email_preview';
|
@@ -12,6 +12,7 @@
|
|
12
12
|
@import 'custom/gallery';
|
13
13
|
@import 'custom/icomoon';
|
14
14
|
@import 'custom/interaction';
|
15
|
+
@import 'custom/mailings';
|
15
16
|
@import 'custom/page_header';
|
16
17
|
@import 'custom/readmore';
|
17
18
|
@import 'custom/redacted_text';
|
@@ -0,0 +1,35 @@
|
|
1
|
+
// Basic p/ol/ul styles for long content areas (for now, only on task detail description, pdf layout, and mailings edit page)
|
2
|
+
.reset-body-text {
|
3
|
+
font-size: $font-size-base;
|
4
|
+
ul, ol {
|
5
|
+
margin-bottom: 0;
|
6
|
+
margin-left: 0;
|
7
|
+
padding-left: ($spacer * .5);
|
8
|
+
font-size: $font-size-base;
|
9
|
+
li {
|
10
|
+
line-height: 1.3;
|
11
|
+
+ li { margin-top: ($spacer * .25); }
|
12
|
+
span[style*="inline-block"] { vertical-align: text-top; } // used to adjust for line-height on inline-block elements inside list items
|
13
|
+
}
|
14
|
+
}
|
15
|
+
p, ul, ol {
|
16
|
+
+ p, + ul, + ol { margin-top: ($spacer * .5); }
|
17
|
+
}
|
18
|
+
code, pre { font-size: $font-size-sm; }
|
19
|
+
|
20
|
+
// Styles meant for tables inside reset-body-text specifically direct mail
|
21
|
+
table {
|
22
|
+
border-collapse: collapse;
|
23
|
+
width: 100%;
|
24
|
+
td, th {
|
25
|
+
padding: 6px;
|
26
|
+
border: $border-width solid $border-color;
|
27
|
+
vertical-align: top;
|
28
|
+
}
|
29
|
+
thead td,
|
30
|
+
th {
|
31
|
+
font-weight: bold;
|
32
|
+
border-bottom-color: $border-color;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
}
|
data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_content_section.scss
ADDED
@@ -0,0 +1,88 @@
|
|
1
|
+
// Styles for content section buttons
|
2
|
+
.cs-edit, .cs-btn-group {
|
3
|
+
position: absolute;
|
4
|
+
top: -($spacer * .5);
|
5
|
+
left: -($spacer * .5);
|
6
|
+
}
|
7
|
+
.cs-edit, .cs-rm-group, .cs-add-group {
|
8
|
+
color: $white !important;
|
9
|
+
background-color: $primary;
|
10
|
+
text-decoration: none !important;
|
11
|
+
opacity: 0.8;
|
12
|
+
z-index: 100;
|
13
|
+
&:hover { opacity: 1; }
|
14
|
+
}
|
15
|
+
|
16
|
+
|
17
|
+
// Content section styles
|
18
|
+
.content-section-wrapper, .content-section {
|
19
|
+
position: relative;
|
20
|
+
width: 100%;
|
21
|
+
line-height: 1.4;
|
22
|
+
.redactor-box {
|
23
|
+
z-index: 50;
|
24
|
+
.redactor-editor {
|
25
|
+
padding: 0;
|
26
|
+
min-height: $spacer;
|
27
|
+
font-size: inherit !important;
|
28
|
+
font-family: inherit !important;
|
29
|
+
line-height: inherit !important;
|
30
|
+
border: none;
|
31
|
+
}
|
32
|
+
}
|
33
|
+
}
|
34
|
+
.cs-form, .cs-html-editor-undo { display: none; }
|
35
|
+
.cs-html-editor-overlay {
|
36
|
+
position: absolute;
|
37
|
+
left: 50%;
|
38
|
+
bottom: 100%;
|
39
|
+
margin-bottom: ($spacer * .5);
|
40
|
+
min-width: 200px;
|
41
|
+
width: 430px;
|
42
|
+
text-align: center;
|
43
|
+
z-index: 120;
|
44
|
+
@include media-breakpoint-down(xs) { max-width: 100%; }
|
45
|
+
&[data-for='header_text'] {
|
46
|
+
top: 100%;
|
47
|
+
bottom: auto;
|
48
|
+
width: 200px;
|
49
|
+
.redactor-toolbar-external {
|
50
|
+
&:after, &:before { display: none; }
|
51
|
+
}
|
52
|
+
}
|
53
|
+
.cs-html-editor-buttons, .cs-html-editor-toolbar { left: -50%; }
|
54
|
+
.cs-html-editor-buttons {
|
55
|
+
z-index: 100;
|
56
|
+
a {
|
57
|
+
display: inline-block;
|
58
|
+
padding: $btn-padding-y $btn-padding-x;
|
59
|
+
font-size: $btn-font-size;
|
60
|
+
line-height: $btn-line-height;
|
61
|
+
color: $body-color;
|
62
|
+
text-align: center;
|
63
|
+
background-color: $white;
|
64
|
+
border: $border-width solid $border-color;
|
65
|
+
border-bottom: 0;
|
66
|
+
text-decoration: none;
|
67
|
+
border-radius: $btn-border-radius $btn-border-radius 0 0;
|
68
|
+
@include hover-focus-active {
|
69
|
+
color: $white;
|
70
|
+
background: $primary;
|
71
|
+
}
|
72
|
+
i.fa { margin-right: ($spacer * .25); }
|
73
|
+
&.cs-html-editor-save {
|
74
|
+
color: $white;
|
75
|
+
background-color: $primary;
|
76
|
+
}
|
77
|
+
+ a[class^='cs-html-editor-'] { margin-left: ($spacer * .25); }
|
78
|
+
}
|
79
|
+
}
|
80
|
+
.cs-html-editor-toolbar { z-index: 50; }
|
81
|
+
}
|
82
|
+
.cs-hidden-editor-container {
|
83
|
+
position: absolute;
|
84
|
+
z-index: -1;
|
85
|
+
width: 0;
|
86
|
+
height: 0;
|
87
|
+
overflow: hidden;
|
88
|
+
}
|
@@ -0,0 +1,57 @@
|
|
1
|
+
// Used for direct mail and direct mail templates
|
2
|
+
.page {
|
3
|
+
position: relative;
|
4
|
+
background-color: $white;
|
5
|
+
border: $border-width solid $border-color;
|
6
|
+
page-break-after: always; // Always insert page break after this element
|
7
|
+
page-break-inside: avoid; // Don't break my page content up browser
|
8
|
+
@media print {
|
9
|
+
margin: 0;
|
10
|
+
padding: 0;
|
11
|
+
width: 100%;
|
12
|
+
height: 100%;
|
13
|
+
background-color: transparent;
|
14
|
+
border: none;
|
15
|
+
}
|
16
|
+
&:before {
|
17
|
+
position: absolute;
|
18
|
+
width: auto;
|
19
|
+
height: auto;
|
20
|
+
border: 2px dashed $border-color;
|
21
|
+
content: '';
|
22
|
+
z-index: 0;
|
23
|
+
@media print { display: none; }
|
24
|
+
}
|
25
|
+
}
|
26
|
+
.page-margin {
|
27
|
+
width: 100%;
|
28
|
+
height: 100%;
|
29
|
+
}
|
30
|
+
.page-content {
|
31
|
+
width: 100%;
|
32
|
+
height: 100%;
|
33
|
+
.redactor-editor, .redactor-box { background: transparent; }
|
34
|
+
.redactor-editor {
|
35
|
+
border: none;
|
36
|
+
padding: 0;
|
37
|
+
}
|
38
|
+
blockquote {
|
39
|
+
margin-left: 1.6em !important;
|
40
|
+
font-size: inherit;
|
41
|
+
font-style: italic;
|
42
|
+
color: inherit;
|
43
|
+
}
|
44
|
+
a {
|
45
|
+
color: #15c; // Clear out orange link colors to default blue
|
46
|
+
text-decoration: underline;
|
47
|
+
&:hover, &:focus, &:active {
|
48
|
+
color: #15c;
|
49
|
+
text-decoration: none;
|
50
|
+
}
|
51
|
+
}
|
52
|
+
}
|
53
|
+
.page-margin-text {
|
54
|
+
position: absolute;
|
55
|
+
top: -($spacer);
|
56
|
+
right: 0;
|
57
|
+
}
|
@@ -44,6 +44,12 @@
|
|
44
44
|
color: $body-color !important;
|
45
45
|
background-color: $body-bg;
|
46
46
|
}
|
47
|
+
&.disabled,
|
48
|
+
&:disabled {
|
49
|
+
color: $primary;
|
50
|
+
background-color: $white;
|
51
|
+
border: $border-width solid $border-color;
|
52
|
+
}
|
47
53
|
}
|
48
54
|
.btn-link {
|
49
55
|
font-weight: $btn-font-weight;
|
@@ -0,0 +1,20 @@
|
|
1
|
+
// stylelint-disable declaration-no-important, selector-no-qualifying-type
|
2
|
+
|
3
|
+
// Source: https://github.com/h5bp/main.css/blob/master/src/_print.css
|
4
|
+
|
5
|
+
// ==========================================================================
|
6
|
+
// Print styles.
|
7
|
+
// Inlined to avoid the additional HTTP request:
|
8
|
+
// https://www.phpied.com/delay-loading-your-print-css/
|
9
|
+
// ==========================================================================
|
10
|
+
|
11
|
+
@if $enable-print-styles {
|
12
|
+
@media print {
|
13
|
+
* { background: transparent !important; color: black !important; filter: none !important; -ms-filter: none !important; }
|
14
|
+
|
15
|
+
a[href]:after { content: " (" attr(href) ")"; }
|
16
|
+
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } // Don't show links for images, or javascript/internal links
|
17
|
+
|
18
|
+
ul, ol, img { page-break-inside: avoid; }
|
19
|
+
}
|
20
|
+
}
|
@@ -4,13 +4,52 @@
|
|
4
4
|
}
|
5
5
|
.redactor-box {
|
6
6
|
margin-bottom: 0 !important;
|
7
|
+
min-height: ($spacer * 5);
|
7
8
|
border: $border-width solid $border-color;
|
8
9
|
}
|
9
10
|
.redactor-toolbar {
|
11
|
+
position: relative;
|
10
12
|
background-color: $body-bg;
|
11
13
|
box-shadow: none;
|
12
14
|
border-bottom: $border-width solid $border-color;
|
13
|
-
|
15
|
+
&.redactor-toolbar-external {
|
16
|
+
border-color: $border-color;
|
17
|
+
border-radius: $border-radius;
|
18
|
+
box-shadow: $box-shadow-sm;
|
19
|
+
&:after, &:before {
|
20
|
+
display: block;
|
21
|
+
top: 100%;
|
22
|
+
left: 50%;
|
23
|
+
border: solid transparent;
|
24
|
+
content: " ";
|
25
|
+
height: 0;
|
26
|
+
width: 0;
|
27
|
+
position: absolute;
|
28
|
+
pointer-events: none;
|
29
|
+
}
|
30
|
+
&:after {
|
31
|
+
border-color: rgba(255, 255, 255, 0);
|
32
|
+
border-top-color: $body-bg;
|
33
|
+
border-width: 6px;
|
34
|
+
margin-left: -6px;
|
35
|
+
}
|
36
|
+
&:before {
|
37
|
+
border-color: rgba(243, 246, 248, 0);
|
38
|
+
border-top-color: $border-color;
|
39
|
+
border-width: 7px;
|
40
|
+
margin-left: -7px;
|
41
|
+
}
|
42
|
+
}
|
43
|
+
li a {
|
44
|
+
color: inherit !important;
|
45
|
+
&.re-icon {
|
46
|
+
.body-text { font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif !important; }
|
47
|
+
}
|
48
|
+
@include hover-focus-active {
|
49
|
+
color: $white !important;
|
50
|
+
background-color: $primary;
|
51
|
+
}
|
52
|
+
}
|
14
53
|
}
|
15
54
|
.redactor-editor, .redactor-box, .redactor-box textarea { z-index: auto; }
|
16
55
|
.redactor-box .redactor-toolbar { z-index: $zindex-dropdown - 10 !important; }
|
@@ -27,4 +66,11 @@ body.modal-open {
|
|
27
66
|
// z-index was upped from 999 to 1 more than the modal...
|
28
67
|
// in response to: https://jira.networkforgood.org/browse/PSTWO-9974
|
29
68
|
z-index: $zindex-modal + 1 !important;
|
69
|
+
a[class^="redactor-dropdown-"] {
|
70
|
+
color: $body-color;
|
71
|
+
@include hover-focus-active {
|
72
|
+
color: $white;
|
73
|
+
background-color: $primary;
|
74
|
+
}
|
75
|
+
}
|
30
76
|
}
|
@@ -277,3 +277,10 @@
|
|
277
277
|
[data-action='togglePeriod']:after { content: 'Toggle AM/PM'; }
|
278
278
|
[data-action='clear']:after { content: 'Clear the picker'; }
|
279
279
|
[data-action='today']:after { content: 'Set the date to today'; }
|
280
|
+
|
281
|
+
body:not(.modal-open) {
|
282
|
+
.bootstrap-datetimepicker-widget { z-index: $zindex-dropdown + 1 !important; } // makes datetimepicker dropdown higher than select2
|
283
|
+
}
|
284
|
+
body.modal-open {
|
285
|
+
.modal .bootstrap-datetimepicker-widget { z-index: $zindex-modal + 3 !important; } // makes datetimepicker dropdown higher than redactor toolbar and select2 in modals
|
286
|
+
}
|
@@ -16,7 +16,6 @@ body.modal-open {
|
|
16
16
|
.modal .select2-container { z-index: $zindex-modal + 2 !important; } // makes select2 dropdown higher than redactor toolbar in modals
|
17
17
|
}
|
18
18
|
|
19
|
-
|
20
19
|
.select2-container--default {
|
21
20
|
&.select2-container--focus .select2-selection--multiple,
|
22
21
|
&.select2-container--open .select2-selection--single {
|
@@ -11,6 +11,7 @@ module NfgUi
|
|
11
11
|
include NfgUi::Components::Utilities::Traitable
|
12
12
|
include NfgUi::Components::Utilities::Describable
|
13
13
|
include NfgUi::Components::Utilities::Iconable
|
14
|
+
include NfgUi::Components::Utilities::Methodable
|
14
15
|
include NfgUi::Components::Utilities::Renderable
|
15
16
|
|
16
17
|
include NfgUi::Components::Traits::Active
|
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.12.
|
4
|
+
version: 0.12.11
|
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-
|
12
|
+
date: 2021-08-16 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: bootstrap
|
@@ -421,12 +421,13 @@ files:
|
|
421
421
|
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_nav.scss
|
422
422
|
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_navbar.scss
|
423
423
|
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_tables.scss
|
424
|
+
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_type.scss
|
424
425
|
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_activity_feed.scss
|
425
426
|
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_bee.scss
|
426
427
|
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_builder_layout.scss
|
427
428
|
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_campaign_card.scss
|
428
429
|
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_campaign_preview.scss
|
429
|
-
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/
|
430
|
+
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_content_section.scss
|
430
431
|
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_custom_questions_questionnaire.scss
|
431
432
|
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_custom_receipt_language.scss
|
432
433
|
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_email_preview.scss
|
@@ -434,6 +435,7 @@ files:
|
|
434
435
|
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_gallery.scss
|
435
436
|
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_icomoon.scss
|
436
437
|
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_interaction.scss
|
438
|
+
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_mailings.scss
|
437
439
|
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_page_header.scss
|
438
440
|
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_readmore.scss
|
439
441
|
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_redacted_text.scss
|
@@ -507,6 +509,7 @@ files:
|
|
507
509
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_forms.scss
|
508
510
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_modal.scss
|
509
511
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_nav.scss
|
512
|
+
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_print.scss
|
510
513
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_progress.scss
|
511
514
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_reboot.scss
|
512
515
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_sizing.scss
|