feat(libra): expense/income form UI fixes #139
2 changed files with 83 additions and 78 deletions
feat(libra): put Amount and Currency on the same row
Wrap the Amount and Currency fields in a two-column grid on both the expense (AddExpense.vue) and income (AddIncome.vue) forms, and add w-full to the currency SelectTrigger so the dropdown fills its column. Tightens the vertical layout of the entry dialogs.
commit
49e7afb0ab
|
|
@ -106,6 +106,7 @@
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</FormField>
|
</FormField>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
<FormField v-slot="{ componentField }" name="amount">
|
<FormField v-slot="{ componentField }" name="amount">
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<FormLabel>Amount *</FormLabel>
|
<FormLabel>Amount *</FormLabel>
|
||||||
|
|
@ -128,7 +129,7 @@
|
||||||
<FormLabel>Currency *</FormLabel>
|
<FormLabel>Currency *</FormLabel>
|
||||||
<Select v-bind="componentField">
|
<Select v-bind="componentField">
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<SelectTrigger>
|
<SelectTrigger class="w-full">
|
||||||
<SelectValue placeholder="Select currency" />
|
<SelectValue placeholder="Select currency" />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
|
|
@ -142,6 +143,7 @@
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</FormField>
|
</FormField>
|
||||||
|
</div>
|
||||||
|
|
||||||
<FormField v-slot="{ componentField }" name="reference">
|
<FormField v-slot="{ componentField }" name="reference">
|
||||||
<FormItem>
|
<FormItem>
|
||||||
|
|
|
||||||
|
|
@ -113,6 +113,8 @@
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</FormField>
|
</FormField>
|
||||||
|
|
||||||
|
<!-- Amount + Currency -->
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
<!-- Amount -->
|
<!-- Amount -->
|
||||||
<FormField v-slot="{ componentField }" name="amount">
|
<FormField v-slot="{ componentField }" name="amount">
|
||||||
<FormItem>
|
<FormItem>
|
||||||
|
|
@ -139,7 +141,7 @@
|
||||||
<FormLabel>Currency *</FormLabel>
|
<FormLabel>Currency *</FormLabel>
|
||||||
<Select v-bind="componentField">
|
<Select v-bind="componentField">
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<SelectTrigger>
|
<SelectTrigger class="w-full">
|
||||||
<SelectValue placeholder="Select currency" />
|
<SelectValue placeholder="Select currency" />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
|
|
@ -159,6 +161,7 @@
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</FormField>
|
</FormField>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Reference (optional) -->
|
<!-- Reference (optional) -->
|
||||||
<FormField v-slot="{ componentField }" name="reference">
|
<FormField v-slot="{ componentField }" name="reference">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue