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

improve scrolling / layout

Browse Source
This commit is contained in:
Marco Crapts
2023-05-17 07:24:26 +02:00
parent 6c52785597
commit 22017f3e8b
9 changed files with 17 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -7,7 +7,7 @@
<title>Contexted</title>
</head>
<body>
<div id="app" class="bg-gray-100"></div>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

6
src/App.vue
View File

@@ -9,7 +9,7 @@ const sideBarCollapsed = ref(false)
:side-bar-collapsed="sideBarCollapsed"
@toggle-side-bar="sideBarCollapsed = !sideBarCollapsed"
/>
<div class="relative mx-auto flex h-full max-w-app">
<div class="mx-auto flex min-h-full w-full max-w-app flex-grow">
<SideBar
:view-modes="viewModes"
:active-view-mode="activeViewMode"
@@ -17,14 +17,14 @@ const sideBarCollapsed = ref(false)
class="mt-[50px] px-3 py-6"
/>
<main
class="transition[margin-left] absolute bottom-0 left-0 right-0 top-[50px] flex overflow-hidden border-x-[1px] bg-white px-10 py-6 duration-200 ease-out"
class="transition[margin-left] z-10 mt-[50px] w-full border-x-[1px] bg-white px-10 py-6 duration-200 ease-out"
:class="sideBarCollapsed ? 'ml-0' : 'ml-sidebar'"
>
<Note
v-if="activeNote"
:key="activeNote.id"
:note="activeNote"
class="w-full"
class=""
@update="(note) => updateNote(note.id, note)"
/>
</main>

4
src/components/Note.vue
View File

@@ -52,7 +52,7 @@ const setRoot = async (closeModal: () => Promise<Boolean>) => {
}
</script>
<template>
<div class="flex flex-col">
<div class="flex flex-col h-full">
<NoteToolbar :note="props.note" @delete="del" @set-root="setRoot">
<template #title>
<i
@@ -67,7 +67,7 @@ const setRoot = async (closeModal: () => Promise<Boolean>) => {
</template>
</NoteToolbar>
<NoteEditor
class="flex-grow overflow-auto"
class="flex-grow"
:note="activeNote"
@update="updateNoteContent"
v-if="activeNote"

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

@@ -163,7 +163,7 @@ const createLink = (link: string) => {
<template>
<div class="relative" ref="editorElement">
<CKEditor
class="flex-grow text-[110%] font-light"
class="w-full flex-grow text-[110%] font-light"
:editor="editor"
v-model="editorData"
:config="editorConfig"

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

@@ -39,10 +39,10 @@ const emit = defineEmits<{
Are you sure you want to set this note as root note?
</template>
<template #actions="{ close }">
<button class="btn-sm btn" @click="close">Close</button>
<button class="btn-primary btn-sm btn mr-1" @click="emit('setRoot', close)">
Set current note as root
</button>
<button class="btn-sm btn" @click="close">Close</button>
</template>
</Modal>
</div>

2
src/components/SideBar.vue
View File

@@ -13,7 +13,7 @@ const emit = defineEmits<{
<template>
<div
id="sidebar"
class="relative flex w-sidebar flex-col gap-4 overflow-y-auto px-2 py-3 text-[90%]"
class="fixed top-0 flex w-sidebar flex-col gap-4 overflow-y-auto px-2 py-3 text-[90%]"
>
<SideBarMenu>
<template #header>Root note</template>

4
src/components/TopBar.vue
View File

@@ -9,8 +9,8 @@ const emit = defineEmits<{
}>()
</script>
<template>
<div class="absolute left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
<div class="w-in mx-auto flex w-full max-w-app items-center py-2.5 text-white">
<div class="fixed left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
<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'"

9
src/style.scss
View File

@@ -4,15 +4,18 @@
@import '@fontsource/source-sans-pro';
@import '@fontsource/source-sans-pro/300';
body,
body > div,
html {
height: 100%;
}
body {
min-height: 100%;
font-family: 'Source Sans Pro', sans-serif;
overflow-y: auto;
overflow-y: scroll;
@apply flex flex-col bg-gray-100;
#app {
@apply flex flex-grow flex-col;
}
}
.btn {

4
tailwind.config.js → tailwind.config.ts
View File

@@ -7,10 +7,6 @@ export default {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
primary: '#1e4bc4',
secondary: 'red',
},
colors: {
primary: '#1e4bc4',
secondary: colors.gray[500],