Fix height of editor-wrapper in viewer modal on mobile

On mobile, `#modal-container` already has `top: 50px`, so no need to add another `top: 50px` in `#editor-container` in that case. Also, remove `top` property from `#editor-container` in EditorWrapper and RichWorkspace altogether. The correct place to set `top` to fit with the header bar from a modal is ViewerComponent. Fixes: #2203 Fixes: #2295 Signed-off-by: Jonas <jonas@freesources.org>
nextcloud · Apr 19, 2022 · 65e24be · 65e24be
1 parent 0e6b85a
commit 65e24be
Show file tree

Hide file tree

Showing 18 changed files with 33 additions and 28 deletions.
diff --git a/js/editor-collab.js b/js/editor-collab.js
diff --git a/js/editor-collab.js.map b/js/editor-collab.js.map
diff --git a/js/editor-rich.js b/js/editor-rich.js
diff --git a/js/editor-rich.js.map b/js/editor-rich.js.map
diff --git a/js/editor.js b/js/editor.js
diff --git a/js/editor.js.map b/js/editor.js.map
diff --git a/js/files-modal.js b/js/files-modal.js
diff --git a/js/files-modal.js.map b/js/files-modal.js.map
diff --git a/js/text-files.js b/js/text-files.js
diff --git a/js/text-files.js.map b/js/text-files.js.map
diff --git a/js/text-public.js b/js/text-public.js
diff --git a/js/text-public.js.map b/js/text-public.js.map
diff --git a/js/text-text.js b/js/text-text.js
diff --git a/js/text-text.js.map b/js/text-text.js.map
diff --git a/js/text-viewer.js b/js/text-viewer.js
diff --git a/js/text-viewer.js.map b/js/text-viewer.js.map
diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue
@@ -632,7 +632,6 @@ export default {
 		max-width: 100%;
 		height: 100%;
 		left: 0;
-		top: 50px;
 		margin: 0 auto;
 		position: relative;
 		background-color: var(--color-main-background);

diff --git a/src/components/ViewerComponent.vue b/src/components/ViewerComponent.vue
@@ -69,9 +69,15 @@ export default {
 	},
 }
 </script>
-<style>
+<style lang="scss">
 #editor-container {
-	height: calc(100% - 50px);
-	top: 50px;
+	top: var(--header-height);
+}
+
+@media only screen and (max-width: 512px) {
+	// on mobile, modal-container has top: 50px
+	#editor-container {
+		top: auto;
+	}
 }
 </style>