move inflection source icons to css

yomidevs · Jan 11, 2024 · 77cc705 · 77cc705
1 parent f159b39
commit 77cc705
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/ext/css/display.css b/ext/css/display.css
@@ -823,6 +823,25 @@ button.action-button:active {
     content: var(--inflection-separator);
     padding: 0 0.25em;
 }
+.inflection-source-icon {
+    display: inline-block;
+    white-space: nowrap;
+    text-align: center;
+    width: 1.4em;
+    margin-right: 0.2em;
+}
+.inflection-source-icon[data-inflection-source="dictionary"]::after {
+    content: '📖';
+}
+.inflection-source-icon[data-inflection-source="algorithm"]::after {
+    content: '🧩';
+}
+.inflection-source-icon[data-inflection-source="both"] {
+    width: 2.8em;
+}
+.inflection-source-icon[data-inflection-source="both"]::after {
+    content: '🧩📖';
+}
 
 
 /* Headwords */

diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
@@ -379,18 +379,18 @@ export class DisplayGenerator {
      */
     _getInflectionSourceIcon(source) {
         const icon = document.createElement('span');
-        icon.style.marginRight = '0.5em';
+        icon.classList.add('inflection-source-icon');
         switch (source) {
             case 'dictionary':
-                icon.textContent = '📖';
+                icon.dataset.inflectionSource = 'dictionary';
                 icon.title = 'Dictionary Deinflection';
                 return icon;
             case 'algorithm':
-                icon.textContent = '🧩';
+                icon.dataset.inflectionSource = 'algorithm';
                 icon.title = 'Algorithm Deinflection';
                 return icon;
             case 'both':
-                icon.textContent = '📖🧩';
+                icon.dataset.inflectionSource = 'both';
                 icon.title = 'Dictionary and Algorithm Deinflection';
                 return icon;
         }