From 125f4e65181536b6aa01e8095dd29e8e69154b90 Mon Sep 17 00:00:00 2001
From: Henrik Askjer <henrik.askjer@uib.no>
Date: Thu, 23 Dec 2021 10:22:04 +0100
Subject: [PATCH] smaller font if overflow
---
src/components/Header.vue | 34 +++++++++++++++++-----------------
1 file changed, 17 insertions(+), 17 deletions(-)
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 1f79f332..5d55d7e6 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;
}
--
GitLab