nfg_ui 0.12.7 → 0.12.11
Sign up to get free protection for your applications and to get access to all the features.
- 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
|