diff --git a/src/components/Header.vue b/src/components/Header.vue index c4d5aa3be4fd06d46cbafd21a2e827afc6362eb5..7af3643a84026d57f3df46e55dbac9d8faee8929 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -21,8 +21,8 @@ </span> <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>{{inflection_button_text}}</span> + <v-btn class="show-inflection" width="160px" rounded depressed small @click.native="toggle" :class="$vuetify.breakpoint.name"> + <span>{{inflection_button_text}}</span><span class = "inflection-arrow">{{inflection_arrow}}</span> </v-btn> <div class="inflection-canvas" v-if="inflection_expanded"> <inflectionTable :lemmaList="lemmas_with_word_class_and_lang" :mq="$vuetify.breakpoint.name" /> @@ -73,10 +73,13 @@ export default { }, inflection_button_text: function() { return { - "bob": {true: "Se bøyning ▼", false: "Skjul bøyning ▲"}, - "nob": {true: "Sjå bøying ▼", false: "Skjul bøying ▲"} + "bob": {false: "Se bøyning", true: "Skjul bøyning"}, + "nob": {false: "Sjå bøying", true: "Skjul bøying"} }[this.dictionary][this.inflection_expanded] }, + inflection_arrow: function() { + return this.inflection_expanded? "▲" : "▼" + }, group_list: function() { return helpers.group_list(this.lemmas, this.dictionary) }, @@ -175,6 +178,12 @@ article h2.secondary_header { } +.inflection-arrow { + position: absolute; + right: -5px; + margin-left: 3px; +} + @keyframes open { 0% { opacity: 0;