fikser meta#287

src/components/Article.vue

@@ -19,14 +19,35 @@
         <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="sub_articles.length">
+      <h3>Faste uttrykk</h3>
+      <ul>
+        <SubArticle :body="subart" v-for="(subart, index) in sub_articles" :dictionary="dictionary" :key="index" @article-click="article_link_click" />
+      </ul>
+    </section>
   </article>
 </template>
 
 <script>
 import DefElement from './DefElement.vue'
 import Definition from './Definition.vue'
+import SubArticle from './SubArticle.vue'
 import Header from './Header.vue'
 
+function find_sub_articles(definition) {
+  let sub_art_list = []
+  let sub_definitions = definition.elements.filter(el => el.type_ == 'definition')
+
+  sub_definitions.forEach((subdef, i) => {
+    sub_art_list = sub_art_list.concat(find_sub_articles(subdef))
+  })
+
+  let sub_articles = definition.elements.filter(el => el.type_ == 'sub_article')
+  sub_art_list = sub_art_list.concat(sub_articles)
+
+  return sub_art_list
+}
+
 export default {
   name: 'Article',
   props: {
@@ -38,11 +59,15 @@ export default {
     },
     def_label: function() {
       return this.dictionary == 'bob' ? 'Betydning' : 'Tyding'
+    },
+    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]))
     }
   },
   components: {
     DefElement,
     Definition,
+    SubArticle,
     Header
   },
   methods: {
@@ -53,7 +78,6 @@ export default {
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style>
 article {
   position: relative;
@@ -64,8 +88,11 @@ article {
   box-shadow: 1px 1px 4px rgba(0.5, 0.5, 0.5, 0.2);
 }
 
+section {
+  padding-top: 1em;
+}
+
 h3 {
-  margin: 40px 0 0;
   color: #560027;
 }
 
@@ -90,10 +117,6 @@ li.sub_article > ul {
   padding-left: 0px;
 }
 
-li.definition.level1, li.definition.level2 {
-  padding-bottom: 2em;
-}
-
 ::marker {
   font-weight: bold;
   color: var(--v-primary-base);

src/components/Definition.vue

@@ -6,16 +6,12 @@
     <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" />
     </div>
-    <ul class="sub_articles" v-if="subArticles.length">
-      <SubArticle :body="subart" v-for="(subart, index) in subArticles" :dictionary="dictionary" :key="index" @article-click="article_link_click" />
-    </ul>
   </li>
 </template>
 
 <script>
 import DefElement from './DefElement.vue'
 import Example from './Example.vue'
-import SubArticle from './SubArticle.vue'
 import CompoundList from './CompoundList.vue'
 
 var Definition = {
@@ -29,7 +25,6 @@ var Definition = {
     DefElement,
     Definition,
     Example,
-    SubArticle,
     CompoundList
   },
   computed: {
@@ -50,9 +45,6 @@ var Definition = {
     },
     subdefs: function() {
       return this.body.elements.filter(el => el.type_ == 'definition')
-    },
-    subArticles: function() {
-      return this.body.elements.filter(el => el.type_ == 'sub_article')
     }
   },
   mounted: function() {