johan
/
docsys
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Document page: two-row layout - details|summary+notes top, OCR|PDF bottom

This commit is contained in:
James 2026-02-10 04:14:51 -05:00
parent 6adfefff7a
commit 1b49dac87f
1 changed files with 109 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
templates/document.html
View File

@ -49,17 +49,14 @@
</div> </div>
</div> </div>
<!-- Row 1: Details (left) | Summary + Notes (right) — equal height -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Left Column: Details --> <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden flex flex-col">
<div class="space-y-6">
<!-- Metadata Card -->
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700"> <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700">
<h2 class="font-semibold text-gray-900 dark:text-white">Details</h2> <h2 class="font-semibold text-gray-900 dark:text-white">Details</h2>
</div> </div>
<div class="p-6"> <div class="p-6 flex-1">
<div class="grid grid-cols-2 gap-x-8 gap-y-4"> <div class="grid grid-cols-2 gap-x-8 gap-y-4">
<!-- Left column -->
<dl class="space-y-4"> <dl class="space-y-4">
<div> <div>
<dt class="text-sm text-gray-500 dark:text-gray-400">Category</dt> <dt class="text-sm text-gray-500 dark:text-gray-400">Category</dt>
@ -85,7 +82,6 @@
</div> </div>
{{end}} {{end}}
</dl> </dl>
<!-- Right column -->
<dl class="space-y-4"> <dl class="space-y-4">
{{if .Document.Date}} {{if .Document.Date}}
<div> <div>
@ -110,24 +106,19 @@
</div> </div>
</div> </div>
<!-- Summary --> <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden flex flex-col">
{{if .Document.Summary}} {{if .Document.Summary}}
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700"> <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700">
<h2 class="font-semibold text-gray-900 dark:text-white">Summary</h2> <h2 class="font-semibold text-gray-900 dark:text-white">Summary</h2>
</div> </div>
<div class="p-6"> <div class="p-6 border-b border-gray-100 dark:border-gray-700">
<p class="text-gray-700 dark:text-gray-300 whitespace-pre-wrap">{{.Document.Summary}}</p> <p class="text-gray-700 dark:text-gray-300 whitespace-pre-wrap">{{.Document.Summary}}</p>
</div> </div>
</div>
{{end}} {{end}}
<!-- Notes -->
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700"> <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700">
<h2 class="font-semibold text-gray-900 dark:text-white">Notes</h2> <h2 class="font-semibold text-gray-900 dark:text-white">Notes</h2>
</div> </div>
<div class="p-6"> <div class="p-6 flex-1">
{{if .Document.Notes}} {{if .Document.Notes}}
<p class="text-gray-700 dark:text-gray-300 whitespace-pre-wrap">{{.Document.Notes}}</p> <p class="text-gray-700 dark:text-gray-300 whitespace-pre-wrap">{{.Document.Notes}}</p>
{{else}} {{else}}
@ -135,49 +126,45 @@
{{end}} {{end}}
</div> </div>
</div> </div>
</div>
<!-- Full Text --> <!-- Row 2: OCR Text (left) | PDF Viewer (right) -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
{{if .Document.FullText}} {{if .Document.FullText}}
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden"> <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700 flex items-center justify-between"> <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700 flex items-center justify-between">
<h2 class="font-semibold text-gray-900 dark:text-white">OCR Text</h2> <h2 class="font-semibold text-gray-900 dark:text-white">OCR Text</h2>
<button onclick="copyText()" class="text-sm text-brand-600 dark:text-brand-400 hover:underline">Copy</button> <button onclick="copyText()" class="text-sm text-brand-600 dark:text-brand-400 hover:underline">Copy</button>
</div> </div>
<div class="p-6 max-h-96 overflow-auto"> <div class="p-6 max-h-[700px] overflow-auto">
<div id="ocr-text" class="text-sm text-gray-700 dark:text-gray-300 prose dark:prose-invert max-w-none">{{.Document.FullText | safe}}</div> <div id="ocr-text" class="text-sm text-gray-700 dark:text-gray-300 prose dark:prose-invert max-w-none">{{.Document.FullText | safe}}</div>
<script> <script>
// Simple markdown rendering
(function() { (function() {
const el = document.getElementById('ocr-text'); const el = document.getElementById('ocr-text');
let md = el.textContent; let md = el.textContent;
// Headers
md = md.replace(/^### (.+)$/gm, '<h4 class="font-semibold mt-4 mb-2">$1</h4>'); md = md.replace(/^### (.+)$/gm, '<h4 class="font-semibold mt-4 mb-2">$1</h4>');
md = md.replace(/^## (.+)$/gm, '<h3 class="font-semibold text-lg mt-4 mb-2">$1</h3>'); md = md.replace(/^## (.+)$/gm, '<h3 class="font-semibold text-lg mt-4 mb-2">$1</h3>');
// Bold
md = md.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>'); md = md.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
// Tables (simple)
md = md.replace(/\|(.+)\|/g, function(match) { md = md.replace(/\|(.+)\|/g, function(match) {
const cells = match.split('|').filter(c => c.trim()); const cells = match.split('|').filter(c => c.trim());
return '<tr>' + cells.map(c => '<td class="border px-2 py-1">' + c.trim() + '</td>').join('') + '</tr>'; return '<tr>' + cells.map(c => '<td class="border px-2 py-1">' + c.trim() + '</td>').join('') + '</tr>';
}); });
md = md.replace(/(<tr>.*<\/tr>\n?)+/g, '<table class="border-collapse border my-2">$&</table>'); md = md.replace(/(<tr>.*<\/tr>\n?)+/g, '<table class="border-collapse border my-2">$&</table>');
// Bullets
md = md.replace(/^- (.+)$/gm, '<li>$1</li>'); md = md.replace(/^- (.+)$/gm, '<li>$1</li>');
md = md.replace(/(<li>.*<\/li>\n?)+/g, '<ul class="list-disc ml-4 my-2">$&</ul>'); md = md.replace(/(<li>.*<\/li>\n?)+/g, '<ul class="list-disc ml-4 my-2">$&</ul>');
// Line breaks
md = md.replace(/\n/g, '<br>'); md = md.replace(/\n/g, '<br>');
el.innerHTML = md; el.innerHTML = md;
})(); })();
</script> </script>
</div> </div>
</div> </div>
{{else}}
<div></div>
{{end}} {{end}}
</div>
<!-- Right Column: PDF Viewer -->
<div> <div>
{{if .Document.PDFPath}} {{if .Document.PDFPath}}
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden sticky top-6"> <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700 flex items-center justify-between"> <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700 flex items-center justify-between">
<h2 class="font-semibold text-gray-900 dark:text-white">Document Preview</h2> <h2 class="font-semibold text-gray-900 dark:text-white">Document Preview</h2>
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">