diff --git a/src/components/Header.vue b/src/components/Header.vue index cb758155a8f76e56261635c3062d5d098bee51ab..c4d5aa3be4fd06d46cbafd21a2e827afc6362eb5 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -22,7 +22,7 @@ <div class="inflection-wrapper" v-if="inflected"> <v-btn class="show-inflection" width="150px" rounded depressed small @click.native="toggle" :class="$vuetify.breakpoint.name"> - <span v-bind:class="[{open:inflection_expanded}, dictionary]"/> + <span>{{inflection_button_text}}</span> </v-btn> <div class="inflection-canvas" v-if="inflection_expanded"> <inflectionTable :lemmaList="lemmas_with_word_class_and_lang" :mq="$vuetify.breakpoint.name" /> @@ -71,6 +71,12 @@ export default { 'nob': 'nynorskordboka' }[this.dictionary] || '' }, + inflection_button_text: function() { + return { + "bob": {true: "Se bøyning ▼", false: "Skjul bøyning ▲"}, + "nob": {true: "Sjå bøying ▼", false: "Skjul bøying ▲"} + }[this.dictionary][this.inflection_expanded] + }, group_list: function() { return helpers.group_list(this.lemmas, this.dictionary) }, @@ -169,38 +175,6 @@ article h2.secondary_header { } -.show-inflection .bob:before { - content: "Se bøyning"; -} - -.show-inflection .nob:before { - content: "Sjå bøying"; -} - -.show-inflection .open.bob:before { - content: "Skjul bøyning"; -} - -.show-inflection .open.nob:before { - content: "Skjul bøying"; -} - -.show-inflection .bob:after, .show-inflection .nob:after { - content: "▼"; - right: 0; - top: 8px; - margin-left: 3px;; -} - - -.show-inflection .open:after { - content: "▲"; - right: 0; - top: 1px; - margin-left: 3px; -} - - @keyframes open { 0% { opacity: 0;