fix: task input height on devices with smaller font size

This commit is contained in:
kolaente 2021-10-13 20:37:03 +02:00
parent b5b56a6e4a
commit c30c2e00cb
Signed by untrusted user: konrad
GPG Key ID: F40E70337AB24C9B
1 changed files with 9 additions and 5 deletions

View File

@ -41,7 +41,7 @@ import TaskService from '../../services/task'
import createTask from '@/components/tasks/mixins/createTask'
import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
const INITIAL_SCROLL_HEIGHT = 40
const INPUT_BORDER_PX = 2
const cleanupTitle = title => {
return title.replace(/^((\* |\+ |- )(\[ \] )?)/g, '')
@ -54,7 +54,8 @@ export default {
newTaskTitle: '',
taskService: new TaskService(),
errorMessage: '',
textAreaHeight: INITIAL_SCROLL_HEIGHT,
textAreaHeight: null,
initialTextAreaHeight: null,
}
},
mixins: [
@ -71,14 +72,17 @@ export default {
},
watch: {
newTaskTitle(newVal) {
let scrollHeight = this.$refs.newTaskInput.scrollHeight
if (scrollHeight < INITIAL_SCROLL_HEIGHT || newVal === '') {
scrollHeight = INITIAL_SCROLL_HEIGHT
let scrollHeight = this.$refs.newTaskInput.scrollHeight + INPUT_BORDER_PX
if (scrollHeight < this.initialTextAreaHeight || newVal === '') {
scrollHeight = this.initialTextAreaHeight
}
this.textAreaHeight = scrollHeight
},
},
mounted() {
this.initialTextAreaHeight = this.$refs.newTaskInput.scrollHeight + INPUT_BORDER_PX
},
methods: {
addTask() {
if (this.newTaskTitle === '') {