Merge pull request #2312 from nextcloud/fix/modal_height

Fix modal heights
nextcloud · Apr 19, 2022 · 6f5e192 · 6f5e192
2 parents dbe4406 + cbc0ec1
commit 6f5e192
Show file tree

Hide file tree

Showing 19 changed files with 36 additions and 42 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/HelpModal.vue b/src/components/HelpModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<Modal size="large"
+	<Modal size="normal"
 		:title="t('text', 'Formatting help')"
 		@close="$emit('close')">
 		<h2>{{ t('text', 'Formatting help') }}</h2>
@@ -204,26 +204,15 @@ export default {
 
 <style lang="scss" scoped>
 	::v-deep .modal-wrapper {
-		// TODO: can be removed once migrated to @nextcloud-vue >= 5.0
-		.prev, .next {
-			display: none !important;
-		}
-
 		.modal-container {
-			// TODO: can be removed once migrated to @nextcloud-vue >= 5.0
-			overflow: auto;
-			// Diverge from upstream modal styling
 			padding: 30px 40px 20px;
 			user-select: text;
 		}
 
-		// TODO: can be removed once migrated to @nextcloud-vue >= 5.0
-		// Make modal full screen on mobile
+		// Remove padding-right on mobile, screen might not be wide enough
 		@media only screen and (max-width: 512px) {
 			.modal-container {
-				position: absolute;
-				top: var(--header-height);
-				height: calc(100% - var(--header-height));
+				padding: 30px 0px 20px 40px;
 			}
 		}
 	}

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>