114 lines
9.3 KiB
HTML
114 lines
9.3 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; }
|
||
body.chat-page { display: flex; flex-direction: column; width: 100%; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
|
||
body.chat-page > header { position: relative; flex: 0 0 auto; }
|
||
.chat-main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; flex: 1 1 auto; width: 100%; min-height: 0; overflow: hidden; padding: 8px 20px max(8px, env(safe-area-inset-bottom)); }
|
||
.chat-header { display: flex; align-items: center; min-width: 0; gap: 9px; margin: 0; }
|
||
.chat-header h1 { overflow: hidden; margin: 0; font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }
|
||
.chat-partner-copy { min-width: 0; flex: 1 1 auto; }
|
||
.chat-partner-copy a { display: block; overflow: hidden; color: var(--muted); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
|
||
.chat-header .chat-avatar { width: 38px; height: 38px; flex-basis: 38px; }
|
||
.chat-back { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; }
|
||
.chat-log { display: flex; flex-direction: column; gap: 9px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px; 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; align-items: end; gap: 8px; margin: 0; max-width: none; }
|
||
.chat-form textarea { height: 46px; min-height: 46px; max-height: 96px; margin: 0; overflow-y: auto; resize: none; }
|
||
.chat-form .button { min-height: 44px; }
|
||
.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-main { padding: 6px 12px max(6px, env(safe-area-inset-bottom)); }
|
||
.chat-log { padding: 10px; }
|
||
.chat-form { grid-template-columns: minmax(0, 1fr) auto; }
|
||
.chat-form textarea { width: 100%; }
|
||
.chat-bubble { max-width: 90%; }
|
||
}
|
||
</style>
|
||
<link rel="stylesheet" href="/static/css/language.css">
|
||
</head>
|
||
<body class="{% if partner %}chat-page{% endif %}">
|
||
<header><div class="header-inner"><a href="/" class="logo"><img class="brand-logo" src="/static/images/metalcircle-full.png" alt="MetalCircle"></a>{% include '_header_controls.html' %}</div>
|
||
</header>
|
||
<main class="{% if partner %}chat-main{% endif %}">
|
||
{% 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 class="chat-partner-copy"><h1>{{ partner.display_name }}</h1><a href="/users/{{ partner.username }}">@{{ partner.username }}</a></div>
|
||
<a class="button button-secondary chat-back" href="/messages" aria-label="{{ _('← Alle Nachrichten') }}" title="{{ _('← Alle Nachrichten') }}">←</a>
|
||
</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>
|
||
{% 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>
|
||
{% if partner %}<script>
|
||
const chatLog = document.querySelector('.chat-log');
|
||
if (chatLog) chatLog.scrollTop = chatLog.scrollHeight;
|
||
</script>{% endif %}
|
||
</body>
|
||
</html>
|