Add printing stylesheet, enables printing of text files

Currently printing will include the menu bar and longer text files will be cropped after the first page. This enables printing of text documents without any major styling changes, slightly adjusted margins and added table borders. This implements the CSS part of #112 Signed-off-by: Ferdinand Thiessen <[email protected]>
nextcloud · Sep 6, 2022 · 360a7a1 · 360a7a1
1 parent 96d504b
commit 360a7a1
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 2 deletions.
diff --git a/css/print.scss b/css/print.scss
@@ -0,0 +1,83 @@
+@media print {
+	@page {
+		size: A4;
+		margin: 2.5cm 2cm 2cm 2.5cm; 
+	}
+
+	// Hide sidebar if open
+	#app-sidebar-vue {
+		display: none;
+	}
+
+	// Hide Content behind modal
+	#content {
+		display: none;
+	}
+
+	#viewer {
+		// Hide top border
+		border: none;
+		width: 100%!important;
+		// NcModal uses fixed, which will be cropped when printed
+		position: absolute!important;
+
+		.modal-header {
+			// Hide modal header (close button)
+			display: none!important;
+		}
+		.modal-container {
+			// Make sure top aligned as we hided the menubar */
+			top: 0px;
+			height: fit-content;
+		}
+		.text-menubar {
+			// Hide menu bar
+			display: none;
+		}
+		.action-item {
+			// Hide table settings
+			display: none;
+		}
+		h1, h2, h3, h4, h5 {
+			// orphaned headlines are ugly
+			break-after: avoid;
+		}
+		.editor__content {
+			// Margins set by page rule
+			max-width: 100%;
+		}
+		#editor-wrapper {
+			height: fit-content;
+			position: unset;
+		}
+
+		.image, img, table {
+			// try no page breaks within tables or images
+			break-inside: avoid-page;
+			// Some more indention
+			max-width: 90%!important;
+			margin: 5vw auto 5vw 5%;
+		}
+
+		// Add some borders below header and between columns
+		th {
+			color: black;
+			font-weight: bold;
+			border-width: 0 1px 2px 0;
+			border-color: gray;
+			border-style: none solid solid none;
+		}
+		th:last-of-type {
+			border-width: 0 0 2px 0;
+		}
+
+		td {
+			border-style: none solid none none;
+			border-width: 1px;
+			border-color: gray;
+		}
+		td:last-of-type {
+			border: none;
+		}
+	} // #viewer
+}
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
@@ -3,7 +3,7 @@
   -
   - @author Julius Härtl <[email protected]>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -725,6 +725,7 @@ export default {
 
 <style lang="scss">
 	@import './../../css/style';
+	@import './../../css/print';
 
 	.text-editor__wrapper {
 		@import './../../css/prosemirror';

diff --git a/src/components/RichTextReader.vue b/src/components/RichTextReader.vue
@@ -3,7 +3,7 @@
   -
   - @author Julius Härtl <[email protected]>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -79,4 +79,5 @@ export default {
 
 <style lang="scss">
 	@import './../../css/prosemirror';
+	@import './../../css/print';
 </style>