From e2d63258052474824e43bf19edd5300ef6011ded Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 9 Jan 2021 21:29:54 +0800
Subject: [PATCH] modify style and fix comment textarea initial height does not
 follow comment content

---
 src/views/mobile/transactions/Edit.vue | 34 +++++++++++++++++---------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/views/mobile/transactions/Edit.vue b/src/views/mobile/transactions/Edit.vue
index c4b9f5a0..dfaefc4c 100644
--- a/src/views/mobile/transactions/Edit.vue
+++ b/src/views/mobile/transactions/Edit.vue
@@ -20,7 +20,7 @@
             <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
                     <f7-list-item
-                        class="transaction-edit-amount padding-top-half padding-bottom-half"
+                        class="transaction-edit-amount"
                         style="font-size: 40px;"
                         header="Expense Amount" title="0.00">
                     </f7-list-item>
@@ -41,7 +41,8 @@
             <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list form :class="{ 'disabled': mode === 'view' }">
                     <f7-list-item
-                        class="transaction-edit-amount padding-top-half padding-bottom-half"
+                        class="transaction-edit-amount"
+                        link="#" no-chevron
                         :class="{ 'color-theme-teal': transaction.type === $constants.transaction.allTransactionTypes.Expense, 'color-theme-red': transaction.type === $constants.transaction.allTransactionTypes.Income }"
                         :style="{ fontSize: sourceAmountFontSize + 'px' }"
                         :header="$t(sourceAmountName)"
@@ -56,7 +57,8 @@
                     </f7-list-item>
 
                     <f7-list-item
-                        class="transaction-edit-amount padding-top-half padding-bottom-half"
+                        class="transaction-edit-amount"
+                        link="#" no-chevron
                         :style="{ fontSize: destinationAmountFontSize + 'px' }"
                         :header="$t('Transfer In Amount')"
                         :title="transaction.destinationAmount | currency"
@@ -222,11 +224,12 @@
 
                     <f7-list-input
                         type="textarea"
+                        class="transaction-edit-comment textarea-auto-size"
                         style="height: auto"
                         :label="$t('Description')"
                         :placeholder="mode !== 'view' ? $t('Your transaction description (optional)') : ''"
                         :value="transaction.comment"
-                        @input="transaction.comment = $event.target.value; changeSize($event)"
+                        @input="transaction.comment = $event.target.value"
                     ></f7-list-input>
                 </f7-list>
             </f7-card-content>
@@ -625,6 +628,9 @@ export default {
             }
         });
     },
+    updated: function () {
+        this.autoChangeCommentTextareaSize();
+    },
     methods: {
         save() {
             const self = this;
@@ -687,15 +693,15 @@ export default {
                 }
             });
         },
-        changeSize(event) {
-            const textarea = event.target;
+        autoChangeCommentTextareaSize() {
+            const app = this.$f7;
+            const $$ = app.$;
 
-            if (!textarea) {
-                return;
-            }
-
-            textarea.scrollTop = 0;
-            textarea.style.height = textarea.scrollHeight + 'px';
+            $$('.textarea-auto-size textarea').each((idx, el) => {
+                el.scrollTop = 0;
+                el.style.height = '';
+                el.style.height = el.scrollHeight + 'px';
+            });
         },
         isCategoryIdAvailable(categories, categoryId) {
             if (!categories || !categories.length) {
@@ -798,6 +804,10 @@ export default {
     font-weight: bolder;
 }
 
+.transaction-edit-amount .item-header {
+    padding-top: calc(var(--f7-typography-padding) / 2);
+}
+
 .transaction-edit-category .item-header, .transaction-edit-account .item-header {
     margin-bottom: 11px;
 }