kai
b2af866cf0
Add persistent German/English switching, translated UI messages and English 12-hour times. Align desktop event actions while preserving mobile layouts and record bilingual project guidance. Include pending diary deletion exclusions. Validate both languages with nine tests.
96 lines
7.7 KiB
HTML
96 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="{{ language() }}">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>{{ _('Nachrichten · MetalCircle') }}</title>
|
||
<link rel="icon" type="image/png" href="/static/images/metalcircle-circle.png">
|
||
<link rel="stylesheet" href="/static/css/style.css">
|
||
<style>
|
||
.conversation-list { display: grid; gap: 10px; }
|
||
.conversation-card { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; }
|
||
.conversation-card:hover { border-color: var(--accent); }
|
||
.chat-avatar { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; object-fit: cover; background: #292524; display: grid; place-items: center; font-weight: 800; }
|
||
.conversation-copy { min-width: 0; flex: 1; }
|
||
.conversation-copy strong, .conversation-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.conversation-copy span { margin-top: 3px; color: var(--muted); font-size: .9rem; }
|
||
.unread-badge { min-width: 26px; padding: 3px 7px; color: #fff; background: #b91c1c; border-radius: 999px; text-align: center; font-weight: 800; }
|
||
.chat-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
|
||
.chat-header h1 { margin: 0; }
|
||
.chat-log { display: flex; flex-direction: column; gap: 9px; min-height: 260px; padding: 18px; background: #090909; border: 1px solid var(--border); border-radius: 15px; }
|
||
.chat-bubble { align-self: flex-start; max-width: min(76%, 650px); padding: 10px 13px; background: #262020; border-radius: 4px 13px 13px 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
|
||
.chat-bubble.mine { align-self: flex-end; background: #5f1515; border-radius: 13px 4px 13px 13px; }
|
||
.chat-time { display: block; margin-top: 5px; color: #a8a29e; font-size: .72rem; }
|
||
.chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 12px; max-width: none; }
|
||
.chat-form textarea { min-height: 76px; margin: 0; resize: vertical; }
|
||
.empty-chat { color: var(--muted); text-align: center; margin: auto; }
|
||
.message-notifications { margin-bottom: 24px; padding: 16px; background: rgba(69,10,10,.45); border: 1px solid #7f1d1d; border-radius: 14px; }
|
||
.message-notifications h2, .conversation-heading { margin: 0 0 12px; font-size: 1.15rem; }
|
||
.notification-row { display: flex; align-items: center; gap: 11px; padding: 11px; color: var(--text); border-top: 1px solid rgba(127,29,29,.55); }
|
||
a.notification-row:hover { background: rgba(127,29,29,.25); }
|
||
.notification-icon { flex: 0 0 auto; font-size: 1.35rem; }
|
||
.notification-row > span:nth-child(2) { min-width: 0; flex: 1; }
|
||
.notification-row small { display: block; margin-top: 3px; color: var(--muted); }
|
||
.notification-actions { display: flex; flex-wrap: wrap; gap: 6px; }
|
||
.notification-actions form { margin: 0; }
|
||
.notification-actions .button { padding: 7px 10px; font-size: .82rem; }
|
||
.notification-link { color: #fca5a5; white-space: nowrap; }
|
||
.conversation-heading { margin-top: 20px; }
|
||
@media (max-width: 600px) { .chat-form { grid-template-columns: 1fr; } .chat-bubble { max-width: 90%; } }
|
||
</style>
|
||
<link rel="stylesheet" href="/static/css/language.css">
|
||
</head>
|
||
<body>
|
||
<header><div class="header-inner"><a href="/" class="logo"><img class="brand-logo" src="/static/images/metalcircle-full.png" alt="MetalCircle"></a>{% include '_user_menu.html' %}</div> {% include '_language_switch.html' %}
|
||
</header>
|
||
<main>
|
||
{% if partner %}
|
||
<div class="chat-header">
|
||
{% if partner.avatar_path %}<img class="chat-avatar" src="{{ partner.avatar_path }}" alt="">{% else %}<span class="chat-avatar">{{ partner.display_name[:1] }}</span>{% endif %}
|
||
<div><h1>{{ partner.display_name }}</h1><a href="/users/{{ partner.username }}">@{{ partner.username }}</a></div>
|
||
</div>
|
||
<div class="chat-log">
|
||
{% for message in messages %}<div class="chat-bubble{% if message.from_me %} mine{% endif %}"{% if loop.last %} id="latest"{% endif %}>{{ message.body }}<span class="chat-time">{{ message.created_at }}</span></div>
|
||
{% else %}<p class="empty-chat">{{ _('Noch keine Nachrichten. Schreib die erste!') }}</p>{% endfor %}
|
||
</div>
|
||
<form class="chat-form" method="post" action="/messages/{{ partner.username }}">
|
||
<textarea name="body" maxlength="2000" required placeholder="{{ _('Nachricht schreiben …') }}" aria-label="{{ _('Nachricht') }}"></textarea>
|
||
<button class="button" type="submit">{{ _('Senden') }}</button>
|
||
</form>
|
||
<p><a class="button button-secondary" href="/messages">{{ _('← Alle Nachrichten') }}</a></p>
|
||
{% else %}
|
||
<div class="page-title"><h1>{{ _('🤘 Nachrichten') }}</h1><p>{{ _('Private Chats mit deinen Freunden.') }}</p></div>
|
||
{% if friend_requests or event_invitations %}
|
||
<section class="message-notifications">
|
||
<h2>{{ _('Neue Anfragen') }}</h2>
|
||
{% for request in friend_requests %}
|
||
<div class="notification-row">
|
||
<span class="notification-icon">🤝</span>
|
||
<span><strong>{{ request.display_name }}</strong> {{ _('möchte sich mit dir befreunden.') }}<small>{{ request.created_at }}</small></span>
|
||
<span class="notification-actions"><form method="post" action="/friendships/{{ request.id }}/accept"><input type="hidden" name="return_to" value="/messages"><button class="button" type="submit">{{ _('Annehmen') }}</button></form><form method="post" action="/friendships/{{ request.id }}/decline"><input type="hidden" name="return_to" value="/messages"><button class="button button-secondary" type="submit">{{ _('Ablehnen') }}</button></form></span>
|
||
</div>
|
||
{% endfor %}
|
||
{% for invitation in event_invitations %}
|
||
<a class="notification-row" href="/concerts/{{ invitation.concert_id }}">
|
||
<span class="notification-icon">✉️</span>
|
||
<span><strong>{{ invitation.artist }}</strong> {{ _('– Einladung von') }} {{ invitation.invited_by }}<small>{{ invitation.date }}</small></span>
|
||
<span class="notification-link">{{ _('Ansehen →') }}</span>
|
||
</a>
|
||
{% endfor %}
|
||
</section>
|
||
{% endif %}
|
||
<h2 class="conversation-heading">{{ _('Unterhaltungen') }}</h2>
|
||
<div class="conversation-list">
|
||
{% for conversation in conversations %}
|
||
<a class="conversation-card" href="/messages/{{ conversation.username }}">
|
||
{% if conversation.avatar_path %}<img class="chat-avatar" src="{{ conversation.avatar_path }}" alt="">{% else %}<span class="chat-avatar">{{ conversation.display_name[:1] }}</span>{% endif %}
|
||
<span class="conversation-copy"><strong>{{ conversation.display_name }}</strong><span>{% if conversation.last_message %}{% if conversation.last_from_me %}{{ _('Du:') }} {% endif %}{{ conversation.last_message }} · {{ conversation.last_at }}{% else %}{{ _('Chat beginnen') }}{% endif %}</span></span>
|
||
{% if conversation.unread_count %}<span class="unread-badge">{{ conversation.unread_count }}</span>{% endif %}
|
||
</a>
|
||
{% else %}<div class="empty"><h2>{{ _('Noch keine Chats') }}</h2><p>{{ _('Chats sind mit bestätigten Freunden und mit Admins verfügbar.') }}</p></div>{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
</main>
|
||
</body>
|
||
</html>
|