diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index e36ebca85..13a6db134 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -11,7 +11,6 @@ require('jquery-hotkeys'); importAll(require.context('../vendor', true, /\.js$/)); require('jquery'); -require("jquery-ui/ui/effects/effect-shake"); require("jquery-ui/ui/widgets/autocomplete"); require("jquery-ui/ui/widgets/button"); require("jquery-ui/ui/widgets/dialog"); diff --git a/app/javascript/src/javascripts/artist_commentaries.js b/app/javascript/src/javascripts/artist_commentaries.js index 06944a5a5..a1abc7650 100644 --- a/app/javascript/src/javascripts/artist_commentaries.js +++ b/app/javascript/src/javascripts/artist_commentaries.js @@ -135,11 +135,13 @@ ArtistCommentary.merge_commentaries = function(description, commentary) { // Update commentary field if it's blank, signal an error if there's a conflict. ArtistCommentary.update_field = function($field, value) { + $field.removeClass("validation-error"); + if ($field.val().trim() === "") { $field.val(value); return true; } else if ($field.val().trim() !== value) { - $field.effect("shake", { direction: "up", distance: 5 }); + $field.addClass("validation-error"); return false; } else { return true; diff --git a/app/javascript/src/styles/base/040_colors.css b/app/javascript/src/styles/base/040_colors.css index 7d5dd084c..b879efe6f 100644 --- a/app/javascript/src/styles/base/040_colors.css +++ b/app/javascript/src/styles/base/040_colors.css @@ -24,6 +24,7 @@ --form-input-background: var(--body-background-color); --form-input-border: 1px solid #CCC; --form-input-placeholder-text-color: grey; + --form-input-validation-error-border-color: red; --form-button-text-color: var(--form-input-text-color); --form-button-background: #EEE; --form-button-border: var(--form-input-border); @@ -329,6 +330,7 @@ body[data-current-user-theme="dark"] { --form-input-background: var(--grey-3); --form-input-border: 1px solid var(--grey-4); --form-input-placeholder-text-color: var(--grey-4); + --form-input-validation-error-border-color: var(--red-1); --form-button-text-color: var(--grey-1); --form-button-background: var(--grey-5); --form-button-border: 1px solid var(--grey-4); diff --git a/app/javascript/src/styles/common/simple_form.scss b/app/javascript/src/styles/common/simple_form.scss index 21e6fbae9..b2489cee3 100644 --- a/app/javascript/src/styles/common/simple_form.scss +++ b/app/javascript/src/styles/common/simple_form.scss @@ -39,6 +39,10 @@ form.simple_form { padding-left: 1em; } + input.validation-error { + border: 1px solid var(--form-input-validation-error-border-color); + } + &.text, &.dtext { .hint { padding-left: 0;