jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix #4650: Differentiate between aliases and corrections in autocomplete.

Browse Source 
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.
This commit is contained in:
evazion
2021-01-03 23:56:01 -06:00
parent dd430b3065
commit 6793aedf81
2 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/javascript/src/styles/base/040_colors.css
View File

@@ -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;

9
app/javascript/src/styles/common/autocomplete.scss
View File

@@ -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;
}
}