local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix: task input height on devices with smaller font size

Browse source
This commit is contained in:
kolaente 2021-10-13 20:37:03 +02:00
parent b5b56a6e4a
commit c30c2e00cb
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
1 changed files with 9 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/tasks/add-task.vue
View file

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