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 e11438c952
commit 0c4c7782e0
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> <title>Contexted</title>
</head> </head>
<body> <body>
<div id="app" class="bg-gray-100"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

6
src/App.vue
View File

@@ -9,7 +9,7 @@ const sideBarCollapsed = ref(false)
:side-bar-collapsed="sideBarCollapsed" :side-bar-collapsed="sideBarCollapsed"
@toggle-side-bar="sideBarCollapsed = !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 <SideBar
:view-modes="viewModes" :view-modes="viewModes"
:active-view-mode="activeViewMode" :active-view-mode="activeViewMode"
@@ -17,14 +17,14 @@ const sideBarCollapsed = ref(false)
class="mt-[50px] px-3 py-6" class="mt-[50px] px-3 py-6"
/> />
<main <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'" :class="sideBarCollapsed ? 'ml-0' : 'ml-sidebar'"
> >
<Note <Note
v-if="activeNote" v-if="activeNote"
:key="activeNote.id" :key="activeNote.id"
:note="activeNote" :note="activeNote"
class="w-full" class=""
@update="(note) => updateNote(note.id, note)" @update="(note) => updateNote(note.id, note)"
/> />
</main> </main>

4
src/components/Note.vue
View File

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

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

@@ -163,7 +163,7 @@ const createLink = (link: string) => {
<template> <template>
<div class="relative" ref="editorElement"> <div class="relative" ref="editorElement">
<CKEditor <CKEditor
class="flex-grow text-[110%] font-light" class="w-full flex-grow text-[110%] font-light"
:editor="editor" :editor="editor"
v-model="editorData" v-model="editorData"
:config="editorConfig" :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? Are you sure you want to set this note as root note?
</template> </template>
<template #actions="{ close }"> <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)"> <button class="btn-primary btn-sm btn mr-1" @click="emit('setRoot', close)">
Set current note as root Set current note as root
</button> </button>
<button class="btn-sm btn" @click="close">Close</button>
</template> </template>
</Modal> </Modal>
</div> </div>

2
src/components/SideBar.vue
View File

@@ -13,7 +13,7 @@ const emit = defineEmits<{
<template> <template>
<div <div
id="sidebar" 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> <SideBarMenu>
<template #header>Root note</template> <template #header>Root note</template>

4
src/components/TopBar.vue
View File

@@ -9,8 +9,8 @@ const emit = defineEmits<{
}>() }>()
</script> </script>
<template> <template>
<div class="absolute 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">
<div class="w-in mx-auto flex w-full max-w-app items-center py-2.5 text-white"> <div class="mx-auto flex w-full max-w-app items-center py-2.5 text-white">
<div <div
class="flex items-center pl-3" class="flex items-center pl-3"
:class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-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';
@import '@fontsource/source-sans-pro/300'; @import '@fontsource/source-sans-pro/300';
body,
body > div,
html { html {
height: 100%; height: 100%;
} }
body { body {
min-height: 100%;
font-family: 'Source Sans Pro', sans-serif; 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 { .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}'], content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: { theme: {
extend: { extend: {
colors: {
primary: '#1e4bc4',
secondary: 'red',
},
colors: { colors: {
primary: '#1e4bc4', primary: '#1e4bc4',
secondary: colors.gray[500], secondary: colors.gray[500],