ti/hereconnect
1
0
Fork 0
Code Issues 26 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix scroll on ios
Deploy app frontend / app frontend (push) Successful in 1m31s
Details

Browse Source
This commit is contained in:
Vasilii Mikhailovskii
2024-12-07 22:37:32 +02:00
parent a420a7a040
commit cd0cddbf84
6 changed files with 71 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/index.html
+1 -1
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <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> <title>НаСвязи</title>
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
apps/frontend/src/components/chat/ChatForm.vue
+3 -3
View File
@@ -30,9 +30,9 @@ const { qr_code_uri, chat, userRole } = defineProps<{
userRole: MessageDocument['from'] userRole: MessageDocument['from']
}>() }>()
onMounted(() => { // onMounted(() => {
formRef.value?.querySelector('input')?.focus() // formRef.value?.querySelector('input')?.focus()
}) // })
// Отправка нового сообщения // Отправка нового сообщения
async function sendMessage() { async function sendMessage() {
apps/frontend/src/layouts/LayoutWithTabs.vue
+49 -5
View File
@@ -1,7 +1,9 @@
<template> <template>
<div class="grid h-full sm:grid-rows-[auto_1fr_auto] grid-rows-[1fr_auto_auto] overflow-hidden"> <div
class="grid h-full sm:grid-rows-[auto_1fr_auto] grid-rows-[1fr_auto_auto] overflow-hidden touch-none"
>
<div <div
class="flex overflow-auto pb-safe-or-4 sm:pt-safe px-4 touch-pan-y" class="flex overflow-hidden overflow-y-scroll scroll-touch pb-safe-or-4 sm:pt-safe px-4 overscroll-contain"
ref="contentScrollContainer" ref="contentScrollContainer"
> >
<div class="sm:max-w-prose grid grid-cols-1 mx-auto my-5 w-full"> <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({ const layoutPageHead = useHead({
htmlAttrs: { class: 'overflow-hidden' }, htmlAttrs: { class: 'overflow-hidden overscroll-none touch-none fix-layout-scrolling' },
bodyAttrs: { class: 'overflow-hidden' }, 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> </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>
apps/frontend/src/main.ts
+1 -1
View File
@@ -36,6 +36,7 @@ const app = createApp(App)
const vueQueryPluginOptions: VueQueryPluginOptions = { const vueQueryPluginOptions: VueQueryPluginOptions = {
enableDevtoolsV6Plugin: import.meta.env.DEV, enableDevtoolsV6Plugin: import.meta.env.DEV,
queryClientConfig: { queryClientConfig: {
defaultOptions: { defaultOptions: {
queries: { queries: {
@@ -60,7 +61,6 @@ app.use(PrimeVue, {
}, },
}, },
}) })
app.config.globalProperties.$swDebug = ref([])
app.mount('#app') app.mount('#app')
apps/frontend/src/style.css
+15 -2
View File
@@ -7,8 +7,21 @@
@layer tailwind-utilities { @layer tailwind-utilities {
@tailwind components; @tailwind components;
@tailwind utilities; @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%; height: 100%;
} }
apps/frontend/vite.config.ts
+2 -2
View File
@@ -2,7 +2,7 @@ import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite' import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue' 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 Components from 'unplugin-vue-components/vite'
import { PrimeVueResolver } from '@primevue/auto-import-resolver' import { PrimeVueResolver } from '@primevue/auto-import-resolver'
import Info from 'unplugin-info/vite' import Info from 'unplugin-info/vite'
@@ -133,7 +133,7 @@ export default defineConfig(({ mode }) => {
dirs: ['src/components', 'src/layouts'], dirs: ['src/components', 'src/layouts'],
}), }),
vueDevTools(), // vueDevTools(),
mockData({ mockData({
mockRoutes: { mockRoutes: {