marco/contexted-v3
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 1 Releases Wiki Activity

fix jumpy safari

Browse Source
This commit is contained in:
Marco Crapts
2023-05-21 13:28:02 +02:00
parent b7c38a8b2a
commit 7eeedd0eeb
5 changed files with 41 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="/favicon-dark.ico" /> <link rel="icon" type="image/x-icon" href="/favicon-dark.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover,maximum-scale=1.0,user-scalable=no" />
<title>Contexted</title> <title>Contexted</title>
</head> </head>
<body> <body>

10
src/App.vue
View File

@@ -13,6 +13,14 @@ const Mindmap = defineAsyncComponent(() => import('@/components/ViewModes/Mindma
const firebaseAuthUI = const firebaseAuthUI =
firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth()) firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
provide('firebaseAuthUI', firebaseAuthUI) provide('firebaseAuthUI', firebaseAuthUI)
// const setMinHeight = () => {
// const app = document.querySelector('#app')
// app?.setAttribute('style', `min-height: ${window.innerHeight}px`)
// }
// const handleResize = useDebounceFn(() => setMinHeight(), 100, { maxWait: 100 })
// window.addEventListener('resize', handleResize)
// setMinHeight()
</script> </script>
<template> <template>
@@ -20,7 +28,7 @@ provide('firebaseAuthUI', firebaseAuthUI)
:side-bar-collapsed="sideBarCollapsed" :side-bar-collapsed="sideBarCollapsed"
@toggle-side-bar="sideBarCollapsed = !sideBarCollapsed" @toggle-side-bar="sideBarCollapsed = !sideBarCollapsed"
/> />
<div class="mx-auto flex min-h-full w-full max-w-app flex-grow"> <div class="mx-auto flex w-full max-w-app flex-grow">
<SideBar <SideBar
:view-modes="viewModes" :view-modes="viewModes"
:active-view-mode="activeViewMode" :active-view-mode="activeViewMode"

5
src/components/Search/SearchBar.vue
View File

@@ -1,12 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { notes, findNotes, setActiveNote } from '@/composables/useNotes' import { notes, findNotes, setActiveNote } from '@/composables/useNotes'
const emit = defineEmits<{
active: [active: boolean]
}>()
const active = ref(false) const active = ref(false)
watch(active, () => { watch(active, () => {
if (!active.value) { if (!active.value) {
query.value = '' query.value = ''
activeResult.value = undefined activeResult.value = undefined
} }
emit('active', active.value)
}) })
const query = ref('') const query = ref('')

28
src/components/TopBar.vue
View File

@@ -11,6 +11,8 @@ const emit = defineEmits<{
toggleSideBar: [] toggleSideBar: []
}>() }>()
const searchActive = ref(false)
const signOut = async (close: () => Promise<boolean>) => { const signOut = async (close: () => Promise<boolean>) => {
await firebaseSignOut() await firebaseSignOut()
close() close()
@@ -20,9 +22,15 @@ const authUI: any = inject('firebaseAuthUI')
const authModalInitialStateOpen = ref(authUI.isPendingRedirect()) const authModalInitialStateOpen = ref(authUI.isPendingRedirect())
</script> </script>
<template> <template>
<div class="fixed left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary"> <div
class="fixed left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary"
:class="searchActive && 'search-active'"
>
<div class="mx-auto flex w-full max-w-app items-center py-2.5 text-white"> <div class="mx-auto flex w-full max-w-app items-center py-2.5 text-white">
<div class="flex items-center pl-3" :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'"> <div
class="flex items-center pl-3 search-active-hide"
:class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'"
>
<Hamburger <Hamburger
:side-bar-collapsed="props.sideBarCollapsed" :side-bar-collapsed="props.sideBarCollapsed"
@toggle-side-bar="emit('toggleSideBar')" @toggle-side-bar="emit('toggleSideBar')"
@@ -35,16 +43,16 @@ const authModalInitialStateOpen = ref(authUI.isPendingRedirect())
</div> </div>
<div class="flex h-full flex-grow flex-row items-center gap-2 pl-5 pr-3"> <div class="flex h-full flex-grow flex-row items-center gap-2 pl-5 pr-3">
<template v-if="initialized"> <template v-if="initialized">
<SearchBar /> <SearchBar @active="(active) => (searchActive = active)" />
<button <button
class="btn-outline btn-sm btn py-1 text-white" class="btn-outline btn-sm btn py-1 text-white search-active-hide"
@click="addNote('Untitled new note', '', true)" @click="addNote('Untitled new note', '', true)"
> >
<i class="fas fa-plus-circle text-[1.1rem]" /> <i class="fas fa-plus-circle text-[1.1rem]" />
</button> </button>
<Modal v-if="initialized && !user" :open="authModalInitialStateOpen"> <Modal v-if="initialized && !user" :open="authModalInitialStateOpen">
<template #activator="{ open }"> <template #activator="{ open }">
<button class="btn-outline btn-sm btn py-1 text-white" @click="open">Sign in</button> <button class="btn-outline btn-sm btn py-1 text-white search-active-hide" @click="open">Sign in</button>
</template> </template>
<template #title>Sign in</template> <template #title>Sign in</template>
<template #default="{ close }"> <template #default="{ close }">
@@ -55,7 +63,7 @@ const authModalInitialStateOpen = ref(authUI.isPendingRedirect())
</template> </template>
</Modal> </Modal>
<template v-else-if="user"> <template v-else-if="user">
<div class="dropdown-end dropdown"> <div class="dropdown-end dropdown search-active-hide">
<label tabindex="0" class="btn-outline btn-sm btn py-1 text-white"> <label tabindex="0" class="btn-outline btn-sm btn py-1 text-white">
<i class="fa-fw fa-solid fa-user-gear" /> <i class="fa-fw fa-solid fa-user-gear" />
</label> </label>
@@ -88,7 +96,7 @@ const authModalInitialStateOpen = ref(authUI.isPendingRedirect())
</div> </div>
</div> </div>
</template> </template>
<style lang="css"> <style lang="scss">
#logo { #logo {
@apply cursor-pointer transition-all duration-200 hover:text-primary; @apply cursor-pointer transition-all duration-200 hover:text-primary;
} }
@@ -98,4 +106,10 @@ const authModalInitialStateOpen = ref(authUI.isPendingRedirect())
.btn-outline { .btn-outline {
@apply hover:border-white hover:bg-white hover:text-primary focus-visible:outline-white; @apply hover:border-white hover:bg-white hover:text-primary focus-visible:outline-white;
} }
.search-active {
.search-active-hide {
@apply max-sm:hidden;
}
}
</style> </style>

7
src/style.scss
View File

@@ -5,11 +5,14 @@
@import '@fontsource/source-sans-pro/300'; @import '@fontsource/source-sans-pro/300';
html { html {
height: 100%; height: fill-available;
height: -webkit-fill-available;
} }
body { body {
min-height: 100%; min-height: 100vh;
min-height: fill-available;
min-height: -webkit-fill-available;
font-family: 'Source Sans Pro', sans-serif; font-family: 'Source Sans Pro', sans-serif;
overflow-y: scroll; overflow-y: scroll;
@apply flex flex-col bg-gray-100; @apply flex flex-col bg-gray-100;