Merge pull request #218 from network-for-good/feature/AIO-2420_reorde…

…r_item_images Feature/aio 2420 reorder item images
network-for-good · Sep 6, 2023 · c99d713 · c99d713
2 parents 1e2bf6e + 531174f
commit c99d713
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,7 @@
 # Changelog
+## 6.16.3
+* Adds styles for sorting images for auction items on the admin form. Also cleans up dropzone and trix plugin styles.
+
 ## 6.16.2
 * Allows a block element that is tooltipable to remain a block element, instead of an inline element, when the tooltip is applied.
 

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
  remote: .
  specs:
- nfg_ui (6.16.2)
+ nfg_ui (6.16.3)
  autoprefixer-rails (= 9.4.9)
  bootstrap (= 4.3.1)
  browser (~> 2.7.1)
@@ -305,4 +305,4 @@ DEPENDENCIES
  webdrivers
 
 BUNDLED WITH
- 2.3.24
+ 2.4.12
diff --git a/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_sortable.scss b/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_sortable.scss
@@ -27,3 +27,71 @@
 .option {
  &.ui-sortable-placeholder { margin-bottom: ($spacer * .25); }
 }
+
+
+// Used for sorting images for auction items
+.sortable-image {
+ padding: ($grid-gutter-width * .5);
+ border: $border-width dashed transparent;
+ &.sortable-ghost {
+ background-color: $body-bg;
+ border-color: $border-color;
+ border-radius: $border-radius;
+ }
+ @for $i from 0 through 20 {
+ &:nth-child(#{$i}) {
+ .sortable-item::after { content: '#{$i - 1}'; }
+ }
+ }
+}
+.sortable-item {
+ width: ($spacer * 5);
+ height: ($spacer * 5);
+ text-align: center;
+ background-color: $white;
+ border-radius: $border-radius;
+ overflow: hidden;
+ cursor: pointer;
+ transition: $transition-base;
+ &:hover {
+ box-shadow: $box-shadow-sm;
+ .delete-image-btn { bottom: 0; }
+ }
+ &::after {
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding: ($spacer * .25) ($spacer * .5);
+ color: $body-color;
+ background-color: $white;
+ border-right: $border-width solid $border-color;
+ border-bottom: $border-width solid $border-color;
+ border-radius: $border-radius 0 $border-radius 0;
+ z-index: 10;
+ opacity: 0.9;
+ }
+ img { // keeps image scaled proportionally
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: auto !important;
+ min-width: 0px !important;
+ max-width: 100%;
+ height: 100% !important;
+ max-height: 100%;
+ margin: auto;
+ z-index: 0;
+ }
+ .delete-image-btn {
+ position: absolute;
+ bottom: -(($spacer * 1.25) + 1rem);
+ right: 0;
+ left: 0;
+ z-index: 10;
+ background-color: $white;
+ transition: $transition-base;
+ border-top: $border-width solid $border-color;
+ }
+}
diff --git a/app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_dropzone.scss b/app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_dropzone.scss
@@ -1,5 +1,6 @@
+//** Override styles for dropzone
 .dropzone-target {
- padding: $spacer !important;
+ padding: ($spacer * 1.25) !important;
  min-height: ($spacer * 6) !important;
  border: $border-width solid $border-color !important;
  background-color: $white;
@@ -13,3 +14,4 @@
 }
 [data-dz-remove] { cursor: pointer; }
 .dz-preview + .dz-preview { margin-top: $spacer; }
+.dropzone .dz-message { margin: 0 !important; }
diff --git a/app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_trix.scss b/app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_trix.scss
@@ -88,10 +88,12 @@
  }
 }
 
+.trix-button-row { overflow-y: hidden !important; }
+
 // Editor similar to textarea
 trix-editor {
- padding: 20px;
- min-height: ($spacer * 5);
- border: $input-border-width solid $input-border-color;
- border-radius: $input-border-radius;
+ padding: $input-padding-y $input-padding-x !important;
+ min-height: ($spacer * 5) !important;
+ border: $input-border-width solid $input-border-color !important;
+ border-radius: $input-border-radius !important;
 }
diff --git a/lib/nfg_ui/version.rb b/lib/nfg_ui/version.rb
@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module NfgUi
- VERSION = '6.16.2'
+ VERSION = '6.16.3'
 end