mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-11-27 23:15:15 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

improve scrollable containers

Browse Source
This commit is contained in:
Philipp Kühn 2021-02-04 22:10:08 +01:00
parent 74a9cb90ec
commit ea16c713a4
4 changed files with 27 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/src/components/Demo/style.scss
View File

@ -8,9 +8,9 @@
border-bottom-width: 0;
color: $colorBlack;
background-color: $colorWhite;
max-height: unquote("max(300px, 70vh)");
max-height: unquote("max(300px, 60vh)");
overflow: auto;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
border: 3px solid $colorBlack;
}

6
docs/src/components/DemoContent/index.vue
View File

@ -1,8 +1,6 @@
<template>
<div v-if="mainFile">
<component :is="mainFile" v-if="mode === 'vue'" />
<react-renderer :component="mainFile" v-if="mode === 'react'" />
</div>
<component :is="mainFile" v-if="mainFile && mode === 'vue'" />
<react-renderer :component="mainFile" v-else-if="mainFile && mode === 'react'" />
</template>
<script>

45
docs/src/demos/Examples/CollaborativeEditing/index.vue
View File

@ -1,22 +1,20 @@
<template>
<div>
<div class="editor" v-if="editor">
<menu-bar class="editor__menu" :editor="editor" />
<editor-content class="editor__content" :editor="editor" />
<div class="editor__bottom-bar">
<div :class="`editor__status editor__status--${status}`">
<template v-if="status === 'connected'">
{{ users.length }} user{{ users.length === 1 ? '' : 's' }} online
</template>
<template v-else>
offline
</template>
</div>
<div class="editor__name">
<button @click="setName">
{{ currentUser.name }}
</button>
</div>
<div class="editor" v-if="editor">
<menu-bar class="editor__menu" :editor="editor" />
<editor-content class="editor__content" :editor="editor" />
<div class="editor__bottom-bar">
<div :class="`editor__status editor__status--${status}`">
<template v-if="status === 'connected'">
{{ users.length }} user{{ users.length === 1 ? '' : 's' }} online
</template>
<template v-else>
offline
</template>
</div>
<div class="editor__name">
<button @click="setName">
{{ currentUser.name }}
</button>
</div>
</div>
</div>
@ -141,6 +139,9 @@ export default {
<style lang="scss" scoped>
.editor {
display: flex;
flex-direction: column;
max-height: 90vh;
color: black;
background-color: white;
border: 1px solid rgba(black, 0.1);
@ -148,6 +149,7 @@ export default {
&__menu {
display: flex;
flex: 0 0 auto;
flex-wrap: wrap;
padding: 0.25rem;
border-bottom: 1px solid rgba(black, 0.1);
@ -155,18 +157,15 @@ export default {
&__content {
padding: 1rem;
max-height: 25rem;
flex: 1 1 auto;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar-thumb {
background-color: rgba(black, 0.1);
}
}
&__bottom-bar {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;

2
docs/src/layouts/App/prism.scss
View File

@ -46,7 +46,7 @@ pre[class*="language-"] {
background: $codeBackground;
padding: 1.25rem !important;
border-radius: 0.75rem;
max-height: unquote("max(300px, 70vh)");
max-height: unquote("max(300px, 60vh)");
&::-webkit-scrollbar-thumb {
background-color: rgba($colorWhite, 0.2);