fix(anhaenge): Anhang-Bereich ruhiger und im Stil der Eingabefelder

Die beiden Texte steckten in .form-hint -- eine spaetere Regel fuer den
SSO-Login macht daraus einen umrandeten Kasten in Primaerfarbe. Fuer eine
Warnung ist das richtig, fuer eine Bildunterschrift viel zu laut. Eigene
leise Klasse statt dessen.

"Datei hinzufuegen" sieht jetzt aus wie die Textfelder darueber: gleicher
Grund, Rahmen, Radius und Innenabstand, nur linksbuendig und in der
gedaempften Textfarbe.

Der Leerzustand "Keine Anhaenge" faellt weg -- die Erinnerungsliste macht
es genauso, und die Zeile unter dem Knopf sagt ohnehin, was hier hin kann.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-09-14 10:47:16 +02:00
co-authored by Claude Opus 5
parent a1f15e33aa
commit cd6a4698aa
4 changed files with 24 additions and 11 deletions
+20 -1
View File
@@ -399,7 +399,26 @@ a { color: var(--primary); text-decoration: none; }
.ev-reminder-before { color: var(--text-3); font-size: 12px; } .ev-reminder-before { color: var(--text-3); font-size: 12px; }
/* ── Attachments ─────────────────────────────────────── */ /* ── Attachments ─────────────────────────────────────── */
.ev-attach-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; } .ev-attach-list:not(:empty) { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
/* Looks like the text inputs above it rather than a button: same ground,
border, radius and padding, just left-aligned and in the muted text colour.
NOT .form-hint for the caption below — a later rule turns that class into a
bordered callout box, which is right for a warning and far too loud here. */
.ev-attach-add {
display: block; width: 100%; text-align: left;
background: var(--bg-app);
border: 1px solid var(--border);
border-radius: 8px;
padding: 11px 14px;
color: var(--text-2);
font-size: 14px; font-family: inherit;
cursor: pointer; outline: none;
transition: border-color var(--transition), color var(--transition);
}
.ev-attach-add:hover:not(:disabled) { border-color: var(--text-3); color: var(--text-1); }
.ev-attach-add:focus-visible { border-color: var(--primary); }
.ev-attach-add:disabled { opacity: .5; cursor: default; }
.ev-attach-hint { font-size: 11px; color: var(--text-3); margin-top: 6px; }
.ev-attach-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; .ev-attach-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px;
border: 1px solid var(--border); border-radius: 8px; } border: 1px solid var(--border); border-radius: 8px; }
.ev-attach-row:hover { background: var(--hover-highlight); } .ev-attach-row:hover { background: var(--hover-highlight); }
+2 -2
View File
@@ -400,8 +400,8 @@
<div class="form-group" id="ev-attachments-group" style="display:none"> <div class="form-group" id="ev-attachments-group" style="display:none">
<label data-i18n="attachments">Anhänge</label> <label data-i18n="attachments">Anhänge</label>
<div id="ev-attachments-list" class="ev-attach-list"></div> <div id="ev-attachments-list" class="ev-attach-list"></div>
<button type="button" class="btn btn-ghost btn-sm" id="ev-attachment-add" data-i18n="attachment_add">Datei hinzufügen</button> <button type="button" class="ev-attach-add" id="ev-attachment-add" data-i18n="attachment_add">Datei hinzufügen</button>
<div class="form-hint" data-i18n="attachment_hint">Max. 10 MB pro Datei, 10 Dateien. PDF, Bilder, Text.</div> <div class="ev-attach-hint" data-i18n="attachment_hint">Max. 10 MB pro Datei, 10 Dateien. PDF, Bilder, Text.</div>
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
+2 -6
View File
@@ -2355,12 +2355,8 @@ function renderAttachmentRows() {
const existing = (state.eventAttachments || []).filter(a => !removed.includes(a.id)); const existing = (state.eventAttachments || []).filter(a => !removed.includes(a.id));
const pending = state.pendingAttachments || []; const pending = state.pendingAttachments || [];
if (!existing.length && !pending.length) { // Nothing when empty — the reminders list does the same, and the caption
const empty = document.createElement('div'); // under the button already says what can go here.
empty.className = 'form-hint';
empty.textContent = t('attachment_none');
list.appendChild(empty);
}
existing.forEach(a => list.appendChild(attachmentRow({ existing.forEach(a => list.appendChild(attachmentRow({
name: a.filename, size: a.size_bytes, contentType: a.content_type, name: a.filename, size: a.size_bytes, contentType: a.content_type,
thumbId: a.has_thumb ? a.id : null, thumbId: a.has_thumb ? a.id : null,
-2
View File
@@ -176,7 +176,6 @@ const translations = {
attachments: 'Anhänge', attachments: 'Anhänge',
attachment_add: 'Datei hinzufügen', attachment_add: 'Datei hinzufügen',
attachment_hint: 'Max. 10 MB pro Datei, 10 Dateien. PDF, Bilder, Text.', attachment_hint: 'Max. 10 MB pro Datei, 10 Dateien. PDF, Bilder, Text.',
attachment_none: 'Keine Anhänge',
attachment_uploading: 'Wird hochgeladen …', attachment_uploading: 'Wird hochgeladen …',
attachment_deleted: 'Anhang gelöscht', attachment_deleted: 'Anhang gelöscht',
attachment_delete_confirm: "Anhang „{name}“ löschen?", attachment_delete_confirm: "Anhang „{name}“ löschen?",
@@ -1003,7 +1002,6 @@ const translations = {
attachments: 'Attachments', attachments: 'Attachments',
attachment_add: 'Add file', attachment_add: 'Add file',
attachment_hint: 'Max. 10 MB per file, 10 files. PDF, images, text.', attachment_hint: 'Max. 10 MB per file, 10 files. PDF, images, text.',
attachment_none: 'No attachments',
attachment_uploading: 'Uploading …', attachment_uploading: 'Uploading …',
attachment_deleted: 'Attachment deleted', attachment_deleted: 'Attachment deleted',
attachment_delete_confirm: "Delete attachment “{name}”?", attachment_delete_confirm: "Delete attachment “{name}”?",