bugfix: adapt QuoteCard text size to amount of text in it

client/src/components/QuoteCard.vue

@@ -1,30 +1,19 @@
 <template>
-  <div class="quote-card__container"
-    :class="{ 'quote-card__container__editable': editable, 'quote-card__container__editable__edit-mode': isEditMode }">
-
+  <div :class="cssClasses">
     <div v-if="editable && !isEditMode" class="quote-card__action-buttons">
       <QuoteCardActionButton @click="editQuote" icon="edit" />
       <QuoteCardActionButton @click="deleteQuote" icon="trash" />
     </div>
     <div class="quote-card__text-container">
-      <contenteditable
-        :id="quoteElId"
-        class="quote-card__quote"
-        tag="div"
-        :contenteditable="isEditMode"
-        v-model="quote.quote"
-        :no-nl="true"
-        :no-html="true"
-        @returned="saveQuote"
-        @blur="saveQuote"
-        @keydown="keydown"
-      />
+      <contenteditable :id="quoteElId" class="quote-card__quote" tag="div" :contenteditable="isEditMode"
+        v-model="quote.quote" :no-nl="true" :no-html="true" @returned="saveQuote" @blur="saveQuote"
+        @keydown="keydown" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import contenteditable from 'vue-contenteditable'
 import useEngine from '@/composables/useEngine'
 import type { Quote } from '@/composables/engine.d'
@@ -39,16 +28,32 @@ const emit = defineEmits(['edit-end'])
 const quoteElId = `quote-${props.quote.id || 'new'}`
 const isEditMode = ref(false)
 
+const cssClasses = computed(() => {
+  const len = props.quote.quote.length
+  return {
+    'quote-card__container': true,
+    'quote-card__container__editable': props.editable,
+    'quote-card__container__editable__edit-mode': isEditMode.value,
+    'quote-card__container__text-short': len < 80,
+    'quote-card__container__text-medium': len >= 80 && len < 120,
+    'quote-card__container__text-long': len >= 120,
+  }
+})
+
 const editQuote = () => {
   isEditMode.value = true
   window.setTimeout(() => {
     const $el = document.getElementById(quoteElId)
-    $el.focus()
-    const range = document.createRange()
-    range.selectNodeContents($el)
-    const sel = window.getSelection()
-    sel.removeAllRanges()
-    sel.addRange(range)
+    if ($el != null) {
+      $el.focus()
+      const range = document.createRange()
+      range.selectNodeContents($el)
+      const sel = window.getSelection()
+      if (sel != null) {
+        sel.removeAllRanges()
+        sel.addRange(range)
+      }
+    }
   }, 0)
 }
 
@@ -68,7 +73,9 @@ const editModeEnd = async () => {
     if ($el != null) {
       $el.blur()
       const sel = window.getSelection()
-      sel.removeAllRanges()
+      if (sel != null) {
+        sel.removeAllRanges()
+      }
     }
   }, 0)
 }
@@ -114,6 +121,18 @@ const keydown = async (ev: KeyboardEvent) => {
         cursor: text;
       }
     }
+
+    &__text-short {
+      font-size: 24px;
+    }
+
+    &__text-medium {
+      font-size: 20px;
+    }
+
+    &__text-long {
+      font-size: 18px;
+    }
   }
 
   &__text-container {
@@ -128,7 +147,6 @@ const keydown = async (ev: KeyboardEvent) => {
     margin: 2px;
     font-family: $font-secondary;
     font-weight: bold;
-    font-size: 24px;
     text-align: center;
     cursor: default;
   }