diff --git a/src/components/Article.vue b/src/components/Article.vue index 33c76848b8461a88e259b9e83b2389130059d83a..a9b1aca55c310ed78cc43e37daf59c67ebc08bea 100644 --- a/src/components/Article.vue +++ b/src/components/Article.vue @@ -1,12 +1,17 @@ <template> <div class="article" v-show="article.lemmas.length"> <Header :lemmas="article.lemmas" /> + <div class="" v-if="article.pronounciation.length"> + <h3>Uttale</h3> + <ul> + <DefElement v-for="(element, index) in article.pronounciation" :key="index" :body='element' v-if="element.content" /> + </ul> + </div> <div class="" v-if="article.etymology"> <h3>Etymologi</h3> <ul> <DefElement v-for="(element, index) in article.etymology" :key="index" :body='element' v-if="element.content" /> </ul> - </div> <div class=""> <h3>Definisjoner</h3> diff --git a/src/components/DefElement.vue b/src/components/DefElement.vue index 8c16efacecb8fe24f501b20a1a99dde033ee99bb..8a2d3c7b42bdc57ca5f75f226fe6709cac152431 100644 --- a/src/components/DefElement.vue +++ b/src/components/DefElement.vue @@ -1,8 +1,6 @@ <template> <li :class="body.type"> - <div> - <span v-for="item in assemble_text" :class="item.type" v-html="item.html"></span> - </div> + <span v-for="item in assemble_text" :class="item.type" v-html="item.html"></span> </li> </template> @@ -21,6 +19,7 @@ export default { function(item){ if (item.type == 'usage') return {type: item.type, html: item.text} else if (item.type == 'article_ref') return {type: item.type, html: `<a href="${item.article_id}${item.definition_id ? '#def'+item.definition_id : ''}">${item.lemmas.join(',')}</a>`} + else if (item.type == 'pronounciation') return {type: item.type, html: item.string} else if (item.id) return {type: item.type, html: entities[item.id] || languages[item.id] || item.id} else return {type: item.type || 'plain', html: item} } @@ -45,11 +44,13 @@ export default { <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> -span.usage { +span.usage, span.pronounciation { font-style: italic; } span.language { font-weight: bold; } + + </style>