tg app fix sizes

This commit is contained in:
xds
2025-10-27 22:13:26 +03:00
parent e30c620d50
commit 04cc59f3ce

View File

@@ -24,7 +24,7 @@ const mode = computed(() => {
const recurrentCategory = ref<Category>({}) const recurrentCategory = ref<Category>({})
const recurrentName = ref<string>() const recurrentName = ref<string>()
const recurrentAmount = ref<number>(0) const recurrentAmount = ref<number>(0)
const recurrentDate = ref<number>(Math.floor(Math.random() * 31)) const recurrentDate = ref<number>(Math.floor(Math.random() * 31) + 1)
const fetchData = async () => { const fetchData = async () => {
@@ -110,26 +110,29 @@ onMounted(async () => {
<span class="text-center">Maybe you want to <router-link to="/categories" class="!text-blue-700">create a new category</router-link> first?</span> <span class="text-center">Maybe you want to <router-link to="/categories" class="!text-blue-700">create a new category</router-link> first?</span>
</div> </div>
<div v-else class="flex flex-col w-full justify-items-start gap-7"> <div v-else class="flex flex-col w-full justify-items-start gap-7">
<div v-if="isCategorySelectorOpened" class="!absolute !top-0 !left-0 !h-full !w-full !z-50 !px-4 !overflow-y-auto" <!-- Fixed modal container -->
style="background: var(--primary-color)"> <div v-if="isCategorySelectorOpened" class="fixed inset-0 z-50 flex items-start justify-center p-4 overflow-y-auto" style="background-color: var(--primary-color)">
<div class="card"> <div class="w-full max-w-md">
<div v-for="key in categories.keys()" :key="categories[key].id" <div class="card justify-items-start justify-start">
@click="recurrentCategory = categories[key]; isCategorySelectorOpened = false" <div v-for="(cat, idx) in categories" :key="cat.id"
class="flex flex-col w-full gap-0 pl-5 items-start justify-items-center font-bold "> @click="recurrentCategory = cat; isCategorySelectorOpened = false"
<div class="flex-row w-full items-center justify-between"> class="flex flex-col w-full gap-0 pl-5 items-start justify-items-center font-bold cursor-pointer hover:bg-gray-50 transition-colors">
<div class="flex-row w-full items-center justify-between py-3">
<div class="flex-row items-center gap-2"> <div class="flex-row items-center gap-2">
<span class="text-3xl">{{ categories[key].icon }} </span> <span class="text-3xl">{{ cat.icon }} </span>
<div class="flex-col justify-between"> <div class="flex-col justify-between">
<div class="flex-row"> {{ categories[key].name }}</div> <div class="flex-row"> {{ cat.name }}</div>
<div class="flex flex-row text-sm">{{ categories[key].description }}</div> <div class="flex flex-row text-sm text-gray-600">{{ cat.description }}</div>
</div> </div>
</div> </div>
<i class="pi pi-angle-right !font-extralight"/> <i class="pi pi-angle-right !font-extralight"/>
</div> </div>
<Divider v-if="key+1 !== categories.length" class="!m-0 !py-3"/> <Divider v-if="idx + 1 !== categories.length" class="!m-0"/>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="flex flex-col w-full "> <div class="flex flex-col w-full ">
<div class="flex-col w-full"> <div class="flex-col w-full">
@@ -153,7 +156,7 @@ onMounted(async () => {
</div> </div>
<div class="flex flex-col w-full justify-items-start"> <div class="flex flex-col w-full justify-items-start">
<label class="!font-semibold text-gray-600 pl-2">Recurrent category</label> <label class="!font-semibold text-gray-600 pl-2">Recurrent category</label>
<div class="card !justify-start !items-start !p-4 !pl-5 " @click="isCategorySelectorOpened = true"> <div class="card !justify-start !items-start !p-4 !pl-5 cursor-pointer" @click="isCategorySelectorOpened = true">
<div class="flex-row w-full gap-2 items-center justify-between"> <div class="flex-row w-full gap-2 items-center justify-between">
<div class="flex-row gap-2 items-center"> <div class="flex-row gap-2 items-center">
<span class="!text-3xl ">{{ recurrentCategory.icon }}</span> <span class="!text-3xl ">{{ recurrentCategory.icon }}</span>
@@ -176,7 +179,7 @@ onMounted(async () => {
<label class="!font-semibold text-gray-600 !pl-2">Recurrent date</label> <label class="!font-semibold text-gray-600 !pl-2">Recurrent date</label>
<div class="card !justify-start !items-start !pl-2"> <div class="card !justify-start !items-start !pl-2">
<div class="!grid !grid-cols-7 gap-2"> <div class="!grid !grid-cols-7 gap-2">
<div v-for="i in 31" class="!w-12 !h-12 !items-center !justify-items-center !justify-center rounded-full " <div v-for="i in 31" class="!w-12 !h-12 !items-center !justify-items-center !justify-center rounded-full cursor-pointer flex"
:class="recurrentDate == i ? 'bg-green-200' : 'bg-gray-100'" :class="recurrentDate == i ? 'bg-green-200' : 'bg-gray-100'"
@click="recurrentDate=i"> @click="recurrentDate=i">
{{ i }} {{ i }}