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:17:13 +03:00
parent 95165f3529
commit f049e202e4
5 changed files with 77 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/App.vue
View File

@@ -1,93 +1,97 @@
<script setup> <script setup lang="ts">
import SpaceList from "@/components/space-list/SpaceList.vue"; import SpaceList from "@/components/space-list/SpaceList.vue";
import {useSpaceStore} from "@/stores/spaceStore"; import { useSpaceStore } from "@/stores/spaceStore";
import {computed, onMounted, ref} from "vue"; import { computed, onMounted, onBeforeUnmount, ref } from "vue";
import Toolbar from "@/components/Toolbar.vue"; import Toolbar from "@/components/Toolbar.vue";
import {useToolbarStore} from "@/stores/toolbar-store"; import { useToolbarStore } from "@/stores/toolbar-store";
import router from "@/router/index.js"; import router from "@/router"; // если у тебя index.ts экспортирует по умолчанию, можно без /index.js
const spaceStore = useSpaceStore(); 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 isSpaceSelectorVisible = ref(false);
const isSpaceSelected = computed(() => { const isSpaceSelected = computed(
return spaceStore.selectedSpaceId === undefined || isSpaceSelectorVisible.value; () => spaceStore.selectedSpaceId === undefined || isSpaceSelectorVisible.value
}) );
const menu = [ const menu = [
{ { name: "Dashboard", icon: "pi pi-chart-bar", link: "/" },
name: "Dashboard", { name: "Transactions", icon: "pi pi-cog", link: "/transactions" },
icon: "pi pi-chart-bar", { name: "Settings", icon: "pi pi-list", link: "/settings" },
link: "/", ];
},
{
name: "Transactions",
icon: "pi pi-cog",
link: "/transactions",
},
{
name: "Settings",
icon: "pi pi-list",
link: "/settings",
}
]
const spaceSelected = () => { function spaceSelected() {
router.push('/') router.push("/");
isSpaceSelectorVisible.value = false isSpaceSelectorVisible.value = false;
} }
onMounted(() => { onMounted(() => {
toolbarStore.registerHandler('openSpacePicker', () => { toolbarStore.registerHandler("openSpacePicker", () => {
isSpaceSelectorVisible.value = true 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> </script>
<template> <template>
<body class="flex flex-col" :class="window.Telegram.WebApp ? 'tg' : ''"> <div class="flex flex-col tg">
<SpaceList v-if="isSpaceSelected" @space-selected="spaceSelected()" <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>
<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 v-else class="flex flex-col w-full gap-4">
<div class="w-full flex flex-row items-end justify-end pt-4 pe-4">
<Toolbar />
</div>
</div> <div class="flex flex-col w-full h-full items-end px-4 gap-4">
<div <router-view class="w-full" />
class="w-full flex flex-row items-center justify-items-center justify-between fixed bottom-0 h-16 px-10 bg-white z-50 "> </div>
<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"> <nav class="fixed inset-x-0 bottom-0 z-50 h-16 bg-white px-10">
<i class="!text-lg" :class="menu[itemKey].icon"/> <div class="flex h-full items-center justify-between">
<span class="text-lg font-medium text-gray-900">{{ menu[itemKey].name }}</span> <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> </div>
</router-link> </nav>
<!-- отступ под нижний navbar, чтобы контент не перекрывался -->
<div class="h-16" />
</div> </div>
</div> </div>
</body>
</template> </template>
<style scoped> <style scoped>
/* Порядок отступов: top right bottom left */
.tg { .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> </style>

1
src/assets/theme.css
View File

@@ -206,3 +206,4 @@ span, a, i {
color: var(--text-color) !important; color: var(--text-color) !important;
padding: 0 !important; padding: 0 !important;
} }

4
src/components/Toolbar.vue
View File

@@ -8,7 +8,7 @@ const keyOf = (b: { id?: string; text?: string }) => b.id ?? b.text ?? crypto.ra
</script> </script>
<template> <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 <component
v-for="btnKey in toolbar.current.keys()" v-for="btnKey in toolbar.current.keys()"
:is="toolbar.current[btnKey].to ? RouterLink : 'button'" :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 }" 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)" @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> <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"/> <Divider v-if="btnKey+1 != toolbar.current.length" class="!m-0" layout="vertical"/>
</component> </component>

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

@@ -53,7 +53,7 @@ onMounted(async () => {
<div class="card"> <div class="card">
<div v-for="key in categories.keys()" :key="categories[key].id" @click="router.push(`/categories/${categories[key].id}/edit`)" <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-row w-full items-center justify-between">
<div class="flex-col items-start"> <div class="flex-col items-start">
<div class="flex-row"> {{ categories[key].icon }} {{ categories[key].name }}</div> <div class="flex-row"> {{ categories[key].icon }} {{ categories[key].name }}</div>

14
src/components/settings/SettingsList.vue
View File

@@ -6,16 +6,6 @@ const items = [
{name: "Notification settings", link: '/notification-settings'}, {name: "Notification settings", link: '/notification-settings'},
{name: "Categories", link: '/categories'}, {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'},
{name: "Recurrent Operations", link: '/recurrents'}
] ]
</script> </script>
@@ -27,9 +17,9 @@ const items = [
<div class="flex flex-row justify-between items-center w-full pe-2 p-2"> <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> </div>
<Divider v-if="item+1 != items.length" class="!p-2 !m-0"/> <Divider v-if="item+1 != items.length" class="!p-2 !m-0"/>