diff --git a/app/src/components/TermInput.js b/app/src/components/TermInput.js index c6382c8..22125e1 100644 --- a/app/src/components/TermInput.js +++ b/app/src/components/TermInput.js @@ -216,6 +216,14 @@ const TermInput = ({terms, availableTerms, setTerms}) => onClick={addTerm.bind(null, suggestion)} > {suggestion.name} + {suggestion.alias.length >= 1 ? ( + + {suggestion.alias.join(', ')} + + ) : null} )} diff --git a/app/src/data/mock.js b/app/src/data/mock.js index 9dbda56..02c26fb 100644 --- a/app/src/data/mock.js +++ b/app/src/data/mock.js @@ -23,9 +23,6 @@ export const terms = { id: 'Q154882', name: 'Légionellose', alias: [ - 'Légionnellose', - 'Légionnelose', - 'Légionelose', 'Maladie des légionnaires', ], types: [types.disease], @@ -42,8 +39,6 @@ export const terms = { id: 'Q326663', name: 'Encéphalite à tiques', alias: [ - 'Encéphalite à tique', - 'Encéphalites à tiques', 'Encéphalite d\'Europe centrale', 'Encéphalite verno-estivale russe', 'Méningoencéphalite à tique', @@ -106,7 +101,6 @@ export const terms = { id: 'Q127076', name: 'Vomissement', alias: [ - 'Vomissements', 'Vomi', 'Vomissage', 'Vomir', diff --git a/app/style/style.css b/app/style/style.css index af989e0..404cf0f 100644 --- a/app/style/style.css +++ b/app/style/style.css @@ -156,6 +156,10 @@ input cursor: pointer; line-height: calc(2 * var(--base-size)); + white-space: nowrap; + + overflow: hidden; + text-overflow: ellipsis; transition: background var(--animation-short) var(--animation-ease-out); } @@ -165,6 +169,19 @@ input background: var(--color-light-darker); } +.TermInput_suggestionAlias +{ + font-style: italic; + color: var(--color-dark-lighter); +} + +.TermInput_suggestionAlias::before +{ + content: "— "; + margin-left: calc(.4 * var(--base-size)); + margin-right: calc(.25 * var(--base-size)); +} + /** * Graph */ @@ -248,6 +265,7 @@ input font-size: var(--font-size-larger); font-style: italic; color: var(--color-dark-lighter); + text-align: center; } /**