re meta#311

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 {

src/components/Definition.vue

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