diff options
| author | Julius Härtl <jus@bitgrid.net> | 2019-11-18 16:07:18 +0300 |
|---|---|---|
| committer | Julius Härtl <jus@bitgrid.net> | 2019-11-18 16:07:18 +0300 |
| commit | a669c37a2e7ec51fa626f35af1f56c04b329f7f2 (patch) | |
| tree | e06e4501ec9d39fcf5e555e0004200cce362fa5c /src | |
| parent | d9e5efbf47a666d4982dcc38800609eb5827854d (diff) | |
Only show partial content of unfocused workspace on mobile
Signed-off-by: Julius Härtl <jus@bitgrid.net>
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/EditorWrapper.vue | 8 | ||||
| -rw-r--r-- | src/views/RichWorkspace.vue | 27 |
2 files changed, 32 insertions, 3 deletions
diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue index f68b0de69..5c8cf17e3 100644 --- a/src/components/EditorWrapper.vue +++ b/src/components/EditorWrapper.vue @@ -46,7 +46,7 @@ </SessionList> </div> </MenuBar> - <div class="editor__content"> + <div> <MenuBubble v-if="!readOnly && isRichEditor" :editor="tiptap" /> <EditorContent v-show="initialLoading" class="editor__content" @@ -316,6 +316,12 @@ export default { enableRichEditing: this.isRichEditor, languages, }) + this.tiptap.on('focus', () => { + this.$emit('focus') + }) + this.tiptap.on('blur', () => { + this.$emit('blur') + }) this.syncService.state = this.tiptap.state }) }) diff --git a/src/views/RichWorkspace.vue b/src/views/RichWorkspace.vue index 76f997786..5de4a105b 100644 --- a/src/views/RichWorkspace.vue +++ b/src/views/RichWorkspace.vue @@ -21,7 +21,7 @@ --> <template> - <div id="rich-workspace" :class="{'icon-loading': !loaded || !ready }"> + <div id="rich-workspace" :class="{'icon-loading': !loaded || !ready, 'focus': focus }"> <div v-if="!file || (autofocus && !ready)" class="empty-workspace" @click="createNew"> <p class="placeholder"> {{ t('text', 'Add notes, lists or links …') }} @@ -38,7 +38,9 @@ :autohide="true" :mime="file.mimetype" :autofocus="autofocus" - @ready="ready=true" /> + @ready="ready=true" + @focus="focus=true" + @blur="focus=false" /> </div> </template> @@ -62,6 +64,7 @@ export default { }, data() { return { + focus: false, file: null, loaded: false, ready: false, @@ -158,4 +161,24 @@ export default { #rich-workspace::v-deep .editor__content { margin: 0; } + + @media only screen and (max-width: 1024px) { + #rich-workspace:not(.focus) { + max-height: 30vh; + position: relative; + overflow: hidden; + } + #rich-workspace:not(.focus):not(.icon-loading):after { + content: ''; + position: absolute; + z-index: 1; + bottom: 0; + left: 0; + pointer-events: none; + background-image: linear-gradient(to bottom, rgba(0,0,0, 0), var(--color-main-background)); + width: 100%; + height: 4em; + } + } + </style> |