nfg_ui 0.11.5 → 0.11.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f6873ae0b61984e697a1b6ee78a84296be11729d47c97a1b537e6fd57b45c7fd
-  data.tar.gz: 45feded1d9e2cd3313126dbe0b34975ae606edede1559bc04e21a45320ef734c
+  metadata.gz: e34dd1689fbc138c1f6f147056cf00a639784191b11c9589e1e29b0a17a2f404
+  data.tar.gz: 6c926d086c1cc2e0e28f9430af109880b501fd9f3f796f23419a9a765d458126
 SHA512:
-  metadata.gz: 6729574a1e6a4a86db7a68bc7124bf2041ff5e6f78826f8685df2746dcd126c86db446bd56eb384f3d20027db57582eff768eca0cbd1e90f8a15e15c0df79f42
-  data.tar.gz: a7cdec8d0b423255b95080033361a5a4f7bdd8e4feaaf0f165d5f2d65b793caa7512c2e7aa5bfc00c1291c706ff066754943f2a2de7255d1534610a5657482c8
+  metadata.gz: d88d70a213d8b19fa0638ac70fb93d286cced3bcf1215003bcd313754ba7f6053eba20fa474ccc86fc96d7db4561ec25ea89b266c94f550305df3aa4d85c5d7b
+  data.tar.gz: d31c17da3d988e609660b3490a5950d56e511d569e755ef47c748ef5479ca8b954b96040ec27a608ebd20ae4a4148f0d0e4c41b80c328f22924e97422ed2baa1

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_custom-forms.scss

@@ -20,6 +20,9 @@
         }
       }
     }
-    .custom-select { color: $value; }
+    .custom-select {
+      color: $value;
+      &:focus { border-color: $value; }
+    }
   }
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_reboot.scss

@@ -1,6 +1,6 @@
 @each $color, $value in $colors {
   .#{$color} {
-    a:not(.dropdown-item) {
+    a:not(.btn) {
       color: $value;
       @include hover { color: darken($value, 15%); }
     }

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_custom.scss

@@ -1,5 +1,6 @@
 // Our custom styles
 @import 'custom/activity_feed';
+@import 'custom/bee';
 @import 'custom/builder_layout';
 @import 'custom/campaign_card';
 @import 'custom/campaign_preview';
@@ -13,7 +14,10 @@
 @import 'custom/interaction';
 @import 'custom/overlay_blocker';
 @import 'custom/page_header';
+@import 'custom/readmore';
 @import 'custom/share_dropdown';
+@import 'custom/sortable';
 @import 'custom/status_indicator';
+@import 'custom/sys_only_functionality';
 @import 'custom/tile';
 @import 'custom/video_countdown';

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_bee.scss

@@ -0,0 +1,15 @@
+#bee_plugin_container {
+  height: 600px; // fallback value if calc() isn't supported
+  border-top: 1px solid $border-color;
+  border-bottom: 1px solid $border-color;
+}
+
+// Height if just the builder-header is present
+.builder-header + .builder-container {
+  #bee_plugin_container { height: calc(100vh - 72px); }
+}
+
+// Height if both builder-header and builder-nav are present (typical in onboarder)
+.builder-header + .builder-nav + .builder-container {
+  #bee_plugin_container { height: calc(100vh - 180px); }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_builder_layout.scss

@@ -84,7 +84,7 @@ $builder-preview-padding: ($spacer * 2);
   padding: $builder-preview-padding ($builder-preview-padding / 2);
   @include media-breakpoint-up(lg) {
     float: left;
-    width: 67vw;
+    width: 67%;
     height: 100%;
     overflow-y: auto;
     > :last-child { margin-bottom: $builder-preview-padding; }
@@ -96,7 +96,7 @@ $builder-preview-padding: ($spacer * 2);
   @include media-breakpoint-down(md) { border-bottom: $border-width solid $border-color; }
   @include media-breakpoint-up(lg) {
     float: right;
-    width: 33vw;
+    width: 33%;
     height: 100%;
     border-left: $border-width solid $border-color;
     overflow-y: auto;

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_interaction.scss

@@ -1,2 +1,2 @@
 // Sort
-[class*='sort']:not(.sort_link) { cursor: move; }
+.ui-sortable-handle, [data-sortable="handle"] { cursor: move; }

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_readmore.scss

@@ -0,0 +1,24 @@
+// Powers the readmore.js plugin
+.expandable,
+.readmore-js-section {
+  position: relative;
+  z-index: 10;
+  transition: $transition-collapse;
+  &.readmore-js-collapsed { overflow: hidden; }
+  &.readmore-js-expanded { overflow: visible; }
+}
+.readmore-js-collapsed:after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: ($spacer * 1.5);
+  @include gradient-y(transparentize($white, 1), transparentize($white, 0));
+  content: '';
+  z-index: 20;
+}
+.readmore-js-toggle {
+  padding-top: ($spacer * .5);
+  padding-bottom: ($spacer * .5);
+  z-index: 30;
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_sortable.scss

@@ -0,0 +1,29 @@
+// Shared sorting styles
+.slat, .option {
+  &.ui-sortable-placeholder {
+    visibility: visible !important;
+    background: theme-color("light");
+    border: $border-width dashed $border-color;
+  }
+  &.ui-sortable-helper { opacity: .5; }
+}
+// Slat
+.slat {
+  &.ui-sortable-placeholder {
+    + .slat { border-top: none; }
+    + &.ui-sortable-helper {
+      border-top-style: dashed;
+      + &.slat { border-top: none; }
+    }
+  }
+  &.ui-sortable-helper {
+    border-top: none;
+    border-top: none;
+    + &.ui-sortable-placeholder { border-top: $border-width dashed $border-color; }
+  }
+}
+
+// Sortable options (used on form fields for checkboxes/radios/select options)
+.option {
+  &.ui-sortable-placeholder { margin-bottom: ($spacer * .25); }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_sys_only_functionality.scss

@@ -0,0 +1,51 @@
+// Heartbeat "beacon" styles for sysuser functionality
+.notify {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 50;
+  .heartbit {
+    position: absolute;
+    top: -($spacer * .75);
+    right: -($spacer * .75);
+    height: ($spacer * 1.5);
+    width: ($spacer * 1.5);
+    z-index: 10;
+    border: 6px solid $warning;
+    border-radius: ($spacer * .75);
+    animation: heartbit 1s ease-out infinite;
+  }
+  .point {
+    position: absolute;
+    right: -($spacer * .25);
+    top: -($spacer * .25);
+    width: ($spacer * .5);
+    height: ($spacer * .5);
+    border-radius: $spacer;
+    background-color: $warning;
+  }
+}
+
+// Heartbeat animation used on beacon for sysusers
+@keyframes heartbit {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  25% {
+    transform: scale(0.1);
+    opacity: .1;
+  }
+  50% {
+    transform: scale(0.5);
+    opacity: .3;
+  }
+  75% {
+    transform: scale(0.8);
+    opacity: .5;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_buttons.scss

@@ -17,4 +17,4 @@
 .btn-link { font-weight: $btn-font-weight; }
 
 // overrides color contrast settings
-.btn-warning { color: $white !important; }
+.btn-warning { color: $white !important; }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_card.scss

@@ -13,6 +13,10 @@
 .card-footer { border-top: none; }
 
 // Card image
-.card-img-overlay { @include gradient-y(transparentize($black, 1), transparentize($black, .5)); }
+.card-img-overlay {
+  top: auto; // makes the overlay gradient and container "stick" to bottom of parent container
+  min-height: ($spacer * 2);
+  @include gradient-y(transparentize($black, 1), transparentize($black, .5));
+}
 
 .card-img { @include border-radius(0); }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_custom-forms.scss

@@ -3,6 +3,7 @@
 // Base class takes care of all the key behavioral aspects.
 
 .custom-control {
+  padding-left: 0;
   .custom-control-input {
     &:checked {
       ~ .custom-control-label,
@@ -12,17 +13,24 @@
   }
   + .custom-control:not(.custom-control-inline) { margin-top: ($spacer * .25); }
 }
+.custom-checkbox, .custom-radio { min-width: $custom-control-gutter + $custom-control-indicator-size; } // sets minimum width to have space even if custom-control-label isn't there
 
 // Custom control indicators
 //
 // Build the custom controls out of pseudo-elements.
 
 .custom-control-label {
+  padding-left: $custom-control-gutter + $custom-control-indicator-size;
+  min-width: $custom-control-gutter + $custom-control-indicator-size;
+  min-height: $custom-control-indicator-size;
   font-weight: $font-weight-normal;
   cursor: pointer;
 
   // Background-color and icon
-  &::before, &::after { top: .3rem; }
+  &::before, &::after {
+    top: .3rem;
+    left: 0;
+  }
   &::before { border: $border-width solid $border-color; }
   &::after { cursor: pointer; }
 }
@@ -101,7 +109,10 @@
 // Tweak a few things for switches
 
 .custom-switch {
+  padding-left: 0;
   .custom-control-label {
+    padding-left: $custom-switch-width + $custom-control-gutter;
+    &::before, &::after { left: 0; }
     &::before {
       padding-left: 28px;
       font-size: 12px;
@@ -113,7 +124,6 @@
     }
     &::after {
       top: 0;
-      left: -($custom-switch-width + $custom-control-gutter);
       background-color: $white;
       border: $border-width solid $border-color;
       border-radius: 50%;

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_dropdown.scss

@@ -9,6 +9,7 @@
     cursor: default;
     pointer-events: none;
   }
+  &:not(.text-danger) { color: inherit !important; }
 }
 
 
@@ -21,7 +22,14 @@
 
 
 // Sizing
-.dropdown-menu-md { min-width: ($spacer * 12); }
+.dropdown-menu-md, .dropdown-menu-lg { min-width: ($spacer * 10); }
+.dropdown-menu-md {
+  @include media-breakpoint-up(sm) { min-width: ($spacer * 12); }
+}
+.dropdown-menu-lg {
+  @include media-breakpoint-up(sm) { min-width: ($spacer * 24); }
+}
+
 
 
 // Styles for wider "My Tools" dropdown in top nav

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_reboot.scss

@@ -18,6 +18,10 @@ body {
 
 div { position: relative; } // setting this as a base to avoid improper absolute positioning elements
 
+p {
+  &.disabled { opacity: .4; } // used on filter bars on list pages for bulk actions
+}
+
 ol,
 ul,
 dl {

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_slat.scss

@@ -8,7 +8,7 @@ $slat-actions-lg-width: 108px;
   flex-flow: column nowrap;
 
   // Nowrap version -- used when the goal is to have all slat-item columns on the same line in smaller screens
-  :not(.slats-nowrap) { // noting the :not() psuedo-class meaning all slats that don't have this class get these styles
+  &:not(.slats-nowrap) { // noting the :not() psuedo-class meaning all slats that don't have this class get these styles
     .slat-body {
       @include media-breakpoint-down(sm) { flex-direction: column; }
     }
@@ -37,23 +37,8 @@ $slat-actions-lg-width: 108px;
     padding-bottom: ($spacer * 1.5);
   }
 
-  // Various states
-  &.ui-sortable-placeholder {
-    visibility: visible !important;
-    background: theme-color("light");
-    border: $border-width dashed $border-color;
-    + .slat { border-top: none; }
-    + &.ui-sortable-helper {
-      border-top-style: dashed;
-      + &.slat { border-top: none; }
-    }
-  }
-  &.ui-sortable-helper {
-    border-top: none;
-    opacity: .5;
-    border-top: none;
-    + &.ui-sortable-placeholder { border-top: $border-width dashed $border-color; }
-  }
+  // Status
+  &.pending { background-color: #fff5e0; }
 }
 
 

data/lib/nfg_ui/components/elements/slat_item.rb

@@ -11,6 +11,10 @@ module NfgUi
         include NfgUi::Components::Traits::Size
         include NfgUi::Components::Traits::SlatItem
 
+        def caption
+          options.fetch(:caption, nil)
+        end
+
         def component_family
           :slats
         end
@@ -19,36 +23,56 @@ module NfgUi
           options.fetch(:slat_header, nil)
         end
 
-        def caption
-          options.fetch(:caption, nil)
+        # Leverage custom tooltip implementation
+        # so that tooltips are connected to slat item text
+        # and not the slat item containing div (resulting in better UI)
+        def tooltip
+          options.fetch(:tooltip, nil)
         end
 
         def render
           content_tag(base_element, slat_item_html_options) do
             if slat_header
-              concat(content_tag(:h6, slat_header, class: 'display-4 slat-column-header'))
+              concat(content_tag(:h6, slat_header, class: 'display-4 slat-column-header', **tooltip_html_options))
             end
             if heading
               if href
                 concat(content_tag(:a, href: view_context.url_for(href)) {
-                  NfgUi::Components::Foundations::Typeface.new({ subheading: heading }, view_context).render
+                  NfgUi::Components::Foundations::Typeface.new({ subheading: heading, tooltip: tooltip }, view_context).render
                 })
               else
-                concat(NfgUi::Components::Foundations::Typeface.new({ subheading: heading }, view_context).render)
+                concat(NfgUi::Components::Foundations::Typeface.new({ subheading: heading, tooltip: tooltip }, view_context).render)
               end
             end
             concat(block_given? ? yield : body)
             if caption
-              concat(NfgUi::Components::Foundations::Typeface.new({ caption: caption, class: 'mb-0' }, view_context).render)
+              concat(NfgUi::Components::Foundations::Typeface.new({ caption: caption, class: 'mb-0', tooltip: (tooltip unless heading) }, view_context).render)
             end
           end
         end
 
         private
 
+        def tooltip_html_options
+          return {} unless tooltip
+          { title: tooltip, data: options[:data].merge(tooltip_data_attributes) }
+        end
+
+        def tooltip_data_attributes
+          { toggle: 'tooltip',
+            placement: :top,
+            html: 'true' }
+        end
+
         # Strip the href from html_options and pass it to the header
         def slat_item_html_options
-          html_options.except(:href)
+          options = html_options.except(:href)
+
+          # merge in tooltip only if leveraging block body content
+          # tooltip_html_options will return {} if no tooltip so this is a safe merge
+          options.merge!(tooltip_html_options) unless (heading || caption || slat_header)
+
+          options
         end
 
         # :sm is the default size, and is not given
@@ -59,7 +83,7 @@ module NfgUi
         end
 
         def non_html_attribute_options
-          super.push(:slat_header, :caption)
+          super.push(:slat_header, :caption, :tooltip)
         end
       end
     end

data/lib/nfg_ui/components/traits/typeface.rb

@@ -10,7 +10,6 @@ module NfgUi
                     heading
                     subheading
                     title
-                    muted
                     truncate].freeze
 
         def body_trait

data/lib/nfg_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module NfgUi
-  VERSION = '0.11.5'
+  VERSION = '0.11.10'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nfg_ui
 version: !ruby/object:Gem::Version
-  version: 0.11.5
+  version: 0.11.10
 platform: ruby
 authors:
 - Jonathan Roehm
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-10-29 00:00:00.000000000 Z
+date: 2021-01-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bootstrap
@@ -421,6 +421,7 @@ files:
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_navbar.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_tables.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_activity_feed.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_bee.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_builder_layout.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_campaign_card.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_campaign_preview.scss
@@ -434,8 +435,11 @@ files:
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_interaction.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_overlay_blocker.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_page_header.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_readmore.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_share_dropdown.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_sortable.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_status_indicator.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_sys_only_functionality.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_tile.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_video_countdown.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/core/_variables.scss