Cardoza_Construction/Prism-Notes-Main
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix layout: replace inline styles with Tailwind, enable audio playback in detail view, adjust spacing

Browse Source
This commit is contained in:
Golwhit
2025-12-29 21:02:37 -06:00
parent 119235f774
commit 497c29ce14
1 changed files with 32 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+32 -20
View File
@@ -18,9 +18,9 @@
} }
</script> </script>
</head> </head>
<body class="bg-gradient-to-br from-primary to-secondary p-4 sm:p-8 flex flex-col font-sans relative" style="height: 100vh; overflow: hidden;"> <body class="bg-gradient-to-br from-primary to-secondary p-4 sm:p-8 flex flex-col font-sans relative h-screen overflow-hidden">
<!-- Top-right display name --> <!-- Top-right display name -->
<div id="userDisplay" class="hidden fixed right-2 text-white text-xs font-semibold drop-shadow z-50" style="top: 5px;"> <div id="userDisplay" class="hidden fixed right-2 text-white text-xs font-semibold drop-shadow z-50 top-1">
<span id="userDisplayName"></span> <span id="userDisplayName"></span>
</div> </div>
@@ -52,7 +52,7 @@
</div> </div>
<!-- Notes List Container --> <!-- Notes List Container -->
<div id="notesListContainer" class="hidden flex flex-col bg-purple-100 rounded-2xl shadow-2xl border border-purple-200 max-w-5xl w-full p-6 gap-4" style="flex: 1; max-height: calc(100vh - 60px); overflow: hidden; margin-top: 10px;"> <div id="notesListContainer" class="hidden flex flex-col bg-purple-100 rounded-2xl shadow-2xl border border-purple-200 max-w-5xl w-full p-6 gap-4 flex-1 overflow-hidden mt-2.5 mb-3">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<div class="flex items-center justify-between gap-3"> <div class="flex items-center justify-between gap-3">
<div> <div>
@@ -78,12 +78,13 @@
<div class="flex-1 overflow-y-auto"> <div class="flex-1 overflow-y-auto">
<div id="notesListStatus" class="text-sm text-gray-600"></div> <div id="notesListStatus" class="text-sm text-gray-600"></div>
<div id="notesEmpty" class="hidden text-sm text-gray-500">No notes yet. Click New Note to create one.</div> <div id="notesEmpty" class="hidden text-sm text-gray-500">No notes yet. Click New Note to create one.</div>
<div id="notesGrid" class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3"></div> <div id="notesGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 w-full"></div>
</div> </div>
</div>
<!-- Note Detail Container --> <!-- Note Detail Container -->
<div id="noteDetailContainer" class="hidden self-start bg-white rounded-2xl shadow-2xl max-w-4xl w-full p-6 space-y-3 max-h-[calc(100vh-80px)] overflow-y-auto"> <div id="noteDetailContainer" class="hidden flex flex-col bg-white rounded-2xl shadow-2xl max-w-4xl w-full p-6 gap-3 overflow-hidden mt-2.5" style="max-height: calc(100vh - 140px);">
<div class="flex items-center justify-between"> <div class="flex-shrink-0 flex items-center justify-between">
<div> <div>
<div class="text-xs text-gray-500" id="noteDetailMeta"></div> <div class="text-xs text-gray-500" id="noteDetailMeta"></div>
<h2 id="noteDetailTitle" class="text-2xl font-bold text-gray-900">Note</h2> <h2 id="noteDetailTitle" class="text-2xl font-bold text-gray-900">Note</h2>
@@ -93,11 +94,13 @@
<button id="detailNewNoteBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">New Note</button> <button id="detailNewNoteBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">New Note</button>
</div> </div>
</div> </div>
<div class="text-gray-800 leading-relaxed whitespace-pre-wrap border border-gray-100 rounded-lg p-3 bg-gray-50" id="noteDetailBody"></div> <div class="min-h-0 overflow-y-auto">
<div class="space-y-2"> <div class="text-gray-800 leading-relaxed whitespace-pre-wrap border border-gray-100 rounded-lg p-3 bg-gray-50 mb-3" id="noteDetailBody"></div>
<div class="text-sm text-gray-600">Audio</div> <div class="space-y-2">
<audio id="noteDetailAudio" controls class="hidden w-full"></audio> <div class="text-sm text-gray-600">Audio</div>
<div id="noteDetailAudioStatus" class="text-xs text-gray-500"></div> <audio id="noteDetailAudio" controls class="hidden w-full"></audio>
<div id="noteDetailAudioStatus" class="text-xs text-gray-500"></div>
</div>
</div> </div>
</div> </div>
@@ -173,7 +176,7 @@
</button> </button>
<div class="flex-1"> <div class="flex-1">
<div class="h-2 bg-gray-200 rounded-full overflow-hidden cursor-pointer" id="progressTrack"> <div class="h-2 bg-gray-200 rounded-full overflow-hidden cursor-pointer" id="progressTrack">
<div id="progressFill" class="h-full bg-primary" style="width: 0%"></div> <div id="progressFill" class="h-full bg-primary w-0"></div>
</div> </div>
<div class="flex justify-between text-xs text-gray-600 mt-1"> <div class="flex justify-between text-xs text-gray-600 mt-1">
<span id="currentTime">0:00</span> <span id="currentTime">0:00</span>
@@ -1021,13 +1024,6 @@
document.getElementById('noteDetailContainer').classList.remove('hidden'); document.getElementById('noteDetailContainer').classList.remove('hidden');
document.getElementById('noteDetailTitle').textContent = note.title || 'Untitled'; document.getElementById('noteDetailTitle').textContent = note.title || 'Untitled';
document.getElementById('noteDetailType').textContent = note.type || 'personal';
document.getElementById('noteDetailJob').textContent = note.job_note ? 'Yes' : 'No';
const jobNumRow = document.getElementById('noteDetailJobNumberRow');
const showJobNumber = note.job_note && note.Job_Number;
document.getElementById('noteDetailJobNumber').textContent = showJobNumber ? note.Job_Number : '—';
jobNumRow.classList.toggle('hidden', !showJobNumber);
document.getElementById('noteDetailAuthor').textContent = note.Username || note.email || '(unknown)';
document.getElementById('noteDetailMeta').textContent = note.created ? `Created ${new Date(note.created).toLocaleString()}` : ''; document.getElementById('noteDetailMeta').textContent = note.created ? `Created ${new Date(note.created).toLocaleString()}` : '';
const body = note[NOTE_BODY_PLAIN_FIELD] || (note[NOTE_BODY_HTML_FIELD] ? htmlToPlainText(note[NOTE_BODY_HTML_FIELD]) : ''); const body = note[NOTE_BODY_PLAIN_FIELD] || (note[NOTE_BODY_HTML_FIELD] ? htmlToPlainText(note[NOTE_BODY_HTML_FIELD]) : '');
document.getElementById('noteDetailBody').textContent = body || '(empty)'; document.getElementById('noteDetailBody').textContent = body || '(empty)';
@@ -1036,7 +1032,23 @@
const audioStatus = document.getElementById('noteDetailAudioStatus'); const audioStatus = document.getElementById('noteDetailAudioStatus');
audioEl.classList.add('hidden'); audioEl.classList.add('hidden');
audioEl.src = ''; audioEl.src = '';
audioStatus.textContent = 'Attachments are hidden in detail view.'; audioStatus.textContent = 'Loading audio...';
try {
const atts = await pb.collection(ATTACHMENTS_COLLECTION).getList(1, 1, {
sort: '-created',
filter: `${ATTACHMENTS_PBID_FIELD} = "${note.id}"`,
});
if (atts.items.length) {
const att = atts.items[0];
audioEl.src = pb.files.getURL(att, att[ATTACHMENTS_FILE_FIELD]);
audioEl.classList.remove('hidden');
audioStatus.textContent = '';
} else {
audioStatus.textContent = 'No audio attached.';
}
} catch (e) {
audioStatus.textContent = `Audio load failed: ${e.message}`;
}
} }
document.getElementById('notesGrid').addEventListener('click', (e) => { document.getElementById('notesGrid').addEventListener('click', (e) => {