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>
<meta charset="UTF-8" />
<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>
</head>
<body>

10
src/App.vue
View File

@@ -13,6 +13,14 @@ const Mindmap = defineAsyncComponent(() => import('@/components/ViewModes/Mindma
const firebaseAuthUI =
firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
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>
<template>
@@ -20,7 +28,7 @@ provide('firebaseAuthUI', firebaseAuthUI)
:side-bar-collapsed="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
:view-modes="viewModes"
:active-view-mode="activeViewMode"

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

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

28
src/components/TopBar.vue
View File

@@ -11,6 +11,8 @@ const emit = defineEmits<{
toggleSideBar: []
}>()
const searchActive = ref(false)
const signOut = async (close: () => Promise<boolean>) => {
await firebaseSignOut()
close()
@@ -20,9 +22,15 @@ const authUI: any = inject('firebaseAuthUI')
const authModalInitialStateOpen = ref(authUI.isPendingRedirect())
</script>
<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="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
:side-bar-collapsed="props.sideBarCollapsed"
@toggle-side-bar="emit('toggleSideBar')"
@@ -35,16 +43,16 @@ const authModalInitialStateOpen = ref(authUI.isPendingRedirect())
</div>
<div class="flex h-full flex-grow flex-row items-center gap-2 pl-5 pr-3">
<template v-if="initialized">
<SearchBar />
<SearchBar @active="(active) => (searchActive = active)" />
<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)"
>
<i class="fas fa-plus-circle text-[1.1rem]" />
</button>
<Modal v-if="initialized && !user" :open="authModalInitialStateOpen">
<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 #title>Sign in</template>
<template #default="{ close }">
@@ -55,7 +63,7 @@ const authModalInitialStateOpen = ref(authUI.isPendingRedirect())
</template>
</Modal>
<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">
<i class="fa-fw fa-solid fa-user-gear" />
</label>
@@ -88,7 +96,7 @@ const authModalInitialStateOpen = ref(authUI.isPendingRedirect())
</div>
</div>
</template>
<style lang="css">
<style lang="scss">
#logo {
@apply cursor-pointer transition-all duration-200 hover:text-primary;
}
@@ -98,4 +106,10 @@ const authModalInitialStateOpen = ref(authUI.isPendingRedirect())
.btn-outline {
@apply hover:border-white hover:bg-white hover:text-primary focus-visible:outline-white;
}
.search-active {
.search-active-hide {
@apply max-sm:hidden;
}
}
</style>

7
src/style.scss
View File

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