diff --git a/app/static/css/language.css b/app/static/css/language.css index 99a74fd..9d515de 100644 --- a/app/static/css/language.css +++ b/app/static/css/language.css @@ -1,26 +1,32 @@ /* Persistent language choice, also available before login. */ .language-switch { display: flex; - justify-content: flex-end; - gap: 4px; - max-width: 1100px; - margin: 8px auto 0; - padding: 0 20px; + align-items: center; + justify-content: center; + flex: 0 0 auto; + margin: 0; + padding: 0; } .language-switch a { display: inline-flex; align-items: center; justify-content: center; - min-width: 44px; - min-height: 44px; + width: 38px; + height: 36px; border: 1px solid var(--border, #30363d); - border-radius: 6px; + border-radius: 8px; color: var(--text, #222); - font-weight: 700; + font-family: system-ui, sans-serif; + font-size: 1.2rem; + line-height: 1; text-decoration: none; } .language-switch a.active { background: #922525; color: #fff; border-color: #c74747; } .language-switch a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } -.header-actions .language-switch { margin: 0; padding: 0; } - -.detail-topbar .language-switch { margin: 0 0 0 auto; padding: 0; } +.language-switch a:hover { background: #7f1d1d; } +.header-controls { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; } +.header-controls .user-menu { margin-left: 0; } +.header-inner > .language-switch { margin-left: auto; } +.header-actions > .header-controls { flex: 0 0 auto; } +.detail-topbar > .header-controls { flex: 0 0 auto; } +.registration-header { display: flex; justify-content: flex-end; margin: -36px 0 12px; } diff --git a/app/static/css/style.css b/app/static/css/style.css index 7c17e4b..f6953da 100644 --- a/app/static/css/style.css +++ b/app/static/css/style.css @@ -50,7 +50,7 @@ body > header { .header-inner { max-width: 1100px; margin: 0 auto; - padding: 18px 20px; + padding: 8px 20px; display: flex; align-items: center; @@ -227,9 +227,13 @@ main { @media (max-width: 600px) { .header-inner { - padding: 15px; + padding: 7px 12px; } + .logo { max-width: 130px; } + .brand-logo { width: 130px !important; max-width: 130px !important; height: 40px !important; max-height: 40px !important; } + .header-controls .user-menu summary { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + main { padding: 22px 15px 80px; } @@ -244,8 +248,7 @@ main { .header-actions { width: 100%; justify-content: flex-start; } .header-actions > a { flex: 1 1 auto; text-align: center; } - .header-actions .user-menu { margin-left: 0; } - .header-actions .user-menu-panel { left: 0; right: auto; max-width: calc(100vw - 30px); } + .header-actions > .header-controls { margin-left: auto; } } form { max-width: 650px; diff --git a/app/templates/_header_controls.html b/app/templates/_header_controls.html new file mode 100644 index 0000000..a718863 --- /dev/null +++ b/app/templates/_header_controls.html @@ -0,0 +1,4 @@ +
+ {% include '_language_switch.html' %} + {% include '_user_menu.html' %} +
diff --git a/app/templates/_language_switch.html b/app/templates/_language_switch.html index f43297d..343b99c 100644 --- a/app/templates/_language_switch.html +++ b/app/templates/_language_switch.html @@ -1,4 +1,4 @@ diff --git a/app/templates/account_link.html b/app/templates/account_link.html index 57bb2f1..7cf42b5 100644 --- a/app/templates/account_link.html +++ b/app/templates/account_link.html @@ -1,6 +1,6 @@ {{ _('Account-Link · MetalCircle') }} -
{% include '_user_menu.html' %}
{% include '_language_switch.html' %} +
{% include '_header_controls.html' %}

{{ _('Passwort zurücksetzen') }}

{{ _('Reset-Link für @') }}{{ target_username }} · {{ target_email }}

{{ _('Diesen persönlichen Link sicher an den User senden. Er ist zwei Stunden gültig und nur einmal verwendbar.') }}

{{ _('Zurück') }}

diff --git a/app/templates/admin_patches.html b/app/templates/admin_patches.html index 3ced3e0..d24bfcf 100644 --- a/app/templates/admin_patches.html +++ b/app/templates/admin_patches.html @@ -21,7 +21,7 @@ -
{% include '_user_menu.html' %}
{% include '_language_switch.html' %} +
{% include '_header_controls.html' %}

{{ _('🧵 Patch-Bilder') }}

{{ _('Grafiken für die Patches auf der virtuellen Kutte verwalten.') }}

diff --git a/app/templates/admin_statistics.html b/app/templates/admin_statistics.html index 6f8eae8..d1dc65c 100644 --- a/app/templates/admin_statistics.html +++ b/app/templates/admin_statistics.html @@ -1,6 +1,6 @@ {{ _('Nutzungsstatistik · MetalCircle') }} -
{% include '_user_menu.html' %}
{% include '_language_switch.html' %} +
{% include '_header_controls.html' %}

{{ _('📊 Nutzungsstatistik') }}

{{ _('Aktuelle Gesamtzahlen der Plattform.') }}

{% set admin_section = 'statistics' %}{% include '_admin_nav.html' %}
diff --git a/app/templates/admin_users.html b/app/templates/admin_users.html index f32a934..7a14e18 100644 --- a/app/templates/admin_users.html +++ b/app/templates/admin_users.html @@ -19,7 +19,7 @@ -
{% include '_user_menu.html' %}
{% include '_language_switch.html' %} +
{% include '_header_controls.html' %}

{{ _('⚙️ Verwaltung') }}

{{ _('Benutzerkonten und Einladungen verwalten.') }}

diff --git a/app/templates/admin_venues.html b/app/templates/admin_venues.html index ab1bcfb..4fa47fa 100644 --- a/app/templates/admin_venues.html +++ b/app/templates/admin_venues.html @@ -31,7 +31,7 @@ -
{% include '_user_menu.html' %}
{% include '_language_switch.html' %} +
{% include '_header_controls.html' %}

{{ _('📍 Veranstaltungsorte') }}

{{ _('Orte korrigieren, bestätigen, zusammenführen oder entfernen.') }}

diff --git a/app/templates/bug_report.html b/app/templates/bug_report.html index 83948bb..5a8ac7c 100644 --- a/app/templates/bug_report.html +++ b/app/templates/bug_report.html @@ -11,8 +11,8 @@
- {% include '_user_menu.html' %} -
{% include '_language_switch.html' %}
+ {% include '_header_controls.html' %} +

{{ _('🐛 Bug melden') }}

{{ _('Hilf uns, MetalCircle zu verbessern.') }}

diff --git a/app/templates/concert_detail.html b/app/templates/concert_detail.html index 57bac73..1301004 100644 --- a/app/templates/concert_detail.html +++ b/app/templates/concert_detail.html @@ -44,8 +44,7 @@
{{ _('← Zurück zum Kalender') }} - {% include '_language_switch.html' %} - {% include '_user_menu.html' %} + {% include '_header_controls.html' %}
diff --git a/app/templates/datenschutz.html b/app/templates/datenschutz.html index 0415784..461e0d3 100644 --- a/app/templates/datenschutz.html +++ b/app/templates/datenschutz.html @@ -3,7 +3,7 @@ {{ _('Datenschutz · MetalCircle') }} -
{% include '_language_switch.html' %} +
{% include '_language_switch.html' %}

{{ _('Datenschutz') }}

{{ _('Hinweise zur Verarbeitung deiner Daten') }}

diff --git a/app/templates/diary.html b/app/templates/diary.html index 50856bc..9fa200f 100644 --- a/app/templates/diary.html +++ b/app/templates/diary.html @@ -11,7 +11,7 @@ -
{% include '_user_menu.html' %}
{% include '_language_switch.html' %} +
{% include '_header_controls.html' %}

{{ _('📓 Konzerttagebuch') }}

{{ _('Besuchte Konzerte werden automatisch eingetragen. Deine Erinnerungen bleiben privat.') }}

diff --git a/app/templates/edit_concert.html b/app/templates/edit_concert.html index 1fb7d61..495a75d 100644 --- a/app/templates/edit_concert.html +++ b/app/templates/edit_concert.html @@ -12,9 +12,8 @@
- {% include '_user_menu.html' %} + {% include '_header_controls.html' %}
- {% include '_language_switch.html' %}
diff --git a/app/templates/following.html b/app/templates/following.html index 75eaca4..06d63a3 100644 --- a/app/templates/following.html +++ b/app/templates/following.html @@ -1,7 +1,7 @@ {{ _('Gefolgt · MetalCircle') }} -
{% include '_user_menu.html' %}
{% include '_language_switch.html' %} +
{% include '_header_controls.html' %}

{{ _('⭐ Gefolgt') }}

{{ _('Bands, Locations, Personen und passende kommende Veranstaltungen.') }}

diff --git a/app/templates/login.html b/app/templates/login.html index 5e3895c..83d8181 100644 --- a/app/templates/login.html +++ b/app/templates/login.html @@ -12,8 +12,8 @@
+ {% include '_language_switch.html' %}
- {% include '_language_switch.html' %}
diff --git a/app/templates/messages.html b/app/templates/messages.html index 399fe80..aa8dd6c 100644 --- a/app/templates/messages.html +++ b/app/templates/messages.html @@ -15,14 +15,22 @@ .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; } + 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; gap: 10px; margin-top: 12px; max-width: none; } - .chat-form textarea { min-height: 76px; margin: 0; resize: vertical; } + .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; } @@ -36,18 +44,25 @@ .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%; } } + @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%; } + } - -
{% include '_user_menu.html' %}
{% include '_language_switch.html' %} + +
{% include '_header_controls.html' %}
-
+
{% if partner %}
{% if partner.avatar_path %}{% else %}{{ partner.display_name[:1] }}{% endif %} -

{{ partner.display_name }}

@{{ partner.username }}
+

{{ partner.display_name }}

@{{ partner.username }}
+ ←
{% for message in messages %}
{{ message.body }}{{ message.created_at }}
@@ -57,7 +72,6 @@ -

{{ _('← Alle Nachrichten') }}

{% else %}

{{ _('🤘 Nachrichten') }}

{{ _('Private Chats mit deinen Freunden.') }}

{% if friend_requests or event_invitations %} @@ -91,5 +105,9 @@
{% endif %}
+{% if partner %}{% endif %} diff --git a/app/templates/new_concert.html b/app/templates/new_concert.html index 57579bb..7110e08 100644 --- a/app/templates/new_concert.html +++ b/app/templates/new_concert.html @@ -85,11 +85,10 @@ - {% include '_user_menu.html' %} + {% include '_header_controls.html' %}
- {% include '_language_switch.html' %}
diff --git a/app/templates/password_reset.html b/app/templates/password_reset.html index 8491921..80eaae9 100644 --- a/app/templates/password_reset.html +++ b/app/templates/password_reset.html @@ -1,6 +1,6 @@ {{ _('Passwort zurücksetzen · MetalCircle') }} -
{% include '_language_switch.html' %} +
{% include '_language_switch.html' %}

{{ _('Passwort zurücksetzen') }}

{% if error %}

{{ error | t }}

{% endif %}


diff --git a/app/templates/profile.html b/app/templates/profile.html index 4577057..88cffe2 100644 --- a/app/templates/profile.html +++ b/app/templates/profile.html @@ -76,9 +76,8 @@
- {% include '_user_menu.html' %} + {% include '_header_controls.html' %}
- {% include '_language_switch.html' %}
diff --git a/app/templates/register.html b/app/templates/register.html index 1c02514..a7ac671 100644 --- a/app/templates/register.html +++ b/app/templates/register.html @@ -32,7 +32,7 @@ - {% include '_language_switch.html' %} +
{% include '_language_switch.html' %}

MetalCircle