Let postfach e-mails expand to full body
The unlinked-e-mail cards clipped the body to a preview height. Add a toggle to show the complete body inline and collapse it back. Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
+18
-1
@@ -60,7 +60,11 @@
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400 shrink-0"><%= e.email_date ? new Date(e.email_date).toLocaleString('de-DE') : '' %></span>
|
||||
</div>
|
||||
<p class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-1"><%= e.subject || '(kein Betreff)' %></p>
|
||||
<p class="whitespace-pre-wrap break-words text-sm leading-relaxed text-gray-700 dark:text-gray-300 max-h-40 overflow-hidden"><%= e.body_text || '' %></p>
|
||||
<p class="email-body whitespace-pre-wrap break-words text-sm leading-relaxed text-gray-700 dark:text-gray-300 max-h-40 overflow-hidden"><%= e.body_text || '' %></p>
|
||||
<% if (e.body_text && e.body_text.length > 600) { %>
|
||||
<button type="button" class="email-toggle text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 hover:underline mt-1"
|
||||
data-expanded="false">Vollständig anzeigen</button>
|
||||
<% } %>
|
||||
|
||||
<% if (e.anhaenge && e.anhaenge.length) { %>
|
||||
<div class="mt-2 flex flex-wrap gap-2">
|
||||
@@ -130,6 +134,19 @@
|
||||
});
|
||||
const cy = document.getElementById('currentYear');
|
||||
if (cy) cy.textContent = new Date().getFullYear();
|
||||
|
||||
// Expand/collapse the full e-mail body for each card.
|
||||
document.querySelectorAll('.email-toggle').forEach(function (btn) {
|
||||
btn.addEventListener('click', function () {
|
||||
var body = btn.previousElementSibling;
|
||||
if (!body || !body.classList.contains('email-body')) return;
|
||||
var expanded = btn.dataset.expanded === 'true';
|
||||
body.classList.toggle('max-h-40', expanded);
|
||||
body.classList.toggle('overflow-hidden', expanded);
|
||||
btn.dataset.expanded = expanded ? 'false' : 'true';
|
||||
btn.textContent = expanded ? 'Vollständig anzeigen' : 'Weniger anzeigen';
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user