diff --git a/src/components/Header.vue b/src/components/Header.vue index 1f79f3321da48ba8e53cf9cb7e12b32a8a32b1c0..5d55d7e662764f35d81f5b9050d5689268d7b1e0 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -2,7 +2,7 @@ <template> <div class = "header"> <h2> - <router-link tabindex="0" :id="title_id" :to="$parent.link_to_self.ref" @click.native="$parent.details_click($parent.link_to_self)" v-bind:class="{'long_lemma': long_lemma}" class="article_header"> + <router-link tabindex="0" :id="title_id" :to="$parent.link_to_self.ref" @click.native="$parent.details_click($parent.link_to_self)" v-bind:class="{'long_lemma': long_lemma}" class="article_header"> <span v-for="(lemma, index) in lemmas" :key="index">{{lemma.lemma}}<span :aria-label="hgno_arabic" class="hgno" v-if="$store.state.showHGNO && hgno(lemma)">{{" "+hgno(lemma)}}</span><span class="title_comma" v-if="lemmas[1] && index < lemmas.length-1">{{", "}}</span> </span> </router-link></h2> @@ -48,6 +48,21 @@ export default { dictionary: String, article_id: Number, title_id: String + }, + data: function() { + return { + menu: false, + long_lemma: false + } + }, + mounted: function() { + + //console.log(this.$refs[this.title_id]) + //console.log(document.getElementById(this.title_id).offsetWidth, document.getElementById(this.title_id).scrollWidth) + if (this.$el.scrollWidth > this.$el.offsetWidth) { + this.long_lemma = true + } + }, methods: { hgno: function(lemma) { @@ -59,13 +74,6 @@ export default { } }, computed: { - long_lemma: function(lemma) { - for (const lemma of this.lemmas) { - if (lemma.lemma.length > 18) return true - } - return false - - }, secondary_header_text: function() { let a_forms = [] this.lemmas.forEach((lemma, i) => { @@ -137,11 +145,6 @@ export default { split_inf: function() { return this.lemmas[0].split_inf } - }, - data: function() { - return { - menu: false, - } } } @@ -193,14 +196,11 @@ div.lemma { .article_header { text-decoration: none; overflow:auto; - word-wrap: normal; - white-space: wrap; - overflow: auto; } .long_lemma { - font-size: 22px !important; + font-size: 60% !important; }