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

UI refinements: center containers, compact cards, improve attachment icons

Browse Source
This commit is contained in:
aewing
2026-01-10 22:13:08 +00:00
parent 1d3d42d670
commit a168fe2b7c
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+11 -11
View File
@@ -18,7 +18,7 @@
}
</script>
</head>
<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">
<body class="bg-gradient-to-br from-primary to-secondary p-4 sm:p-8 flex flex-col items-center justify-center font-sans relative h-screen overflow-hidden">
<!-- Top-right display name -->
<div id="userDisplay" class="hidden fixed right-2 text-white text-xs font-semibold drop-shadow z-50 top-1">
<span id="userDisplayName"></span>
@@ -87,7 +87,7 @@
<div class="flex-1 overflow-y-auto">
<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="notesGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 w-full"></div>
<div id="notesGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 w-full"></div>
</div>
</div>
@@ -119,7 +119,7 @@
</div>
<!-- Note + Audio Container -->
<div id="noteContainer" class="hidden self-start bg-white rounded-2xl shadow-2xl max-w-xl w-full p-8 space-y-6">
<div id="noteContainer" class="hidden self-center bg-white rounded-2xl shadow-2xl max-w-xl w-full p-8 space-y-6">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-2">
<button id="backToListBtn" class="px-3 py-2 rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Notes</button>
@@ -242,12 +242,12 @@
<div class="flex-1 overflow-y-auto">
<div id="conversationsListStatus" class="text-sm text-gray-600"></div>
<div id="conversationsEmpty" class="hidden text-sm text-gray-500">No conversations yet. Click New Conversation to start one.</div>
<div id="conversationsGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 w-full"></div>
<div id="conversationsGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 w-full"></div>
</div>
</div>
<!-- Conversation Form Container -->
<div id="conversationContainer" class="hidden self-start bg-white rounded-2xl shadow-2xl max-w-xl w-full p-8 space-y-6">
<div id="conversationContainer" class="hidden self-center bg-white rounded-2xl shadow-2xl max-w-xl w-full p-8 space-y-6">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-2">
<button id="backToConversationsListBtn" class="px-3 py-2 rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Conversations</button>
@@ -1318,7 +1318,7 @@
manager: 'bg-orange-200 border border-orange-400 hover:border-orange-500',
job: 'bg-pink-200 border border-pink-400 hover:border-pink-500',
}[type] || 'bg-gray-100 border border-gray-300 hover:border-primary/60';
card.className = `text-left ${typeClasses} hover:shadow-md transition rounded-xl p-5 sm:p-6 space-y-3 h-full flex flex-col`;
card.className = `text-left ${typeClasses} hover:shadow-md transition rounded-xl px-2 py-0.5 space-y-0 h-full flex flex-col`;
const title = note.title || 'Untitled';
const plain = note[NOTE_BODY_PLAIN_FIELD] || (note[NOTE_BODY_HTML_FIELD] ? htmlToPlainText(note[NOTE_BODY_HTML_FIELD]) : '');
const snippet = (plain || '').slice(0, 160) + ((plain && plain.length > 160) ? '…' : '');
@@ -1327,12 +1327,12 @@
const typeSet = buildKindSetFromAttachments(atts);
function iconBtnHtml(kind) {
const map = {
image: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M4.5 6A1.5 1.5 0 0 1 6 4.5h12A1.5 1.5 0 0 1 19.5 6v12a1.5 1.5 0 0 1-1.5 1.5H6A1.5 1.5 0 0 1 4.5 18V6Zm2 10l3.75-5 3 4 2.25-3 3 4.5H6.5Z"/></svg>',
video: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M4 6.75A1.75 1.75 0 0 1 5.75 5h7.5A1.75 1.75 0 0 1 15 6.75v10.5A1.75 1.75 0 0 1 13.25 19h-7.5A1.75 1.75 0 0 1 4 17.25V6.75Zm12.5.5 3.75 2.25v5l-3.75 2.25V7.25Z"/></svg>',
audio: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M9 5.25a.75.75 0 0 1 .75-.75h.5A3.75 3.75 0 0 1 14 8.25v6a3.75 3.75 0 0 1-3.75 3.75h-.5A.75.75 0 0 1 9 17.25V5.25Zm7.75 3a.75.75 0 0 1 1.25.57v5.36a.75.75 0 0 1-1.25.57l-2.5-1.79a.75.75 0 0 1 0-1.21l2.5-1.5Z"/></svg>',
file: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M6.75 3A1.75 1.75 0 0 0 5 4.75v14.5A1.75 1.75 0 0 0 6.75 21h10.5A1.75 1.75 0 0 0 19 19.25V8.5l-5.5-5.5H6.75Z"/></svg>',
image: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>',
video: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>',
audio: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 3.89a9 9 0 0 1 0 12.22M18.5 8.5a5 5 0 0 1 0 7"/></svg>',
file: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>',
};
return `<button type="button" class="px-1.5 py-1 rounded bg-white/70 hover:bg-white border border-gray-200 text-purple-700" data-attachment-button data-attachment-kind="${kind}">${map[kind] || ''}</button>`;
return `<button type="button" class="p-0.5 sm:p-1 rounded hover:bg-gray-200 text-gray-700 transition flex-shrink-0" data-attachment-button data-attachment-kind="${kind}" title="${kind}" style="width:24px;height:24px;min-width:24px;display:flex;align-items:center;justify-content:center;">${map[kind] || ''}</button>`;
}
const attachmentIcons = ['image', 'video', 'file', 'audio']
.filter((k) => typeSet.has(k))