luminic-space/app-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tg app fix sizes

Browse Source
This commit is contained in:
xds
2025-10-27 17:43:29 +03:00
parent 43f1a342c7
commit 61a66c91b9
6 changed files with 64 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/App.vue
View File

@@ -1,18 +1,18 @@
<script setup lang="ts">
import SpaceList from "@/components/space-list/SpaceList.vue";
import { useSpaceStore } from "@/stores/spaceStore";
import { computed, onMounted, onBeforeUnmount, ref } from "vue";
import Toolbar from "@/components/Toolbar.vue";
import { useSpaceStore } from "@/stores/spaceStore";
import { useToolbarStore } from "@/stores/toolbar-store";
import router from "@/router";
import {useRoute} from "vue-router"; // если у тебя index.ts экспортирует по умолчанию, можно без /index.js
import { useRoute, onBeforeRouteUpdate } from "vue-router";
import { computed, onMounted, onBeforeUnmount, ref, watch } from "vue";
const spaceStore = useSpaceStore();
const toolbarStore = useToolbarStore();
const route = useRoute();
// true/false, есть ли Telegram WebApp
const isTelegram = computed(() => !!(window as any)?.Telegram?.WebApp);
const tgApp = (window as any)?.Telegram?.WebApp;
const isTelegram = computed(() => !!tgApp);
const isSpaceSelectorVisible = ref(false);
const isSpaceSelected = computed(
@@ -20,9 +20,9 @@ const isSpaceSelected = computed(
);
const menu = [
{ name: "Dashboard", icon: "pi pi-chart-bar", link: "/" },
{ name: "Transactions", icon: "pi pi-cog", link: "/transactions" },
{ name: "Settings", icon: "pi pi-list", link: "/settings" },
{ name: "Dashboard", icon: "pi pi-chart-bar", link: "/" },
{ name: "Transactions", icon: "pi pi-cog", link: "/transactions" },
{ name: "Settings", icon: "pi pi-list", link: "/settings" },
];
function spaceSelected() {
@@ -30,46 +30,63 @@ function spaceSelected() {
isSpaceSelectorVisible.value = false;
}
let backHandler: (() => void) | null = null;
function setupBackButton() {
if (!tgApp) return;
if (route.path !== "/") {
tgApp.BackButton.show();
// снять старый обработчик
if (backHandler) tgApp.BackButton.offClick(backHandler);
// навесить новый
backHandler = () => {
if (window.history.length > 1) {
router.back();
} else {
tgApp.BackButton.hide();
}
};
tgApp.BackButton.onClick(backHandler);
} else {
tgApp.BackButton.hide();
}
}
onMounted(() => {
toolbarStore.registerHandler("openSpacePicker", () => {
isSpaceSelectorVisible.value = true;
});
const tgApp = (window as any)?.Telegram?.WebApp;
if (tgApp) {
try {
tgApp.expand?.(); // более мягкий вариант, чем requestFullscreen()
tgApp.expand?.();
tgApp.requestFullscreen?.();
tgApp.lockOrientation?.();
if (route.path !== '/') {
tgApp.BackButton.show()
// при нажатии — возвращаемся назад
const handleBack = () => {
// например, переход на предыдущий маршрут
if (window.history.length > 1) {
router.back();
} else {
tg.BackButton.hide();
}
};
tg.BackButton.onClick(handleBack);
}
tgApp.ready();
} catch {
/* ignore */
setupBackButton();
} catch (err) {
console.warn("Telegram WebApp init error:", err);
}
}
});
// 🔁 следим за изменением маршрута
watch(
() => route.path,
() => setupBackButton()
);
onBeforeUnmount(() => {
toolbarStore.unregisterHandler("openSpacePicker");
tgApp?.BackButton?.hide();
if (backHandler) tgApp?.BackButton?.offClick(backHandler);
});
</script>
<template>
<div class="flex flex-col tg">
<SpaceList v-if="isSpaceSelected" @space-selected="spaceSelected" />
@@ -91,25 +108,23 @@ onBeforeUnmount(() => {
class="flex w-fit flex-col items-center gap-2"
>
<i class="!text-lg" :class="item.icon" />
<span class=" font-medium text-gray-900">{{ item.name }}</span>
<span class="font-medium text-gray-900">{{ item.name }}</span>
</router-link>
</div>
</nav>
<!-- отступ под нижний navbar, чтобы контент не перекрывался -->
<div class="h-16" />
</div>
</div>
</template>
<style scoped>
/* Порядок отступов: top right bottom left */
.tg {
width: 100% !important;
padding:
var(--tg-content-safe-area-inset-top)
var(--tg-content-safe-area-inset-right)
var(--tg-content-safe-area-inset-bottom)
0
var(--tg-content-safe-area-inset-left) !important;
}
</style>

2
src/components/settings/CategoriesList.vue
View File

@@ -59,7 +59,7 @@ onMounted(async () => {
<div class="flex-row"> {{ categories[key].icon }} {{ categories[key].name }}</div>
<div class="flex flex-row text-sm">{{ categories[key].description }}</div>
</div>
<i class="pi pi-angle-right !text-xl !font-extralight"/>
<i class="pi pi-angle-right !font-extralight"/>
</div>
<Divider v-if="key+1 !== categories.length" class="!m-0 !py-3"/>
</div>

8
src/components/settings/CategoryCreateUpdate.vue
View File

@@ -124,16 +124,16 @@ onMounted(async () => {
</div>
<div class="flex flex-col w-full justify-items-start">
<label class="!font-semibold text-2xl text-gray-600 pl-2">Category name</label>
<label class="!font-semibold text-gray-600 pl-2">Category name</label>
<div class="card !justify-start !items-start !p-4 !pl-5 ">
<input class="font-extralight text-xl w-full focus:outline-0" placeholder="Name" v-model="categoryName"/>
<input class="font-extralight w-full focus:outline-0" placeholder="Name" v-model="categoryName"/>
</div>
</div>
<div class="flex flex-col w-full justify-items-start">
<label class="!font-semibold text-2xl text-gray-600 !pl-2">Category description</label>
<label class="!font-semibold text-gray-600 !pl-2">Category description</label>
<div class="card !justify-start !items-start !pl-2">
<textarea
class="font-extralight text-xl w-full focus:outline-0 !focus:border-0 !@focus:shadow-none !bg-white !border-0 min-h-36"
class="font-extralight w-full focus:outline-0 !focus:border-0 !@focus:shadow-none !bg-white !border-0 min-h-36"
style="box-shadow: none !important;"
placeholder="Description" v-model="categoryDescription"/>
</div>

4
src/components/settings/RecurrentsList.vue
View File

@@ -53,7 +53,7 @@ onMounted(async () => {
<div class="card">
<div v-for="key in recurrents.keys()" :key="recurrents[key].id"
@click="router.push(`/recurrents/${recurrents[key].id}/edit`)"
class="flex flex-col w-full gap-0 pl-5 items-start justify-items-center font-bold text-xl">
class="flex flex-col w-full gap-0 pl-5 items-start justify-items-center font-bold ">
<div class="flex-row w-full items-center justify-between">
<div class="flex-row items-center gap-2">
<span class="text-4xl">{{ recurrents[key].category.icon }}</span>
@@ -67,7 +67,7 @@ onMounted(async () => {
<span class="text-lg !font-semibold">{{recurrents[key].amount}}₽ </span>
<span class="text-sm">каждое {{ recurrents[key].date }} число </span>
</div>
<i class="pi pi-angle-right !text-xl !font-extralight"/>
<i class="pi pi-angle-right !font-extralight"/>
</div>
<Divider v-if="key+1 !== recurrents.length" class="!m-0 !py-3"/>
</div>

18
src/components/settings/RecurrentyCreateUpdate.vue
View File

@@ -106,7 +106,7 @@ onMounted(async () => {
<template>
<div v-if="categories.length===0" class="card !gap-4 !p-10">
<span class="text-2xl">No categories available.</span>
<span class="">No categories available.</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 v-else class="flex flex-col w-full justify-items-start gap-7">
@@ -115,7 +115,7 @@ onMounted(async () => {
<div class="card">
<div v-for="key in categories.keys()" :key="categories[key].id"
@click="recurrentCategory = categories[key]; isCategorySelectorOpened = false"
class="flex flex-col w-full gap-0 pl-5 items-start justify-items-center font-bold text-xl">
class="flex flex-col w-full gap-0 pl-5 items-start justify-items-center font-bold ">
<div class="flex-row w-full items-center justify-between">
<div class="flex-row items-center gap-2">
<span class="text-3xl">{{ categories[key].icon }} </span>
@@ -124,7 +124,7 @@ onMounted(async () => {
<div class="flex flex-row text-sm">{{ categories[key].description }}</div>
</div>
</div>
<i class="pi pi-angle-right !text-xl !font-extralight"/>
<i class="pi pi-angle-right !font-extralight"/>
</div>
<Divider v-if="key+1 !== categories.length" class="!m-0 !py-3"/>
</div>
@@ -152,28 +152,28 @@ onMounted(async () => {
</div>
<div class="flex flex-col w-full justify-items-start">
<label class="!font-semibold text-2xl 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="flex-row w-full gap-2 items-center justify-between">
<div class="flex-row gap-2 items-center">
<span class="!text-3xl ">{{ recurrentCategory.icon }}</span>
<div class="flex-col ">
<span class=" !text-2xl">{{ recurrentCategory.name }}
<span class=" !">{{ recurrentCategory.name }}
</span>
</div>
</div>
<i class="pi pi-angle-right !text-xl !font-extralight"/>
<i class="pi pi-angle-right !font-extralight"/>
</div>
</div>
</div>
<div class="flex flex-col w-full justify-items-start">
<label class="!font-semibold text-2xl text-gray-600 pl-2">Recurrent name</label>
<label class="!font-semibold text-gray-600 pl-2">Recurrent name</label>
<div class="card !justify-start !items-start !p-4 !pl-5 ">
<input class="font-extralight text-xl w-full focus:outline-0" placeholder="Name" v-model="recurrentName"/>
<input class="font-extralight w-full focus:outline-0" placeholder="Name" v-model="recurrentName"/>
</div>
</div>
<div class="flex flex-col w-full justify-items-start">
<label class="!font-semibold text-2xl 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="!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 "

2
src/components/space-list/SpaceList.vue
View File

@@ -65,7 +65,7 @@ onMounted(fetchData);
<span class="font-bold">Selected space: {{spaceName}}</span>
<div v-for="space in spaces" :key="space.id" class="w-full h-full " @click="selectSpace(space)" >
<div class="flex w-full flex-col justify-start rounded-2xl p-2 bg-gray-50 gap-2" :class="spaceId === space.id ? '!bg-green-50' : 'bg-gray-50'">
<span class="text-2xl font-medium ">{{ space.name }}</span>
<span class=" font-medium ">{{ space.name }}</span>
<div class="w-10 h-10 rounded-full bg-green-200 flex items-center justify-center ">
<span class="font-bold ">{{
space.owner.firstName.substring(0, 1).toUpperCase()