fix iphone padding

This commit is contained in:
Marco Crapts
2023-06-01 21:31:18 +02:00
parent 2f4c4aa7fd
commit 8fe704744f
3 changed files with 38 additions and 8 deletions

View File

@@ -51,24 +51,35 @@ const submitPassphrase = (close: () => void) => {
if (passphraseValid.value) close()
}
const loading = computed(() => notes.value.length === 0 || passphraseRequired.value || !activeNotesSource.value)
const loading = computed(
() => notes.value.length === 0 || passphraseRequired.value || !activeNotesSource.value
)
provide('loading', loading)
const topBarHeight = 52
const topBarHeightWithSafeArea = computed(() => `calc(${topBarHeight}px + var(--safe-area-top))`)
</script>
<template>
<TopBar
:side-bar-collapsed="sideBarCollapsed"
:height="topBarHeight"
:style="{ height: topBarHeightWithSafeArea }"
@toggle-side-bar="sideBarCollapsed = !sideBarCollapsed"
class="pe-[var(--safe-area-right)] ps-[var(--safe-area-left)]"
/>
<!-- <div class="absolute bottom-0 left-0 right-0 top-[50px] mx-auto flex flex-grow"> -->
<div class="mx-auto flex w-full max-w-app flex-grow">
<div
class="mx-auto flex w-full max-w-app flex-grow pe-[var(--safe-area-right)] ps-[var(--safe-area-left)]"
>
<Transition name="sidebar">
<SideBar
:view-modes="viewModes"
:active-view-mode="activeViewMode"
@set-view-mode="(viewMode) => (activeViewMode = viewMode)"
@collapse="(collapse) => (sideBarCollapsed = collapse)"
class="mt-[50px] bg-gray-100 px-3 py-6 transition-[width] delay-200 duration-0 max-sm:z-50 max-sm:border-x-[1px] max-sm:py-3 max-sm:transition-transform max-sm:delay-0 max-sm:duration-200"
class="bg-gray-100 px-3 py-6 transition-[width] delay-200 duration-0 max-sm:z-50 max-sm:border-x-[1px] max-sm:py-3 max-sm:transition-transform max-sm:delay-0 max-sm:duration-200"
:style="{ 'margin-top': topBarHeightWithSafeArea }"
v-if="!sideBarCollapsed"
/>
</Transition>