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

fix layout

Browse Source
This commit is contained in:
Marco Crapts
2023-05-25 10:50:40 +02:00
parent 84376263c8
commit 6b7debc811
5 changed files with 80 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/App.vue
View File

@@ -7,7 +7,7 @@ import {
setClientKey,
passphraseRequired
} from '@/composables/useEncryption'
import { initializeSettings} from '@/composables/useSettings'
import { initializeSettings } from '@/composables/useSettings'
import { windowIsMobile } from '@/utils/helpers'
import SideBar from '@/components/SideBar.vue'
import firebase from 'firebase/compat/app'
@@ -56,24 +56,25 @@ provide('loading', loading)
:side-bar-collapsed="sideBarCollapsed"
@toggle-side-bar="sideBarCollapsed = !sideBarCollapsed"
/>
<!-- <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">
<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"
v-if="!sideBarCollapsed"
/>
<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"
v-if="!sideBarCollapsed"
/>
</Transition>
<main
class="transition[margin-left] z-10 mt-[50px] w-full border-x-[1px] bg-white px-10 py-6 duration-200 ease-out max-sm:px-4 max-sm:py-3"
class="transition[margin-left] z-10 mx-auto flex h-full w-full max-w-app flex-col overflow-y-auto border-x-[1px] bg-white px-10 py-6 duration-200 ease-out max-sm:px-4 max-sm:py-3"
:class="sideBarCollapsed ? 'ml-0' : 'sm:ml-sidebar'"
>
<Transition name="overlay">
<div
class="absolute bottom-0 left-0 right-0 top-0 bg-neutral-800 bg-opacity-60 transition-opacity duration-200 sm:hidden cursor-pointer z-40"
class="absolute bottom-0 left-0 right-0 top-0 z-40 cursor-pointer bg-neutral-800 bg-opacity-60 transition-opacity duration-200 sm:hidden"
@click="sideBarCollapsed = true"
v-if="!sideBarCollapsed"
/>
@@ -90,13 +91,57 @@ provide('loading', loading)
<Mindmap v-else-if="activeViewMode.name === 'Mindmap'" />
</template>
<SkeletonNote v-else />
<!-- <div>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
</div> -->
</main>
</div>
<Modal :open="passphraseRequired" :persistent="true">
<template #title>Enter your passphrase</template>
<template #default>
<p>
Your notes are encrypted. Please enter your encryption key passphrase to decrypt your cloud notes.
Your notes are encrypted. Please enter your encryption key passphrase to decrypt your cloud
notes.
</p>
<input type="password" class="input-bordered input mt-4 w-full" v-model="passphrase" />
</template>
@@ -114,4 +159,7 @@ provide('loading', loading)
.overlay-leave-to {
@apply opacity-0;
}
main {
contain: size layout style;
}
</style>