LordGaav
/
frontend
forked from vikunja/frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(style) restrict new task input size (#938) 

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: vikunja/frontend#938
Reviewed-by: konrad <k@knt.li>
Co-authored-by: dpschen <dpschen@noreply.kolaente.de>
Co-committed-by: dpschen <dpschen@noreply.kolaente.de>
This commit is contained in:
dpschen 2021-11-02 18:11:24 +00:00 committed by konrad
parent 4e6f961a24
commit ee430b8687
1 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/tasks/add-task.vue
View File

@ -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;
}
</style>