From ee430b8687914b1bf6399177183f35fb0b28bf46 Mon Sep 17 00:00:00 2001 From: dpschen Date: Tue, 2 Nov 2021 18:11:24 +0000 Subject: [PATCH] fix(style) restrict new task input size (#938) Co-authored-by: Dominik Pschenitschni Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/938 Reviewed-by: konrad Co-authored-by: dpschen Co-committed-by: dpschen --- src/components/tasks/add-task.vue | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/components/tasks/add-task.vue b/src/components/tasks/add-task.vue index 4ed3f7c9b..d035d70f3 100644 --- a/src/components/tasks/add-task.vue +++ b/src/components/tasks/add-task.vue @@ -6,11 +6,14 @@ :disabled="taskService.loading || null" class="input" :placeholder="$t('list.list.addPlaceholder')" - type="text" + cols="1" v-focus v-model="newTaskTitle" ref="newTaskInput" - :style="{'height': `calc(${textAreaHeight}px - 2px + 1rem)`}" + :style="{ + 'minHeight': `${initialTextAreaHeight}px`, + 'height': `calc(${textAreaHeight}px - 2px + 1rem)` + }" @keyup="errorMessage = ''" @keydown.enter="handleEnter" /> @@ -70,10 +73,10 @@ export default { }, watch: { newTaskTitle(newVal) { - // Calculating the textarea height based on lines of input in it. That is more reliable when removing a - // line from the input. + // Calculating the textarea height based on lines of input in it. + // That is more reliable when removing a line from the input. const numberOfLines = newVal.split(/\r\n|\r|\n/).length - const fontSize = parseInt(window.getComputedStyle(this.$refs.newTaskInput, null).getPropertyValue('font-size')) + const fontSize = parseFloat(window.getComputedStyle(this.$refs.newTaskInput, null).getPropertyValue('font-size')) this.textAreaHeight = numberOfLines * fontSize * LINE_HEIGHT + INPUT_BORDER_PX }, @@ -145,4 +148,8 @@ export default { .input, .textarea { transition: border-color $transition; } + +.input { + resize: vertical; +}