fix: better comment textarea for mobile (auto-grow + bigger size)

vas3k · Sep 26, 2024 · 5919846 · 5919846
1 parent f4b3a7f
commit 5919846
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/frontend/static/css/components/comments.css b/frontend/static/css/components/comments.css
@@ -129,6 +129,7 @@
         https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/
         */
         font-size: max(1.25rem, 16px);
+        min-height: 300px;
     }
 }
 

diff --git a/frontend/static/js/components/MarkdownEditor/MobileMarkdownEditor.vue b/frontend/static/js/components/MarkdownEditor/MobileMarkdownEditor.vue
@@ -7,6 +7,7 @@
             placeholder="Напишите ответ..."
             ref="textarea"
             :value="value"
+            @input="growTextareaIfNeeded"
             @blur="emitCustomBlur"
         >
         </textarea>
@@ -29,6 +30,7 @@ export default {
     mounted: function() {
         this.attachImageListener();
         this.focusTextareaIfNeeded(this.focused);
+        this.growTextareaIfNeeded();
 
     },
     watch: {
@@ -45,6 +47,10 @@ export default {
                 shouldFocus && this.$refs["textarea"].focus();
             });
         },
+        growTextareaIfNeeded: function() {
+            this.$refs["textarea"].style.height = 'auto';
+            this.$refs["textarea"].style.height = this.$refs["textarea"].scrollHeight + 'px';
+        },
         attachImageListener: function() {
             // we reach outside the current component to get the filepicker. It is not a good practice,
             // but we cannot move the text ownership to form because the editor is used in many different contexts