teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat(ui): use sticky position on settings mid panel (#2004)

Browse source
This commit is contained in:
Joaquín Sánchez 2023-04-23 14:21:54 +02:00 committed by GitHub
parent 56405f52bb
commit 54e2afa56b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
components/main/MainContent.vue
View file

@ -8,12 +8,23 @@ defineProps<{
noOverflowHidden?: boolean noOverflowHidden?: boolean
}>() }>()
const container = ref()
const route = useRoute() const route = useRoute()
const { height: windowHeight } = useWindowSize()
const { height: containerHeight } = useElementBounding(container)
const wideLayout = computed(() => route.meta.wideLayout ?? false) const wideLayout = computed(() => route.meta.wideLayout ?? false)
const sticky = computed(() => route.path?.startsWith('/settings/'))
const containerClass = computed(() => {
// we keep original behavior when not in settings page and when the window height is smaller than the container height
if (!isHydrated.value || !sticky.value || (windowHeight.value < containerHeight.value))
return null
return 'lg:sticky lg:top-0'
})
</script> </script>
<template> <template>
<div> <div ref="container" :class="containerClass">
<div <div
sticky top-0 z10 backdrop-blur sticky top-0 z10 backdrop-blur
pt="[env(safe-area-inset-top,0)]" pt="[env(safe-area-inset-top,0)]"