From 6793aedf8186e1dcbd11b7be9f519cb827e76275 Mon Sep 17 00:00:00 2001 From: evazion Date: Sun, 3 Jan 2021 23:56:01 -0600 Subject: [PATCH] Fix #4650: Differentiate between aliases and corrections in autocomplete. Display a red wavy underline beneath misspelled tags in autocomplete. We use an inline image for the underline instead of the native `text-decoration: red wavy underline` property because the native underline is too big and ugly, and we have no way to adjust it. Making a nice-looking wavy underline in CSS is surprisingly difficult. This turned out to be the cleanest way. --- app/javascript/src/styles/base/040_colors.css | 1 + app/javascript/src/styles/common/autocomplete.scss | 9 ++++++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/app/javascript/src/styles/base/040_colors.css b/app/javascript/src/styles/base/040_colors.css index 4cf8a227e..1e98f1a6f 100644 --- a/app/javascript/src/styles/base/040_colors.css +++ b/app/javascript/src/styles/base/040_colors.css @@ -96,6 +96,7 @@ --autocomplete-selected-background-color: var(--subnav-menu-background-color); --autocomplete-border: 1px solid #CCC; --autocomplete-arrow-color: var(--text-color); + --autocomplete-tag-autocorrect-underline: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAHElEQVQYV2NkQAL/GRj+M4IJBgY4zQhSABMEsQHMOAgCT5YN9gAAAABJRU5ErkJggg==); --diff-list-added-color: green; --diff-list-removed-color: red; diff --git a/app/javascript/src/styles/common/autocomplete.scss b/app/javascript/src/styles/common/autocomplete.scss index e8a30e453..b90dbd9e2 100644 --- a/app/javascript/src/styles/common/autocomplete.scss +++ b/app/javascript/src/styles/common/autocomplete.scss @@ -22,7 +22,14 @@ color: var(--autocomplete-arrow-color); } + /* Display a red wavy underline beneath misspelled tags. */ + /* https://stackoverflow.com/a/28152272 */ li[data-autocomplete-type="tag-autocorrect"] .autocomplete-antecedent { - text-decoration: dotted underline; + position: relative; + display: inline-block; + background: var(--autocomplete-tag-autocorrect-underline); + background-repeat: repeat-x; + background-position-y: 1.2em; + line-height: 1.5em; } }