tg app fix sizes

2025-10-27 17:17:13 +03:00
parent 95165f3529
commit f049e202e4
5 changed files with 77 additions and 82 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,93 +1,97 @@
-<script setup>
+<script setup lang="ts">
 import SpaceList from "@/components/space-list/SpaceList.vue";
-import {useSpaceStore} from "@/stores/spaceStore";
-import {computed, onMounted, ref} from "vue";
+import { useSpaceStore } from "@/stores/spaceStore";
+import { computed, onMounted, onBeforeUnmount, ref } from "vue";
 import Toolbar from "@/components/Toolbar.vue";
-import {useToolbarStore} from "@/stores/toolbar-store";
-import router from "@/router/index.js";
-
+import { useToolbarStore } from "@/stores/toolbar-store";
+import router from "@/router"; // если у тебя index.ts экспортирует по умолчанию, можно без /index.js

 const spaceStore = useSpaceStore();
-const toolbarStore = useToolbarStore()
+const toolbarStore = useToolbarStore();
+
+// true/false, есть ли Telegram WebApp
+const isTelegram = computed(() => !!(window as any)?.Telegram?.WebApp);

 const isSpaceSelectorVisible = ref(false);
-const isSpaceSelected = computed(() => {
-  return spaceStore.selectedSpaceId === undefined || isSpaceSelectorVisible.value;
-})
+const isSpaceSelected = computed(
+    () => spaceStore.selectedSpaceId === undefined || isSpaceSelectorVisible.value
+);

 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" },
+];

-const spaceSelected = () => {
-  router.push('/')
-  isSpaceSelectorVisible.value = false
+function spaceSelected() {
+  router.push("/");
+  isSpaceSelectorVisible.value = false;
 }

 onMounted(() => {
-  toolbarStore.registerHandler('openSpacePicker', () => {
-    isSpaceSelectorVisible.value = true
+  toolbarStore.registerHandler("openSpacePicker", () => {
+    isSpaceSelectorVisible.value = true;
  });
-  let tgApp = window.Telegram.WebApp
-  tgApp.ready()
-  tgApp.requestFullscreen()
-  tgApp.lockOrientation()

-})
+  const tgApp = (window as any)?.Telegram?.WebApp;
+  if (tgApp) {
+    try {
+      tgApp.ready();
+      tgApp.expand?.();          // более мягкий вариант, чем requestFullscreen()
+      tgApp.requestFullscreen?.();
+      tgApp.lockOrientation?.();
+    } catch {
+      /* ignore */
+    }
+  }
+});
+
+onBeforeUnmount(() => {
+  toolbarStore.unregisterHandler("openSpacePicker");
+});
 </script>

 <template>
-  <body class="flex flex-col" :class="window.Telegram.WebApp ? 'tg' : ''">
-  <SpaceList v-if="isSpaceSelected" @space-selected="spaceSelected()"
-  />
+  <div class="flex flex-col tg">
+    <SpaceList v-if="isSpaceSelected" @space-selected="spaceSelected" />
+
    <div v-else class="flex flex-col w-full gap-4">
-    <div class="w-full flex flex-row justify-items-end items-end justify-end pt-4 pe-4">
-      <Toolbar class=""/>
+      <div class="w-full flex flex-row items-end justify-end pt-4 pe-4">
+        <Toolbar />
      </div>
-    <div class="flex flex-col w-full h-full justify-items-end justify-end items-end px-4 gap-4 sticky">
-      <!--      <div class="w-fit  flex flex-row items-center gap-2 p-2  bg-white rounded-full  !text-xl sticky"-->
-      <!--      >-->
-      <!--        <span class=" px-1  " @click="isSpaceSelectorVisible=true">{{ spaceStore.selectedSpaceName }}</span>-->
-      <!--        <Divider layout="vertical" class="!h-full !m-0 !text-black  !bg-black"/>-->
-      <!--        <i class="pi pi-plus !text-lg px-2"/>-->
-      <!--      </div>-->

-      <router-view class="w-full"/>
+      <div class="flex flex-col w-full h-full items-end px-4 gap-4">
+        <router-view class="w-full" />
+      </div>

-    </div>
-    <div
-        class="w-full flex flex-row items-center justify-items-center justify-between fixed bottom-0 h-16 px-10 bg-white z-50 ">
-      <router-link v-for="itemKey in menu.keys()" :key="itemKey" :to="menu[itemKey].link" class="items-center">
-        <div class="w-fit flex flex-col justify-center items-center justify-items-center gap-0">
-          <i class="!text-lg" :class="menu[itemKey].icon"/>
-          <span class="text-lg font-medium text-gray-900">{{ menu[itemKey].name }}</span>
-        </div>
+      <nav class="fixed inset-x-0 bottom-0 z-50 h-16 bg-white px-10">
+        <div class="flex h-full items-center justify-between">
+          <router-link
+              v-for="item in menu"
+              :key="item.link"
+              :to="item.link"
+              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>
          </router-link>
        </div>
+      </nav>

+      <!-- отступ под нижний navbar, чтобы контент не перекрывался -->
+      <div class="h-16" />
+    </div>
  </div>
-
-  </body>
-
 </template>

 <style scoped>
-
+/* Порядок отступов: top right bottom left */
 .tg {
-  padding: var(--tg-content-safe-area-inset-top) var(--tg-content-safe-area-inset-bottom) var(--tg-content-safe-area-inset-left) var(--tg-content-safe-area-inset-right) !important;
+  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)
+      var(--tg-content-safe-area-inset-left) !important;
 }
 </style>
--- a/src/assets/theme.css
+++ b/src/assets/theme.css
@@ -206,3 +206,4 @@ span, a, i {
    color: var(--text-color) !important;
    padding: 0 !important;
 }
+
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -8,7 +8,7 @@ const keyOf = (b: { id?: string; text?: string }) => b.id ?? b.text ?? crypto.ra
 </script>

 <template>
-  <nav class="h-12 w-fit flex flex-row items-center gap-2 p-2  bg-white rounded-full  !text-xl sticky top-10 justify-items-end  justify-end">
+  <nav class="h-12 w-fit flex flex-row items-center gap-2 p-2  bg-white rounded-full   sticky top-10 justify-items-end  justify-end">
    <component
        v-for="btnKey in toolbar.current.keys()"
        :is="toolbar.current[btnKey].to ? RouterLink : 'button'"
@@ -18,7 +18,7 @@ const keyOf = (b: { id?: string; text?: string }) => b.id ?? b.text ?? crypto.ra
        v-bind="toolbar.current[btnKey].to ? { to: toolbar.current[btnKey].to } : { type: 'button', disabled: toolbar.current[btnKey].disabled }"
        @click="!toolbar.current[btnKey].to && toolbar.invoke(toolbar.current[btnKey].onClickId)"
    >
-      <i v-if="toolbar.current[btnKey].icon" :class="toolbar.current[btnKey].icon" style="font-size: 1.1rem" class="!p-2"/>
+      <i v-if="toolbar.current[btnKey].icon" :class="toolbar.current[btnKey].icon"  class="!p-2"/>
      <span v-if="toolbar.current[btnKey].text">{{ toolbar.current[btnKey].text }}</span>
      <Divider v-if="btnKey+1 != toolbar.current.length" class="!m-0" layout="vertical"/>
    </component>
--- a/src/components/settings/CategoriesList.vue
+++ b/src/components/settings/CategoriesList.vue
@@ -53,7 +53,7 @@ onMounted(async () => {

  <div class="card">
    <div v-for="key in categories.keys()" :key="categories[key].id" @click="router.push(`/categories/${categories[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-col items-start">
          <div class="flex-row"> {{ categories[key].icon }} {{ categories[key].name }}</div>
--- a/src/components/settings/SettingsList.vue
+++ b/src/components/settings/SettingsList.vue
@@ -6,16 +6,6 @@ const items = [
  {name: "Notification settings", link: '/notification-settings'},
  {name: "Categories", link: '/categories'},
  {name: "Recurrent Operations", link: '/recurrents'},
-  {name: "Recurrent Operations", link: '/recurrents'},
-  {name: "Recurrent Operations", link: '/recurrents'},
-  {name: "Recurrent Operations", link: '/recurrents'},
-  {name: "Recurrent Operations", link: '/recurrents'},
-  {name: "Recurrent Operations", link: '/recurrents'},
-  {name: "Recurrent Operations", link: '/recurrents'},
-  {name: "Recurrent Operations", link: '/recurrents'},
-  {name: "Recurrent Operations", link: '/recurrents'},
-  {name: "Recurrent Operations", link: '/recurrents'},
-  {name: "Recurrent Operations", link: '/recurrents'}
 ]
 </script>

@@ -27,9 +17,9 @@ const items = [

        <div class="flex flex-row justify-between items-center w-full pe-2 p-2">

-          <span class="font-bold text-xl">{{ items[item].name }}</span>
+          <span class="font-bold ">{{ items[item].name }}</span>

-          <i class="pi pi-angle-right !text-xl !font-extralight"/>
+          <i class="pi pi-angle-right  !font-extralight"/>
        </div>

        <Divider v-if="item+1 != items.length" class="!p-2 !m-0"/>