Skip to content
Snippets Groups Projects
Commit 66a823dd authored by Henrik Askjer's avatar Henrik Askjer
Browse files

Add explanation split infinitive

parent 414c168c
No related branches found
No related tags found
No related merge requests found
......@@ -4,16 +4,29 @@
<span class="dict-label" tabindex="0">{{dict_label}}</span>
<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">
<inflectionTable :lemmaList="lemmas_with_word_class_and_lang" :mq="$vuetify.breakpoint.name" />
</div>
</details>
<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-menu rounded="lg" v-model="menu" offset-x max-width="200px">
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" depressed min-width="14px" max-width="14px" class="help-button" x-small
color="primary">
<v-icon middle x-small>$vuetify.icons.value.info</v-icon>
</v-btn>
</template>
<v-card class="info-card">
Dersom du bruker kløyvd infinitiv, skal dette verbet ha <i>-a</i> i infinitiv. Les meir
<a target="_blank" href="https://www.sprakradet.no/svardatabase/sporsmal-og-svar/kloyvd-infinitiv-/">her</a>.
</v-card>
</v-menu>
</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">
<inflectionTable :lemmaList="lemmas_with_word_class_and_lang" :mq="$vuetify.breakpoint.name" />
</div>
</details>
</div>
</template>
......@@ -87,7 +100,8 @@ export default {
},
data: function() {
return {
inflect_reported: false
inflect_reported: false,
menu: false
}
},
methods: {
......@@ -124,10 +138,16 @@ article h2.secondary_header {
.help-button {
margin-left: 6px;
margin-right: 2px;
margin-bottom: 12px;
color: var(--v-primary-base);
}
.info-card {
padding: 12px;
}
.word-classification {
text-decoration: underline dashed;
}
......
......@@ -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, faQuestion} from '@fortawesome/free-solid-svg-icons'
import { faShareAltSquare, faInfo} 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, faQuestion)
library.add(faFacebookSquare, faTwitterSquare, faShareAltSquare, faInfo)
Vue.component('font-awesome-icon', FontAwesomeIcon);
Vue.use(Vuetify);
......@@ -29,10 +29,10 @@ const FONTAWESOME_ICONS = {
icon: "share-alt-square"
}
},
help: {
info: {
component: FontAwesomeIcon,
props: {
icon: ["fa", "question"]
icon: ["fa", "info"]
}
}
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment