This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover, interactive-widget=resizes-content"/>
|
||||
<title>НаСвязи</title>
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
|
||||
@@ -30,9 +30,9 @@ const { qr_code_uri, chat, userRole } = defineProps<{
|
||||
userRole: MessageDocument['from']
|
||||
}>()
|
||||
|
||||
onMounted(() => {
|
||||
formRef.value?.querySelector('input')?.focus()
|
||||
})
|
||||
// onMounted(() => {
|
||||
// formRef.value?.querySelector('input')?.focus()
|
||||
// })
|
||||
|
||||
// Отправка нового сообщения
|
||||
async function sendMessage() {
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="grid h-full sm:grid-rows-[auto_1fr_auto] grid-rows-[1fr_auto_auto] overflow-hidden">
|
||||
<div
|
||||
class="flex overflow-auto pb-safe-or-4 sm:pt-safe px-4 touch-pan-y"
|
||||
class="grid h-full sm:grid-rows-[auto_1fr_auto] grid-rows-[1fr_auto_auto] overflow-hidden touch-none"
|
||||
>
|
||||
<div
|
||||
class="flex overflow-hidden overflow-y-scroll scroll-touch pb-safe-or-4 sm:pt-safe px-4 overscroll-contain"
|
||||
ref="contentScrollContainer"
|
||||
>
|
||||
<div class="sm:max-w-prose grid grid-cols-1 mx-auto my-5 w-full">
|
||||
@@ -43,10 +45,52 @@ const scrollToBottom = () => {
|
||||
}
|
||||
}
|
||||
|
||||
// Устанавливаем корректную высоту при загрузке и изменении размера окна
|
||||
const onresize = () => {
|
||||
document.documentElement.style.setProperty(
|
||||
'--visual-viewport-offset-top',
|
||||
`${visualViewport!.offsetTop!}px`,
|
||||
)
|
||||
document.documentElement.style.setProperty(
|
||||
'--visual-viewport-height',
|
||||
`${visualViewport!.height}px`,
|
||||
)
|
||||
if (document.activeElement) {
|
||||
if ('scrollIntoViewIfNeeded' in document.activeElement) {
|
||||
;(document.activeElement.scrollIntoViewIfNeeded as (options?: ScrollIntoViewOptions) => void)(
|
||||
{
|
||||
block: 'center',
|
||||
},
|
||||
)
|
||||
} else {
|
||||
document.activeElement.scrollIntoView({ block: 'center' })
|
||||
}
|
||||
}
|
||||
}
|
||||
const onresizeOptions: AddEventListenerOptions = { passive: true }
|
||||
visualViewport?.addEventListener('resize', onresize, onresizeOptions)
|
||||
|
||||
const layoutPageHead = useHead({
|
||||
htmlAttrs: { class: 'overflow-hidden' },
|
||||
bodyAttrs: { class: 'overflow-hidden' },
|
||||
htmlAttrs: { class: 'overflow-hidden overscroll-none touch-none fix-layout-scrolling' },
|
||||
bodyAttrs: { class: 'overflow-hidden overscroll-none touch-none' },
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => layoutPageHead?.dispose())
|
||||
onBeforeUnmount(() => {
|
||||
layoutPageHead?.dispose()
|
||||
visualViewport?.removeEventListener('resize', onresize, onresizeOptions)
|
||||
document.documentElement.style.removeProperty('--visual-viewport-offset-top')
|
||||
document.documentElement.style.removeProperty('--visual-viewport-height')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
::v-global(html.fix-layout-scrolling) {
|
||||
--visual-viewport-height: 100dvh;
|
||||
--visual-viewport-offset-top: 0px;
|
||||
position: fixed;
|
||||
width: 100dvw;
|
||||
height: var(--visual-viewport-height);
|
||||
top: var(--visual-viewport-offset-top);
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -36,6 +36,7 @@ const app = createApp(App)
|
||||
|
||||
const vueQueryPluginOptions: VueQueryPluginOptions = {
|
||||
enableDevtoolsV6Plugin: import.meta.env.DEV,
|
||||
|
||||
queryClientConfig: {
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
@@ -60,7 +61,6 @@ app.use(PrimeVue, {
|
||||
},
|
||||
},
|
||||
})
|
||||
app.config.globalProperties.$swDebug = ref([])
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
|
||||
@@ -7,8 +7,21 @@
|
||||
@layer tailwind-utilities {
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
.scroll-touch {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
|
||||
html, body, #app {
|
||||
/*html, body, #app {*/
|
||||
/* height: 100%;*/
|
||||
/* max-height: 100dvh;*/
|
||||
/*}*/
|
||||
|
||||
|
||||
html {
|
||||
height: 100dvh;
|
||||
}
|
||||
|
||||
body, #app {
|
||||
height: 100%;
|
||||
}
|
||||
@@ -2,7 +2,7 @@ import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig, loadEnv } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueDevTools from 'vite-plugin-vue-devtools'
|
||||
// import vueDevTools from 'vite-plugin-vue-devtools'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import { PrimeVueResolver } from '@primevue/auto-import-resolver'
|
||||
import Info from 'unplugin-info/vite'
|
||||
@@ -133,7 +133,7 @@ export default defineConfig(({ mode }) => {
|
||||
dirs: ['src/components', 'src/layouts'],
|
||||
}),
|
||||
|
||||
vueDevTools(),
|
||||
// vueDevTools(),
|
||||
|
||||
mockData({
|
||||
mockRoutes: {
|
||||
|
||||
Reference in New Issue
Block a user