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>

2
src/components/Note/NoteEditor.vue
View File

@@ -159,7 +159,7 @@ const createLink = (link: string) => {
}
</script>
<template>
<div class="relative" ref="editorElement">
<div class="relative overflow-x-hidden" ref="editorElement">
<CKEditor
class="w-full flex-grow text-[110%] font-light"
:editor="editor"

2
src/components/TopBar.vue
View File

@@ -20,7 +20,7 @@ const authModalInitialStateOpen = ref<boolean>(authUI.isPendingRedirect())
</script>
<template>
<div
class="fixed left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary"
class="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">

2
src/components/ViewModes/Note.vue
View File

@@ -42,7 +42,7 @@ const setRoot = async (closeModal: () => Promise<Boolean>) => {
}
</script>
<template>
<div class="flex h-full flex-col">
<div class="flex flex-grow flex-col">
<NoteToolbar :note="props.note" @delete="del" @set-root="setRoot">
<template #title>
<i

23
src/style.scss
View File

@@ -5,17 +5,28 @@
@import '@fontsource/source-sans-pro/300';
html {
height: -webkit-fill-available;
// height: -webkit-fill-available;
height: 100%;
width: 100%;
}
body {
min-height: 100vh;
min-height: -webkit-fill-available;
// min-height: 100vh;
// min-height: -webkit-fill-available;
height: 100%;
min-height: 100%;
width: 100%;
max-width: 100%;
position: fixed;
transform: translateZ(0);
touch-action: manipulation;
-webkit-user-drag: none;
-ms-content-zooming: none;
font-family: 'Source Sans Pro', sans-serif;
overflow-y: scroll;
// overflow-y: scroll;
@apply flex flex-col bg-gray-100;
#app {
@apply flex flex-grow flex-col;
@apply absolute bottom-0 left-0 right-0 top-0 flex flex-grow flex-col overflow-hidden;
}
}
@@ -45,7 +56,7 @@ p:last-child {
@apply cursor-pointer font-semibold text-primary hover:bg-gray-200;
}
&.ck.ck-editor__editable_inline > * {
margin: 0!important;
margin: 0 !important;
}
ol,
ul {