Druckansicht

views/routes/brief/body.gohtml

@@ -18,9 +18,18 @@
 			></a>
 		{{ end }}
 	</div>
+	<div class="self-end justify-self-end grow-0 print:hidden ml-4">
+		<a
+			href="?print=true"
+			class="text-gray-700 hover:text-slate-900 cursor-pointer"
+			hx-boost="false"
+			target="_blank">
+			<i class="ri-printer-line"></i>
+		</a>
+	</div>
 </div>
 
-<div class="text flex flex-row">
+<div class="text flex flex-row print:flex-col">
 	{{- Safe (ParseGeneric .text.Content) -}}
 </div>
 
@@ -29,51 +38,6 @@
 </div>
 
 <script type="module">
-	function alignSidenotes() {
-		const text = document.querySelector(".text");
-		if (!text) return;
-		const notes = text.querySelectorAll(".note-sidenote-meta,.note-hand,.page");
-
-		// Only do margin notes if wide enough and not printing
-		// if (window.innerWidth < 900 || window.matchMedia("print").matches) return;
-		// Reset all notes for fallback
-		notes.forEach((note) => {
-			note.classList.remove("margin-note");
-			note.style.top = "";
-		});
-
-		notes.forEach((note) => {
-			const noteId = note.id;
-			if (!noteId) return;
-			const anchor = text.querySelector(
-				`.sidenote[aria-describedby="${noteId}"], .hand[aria-describedby="${noteId}"],
-				.eanchor-page[aria-describedby="${noteId}"]`,
-			);
-			if (!anchor) return;
-
-			console.log(anchor);
-			// Mark as margin note
-			note.classList.add("margin-note");
-			// Position: relative to .text
-			const textRect = text.getBoundingClientRect();
-			const anchorRect = anchor.getBoundingClientRect();
-			// Get scroll offset for window
-			const top = anchorRect.top - textRect.top;
-			note.style.top = `${top}px`;
-		});
-	}
-
-	// Run on load, resize, and before/after print
-	alignSidenotes();
-	window.addEventListener("resize", alignSidenotes);
-	window.addEventListener("scroll", alignSidenotes); // If container is scrollable
-
-	// Revert to fallback for print, reapply after
-	window.matchMedia("print").addEventListener("change", (e) => {
-		if (e.matches) {
-			alignSidenotes(); // fallback mode (will un-absolute)
-		} else {
-			setTimeout(alignSidenotes, 100); // recalc after print closes
-		}
-	});
+	import { Letter } from "/assets/scripts.js";
+	Letter();
 </script>