ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 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
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; border-bottom-width: 0;
color: $colorBlack; color: $colorBlack;
background-color: $colorWhite; background-color: $colorWhite;
max-height: unquote("max(300px, 70vh)"); max-height: unquote("max(300px, 60vh)");
overflow: auto; overflow: auto;
scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
border: 3px solid $colorBlack; border: 3px solid $colorBlack;
} }

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

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

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

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

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

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