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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: a35bf8e810bef7ab9c4ac1dca95a6ca9e236b5f4606ef6c63614fa941fd510c8
4
- data.tar.gz: 1d007a905113a5bbb89a4dd3fc486639d72b0be1a4c466f07b7f3a70cbb1e37e
3
+ metadata.gz: d1b470649dc13da4589ebf542a26a8945906254c9b26362125b93bf1cd146a36
4
+ data.tar.gz: b8578d38c9ebc6299e112f87909d3764a0990373276904e8cc39c5cf14675686
5
5
  SHA512:
6
- metadata.gz: f7a91b7232e34eb6f7a2b68eb1d7c279858d1e62b4a95ac811f3c45922690790eefa993fb5a0c82f9d2be4dc496aea796b0cac99946b1bc5def7764502bb52d0
7
- data.tar.gz: d4e2fc74dcd4244490bc2455a4f30b1a9fd04e73d91373865b87e3ae431563614e2841f83491979a999e5be0d0f668c3e1b47b02454bb210b4d560d1c357c864
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/content_section_buttons';
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
+ }
@@ -1,5 +1,6 @@
1
1
  #bee_plugin_container {
2
2
  height: 600px; // fallback value if calc() isn't supported
3
+ height: calc(100vh - 112px);
3
4
  border-top: 1px solid $border-color;
4
5
  border-bottom: 1px solid $border-color;
5
6
  }
@@ -21,7 +21,7 @@ $builder-preview-padding: ($spacer * 1.5);
21
21
  width: 100%;
22
22
  min-height: $builder-header-height;
23
23
  background-color: $blue-700;
24
- z-index: $zindex-fixed;
24
+ z-index: $zindex-fixed + 1;
25
25
  @include media-breakpoint-up(lg) {
26
26
  position: fixed;
27
27
  top: 0;
@@ -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
- a { color: inherit !important; }
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
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module NfgUi
4
- VERSION = '0.12.7'
4
+ VERSION = '0.12.11'
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.12.7
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-07-19 00:00:00.000000000 Z
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/_content_section_buttons.scss
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
@@ -1,11 +0,0 @@
1
- // Styles for content section buttons
2
- .cs-edit, .cs-btn-group {
3
- position: absolute;
4
- top: -($spacer * .25);
5
- left: -($spacer * .25);
6
- }
7
- .cs-edit, .cs-rm-group, .cs-add-group {
8
- opacity: 0.8;
9
- z-index: 100;
10
- &:hover { opacity: 1; }
11
- }