Merge branch 'add_explanation_split_infinitive' into 'master'

Add explanation split infinitive

See merge request spraksamlingane/beta.ordbok.uib.no!55

src/components/Header.vue

@@ -5,6 +5,9 @@
     <h2 class="article_header" tabindex="0">{{header_text}}</h2>
     <h2 class="secondary_header" v-if="secondary_header_text.length" tabindex="0">{{secondary_header_text}}</h2>
       <span class="header_group_list" v-if="group_list.length" tabindex="0">{{group_list}}</span>
+      <span v-if="split_inf" tabindex="0"> (kløyvd infinitiv: <i>-a</i>
+        <v-btn depressed min-width="14px" max-width="14px" class = "help-button" x-small color="primary" target="_blank"  href="https://www.sprakradet.no/svardatabase/sporsmal-og-svar/kloyvd-infinitiv-/">
+        <v-icon middle x-small>$vuetify.icons.value.help</v-icon></v-btn>)</span>
       <details :title="inflect_tooltip" @toggle="toggle()" v-if="inflected" :class="$vuetify.breakpoint.name">
         <summary :class="dictionary" onclick="this.blur()" tabindex="0">bøying</summary>
         <div class="inflection-canvas">
@@ -74,6 +77,9 @@ export default {
     },
     inflected: function() {
       return this.lemmas.reduce((acc, lemma) => acc += lemma.paradigm_info.reduce((acc2, digm) => acc2 += digm.inflection.length, 0), 0) > 0
+    },
+    split_inf: function() {
+      return this.lemmas[0].split_inf
     }
   },
   components: {
@@ -116,6 +122,12 @@ article h2.secondary_header {
   padding-bottom: 4px;
 }
 
+.help-button {
+  margin-left: 6px;
+  margin-bottom: 12px;
+  color: var(--v-primary-base);
+}
+
 .word-classification {
   text-decoration: underline dashed;
 }

src/plugins/vuetify.js

@@ -2,10 +2,10 @@ import Vue from 'vue';
 import 'material-design-icons-iconfont/dist/material-design-icons.css';
 import Vuetify from 'vuetify/lib/framework';
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faShareAltSquare } from '@fortawesome/free-solid-svg-icons'
-import { faFacebookSquare, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'
+import { faShareAltSquare, faQuestion} from '@fortawesome/free-solid-svg-icons'
+import { faFacebookSquare, faTwitterSquare} from '@fortawesome/free-brands-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-library.add(faFacebookSquare, faTwitterSquare, faShareAltSquare)
+library.add(faFacebookSquare, faTwitterSquare, faShareAltSquare, faQuestion)
 Vue.component('font-awesome-icon', FontAwesomeIcon);
 
 Vue.use(Vuetify);
@@ -28,6 +28,12 @@ const FONTAWESOME_ICONS = {
     props: {
       icon: "share-alt-square"
     }
+  },
+  help: {
+    component: FontAwesomeIcon,
+    props: {
+      icon:  ["fa", "question"]
+    }
   }
 }