diff --git a/src/components/Article.vue b/src/components/Article.vue index 20412e9b5c3e08ef0195f1ff9ddefe2cfae1f511..56929cbf085012d533d5187def0e7487364d2186 100644 --- a/src/components/Article.vue +++ b/src/components/Article.vue @@ -8,18 +8,18 @@ <DefElement v-for="(element, index) in article.body.pronunciation" :dictionary="dictionary" :key="index" :body='element' @article-click="article_link_click" /> </ul> </section> - <section v-if="article.body.etymology && article.body.etymology.length" class="etymology"> - <h3>Etymologi</h3> - <ul> - <DefElement v-for="(element, index) in article.body.etymology" :dictionary="dictionary" :key="index" :body='element' @article-click="article_link_click" /> - </ul> - </section> <section class="definitions"> <h3>{{def_label}}</h3> <ol> <Definition v-for="definition in article.body.definitions" :dictionary="dictionary" :level="1" :key="definition.id" :body='definition' @article-click="article_link_click" /> </ol> </section> + <section v-if="article.body.etymology && article.body.etymology.length" class="etymology"> + <h3>Etymologi</h3> + <ul> + <DefElement v-for="(element, index) in article.body.etymology" :dictionary="dictionary" :key="index" :body='element' @article-click="article_link_click" /> + </ul> + </section> <section v-if="sub_articles.length" class="expressions"> <h3>Faste uttrykk</h3> <ul> @@ -71,7 +71,10 @@ export default { return this.article.dictionary }, def_label: function() { - return this.dictionary == 'bob' ? 'Betydning' : 'Tyding' + return this.dictionary == 'bob' ? 'Betydning og bruk' : 'Tyding og bruk' + }, + example_label: function() { + return this.dictionary == 'bob' ? 'Eksempel' : 'Døme' }, sub_articles: function() { return this.article.body.definitions.reduce((acc, val) => acc.concat(find_sub_articles(val)), []).sort((s1, s2) => s1.lemmas[0].localeCompare(s2.lemmas[0])) @@ -118,6 +121,7 @@ section { h3 { color: #560027; + font-variant: small-caps; } li { diff --git a/src/components/Definition.vue b/src/components/Definition.vue index 7b39f705aac5a7882df414f6818943df68b02a6a..12cd87395ff8d253655ae31d494d1f1c935182ad 100644 --- a/src/components/Definition.vue +++ b/src/components/Definition.vue @@ -1,7 +1,16 @@ <template> <li :class="['definition', 'level'+level]" :ref="'def' + body.id" :id="'def' + body.id"> - <ul class="explanation"> - <li :is="element_wrapper.template" :body="element_wrapper.element" :dictionary="element_wrapper.dictionary" v-for="(element_wrapper, index) in template_name_added" :key="index" @article-click="article_link_click">{{element_wrapper.element}}</li> + <ul class="explanations"> + <DefElement :body="explanation" :dictionary="dictionary" v-for="(explanation, index) in explanations" :key="index" @article-click="article_link_click" /> + </ul> + <div v-if="examples.length"> + <h4>{{example_header}}</h4> + <ul class="examples"> + <Example :body="example" :dictionary="dictionary" v-for="(example, index) in examples" :key="index" @article-click="article_link_click" /> + </ul> + </div> + <ul class="compound_lists"> + <CompoundList :body="compound_list" :dictionary="dictionary" v-for="(compound_list, index) in compund_lists" :key="index" @article-click="article_link_click" /> </ul> <div :is="level < 3 ? 'ol' : 'ul'" class="sub_definitions" v-if="subdefs.length"> <Definition :level="level+1" :body="subdef" v-for="(subdef, index) in subdefs" :dictionary="dictionary" :key="index" @article-click="article_link_click" /> @@ -28,20 +37,17 @@ var Definition = { CompoundList }, computed: { - template_name_added: function(){ - let dictionary = this.dictionary - return this.body.elements.filter(el => ! ['definition', 'sub_article'].includes(el.type_)).map( - function(element){ - return { - 'template': { - 'explanation': 'DefElement', - 'example': 'Example', - 'compound_list': 'CompoundList' - }[element.type_] || 'li', - 'element': element, - 'dictionary': dictionary - } - }) + explanations: function() { + return this.body.elements.filter(el => el.type_ == 'explanation') + }, + examples: function() { + return this.body.elements.filter(el => el.type_ == 'example') + }, + compund_lists: function() { + return this.body.elements.filter(el => el.type_ == 'compound_list') + }, + example_header: function() { + return this.dictionary == 'bob' ? 'Eksempel' : 'Døme' }, subdefs: function() { // filtrerer bort definisjoner som bare inneholder underartikler @@ -83,4 +89,11 @@ q { background-color: var(--v-tertiary-darken1); border-radius: 5px; } + +h4 { + color: var(--v-primary-base); + font-variant: small-caps; + padding-left: 12px; + padding-top: 6px; +} </style>