RunasSudo/DrCr
1
Fork 0
Code Issues 1 Pull Requests Releases Activity

Improve account combobox spacing

Browse Source
This commit is contained in:
RunasSudo 2025-06-07 12:02:32 +10:00
parent 043743a4b3
commit 9775aa6c51
Signed by: RunasSudo
GPG Key ID: 7234E476BF21C61A
2 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/ComboBox.vue
View File

@ -18,8 +18,8 @@
<template>
<div class="relative">
<!-- WebKit bug: Does not align baseline correctly unless some text or placeholder is present -->
<input type="text" class="bordered-field peer" :class="inputClass" id="account" v-model="selectedValue" placeholder=" " autocomplete="off" ref="inputField">
<!-- WebKit bug https://bugs.webkit.org/show_bug.cgi?id=142968: Does not align baseline correctly unless some text or placeholder is present -->
<input type="text" class="bordered-field peer pr-7" :class="inputClass" id="account" v-model="selectedValue" placeholder=" " autocomplete="off" ref="inputField">
<button type="button" class="absolute inset-y-0 right-0 flex items-center px-2 focus:outline-none" @click="inputField!.focus()">
<ChevronUpDownIcon class="h-5 w-5 text-gray-400" />
</button>
@ -33,9 +33,7 @@
>
<span class="block truncate group-data-[selected=selected]:font-semibold">{{ value }}</span>
<span class="hidden group-data-[selected=selected]:flex absolute inset-y-0 right-0 items-center pr-4 text-emerald-600 group-hover:text-white">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
</svg>
<CheckIcon class="w-5 h-5" />
</span>
</li>
</ul>
@ -43,6 +41,7 @@
</template>
<script setup lang="ts">
import { CheckIcon } from '@heroicons/vue/20/solid';
import { ChevronUpDownIcon } from '@heroicons/vue/24/outline';
import { useTemplateRef } from 'vue';

6
src/components/TransactionEditor.vue
View File

@ -49,7 +49,7 @@
<option value="cr">Cr</option>
</select>
</div>
<ComboBoxAccounts v-model="posting.account" class="w-full" inputClass="pl-16" />
<ComboBoxAccounts v-model="posting.account" class="w-full" inputClass="pl-14" />
</div>
<button class="relative -ml-px px-2 py-2 text-gray-500 hover:text-gray-700" @click="addPosting(posting)">
<PlusIcon class="w-4 h-4" />
@ -57,7 +57,7 @@
</div>
</td>
<template v-if="posting.sign == 'dr'">
<td class="amount-dr has-amount py-1 px-1">
<td class="amount-dr has-amount py-1 px-1 w-[8rem]">
<div class="relative shadow-sm">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<span class="text-gray-500">{{ db.metadata.reporting_commodity }}</span>
@ -69,7 +69,7 @@
</template>
<template v-if="posting.sign == 'cr'">
<td class="amount-dr py-1 px-1"></td>
<td class="amount-cr has-amount py-1 pl-1">
<td class="amount-cr has-amount py-1 pl-1 w-[8rem]">
<div class="relative shadow-sm">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<span class="text-gray-500">{{ db.metadata.reporting_commodity }}</span>