Merge pull request 'Fix input on mobile' (#44) from mobile-input into master

Reviewed-on: #44

web/src/components/TransactionInputRow.vue

@@ -47,8 +47,14 @@ const payload = computed(() => JSON.stringify({
 const transactionsStore = useTransactionsStore();
 function saveTransaction(e: MouseEvent) {
     e.preventDefault();
+    Save();
+}
+
+function Save() {
     transactionsStore.saveTransaction(payload.value);
 }
+
+defineExpose({Save});
 </script>
 
 <template>

web/src/components/TransactionRow.vue

@@ -47,15 +47,11 @@ function getStatusSymbol() {
 </script>
 
 <template>
-  <tr
-    v-if="dateChanged()"
-    class="table-row md:hidden"
-  >
-    <td
-      class="bg-gray-200 dark:bg-gray-800 rounded-lg p-2"
-      colspan="5"
-    >
-      {{ formatDate(TX.Date) }}
+  <tr v-if="dateChanged()" class="table-row md:hidden">
+    <td class="py-2" colspan="5">
+      <span class="bg-gray-400 dark:bg-slate-600 rounded-lg p-1 px-2 w-full block">
+        {{ formatDate(TX.Date) }}
+      </span>
     </td>
   </tr>
   <tr

web/src/pages/Account.vue

@@ -16,6 +16,12 @@ defineProps<{
     accountid: string
 }>()
 
+const modalInputRow = ref<typeof TransactionInputRow | null>(null);
+
+function submitModal() {
+  modalInputRow.value!.Save();
+}
+
 const accounts = useAccountStore();
 const transactions = useTransactionsStore();
 const TargetReconcilingBalance = ref(0);
@@ -146,7 +152,7 @@ function createReconcilationTransaction() {
     />
   </table>
   <div class="md:hidden">
-    <Modal>
+    <Modal @submit="submitModal">
       <template #placeholder>
         <Button
           class="fixed right-4 bottom-4 font-bold text-lg bg-blue-500 py-2"
@@ -155,6 +161,7 @@ function createReconcilationTransaction() {
         </Button>
       </template>
       <TransactionInputRow
+        ref="modalInputRow"
         class="grid grid-cols-2"
         :budgetid="budgetid"
         :accountid="accountid"