tg app fix sizes
This commit is contained in:
@@ -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 items-center gap-2">
|
<div class="flex-row w-full items-center justify-between py-3">
|
||||||
<span class="text-3xl">{{ categories[key].icon }} </span>
|
<div class="flex-row items-center gap-2">
|
||||||
<div class="flex-col justify-between">
|
<span class="text-3xl">{{ cat.icon }} </span>
|
||||||
<div class="flex-row"> {{ categories[key].name }}</div>
|
<div class="flex-col justify-between">
|
||||||
<div class="flex flex-row text-sm">{{ categories[key].description }}</div>
|
<div class="flex-row"> {{ cat.name }}</div>
|
||||||
|
<div class="flex flex-row text-sm text-gray-600">{{ cat.description }}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<i class="pi pi-angle-right !font-extralight"/>
|
||||||
</div>
|
</div>
|
||||||
<i class="pi pi-angle-right !font-extralight"/>
|
<Divider v-if="idx + 1 !== categories.length" class="!m-0"/>
|
||||||
</div>
|
</div>
|
||||||
<Divider v-if="key+1 !== categories.length" class="!m-0 !py-3"/>
|
|
||||||
</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 }}
|
||||||
|
|||||||
Reference in New Issue
Block a user