nfg_ui 0.11.10 → 0.11.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e34dd1689fbc138c1f6f147056cf00a639784191b11c9589e1e29b0a17a2f404
-  data.tar.gz: 6c926d086c1cc2e0e28f9430af109880b501fd9f3f796f23419a9a765d458126
+  metadata.gz: a19a2d2be8af2061aceb6bbbd42641a0b453ae9745c4254ab6390569381d9152
+  data.tar.gz: 57e290d78782475a9eca5b6e11c280b8b2e189facbf8da111cd20a1485e8ca34
 SHA512:
-  metadata.gz: d88d70a213d8b19fa0638ac70fb93d286cced3bcf1215003bcd313754ba7f6053eba20fa474ccc86fc96d7db4561ec25ea89b266c94f550305df3aa4d85c5d7b
-  data.tar.gz: d31c17da3d988e609660b3490a5950d56e511d569e755ef47c748ef5479ca8b954b96040ec27a608ebd20ae4a4148f0d0e4c41b80c328f22924e97422ed2baa1
+  metadata.gz: f11e73646e3b34e74a94567d8ad8b9d072a0de1e7715818c23bcc21d8e7c3195e4a0a41a8e7badcaf27c290bbd84d5584b91c3c3ccf6251e7aca39415fc1e573
+  data.tar.gz: '059c130c6a825eae43ad51279f211d3ae5ed3a4576e503380f91c93926e8cf3f5bfab3c29f0ff4f786aacbc3e924dd91f7514257ce838a79430f91a8de5538c9'

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

@@ -4,19 +4,3 @@
   + #quick-add-modal { display: none !important; }
   ~ .modal-backdrop.show ~ .modal-backdrop.show { display: none !important; }
 }
-
-
-// Full page cover modal option
-.modal-cover {
-  margin: 0;
-  width: 100%;
-  max-width: 100%;
-  height: 100%;
-  transform: none !important; // removes default 50px transform that occurs on modal showing (.fade and .show)
-  .modal-content {
-    display: block;
-    height: 100%;
-    border: none;
-    border-radius: 0;
-  }
-}

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

@@ -2,5 +2,10 @@
 #campaign_image {
   height: ($spacer * 8);
   overflow: hidden;
-  .card-img { min-height: 100%; }
+  .card-img {
+    display: inline-block;
+    width: 100%;
+    min-height: 100%;
+    object-fit: cover;
+  }
 }

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

@@ -1,6 +1,7 @@
 // Our custom styles
 @import 'custom/avatar';
 @import 'custom/device_preview';
+@import 'custom/drawer';
 @import 'custom/icon';
 @import 'custom/illustration';
 @import 'custom/mobile';

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

@@ -1,7 +1,3 @@
-.form-control {
-  &[readonly] { background-color: $input-bg; }
-}
-
 // Required styles
 label {
   font-weight: $font-weight-bold;

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

@@ -0,0 +1,14 @@
+// Full page cover modal option
+.modal-cover {
+  margin: 0;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  transform: none !important; // removes default 50px transform that occurs on modal showing (.fade and .show)
+  .modal-content {
+    display: block;
+    height: 100%;
+    border: none;
+    border-radius: 0;
+  }
+}

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

@@ -1,4 +1,5 @@
 // Sizing options
+.progress { border-radius: $progress-height; }
 .progress-sm {
   height: ($spacer * .5);
   border-radius: ($spacer * .5);

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

@@ -15,6 +15,13 @@ h6, .h6 { line-height: 1.5; }
   text-transform: uppercase;
 }
 
+// Adjust heading sizes on smaller devices
+@include media-breakpoint-down(md) {
+  h1, .h1, h2, .h2, h3, .h3 {
+    font-size: $h4-font-size;
+    line-height: 1;
+  }
+}
 
 //
 // Misc
@@ -59,8 +66,8 @@ a.no-link-color {
     content: '';
     z-index: 0;
   }
-  .text-center, .btn-center { z-index: 10; }
-  .text-center {
+  [class*='text-'], .btn-center { z-index: 10; }
+  [class*='text-'] {
     position: relative;
     text-align: center;
     line-height: 1;

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

@@ -0,0 +1,87 @@
+.drawer {
+  position: fixed;
+  width: 100%;
+  z-index: $zindex-modal;
+  background-color: $white;
+  box-shadow: $box-shadow;
+  transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
+  opacity: 1 !important;
+
+  // Positions for drawer to slide in from
+  &.drawer-top {
+    top: 0;
+    right: auto;
+    bottom: auto;
+    left: 0;
+    transform: translate(0, -100%);
+  }
+  &.drawer-right {
+    top: 0;
+    right: 0;
+    bottom: auto;
+    left: auto;
+    transform: translate(100%, 0);
+  }
+  &.drawer-bottom {
+    top: auto;
+    right: auto;
+    bottom: 0;
+    left: 0;
+    transform: translate(0, 100%);
+  }
+  &.drawer-left {
+    top: 0;
+    right: auto;
+    bottom: auto;
+    left: 0;
+    transform: translate(-100%, 0);
+  }
+  &.drawer-top, &.drawer-bottom {
+    height: 100%;
+    @include media-breakpoint-up(lg) { height: auto; }
+  }
+  &.drawer-right, &.drawer-left {
+    height: 100%;
+    @include media-breakpoint-up(lg) { width: 32%; }
+  }
+  &.drawer-top, &.drawer-right, &.drawer-bottom, &.drawer-left {
+    &.show { transform: translate(0, 0); } // uses modal's show for slide animation
+  }
+}
+
+// Modal overrides for drawer to use modal component
+.drawer {
+  .modal-dialog {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    transition: none !important; // removes default fade in modal transition
+    transform: none !important; // removes default 50px transform that occurs on modal showing (.fade and .show)
+    .modal-content {
+      display: block;
+      width: 100%;
+      height: 100%;
+      border: none;
+      box-shadow: none;
+      border-radius: 0;
+    }
+  }
+}
+
+// Hides modal backdrop default and need to be siblings
+.drawer ~ .modal-backdrop { display: none; }
+
+// Main drawer container
+.drawer-content {
+  height: 100%;
+  overflow-y: auto;
+}
+.drawer-section {
+  + .drawer-section { border-top: $border-width solid $border-color; }
+  &.drawer-section-scroll { overflow-y: scroll; }
+}
+.drawer-header, .drawer-body, .drawer-footer {
+  padding: $spacer;
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_select2.scss

@@ -13,7 +13,7 @@ body:not(.modal-open) {
   .select2-container--default { z-index: $zindex-dropdown; }
 }
 body.modal-open  {
-  .select2-container { z-index: $zindex-modal + 2 !important; } // makes select2 dropdown higher than redactor toolbar in modals
+  .modal .select2-container { z-index: $zindex-modal + 2 !important; } // makes select2 dropdown higher than redactor toolbar in modals
 }
 
 

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

@@ -1,8 +1,10 @@
 // Our custom styles
-@import 'custom/admin_bar';
 @import 'custom/background_variations';
 @import 'custom/donor_account';
+@import 'custom/donor_scroll';
 @import 'custom/event';
+@import 'custom/event_livestream';
 @import 'custom/everyday_default';
 @import 'custom/everyday_story';
 @import 'custom/footer_links';
+@import 'custom/page_header';

data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_navbar.scss

@@ -20,14 +20,3 @@ $navbar-logo-height: (($spacer * 4.5) - $spacer);
   padding-left: $navbar-padding-x;
   border-left: $border-width solid $border-color;
 }
-.sticky-div {
-  box-shadow: $box-shadow-sm;
-  .btn-header-donate {
-    opacity: 0;
-    transition: $transition-base;
-  }
-  &.stuck {
-    box-shadow: $box-shadow;
-    .btn-header-donate { opacity: 1; }
-  }
-}

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

@@ -0,0 +1,2 @@
+// Clears out body background default from core
+body { background-color: $white; }

data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_background_variations.scss

@@ -5,6 +5,7 @@
   }
   &.card { border-color: $gray-800; }
   h1, h2, h3, h4, h5, h6, p, label { color: $white; }
+  .text-muted { color: $white !important; }
   .progress { background-color: $gray-600; }
 
 

data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_donor_scroll.scss

@@ -0,0 +1,6 @@
+// Animation for a new donation
+@keyframes new-donation-success {
+  0% { background-color: #ebf7e4; }
+  100% { background-color: transparent; }
+}
+.new-donation { animation: new-donation-success 4s; }

data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_event.scss

@@ -1,4 +1,4 @@
-// Styles specific to the everyday default style
+// Styles specific to the event styles
 .event {
   .jumbotron {
     height: auto;

data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_event_livestream.scss

@@ -0,0 +1,57 @@
+// Styles specific to the event livestream styles
+.event {
+  @include media-breakpoint-up(lg) { height: 100%; }
+  .page-content {
+    @include media-breakpoint-up(lg) { height: 100%; }
+  }
+}
+
+// Block containers for side by side view
+.event-body {
+  @include media-breakpoint-up(lg) {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+}
+.event-content {
+  padding: $spacer;
+  @include media-breakpoint-up(lg) {
+    float: left;
+    width: 67%;
+    height: 100%;
+    overflow-y: auto;
+    > :last-child { margin-bottom: ($spacer * 2); }
+  }
+}
+.event-sidebar {
+  @include media-breakpoint-down(md) { border-bottom: $border-width solid $border-color; }
+  @include media-breakpoint-up(lg) {
+    float: right;
+    display: flex;
+    flex-direction: column;
+    width: 33%;
+    height: 100%;
+    border-left: $border-width solid $border-color;
+    > :last-child { margin-bottom: $spacer; }
+  }
+  &.event-sidebar-scroll {
+    @include media-breakpoint-up(lg) { overflow-y: scroll; }
+  }
+  .event-sidebar-section {
+    padding: $spacer;
+    + .event-sidebar-section { border-top: $border-width solid $border-color; }
+    &.event-sidebar-section-scroll {
+      min-height: ($spacer * 10); // sets min-height to ensure the scrollable area has room to be seen on restricted height devices (not mobile)
+      overflow-y: scroll;
+    }
+  }
+}
+
+// styles specific to donor-scroll to remove default card styles when donor scroll is inside the event sidebar
+.event-sidebar-section {
+  .card[data-describe='donor-scroll'] {
+    border: 0;
+    .card-body { padding: 0; }
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_everyday_default.scss

@@ -16,7 +16,8 @@
     @include media-breakpoint-down(md) {
       &::before { content: none; }
       .card {
-        box-shadow: none;
+        border: none !important;
+        box-shadow: none !important;
         border-radius: 0;
       }
       .card-body { padding: 0; }

data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_everyday_story.scss

@@ -6,7 +6,10 @@
     background-size: cover;
     @include media-breakpoint-down(md) {
       background-image: none !important;
-      .card { box-shadow: none !important; }
+      .card {
+        border: none;
+        box-shadow: none !important;
+      }
       .card-body { padding: 0; }
     }
     @include media-breakpoint-up(lg) { min-height: 500px; }

data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_page_header.scss

@@ -0,0 +1,34 @@
+$page-header-height: ($spacer * 4.5);
+$page-header-height-admin: ($spacer * 6.5);
+
+// Page header specific styles
+.page-header {
+  width: 100%;
+  background-color: $white;
+  border-bottom: $border-width solid $border-color;
+  z-index: $zindex-fixed;
+  @include media-breakpoint-up(lg) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    min-height: $page-header-height;
+  }
+  body.admin & { // this renders as body.admin .page-header specifying when the view is in admin status
+    @include media-breakpoint-up(lg) { min-height: $page-header-height-admin; }
+  }
+}
+
+// Moving .page-content container down with padding when page-header exists but ONLY on larger screens
+.page-header {
+  + .page-content {
+    @include media-breakpoint-up(lg) {
+      padding-top: $page-header-height;
+    }
+  }
+  body.admin & + .page-content { // this renders as body.admin .page-header + .page-content specifying when the view is in admin status
+    @include media-breakpoint-up(lg) {
+      padding-top: $page-header-height-admin;
+    }
+  }
+}

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

@@ -43,12 +43,14 @@ module NfgUi
         end
 
         def render
+          @body = yield if block_given?
+
           if tooltip && disabled
             content_tag(:span, disabled_component_tooltip_wrapper_html_options) do
               content_tag(as, html_options) do
                 capture do
                   concat(left_icon_component) if left_icon
-                  concat(block_given? ? yield : body)
+                  concat(body)
                   concat(right_icon_component) if icon
                 end
               end
@@ -58,7 +60,7 @@ module NfgUi
             content_tag(as, html_options) do
               capture do
                 concat(left_icon_component) if left_icon
-                concat(block_given? ? yield : body)
+                concat(body)
                 concat(right_icon_component) if icon
               end
             end
@@ -76,10 +78,14 @@ module NfgUi
 
         def right_icon_component
           NfgUi::Components::Foundations::Icon.new({ traits: [icon, :right],
-                                                     class: NfgUi::Components::Foundations::Icon::RIGHT_ICON_SPACER_CSS_CLASS },
+                                                     class: right_icon_class },
                                                    view_context).render
         end
 
+        def right_icon_class
+          NfgUi::Components::Foundations::Icon::RIGHT_ICON_SPACER_CSS_CLASS if body.present?
+        end
+
         def base_element
           as
         end

data/lib/nfg_ui/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nfg_ui
 version: !ruby/object:Gem::Version
-  version: 0.11.10
+  version: 0.11.14
 platform: ruby
 authors:
 - Jonathan Roehm
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-01-04 00:00:00.000000000 Z
+date: 2021-03-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bootstrap
@@ -501,6 +501,7 @@ files:
 - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_custom.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_dropdown.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_forms.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_modal.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_nav.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_progress.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_reboot.scss
@@ -509,6 +510,7 @@ files:
 - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_type.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_avatar.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_device_preview.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_drawer.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_icon.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_illustration.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_mobile.scss
@@ -541,13 +543,16 @@ files:
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_list-group.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_nav.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_navbar.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_admin_bar.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_reboot.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_background_variations.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_donor_account.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_donor_scroll.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_event.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_event_livestream.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_everyday_default.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_everyday_story.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_footer_links.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_page_header.scss
 - app/controllers/nfg_ui/application_controller.rb
 - app/helpers/nfg_ui/application_helper.rb
 - app/helpers/nfg_ui/components/browser_helper.rb

data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_admin_bar.scss

@@ -1,20 +0,0 @@
-// Remove styles and use bs4 structure and styles once update is final
-
-.admin-bar {
-  position: relative;
-  z-index: 100;
-  font-weight: $font-weight-bold;
-  color: $text-muted;
-  text-transform: uppercase;
-  background-color: $black;
-}
-.admin-bar-descriptor {
-  display: inline-block;
-  padding: ($spacer * .5) 0;
-}
-.admin-bar-main-links a {
-  display: inline-block;
-  padding: ($spacer * .5);
-  color: $white;
-  &:hover, &:active { color: $text-muted; }
-}