diff --git a/src/components/Header.vue b/src/components/Header.vue index 1d8dfb4d6ddd54cc729fbab3362d677a7fa31a59..9082165145f0ac6da5d91a8d1e9dcf5306a63baf 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -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; } diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js index bfc88005124bbe857dc1da2c991798cc047152c1..9a38c46979e3250f23aa3bc170b6d584b91769ce 100644 --- a/src/plugins/vuetify.js +++ b/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, 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"] } } }