Add polished language switcher and multilingual language-test page

This commit is contained in:
MandelBot
2026-03-16 06:44:50 +00:00
parent e97be736b7
commit b3aacdd8fa
4 changed files with 89 additions and 5 deletions

View File

@@ -0,0 +1,40 @@
{% load i18n %}
<!doctype html>
<html lang="{{ LANGUAGE_CODE }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% trans "Language Test" %}</title>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin: 0; background: #f4f7fb; color: #0f172a; }
.wrap { max-width: 860px; margin: 48px auto; padding: 0 20px; }
.card { background: #fff; border: 1px solid #dbe3ef; border-radius: 14px; padding: 24px; box-shadow: 0 6px 20px rgba(12, 34, 81, .08); }
h1 { margin: 0 0 12px; font-size: 1.8rem; }
p { margin: 0 0 16px; color: #334155; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.lang-link { display: block; padding: 10px 12px; border: 1px solid #c7d4e9; border-radius: 10px; text-decoration: none; color: #1e3a8a; background: #f8fbff; font-weight: 600; }
.lang-link.active { border-color: #2563eb; background: #eaf2ff; color: #1d4ed8; }
.back { margin-top: 18px; display: inline-block; color: #334155; text-decoration: none; }
</style>
</head>
<body>
<div class="wrap">
<div class="card">
<h1>{% trans "Language Switch Test Page" %}</h1>
<p>{% blocktrans %}Current language code: {{ current_language }}{% endblocktrans %}</p>
<div class="grid">
{% for code, name in languages %}
{% language code %}
<a class="lang-link {% if current_language|slice::2 == code|slice::2 %}active{% endif %}" href="{% url language_test %}">
{{ code|upper }} - {{ name }}
</a>
{% endlanguage %}
{% endfor %}
</div>
<a class="back" href="/">{% trans "Back to homepage" %}</a>
</div>
</div>
</body>
</html>

View File

@@ -1,14 +1,42 @@
{% load i18n %}
<style>
.ms-lang-switcher { display: inline-flex; align-items: center; }
.ms-lang-switcher .form-select {
border-radius: 999px;
border: 1px solid #c7d4e9;
background: #ffffff;
color: #0f172a;
font-size: 0.82rem;
font-weight: 600;
line-height: 1.1;
padding: 0.36rem 1.85rem 0.36rem 0.8rem;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.ms-lang-switcher .form-select:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.18);
}
.ms-lang-switcher-link {
font-size: 0.74rem;
color: #64748b;
text-decoration: none;
margin-right: 0.5rem;
}
.ms-lang-switcher-link:hover { color: #1d4ed8; }
</style>
<div class="header-right">
<form action="{% url 'set_language' %}" method="post" class="language-switcher-form d-inline-flex align-items-center me-2" aria-label="Language switcher">
<a class="ms-lang-switcher-link" href="{% url language_test %}" title="Language test">LANG</a>
<form action="{% url set_language %}" method="post" class="ms-lang-switcher me-2" aria-label="Language switcher">
{% csrf_token %}
<input name="next" type="hidden" value="{{ request.get_full_path }}">
<label for="header-language-switcher" class="visually-hidden">{% trans "Language" %}</label>
<select id="header-language-switcher" name="language" class="form-select form-select-sm" style="width:auto; min-width:84px;" onchange="this.form.submit()">
<select id="header-language-switcher" name="language" class="form-select form-select-sm" onchange="this.form.submit()">
{% get_current_language as LANGUAGE_CODE %}
{% get_available_languages as LANGUAGES %}
{% for code, name in LANGUAGES %}
<option value="{{ code }}" {% if code == LANGUAGE_CODE %}selected{% endif %}>{{ code|upper }}</option>
{% if code in nl,en,de,fr,es,it,pt,ru %}
<option value="{{ code }}" {% if code == LANGUAGE_CODE %}selected{% endif %}>{{ code|upper }}</option>
{% endif %}
{% endfor %}
</select>
</form>
@@ -16,8 +44,8 @@
<a tabindex="0" aria-label="Open Search" role="search" class="search-toggler user-button menu-circle">
<i class="fa fa-search"></i>
</a>
<a href="{% url 'customer:summary' %}" aria-label="{% trans 'Customer summary' %}" class="user-button menu-circle"><i class="fa fa-user-solid"></i></a>
{% include 'oxyan/headers/partials/mini_basket.html' %}
<a href="{% url customer:summary %}" aria-label="{% trans Customer summary %}" class="user-button menu-circle"><i class="fa fa-user-solid"></i></a>
{% include oxyan/headers/partials/mini_basket.html %}
</div>
<div class="alert-messages-header" aria-live="polite">

View File

@@ -2,12 +2,14 @@ from django.conf.urls.i18n import i18n_patterns
from django.urls import include, path
from ocyan.main.urls import urlpatterns as ocyan_urlpatterns
from mandelstudio.views import language_test
urlpatterns = [
path("i18n/", include("django.conf.urls.i18n")),
]
urlpatterns += i18n_patterns(
path("language-test/", language_test, name="language_test"),
*ocyan_urlpatterns,
prefix_default_language=False,
)

14
mandelstudio/views.py Normal file
View File

@@ -0,0 +1,14 @@
from django.conf import settings
from django.shortcuts import render
from django.utils.translation import get_language
def language_test(request):
return render(
request,
"mandelstudio/language_test.html",
{
"current_language": get_language(),
"languages": settings.LANGUAGES,
},
)