diff --git a/CHANGELOG.md b/CHANGELOG.md index 222530f1..a9463052 100644 --- 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 index 76d7eb35..da35a87e 100644 --- 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 index aa402cef..cb052932 100644 --- 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 index caaec589..b793a06f 100644 --- 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 index 128f27d0..17efc51b 100644 --- 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 index b9353415..52acf0f2 100644 --- 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